Unable to change the new CLI src= {{appClient}}} in Index.html file using vue.js file FDK Version 2.3 and node 18

Bharath_Raghuraja · February 28, 2024, 6:25am

We previously integrated Freshdesk with Dialpad telephony using Node.js version 14 and platform version 2.0 using vue.js, and successfully went live. However, the previous version has been deprecated, so we need to upgrade to the latest version 2.3 and Node.js 18.

After upgrading, we attempted to use invokeTemplate in the frontend app.js, but we encountered an issue when trying to save the index.html file with the latest CLI using src= {{{appclient}}}. Each time we changed the CLI and ran fdk run, the index.html file would automatically revert to its previous state, replacing our changes.

We require your assistance on how we can save the index.html file with new fresdhesk CLI .

Our aim is to make use of invokeTemplate from client side, but it doesn’t happen, however it works fine at server side by using $request.invokeTemplate

Note: We observed that this functionality is working fine with normal apps, but not with vue app.

Bharath_Raghuraja · February 29, 2024, 6:38am

Hi Team,

Is there any update on this ?

Gopi · February 29, 2024, 9:30am

@Freddy can you share solution for this?

Freddy · February 29, 2024, 9:31am

To resolve the issue of the index.html file reverting to its previous state, try the following approach:

In your Vue.js application, create a new HTML file, for example appIndex.html, and copy the content from index.html into this new file.
In the new appIndex.html file, correctly update the CLI src using src={{{appclient}}}.
In the appConfig.json file, you need to update the configurableTabs attribute to use the new HTML file. Here’s an example configuration:
```
"configurableTabs": [{
    "configurationUrl": "/appIndex.html",
    "icon": "index.html",
    "location": "clientArea",
    "name": "main"
}]
```
Replace /index.html with the path to your new appIndex.html file.
Restart the FDK using fdk run to apply the changes.

With this approach, the new HTML file should maintain your changes, and the updated CLI src should work as expected. Make sure to follow the syntax for using {{{appclient}}} correctly in the new appIndex.html file.

Please let me know if this solution works for you, or if you need further assistance.

Bharath_Raghuraja · March 1, 2024, 8:27am

Hi Team,

We have fixed the appclient issue. Now we able to use the InvokeTemplate in Vue app file.

Unfortunately, When we tried to call the API it throws a error like “error while substituting templates.”

1.This is our InvokeTemplate

var domainName = client.context.productContext.url;
console.log(“DOMAIN NAME”, domainName)

    var getContactListPayload = await client.request.invokeTemplate("getContactList", {
      context: {
        domain: domainName,
      }
    });

This is our requests.json Schema:

“getContactList”:{
“schema”:{
“protocol”: “https”,
“method”: “GET”,
“host”:“<%= context.domain %>”,
“path”: “/api/v2/contacts”,
“headers”: {
“Authorization”: “Basic <%= encode(iparam.freshdesk_apiKey) %>”,
“Content-Type”: “application/json”
}
}
}

Could you please help to resolve this issue

zach_jones_noel · March 1, 2024, 11:05am

Hey @Bharath_Raghuraja,
Can you please help me understand where the below API is being invoke? I see the request template is using both context and iparams for domain and API key.

Bharath_Raghuraja · March 1, 2024, 11:53am

Hi @zach_jones_noel,

Thank you for your response.

We are currently using freshdesk_vue_app. Previously, we were using fdk 8 and the client.request.get() method on both the client and server sides.

Recently, we upgraded to FDK 9 and started using $request.invokeTemplate on the server side, which is working well. However, on the client side, when we use client.request.invokeTemplate(), it throws a “substituting template error”.

Here is the code snippet we are using on the client side:

var getContactListPayload = await client.request.invokeTemplate(“getContactList”, {
context: {
domain: domainName,
}
});

We are using both context and iparams for the domain and API key in the server.js file, and this is working fine. However, it is not working on the client side (app.js).

zach_jones_noel · March 1, 2024, 12:42pm

Can you change the template with domain also from iparams? That way it would be consistent for both front-end and serverless.

Bharath_Raghuraja · March 4, 2024, 5:27am

Hi @zach_jones_noel,
We changed the template with domain from Iparams but still the same error appears.

Also We’re unable to configure the domain in Iparams. Our client uses multiple domains for a single app, so the domain name needs to be dynamic based on the client.

Bharath_Raghuraja · March 4, 2024, 10:16am

Hi @zach_jones_noel
+++looping @Adith Suresh & @Glen Eccles

Even after hardcoding the domain and API key in the request.js scheme, we’re still encountering the same error message “error while substituting Template.”
Could you please assist in resolving this issue promptly? Our application is already live, and this delay is impacting our production users.

Note:
We are using the freshdesk vue app. This issue only occurred in vue App.

Bharath_Raghuraja · March 6, 2024, 12:39pm

Hi @zach_jones_noel,

We are eagerly awaiting your response. Our project has gone live, and we are encountering an issue. Could you please prioritize this and assist us in resolving it?

Gopi · March 6, 2024, 12:55pm

Hi @Bharath_Raghuraja ,

Can you please share your code snippet from where you are getting the domain name and where you are using the request, I will try to help you on this.

Bharath_Raghuraja · March 6, 2024, 1:18pm

Hi @Gopi,
Thanks for your response.

1.We getting the domain name from the Freshdesk Client as given below

 getContactList: async function (client) {

    console.log("EVENT PAYLOAD", client); 

    var domainName = client.context.productContext.url;
    console.log("DOMAIN NAME", domainName)
   
    var getContactListPayload = await client.request.invokeTemplate("getContactList", {
      context: {
        domain: domainName,
        apiKey: "DjVMMJR3ofCCKngcepSa"
      }
    });
  
    console.log("THIS IS GET CONTACT LIST", getContactListPayload);

We are using the API request in Frontend(app.js)

This is our Schema
“getContactList”:{
“schema”:{
“protocol”: “https”,
“method”: “GET”,
“host”:“<%= context.domain %>”,
“path”: “/api/v2/contacts”,
“headers”: {
“Authorization”: “Basic <%= encode(iparam.freshdesk_apiKey) %>”,
“Content-Type”: “application/json”
}
}
},

Gopi · March 6, 2024, 1:25pm

@Bharath_Raghuraja Have you registered this request in the manifest file? Also, please check your local store folder for the ‘freshdesk_apiKey’ key name.

Bharath_Raghuraja · March 7, 2024, 5:29am

@Gopi,
Yes, We have registered the request in the manifest file. we pass the valid “freshdesk_apiKey” to the request. and this API working in server.js but not working in frontend file. app.js.

Gopi · March 7, 2024, 5:33am

@Bharath_Raghuraja To ensure the proper functioning of our system, it is essential to register the function used in the frontend file within the server.js file. Kindly follow the instructions below:

Add the function registration in the “functions” section as follows:
“functions”: {
“getContactList”: {
“timeout”: 20
},
},
Include the corresponding request in the “requests” section:
“requests”: {
“getContactList”: {},
}
This step is crucial for seamless communication between the frontend and server. Please make sure to complete this registration process promptly. If you encounter any issues or have further questions, feel free to reach out.

Bharath_Raghuraja · March 7, 2024, 5:43am

@Gopi

Currently we are using Vue.js App, We have followed the step you suggested but we are getting the same error.

But the API’s are working perfectly in the normal freshdresk app, but not with the vue app.

Gopi · March 7, 2024, 6:07am

@Freddy your suggestions please

Freddy · March 7, 2024, 6:08am

Freddy said @Bharath_Raghuraja,

It seems like you are encountering issues specifically while working with the Vue.js app. To better understand the problem and find a solution, please provide more details about the error message you are encountering, and any console logs or error logs related to the issue.

Additionally, make sure that you have installed all the required dependencies for your Vue.js app and that your app’s setup is properly configured according to Freshworks’ guidelines.

If you could share a minimal code example or repository showcasing the problem, it would be helpful for us to assist you further.

Bharath_Raghuraja · March 7, 2024, 1:04pm

@Freddy

Find below the console log for the error
{
“status”: 400,
“headers”: {},
“response”: “error while substituting templates.”,
“errors”: {},
“errorSource”: “APP”,
“attempts”: 1
}