Customizing the Settings panel (Guide Professional and Enterprise)

Return to top
Have more questions? Submit a request

43 Comments

  • Jennifer Rowe
    Zendesk Documentation Team

    Hi Brad,

    Again, you've caught me without the doc ready! I'm working on a Export doc.

    But here's what you do:

    Click the options (gear) menu on the theme, then select Export.

    When you finished editing the manifest file, you can re-import it by clicking Import in the upper-right of the Themes page.

    1
  • Devorah

    I just spent a while trying to figure out why I couldn't add any new variables to my manifest.json file. Each time I got this cryptic import error:

    The property '#/settings/0/variables/0' of type object did not match any of the required schemas

    I finally figured out you can't put raw text into "label" and "description" fields. Instead you have to add a translation key to AT LEAST the default locale in the translations directory and point "label" and "description" to that newly created key.

    It would be great if you could add this caveat to the documentation - it wasn't clear.

    Thanks!

     

    1
  • Trapta
    Community Moderator

    It will be good idea to have examples on range, and text types.

    Please also document the rules that you run.

    We noticed, if we use "list" type with only one option, manifest won't pass validation stage (while theme is being imported after upload). It took a while to find out this which I think is decision by design (i.e a list with one option shouldn't be allowed anyway).

    Thank you

    1
  • Abdul Qabiz

    Hi Charles

    This page would be a good place to document the limits with some example. For example, we have discussed how label field is restricted to have N number of characters. Similarly, there is a limit on number of settings, why not give an example what does a setting mean, and how do you calculate the total number of settings?

    At Diziana, we are having hard time to have our own settings along with what Zendesk exposes in Copenhagen? We have worked with thousands of customers, and they want more flexibility. I am sure Zendesk is working to improve theming experience, I like Shopify a lot for their tools and theming experience.

    I am requesting following features, and will appreciate if you can at least discuss it internally and think of doing these:

    1. Please bump the limit on settings to 200-250. It's json which can be easily compressed and stored in database (if that's a concern); even parsing shouldn't cost more than a few msecs than it currently takes.
    2. Please provide a way to authors to associate icons (image/asset, or font-awesome or similar) with categories/sections
    3. Please provide a way (a setting object of type Dynamic Content), so users can pick a dynamic content placeholder from drop-down. It's basically a list of Dynamic Content placeholders. Diziana started exposing a text-field to let customer enter DC name for multilingual text; we see Zendesk also follows similar pattern in their own help-center theme. Not having to manually type, and be able to pick from a drop-down would be super useful.
    4. Please expose a template helper which mimics HelpCenter JavaScript object; or at least let us find out user tags/organizations, and other related details in template.
    5. Please update asset helper so it can take asset-name as variable (a string), and we can use it in loops (each, etc.), e.g. id + ".png"  can be passed to asset helper within loops. This will allow us to build a lot of dynamic behavior -- like iterate categories, pass <category-id + ".png"> to asset helper, and get path of image (assuming we have uploaded images with name of category-id as filename) -- that's pattern we followed for years in Diziana themes, and it worked fine until CDN changes broke all asset URIs (Cool URIs don't change)

    Theme authors  and Zendesk customers spent thousands of hours to figure out things, solve basic things, and build abstractions on top of Zendesk templating language and tools. That all can change by adding little more smartness in tools, and templating language. Once again Shopify is a good example to look at.

    Thank you

    Team Diziana

    0
  • Brad Marshall

    Where do I find the `manifest.json` file? I thought it would be in the assets, but cannot find it.

    Thank you!

    0
  • Michael Eugster

    In this help article I found the option to add a text variable to the help center. How can I use it in my html templates? https://support.zendesk.com/hc/en-us/articles/115012547687-Customizing-the-Settings-panel-Guide-Professional-and-Enterprise-#variable-object

    0
  • Devan - Community Manager
    Zendesk Community Team

    Hello David Coleman,

    Glad you were able to figure this question out on your own! Sound's like a boom moment indeed, but if you ever have any more questions on Guide customizations, let us know, and we would be happy to assist!

    Best regards. 

    0
  • Augusto Silva
    Zendesk team member

    Hi @Brad,

    Sorry to hear you're experiencing issues. We need to look into improving this error message.

    What it means is that the 1st variable of the 1st group of settings is not correctly defined.

    You don't need to create translations if you do not want to provide this functionality. If we can't find a translation, we will show what is set in the manifest. However, you should be aware that the label string length is limited to 40 characters, when not using the translation file. This might be the issue. Which type of setting are you trying to add?

    0
  • Joel Hellman

    @Charles: thanks. But what about the max length of the value property for text fields?

    Also can we add to the reference table that there is a 40 char limit, unless you use translation files, i.e. as this comment from Augusto Cravo Silva explained:

    However, you should be aware that the label string length is limited to 40 characters, when not using the translation file. 

    This limit also applies to the description field.

    0
  • Charles Nadeau
    Zendesk Documentation Team

    @Joel

    I added to 30-character limit to the identifier property in the doc.

    Thanks.

    0
  • Justin

    Is this shared in the developer documentation at all? I really struggled to locate details regarding the manifest file.

    Is Guide really the appropriate place for technical documentation? 

    0
  • Allen V.

    I would like to add a slider to the settings panel and save the value when I move the slider. The save button was not enabled when I changed the slider. I am able to save the state if I use a checkbox. Could you let me know what can be done to save the new value of a range type?

    0
  • David Coleman

    Very cool and creative Simon!

     

    Thank you both for taking the time.

     

    - David

     

    0
  • Katerina Benova

    Hi Simon,

    Thank you for your fast answer.

    Too bad it is not possible. I was hoping to avoid the hard coding in the template.

    0
  • David Coleman

    ^^^ Almost immediately after posting I noticed the thumbnail.png file from exporting. I replaced the image, imported again, and boom!

    0
  • Mark Pickard

    Is there going to support for multiline text areas in the manifest.json settings? Currently my code is:

    {

    "identifier": "top_tips_1_heading",

    "type": "text",

    "description": "Heading",

    "label": "Top Tip 1 Heading",

    "value": "How do I link my bank account to the app?"

    },

    {

    "identifier": "top_tips_1_body",

    "type": "multiline",

    "description": "Answer",

    "label": "Top Tip 1 Answer",

    "value": "Test"

    },

    I saw some articles mention "type" "multiline" so when the theme is imported the editor can enter multi line values instead of putting a sentence all in one line of a text field.

    However "multiline" does not seem to be supported I get the following error on import:

    If it doesn't match any of the required schemas how can I get it to match? We really need a multi line text area in the settings so our editors can add multi line answers to the settings of our theme. Can you tell me how to achieve this please? See the below screen as an example of us typing in a single field...

    0
  • Augusto Silva
    Zendesk team member

    Hey Mark Pickard,

    The screenshot of types you posted are for apps. Themes don't support multi-line right now. In this article, you can find which types of settings are available for themes.

    Specifically for your use case, we recommend using dynamic content instead, as this supports translating to multiple languages as well. :)

    0
  • Jennifer Rowe
    Zendesk Documentation Team

    Brad, I edited my commend to add the all-important import step, if you edit the manifest file. 

    0
  • Brad Marshall

    Okay, so there is no way to modify that single file, but rather I have to export/import to modify the manifest.json. Correct? 

    Thank you for your help!

    0
  • Antoine Puel

    Hello,

    I have a question concerning the use of the manifest.json file in parallel of SASS variables. 

    manifest.json allows users to define default and custom variables, that you can change directly from the Guide Admin user interface (as shown in this tutorial), and that's great.

    But if you use SASS files for your theme, you got a _variables.scss file with the same variables (brand_color, text_color...etc). 

    Which file override the other ? And what happens if I define some variables in my _variables.scss file, and then change them from the guide admin interface ?

    For more context, I work with this kind of boilerplate, that allow me to work with SASS/ES6...etc and compiles the all theme inside a /dist folder.

    Thank you !

     

    EDIT :

    I think the solution is to use this to get the variables from Zendesk settings. So in your _variables.scss file, it should look like this :

    $brand_color: unquote("$brand_color");
    $brand_text_color: unquote("$brand_text_color"); //Color for text with an accent color background
    $text_color: unquote("$text_color");
    $link_color: unquote("$link_color");
    $background_color: unquote("$background_color");
    0
  • Stas

    Is there a way to make a hidden type of variables? For example, it would be good to save the media queries breakpoints which are not needed to be editable in the Theming Center?

    Thanks for the great update!

    0
  • Brad Marshall

    I'm getting the same error:

    The property '#/settings/0/variables/0' of type object did not match any of the required schemas

    Do you really have to create a translations folder and then place all of the strings into it to get it to import correctly? That is a lot of extra work that shouldn't be required. There are examples above that do not follow this method and when I exported my theme to make alterations to it, it didn't have these translation folder/files to begin with. Would this mean I would need to export, make all of the translation changes, to get it to import again?

    0
  • Jennifer Rowe
    Zendesk Documentation Team

    That's right, Brad. You have to export the theme to modify the manifest file.

    0
  • Brad Marshall

    I had exported the default, Zendesk-provided theme. I then modified it and then attempted to reupload it and then experienced the error. I created the translation file and it worked without any issues. Also, as an FYI, none of the label strings had more than 40 characters.

    The first variable of the first group of settings was:

    • Label: Primary Color
    • Description: Color for generic navigational elements
    • Type: color
    0
  • Jehan

    I was having the same issue as bellow

    The property '#/settings/6/variables/1' of type object did not match any of the required schemas

    I was about to give up. I had read this article many times and after so many hit and trial, I figured it out when the "type" is "text" for the variable and you forget the "value" attribute, you will get this generic error.

    I was surprised the documentation didn't even have any contents about "Text Type" variable.

    This article needs improvement.

     

     

    0
  • Devan - Community Manager
    Zendesk Community Team

    Hello Allen,

    Could you possibly provide a little more information on what you are trying to construct? Also, any images you can include as well as the steps you took thus far would be extremely helpful in troubleshooting this for you. 

    0
  • Charles Nadeau
    Zendesk Documentation Team

    Hi Abdul,

    This is excellent feedback. You might also want to share it in the Guide product feedback forum, which the product team monitors more closely:

    https://support.zendesk.com/hc/en-us/community/topics/360000029847

    Other users can add their support to get these ideas on the product roadmap.

    Thanks.

    0
  • Augusto Silva
    Zendesk team member

    Hi @Brad, thanks for providing those details.

    I think we would need to have a look at the ZIP file to understand what the problem could be.

    If you are still experiencing issues, please send us a Support request with the ZIP file.

    Thanks

    0
  • Simon Celen

    Hi David,

    It's possible to add something like this f.e. to your footer.hbs:

    <script type="text/javascript">
    var foo = {{json_stringify settings.foo}};
    </script>

    You then have a global foo variable with the value of settings.foo.

     

    A more versatile approach for when you have a bunch of settings is to instead add:

    <script id="settings" type="application/json">{
    "foo": {{json_stringify settings.foo}},
    "fum": {{json_stringify settings.fum}}
    }</script>

    ... and in your JS:

    jQuery(document).ready(function($) {
    var json = $('script#settings').html();
    var settings;
    try {
    settings = JSON.parse(json);
    }
    catch (e) {
    settings = {};
    console.error('could not parse JSON in script#settings', e, json);
    }
    });

    which gets you an object with all the individual settings.

    Hope that helps!

     

    PS @Simon, not 1-upping you of course. It's just that I have a bot crawling all Support pages for the text "free beer" and the likes ;-)

    0
  • Augusto Silva
    Zendesk team member

    @Trapta,

    We are woking on adding better error messages on import. These will tell you the exact reason why Import failed.

     

    @Stas,

    Our vision with the Theming Center (TC) variables is to allow less experienced people to do smaller tweaks in the theme that don't require a theme developer.

    It feels you are looking for SCSS variables :) We currently don't support SCSS compilation in TC but you can still compile SCSS into CSS offline and then import it. We have an example of that in https://github.com/zendesk/copenhagen_theme

    0

Please sign in to leave a comment.

Powered by Zendesk