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

19 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.

    1
  • Mark DiValerio
    Comment actions Permalink

    Can you modify the metadata settings from within the app?

     Scenario: I want to create a form, questions and radio button/dropdown answers as a sidebar app. The Q&A are pulled from the metadata, but i would like to add a feature that allows users of a particular group to be able to modify the form. Once i do that, can I save the new Q&A back into the metadata so that when another person loads the app, it loads the new form?

     

    (Or is there a better, more proper way to do this?)

     

    Thanks

    0
  • Devan - Community Manager
    Comment actions Permalink

    Hello Mark,

    It would depend on which app are you are referring to. Typically, it won’t be possible, but you could always build your own app, depending on the behavior you want/don’t want,

    Best regards.

    0
  • Mark DiValerio
    Comment actions Permalink

    Hello Devan,

     

    yes I would be talking about a custom built app.

     

    Like would it be (if the manifest parameter is "default_form")...

    client.invoke("metadata.settings.default_form.save", updated_default_form);

    or

    client.metadata("settings.default_form", updated_default_form);

    or

    metadata_var['settings']['default_form'] = updated_default_form

    client.metadata(metadata_var);

    ?

     

    Thanks,

    Mark DiValerio

     

    0
  • Joey
    Comment actions Permalink

    Hi Mark-

    Unfortunately, this isn't possible with our apps framework, you can't modify the metadata settings in this fashion. This API can be used to update settings values of an app, but note it is only available to admins.

    0
  • Derry Nixon
    Comment actions Permalink

    Why are secure parameters not returned by client.metadata() ? Also, if your app is using metadata variables how do you expose them for local development?

    0
  • Bryan - Community Manager
    Comment actions Permalink

    It does seem odd at first why all settings are not treated the same way. The reason is because secure settings, due to their nature, are never meant to be seen on the client side, so they have to be treated differently. The only point that they are retrieved and inserted into a client.request call is on the backend proxy server that Zendesk hosts.

    This enables an administrator to confidently enter, say, a remote server's API token and not have to worry about anyone on the client side having access to that value. Hope this clarifies things!

    0

Please sign in to leave a comment.

Powered by Zendesk