Best practices for setting the environment variables for a custom build application?

13 Comments

  • Cedric Jacob
    Comment actions Permalink

    Hi Sorin,

    I hope this message finds you well and healthy.

    I think what you need is a settings page for the user of the app.

    Did you use the new framework for the app?

     

    You can allow users to enter these details within the settings of your app You would do this by adding parameters to your manifest file:

    "parameters": [
      {
        "name": "subdomain",
        "type": "text",
        "required": true,
        "secure": false,
        "default": "yoursubdomain"
      },
      {
        "name": "token",
        "type": "text",
        "required": true,
        "secure": true
      },
      {
        "name": "useSSL",
        "type": "checkbox"
      }
    ]

    You can retrieve the setting values in your app with client.metadata():

    var client = ZAFClient.init();
    client.metadata().then(function(metadata) {
      console.log(metadata.settings);
    });

    You can find more here: https://developer.zendesk.com/apps/docs/apps-v2/setup#defining-installation-settings 

    Hope this helps.

    Cedric

     

    0
  • Sorin Vatasoiu
    Comment actions Permalink

    Cedric,

    Thank you for the response.

    I see how your solution will move the variables from the javascript code (where I have them now) to the manifest file.

    Does this means that for various environments, I will need to have more manifest files, of that I will need to change the values in the manifest before each "zap package" operation?

    0
  • Cedric Jacob
    Comment actions Permalink

    Hi Sorin,

    No worries at all.

    One would actually only name the parameters in the manifest file. The manifest file does not hold the values. It is more of a placeholder. 

    The actual values are applied within Zendesk. So what happens if you were to add the following parameter to your manifest file?

      {
        "name": "subdomain",
        "type": "text",
        "required": true,
        "secure": false,
        "default": "yoursubdomain"
      },

    First you would need to change your app to use this parameter in your code. You would get those parameters using client.metadata():

    var client = ZAFClient.init();
    client.metadata().then(function(metadata) {
      console.log(metadata.settings);
    });

     

    Next, when installing the app in Zendesk, you would have to open the settings of your newly installed app and provide the sub-domain within the settings. That value is then used within the app.

    This way you can create an app, that would work in any environment as the end-user can enter the values for those variables that differ from company to company.

    Maybe have a look at some of your Zendesk apps within Zendesk and check out there Settings page to get a better understanding. Hope this helps.

    0
  • Sorin Vatasoiu
    Comment actions Permalink

    Thank you for those ideas. This seems to be the correct way to do the setup.

     

    0
  • Cedric Jacob
    Comment actions Permalink

    You are very welcome Sorin.

    0
  • Nicole - Community Manager
    Comment actions Permalink

    Thanks for jumping in, Cedric! Very helpful. You rock. 

    0
  • Cedric Jacob
    Comment actions Permalink

    Thanks Nicole!

    0
  • Sorin Vatasoiu
    Comment actions Permalink

    Cedric,

    I tried to follow your advice and I added a new line to the manifest file "ACSServiceBaseUrl":

    I added the line with an empty value as I was expecting to fill it an use it in the app settings and use it in the code.

    After I validated, packaged and install the app in Zendesk, I opened the the app settings, but I do not see a place where I can update a value for "ACSServiceBaseUrl".

    Did I miss anything from your explanation?

    manifest.json

    {
    "name": "ACS Customer Information",
    "author": {
    "name": "s v",
    "email": "sv@xxx.xxx",
    "url": ""
    },
    "defaultLocale": "en",
    "private": true,
    "location": {
    "support": {
    "ticket_sidebar": "assets/iframe.html"
    }
    },
    "version": "1.0",
    "frameworkVersion": "2.0",
    "type": "text",
    "required": true,
    "secure": false,
    "default": "yoursubdomain",
    "ACSServiceBaseUrl": ""
    }
    0
  • Cedric Jacob
    Comment actions Permalink

    Can you try adding all your settings under "parameters"? 

    You can see a few different type of parameters / settings here:

    "parameters": [
      {
        "name": "subdomain",
        "type": "text",
        "required": true,
        "secure": false,
        "default": "yoursubdomain"
      },
      {
        "name": "token",
        "type": "text",
        "required": true,
        "secure": true
      },
      {
        "name": "useSSL",
        "type": "checkbox"
      }
    ]
    0
  • Cedric Jacob
    Comment actions Permalink

    Hey Sorin,

    I had some time and made this one for you:

    {
    "name": "ACS Customer Information",
    "author": {
    "name": "s v",
    "email": "sv@xxx.xxx",
    "url": ""
    },
    "defaultLocale": "en",
    "private": true,
    "location": {
    "support": {
    "ticket_sidebar": "assets/iframe.html"
    }
    },
    "parameters": [
    {
    "name": "ACSServiceBaseUrl",
    "type": "text",
    "secure": false,
    "required": true,
    "default": "yoursubdomain",
    }
    ]
    "version": "1.0",
    "frameworkVersion": "2.0"
    }

    So I added parameters and moved "ACSServiceBaseUrl". This is the name of your parameter, which will be provided as text and the default filled in will be "yoursubdomain".

    Good luck with it :)

    0
  • Sorin Vatasoiu
    Comment actions Permalink

    Cedric,

    Thank you again for your help.

    I'm now able to set and use the custom environmental variables for my app.

    I post here the code that worked, it may help other people, as many examples on the web are for v1 framework and they do not seems to work for v2

    var zendeskAcsWSurl = '';

    var client = ZAFClient.init();

    // get the metadata settings
    client.metadata().then(function (metadata) {
       // assigning the web service base url from the configuration files
       zendeskAcsWSurl=metadata.settings.ACSServiceBaseUrl; 
       //console.log(metadata.settings);
    });
    0
  • Jennifer Rowe
    Comment actions Permalink

    Thanks for sharing the final code, Sorin.

    And, Cedric, thanks for all the help you gave.

    Glad it worked out!

    0
  • Mark Brawn
    Comment actions Permalink

    All makes sense, but I have found that I don't seem to be able to access `secure` settings with client.metadata(). Is this supported? If not, how do I access them? I have a client_id and a client_secret that I need to base64_encode to make an initial authentication request to an external API.

    0

Please sign in to leave a comment.

Powered by Zendesk