Selectively hiding Help Center components using Curlybars

Return to top
Have more questions? Submit a request

61 Comments

  • Jason Fouchier

    Hey All,

         I basically followed the same path that Amy Gracer had posted with mixed results. It removes the subject/title, but I am having issues hiding the rest of the data in the row. Does this need to be a JavaScript function, or can it be done in the HTML with the handlebars stuff?

     

    Thanks,

         Jason Fouchier

    0
  • Amy Gracer
    Community Moderator

    Hi Jason,

    What exactly are you trying to do? 

    My code from the requests_page is as follows. Hides any request with a type=task. 

      --Amy

     

    <thead>
    <tr>
    <th>{{t 'subject'}}</th>
    <th>{{t 'id'}}</th>
    <th>
    {{#is current_filter.identifier 'my'}} {{#link 'requests' sort_by='created_at'}}{{t 'created'}}{{/link}} {{else}} {{t 'requester'}}
    {{/is}}
    </th>
    <th>{{#link 'requests' sort_by='updated_at'}}{{t 'last_activity'}}{{/link}}</th>
    <th>
    {{t 'status'}}
    </th>
    {{!--<th>
    Type
    </th>--}}
    </tr>
    </thead>

    <tbody>
    {{#each requests}}
    {{#isnt type "task"}}

    <tr {{#is status 'closed'}} class="request-closed" {{/is}}>
    <td class="request-info requests-table-info">
    <a href="{{url}}" class="striped-list-title" title="{{subject}}">
    {{#if subject}} {{subject}} {{else}} {{excerpt description characters=50}} {{/if}}
    </a>

    <!-- Visible on mobile -->
    <div class="requests-table-meta meta-group">
    <span class="meta-data">#{{id}}</span>
    <span class="meta-data">{{date created_at timeago=true}}</span>
    <span class="status-label status-label-{{status}}" title="{{status_description}}">
    {{status_name}}
    </span>
    </div>
    </td>
    <td>#{{id}}</td>
    <td>
    {{#is ../current_filter.identifier 'my'}} {{date created_at timeago=true}} {{else}} {{requester.name}} {{/is}}
    </td>
    <td>{{date updated_at timeago=true}}</td>
    <td class="requests-table-status">
    <span class="status-label status-label-{{status}}" title="{{status_description}}">
    {{status_name}}
    </span>
    </td>



    </tr>{{/isnt}}
    {{/each}}

    </tbody>
    </table>
    0
  • Jason Fouchier

    Hi Amy,

         Thanks for the fast response and code example. It turns out that I had a misplaced </div> tucked away in the code, snug as a bug in a rug. The example you provided helped me find the little culprit, everything is working as intended now. Thanks a million.

     

    Thanks,

         Jason Fouchier

    0
  • Amy Gracer
    Community Moderator

    dastardly <div>s!

     

    Glad you're all set!

    0
  • Niraj Makwana

    Can we hide the category so it is doesn't show to signed- in users, but does show to Agents and Managers? 

    it be would be a hidden section for just agents and managers to view and access?

    0
  • Trapta
    Community Moderator

    Hi @Niraj Makwana,

    You can always set the visibility of articles in any section to agents and managers. Once the visibility of all the articles in a section is set to agents and managers, the section will automatically become hidden for end-users and anonymous users.

    The same goes for the category, if the articles of each section in a category are marked to be visible for agents and managers only, the category will automatically become hidden for end-users and anonymous users.

    Let me know if this solves your issue.

    Team Diziana

    0
  • Ashley Russell

    I have been following this article and have tried a few of the solutions but I fear they may not apply to me since I'm using a different theme. I know there isn't much support I can get for this, but I thought I'd try anyways. 

    I'm using the delta theme - it has all of our categories, sections, and articles in a side nav bar but the categories and sections aren't clickable. Like the image below. I want to hide the entire FAQ section. We have all of these answers in one article but I want the answer bot to pull up each one individually so I'm making an article for each question. 

    I want everyone to be able to search for terms in our FAQ using the answer bot but I don't want every article to show in the side nav. Is there a way to hide the category and section even if that category/section isn't a clickable url on the site? It still exists but I can't seem to get those articles to hide. This is the category: https://guide.lightform.com/hc/en-us/categories/360002625813 

     

    0
  • Chris Stock
    Community Moderator

    Ashley Russell that should be possible to do using helpers. I assume you've got some handlebars markup for your sidebar that looks something like: {{#each categories}}? Within that each you'll have the HTML for your list, so you should just be able to wrap that in an {{#isnt category.id 12345678}}. Difficult to know exactly without seeing your template, but something like this should work.

     

    0
  • Ashley Russell

    Hi Chris,

     

    I do have the {{each categories}} on our home_page.hbs theme and wrapped in the isnt markup. Doesn't seem to have worked. Could it be because the category page isn't actually a clickable page? I've attached the home page code with my edit. Any advice is extremely appreciated! 

    <div style="text-align:left;">
    <section class="title-block">
    <p> </p>
    <h1>Lightform Guide</h1>
    <h2>Welcome to the Lightform Guide. Learn all about Lightform devices and how to create epic content with Lightform Creator.</h2>
    <img src="{{asset 'final_fam-crop-close-1.png'}}" alt="LF1 and Lightform Creator" />


    <!-- <div class="embed"><iframe src="//www.youtube-nocookie.com/embed/uFTlzqI7ldw" width="560" height="315" frameborder="0" allowfullscreen=""></iframe></div> -->

    <div style="text-align:left;">
    <p>&nbsp;</p>
    <a class="btn btn--primary btn-homepage" href="https://guide.lightform.com/hc/en-us/articles/360012911733">Get Started</a>
    <a class="btn btn--primary btn-homepage" href="https://guide.lightform.com/hc/en-us/articles/360012546274">Download Lightform Creator</a>
    </div>
    </div>
    <p>&nbsp;</p>
    </section>

     

     

     

     

     

    <section class="submit-ticket">
    <h3 class="h3">Didn’t find what you were looking for?</h3>
    <p class="h5">Contact support@lightform.com</p>
    {{link 'new_request' class='btn btn--default'}}
    </section>

    <!-- <p>Lightform Guide is an early set of tutorials, software downloads and resources to get you started with Lightform's Private Beta. These articles are intended to be thorough and self explanatory, however, since we are constantly adding new features it is almost a guarantee that information will be missing, wrong, or outdated.</p>
    <p>We appreciate your participation in this program and efforts to help improve Lightform before our public launch.</p>

    <div class="callout callout--danger">
    <h4 class="callout__title">Evaluation Purposes Only</h4>
    <p>Please note that your participation in the Early Access Program is under NDA which limits your use of the LF1 and Lightform Creator software to <strong>confidential evaluation purposes only</strong>. Commercial use is strictly prohibited.</p>
    </div>-->

    <!--
    <section class="section activity">
    {{recent_activity scope='community'}}
    </section>
    -->


    <!-- <h3>Featured Articles</h3> -->
    {{#is settings.toggle_category_list 'yes'}}
    {{#if categories}}
    <section class="home-categories">
    <ul class="list-unstyled">
    {{#each categories}}
    {{#isnt id 360002625813}}
    <li class="home-categories__item">
    <a href="{{url}}" class="home-categories__link">
    <div class="home-categories__icon home-categories__icon--{{id}}">
    <svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 62 62"><g transform="translate(1 1)" fill="none" fill-rule="evenodd"><circle stroke="#FFB74D" fill="#FFD550" cx="30" cy="30" r="30"/><g stroke="#8D6E63" stroke-linejoin="round"><g transform="translate(29.5 30.5)"><path stroke-linecap="round" d="M12.78 8.28L9.03 4.53 5.28 8.28"/><circle cx="9.03" cy="9.03" r="9"/><path d="M9.03 13.53v-9" stroke-linecap="round"/></g><g stroke-linecap="round"><path d="M40.03 20.03v-3h-19.5v-3h-7.5v23.25a2.25 2.25 0 1 0 4.5 0V20.03h25.5v6.75M15.28 39.53h10.5"/></g></g></g></svg>
    </div>
    <div class="home-categories__content">
    <h2 class="h3 home-categories__title">{{name}}</h2>
    <p>{{excerpt description characters=55}}</p>
    </div>
    </a>
    </li>
    {{/isnt}}
    {{/each}}
    </ul>
    </section>
    {{/if}}

    {{/is}}


    {{#is settings.toggle_home_tabs 'yes'}}
    <div class="tabs home-tabs">
    <div class="tabs-menu">
    <span class="tabs-link is-active"><span class="fa fa-star-o"></span> {{t 'promoted_articles'}}</span>
    <!--<span class="tabs-link"><span class="fa fa-clock-o"></span> {{t 'community'}}</span>-->
    </div>
    <div class="tab">
    <div class="tab-articles">
    <ul class="tab-articles__list list-unstyled">
    {{#each promoted_articles}}
    <li class="tab-articles__item">
    <a class="tab-articles__title" href="{{url}}">{{title}}</a>
    <p class="tab-articles__discr">{{excerpt body characters=100}}</p>
    </li>
    {{/each}}
    </ul>
    </div>
    </div>
    <div class="tab is-hidden">
    {{#if help_center.community_enabled}}
    <div class="recent-activity">
    {{recent_activity scope='community'}}
    </div>
    {{/if}}
    </div>
    </div>

    {{/is}}
    <section class="section hero">
    <div class="hero-inner">
    {{search submit=false instant=true class='search search-full'}}
    </div>
    </section>

    <div class="container">
    <section class="section knowledge-base">
    <section class="categories blocks">
    <ul class="blocks-list">
    {{#each categories}}
    {{#if ../has_multiple_categories}}
    {{#isnt id 360002625813}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <h4 class="blocks-item-title">{{name}}</h4>
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{/isnt}}
    {{else}}
    {{#each sections}}
    <li class="blocks-item {{#if internal}}blocks-item-internal{{/if}}">
    <a href='{{url}}' class="blocks-item-link">
    <h4 class="blocks-item-title">
    {{name}}
    {{#if internal}}
    <span class="icon-lock" title="{{t 'internal'}}"></span>
    {{/if}}
    </h4>
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{/each}}
    {{/if}}
    {{/each}}
    </ul>
    {{pagination}}
    </section>

    {{#if promoted_articles}}
    <section class="articles">
    <h3>{{t 'promoted_articles'}}</h3>
    <ul class="article-list promoted-articles">
    {{#each promoted_articles}}
    <li class="promoted-articles-item">
    <a href="{{url}}">
    {{title}}
    </a>
    </li>
    {{/each}}
    </ul>
    </section>
    {{/if}}
    </section>

    {{#if help_center.community_enabled}}
    <section class="section community">
    <h2>{{t 'community'}}</h2>
    {{#link 'community' class='community-link'}}
    {{t 'join_conversation'}}
    {{/link}}

    <div class="community-image"></div>
    </section>
    {{/if}}

    <section class="section activity">
    {{recent_activity}}
    </section>
    </div>

    0
  • Amie B

    Hey Ashlee, 

    You can easily hide code which will then render that part hidden/ not visible to the end-user on the help center. I'm having a little trouble from your screenshot in your post, compared to your HC homepage, trying to figure out exactly what you want to hide so I can show you how to do it. 

    Are you able to load up a screenshot of your full hc homepage, or screenshot of full screen of the HC and then show me on there what exactly you want to hide? 

    I think I also found you on linkedin and send an invite to connect. Feel free to accept and I'll be happy to chat with you on there if you like for help. :)

    Best,

    Amie

    0
  • Marc Binns

    Hello everyone,

    There's a lot of useful information here and in related articles, but sadly nothing quite covered what I'm struggling to achieve.

    I would like to create an if statement based on a users' segment, so I can show/hide content if they are a member of a particular segment. Unfortunately, it is not enough to just use their role.
    Having studied the documentation on "Curlybars" it doesn't seem that the user segment information is exposed, so how can I achieve this?

    Thank you for your time and efforts!
    -Marc

    0
  • Akhter, Shahroze

    Hi Jake Bantz is there a way to hide #article-sidenav from category pages that do not contain multiple articles?

    0
  • Jake Bantz
    Zendesk team member

    Hi Akhter, Shahroze,

    I don't see any elements in my Copenhagen theme with the id of article-sidenav, but I did notice on the article template, that there is an article-sidebar class. If this is not what you're seeking, you can perhaps find a similar parameter to target (like I do below) on the template you're viewing.

    On that article template I was able to use an #isnt conditional statement to check the article count of the current section and conditionally hide the article-sidebar if there is only 1 article. Just after the <aside> tag with the class of article-sidebar, I added:

    {{#isnt section.article_count 1}}

    Then just before the close of the aside tag (</aside>), I added {{/isnt}} to manage the appropriate sidebar content based on the condition. I hope this helps!

    1
  • Akhter, Shahroze

    Hi Jake Bantz this works thanks a lot!!

    Can i get your advice on another thing - i was looking for an easier way to accomplish this. We have a form with a drop down and when a user selects a value from the drop down i want to show some text beneath it in a paragraph tag. Is there a way in Zendesk to achieve this can i create a hidden field on the form and hide/show it and change its text based on the drop down's selected value?

    The only way i was able to do it was to pick the drop down's ID and create a new node beneath it with javascript. 

    0
  • Jake Bantz
    Zendesk team member

    Hi Akhter, Shahroze,

    You're executing one of the ways I've seen this done - to use some DOM manipulation/injection based on the selected value.

    Alternatively, you could indeed use some "dummy" ticket fields and add some text to their end-user descriptions which fits the messages you want to include (then anyone in your Support account could modify the text rather than needing to know how to code/update the template). It would be pretty simple to use CSS to hide these fields by default and then use some Javascript to reveal/hide the desired items (for example, only reveal the repurposed title/description and not reveal the actual ticket field input). This does come with some possible concerns:

    1. The agents in Support would see these "dummy" ticket fields in the sidebar of the ticket interface. Without a custom app to hide these fields, this could clutter things and be confusing for some agents.
    2. To have separate messages, you would either have to use Javascript to inject other text into the ticket field description (needs coding knowledge), or for every option that needs extra instruction, a new ticket field would have to be used.

    This workflow is unsupported, but should work by principal. Whether or not this is worth the work is up to you as it certainly is beyond the normal expected functionality of the end-user ticket form.

    0
  • Sarah Wambold

    Hello,

    Great information in this post! I am hoping someone can build on what is shared here to help solve our issue.

    Our guide uses the Lotus theme.

    We need to hide the selection “Feature Requests | Inventory” from the topics drop down on this page the New Community Posts page: https://support.shippingeasy.com/hc/en-us/community/posts/new

    On the new_community_post_page.hbs, at line 54, we are attempting to wrap the {{select 'topic'}} in code that essentially says “{{#isnt topic.id 200250979}}”. We found that topic id code by reading the code of the page.
    However, using the topic.id code did not work.

    Our question is: what do we need to write instead so that the specific option “Feature Requests | Inventory” is no longer an option from the drop down menu?

    The goal is to keep the "Feature Request | Inventory" page viewable, but no longer able to make posts about this topic. We have already closed comments on all existing posts and hidden the 'create a new post' link on the page. Removing this from the topic list is the last step.

    Thank you in advance for any help or direction!

     

    0
  • Nicole Saunders
    Zendesk Community Team

    Hey Sarah - We shared your question in this week's Zendesk Community Digest, so hopefully that will give it some additional visibility and some other users will chime in soon!

     
    0
  • Lila Kingsley

    Great article, thank you!  Wondering if it is possible to hide articles by label instead of id?  

    I got the code to working hiding articles by ID but get an error when I try to replace the isnt id statement with syntax I thought was correct for labels (looking at examples in the community/help center).  

    i.e. Using 

    ((#isnt article.labels 'labelnamehere'}}

    Gives Error

    not possible to access `article` in `article.labels`

    I think this is happening b/c labels is an array...the comments in this article seem to indicate that JavaScript needs to be used to pull specific values from an array. 

    Anyone have tips on doing this?  

    1
  • Jason Schaeffer
    Zendesk Customer Advocate

    Hi Lila!

    This should be possible using the same approach in this doc:

    https://support.zendesk.com/hc/en-us/articles/115011134947-Selectively-hiding-Help-Center-components-using-Curlybars

    While custom code is not directly supported, you could use the Article object (instead of Category) and write some logic on the labels property (instead of the ID).

    Jason Schaeffer | Customer Advocate | Support@zendesk.com

    0
  • Kim Nylander

    This is my first time editing a Zen Desk theme to try to create conditional text. 

    I am trying to use the procedure described on this page to hide one section on a category page on our Zen Desk sandbox site. I am using the latest Copenhagen theme (2.9). I have a Product updates category page that has 3 sections listed. I want to hide one of those sections. 

    After doing some digging to figure out which theme file to edit (since this article does not mention any specific files nor where to find them), I used the example in the hiding a section example in the comments above. 

    I tried to hide just one section on the category template (category_page.hbs) in the Copenhagen theme. The editor gave an error message when I added the closing {{/isnt}}.

    If I remove the closing isnt, then the Category page displaying the section I wanted to hide only is visible for the Admin role. Everything else says "You don't have permission to view this page." 

    If I leave the closing isnt, then the markup appears to be ignored and every role can view all content, including the section that should be hidden.

    What else should I try? Is the markup examples still valid for the latest release of Copenhagen 2.9.0?

    0
  • Lila Kingsley

    Kim Nylander:  my category code looks different than yours, and in our HC we're only hiding articles in the category template, but...I think your closing {{/isnt}} may be too far down.  Have you tried closing it earlier on, i.e. AFTER the </h2> on row 29, before the {{if articles}}?  

    0
  • Kim Nylander

    Lila Kingsley Thank you for the suggestion, but I ended up with the same error message (/isnt is not permitted in this context). Until I figured out that I was missing a # in front of isnt. That helped. 

    I used your suggestions to move the /isn't to line 30 and was able to hide the section title but the article list still shows. Hm... I moved the closing /isnt to line 56 and that seems to have hidden the section and the article list! 

    Hm... Now the section page itself says "oops you don't have access" because the one article in that section had permissions set to required login.

    The instructions I followed were from this comment: https://support.zendesk.com/hc/en-us/articles/115011134947/comments/115001799327

    0
  • Aaron Wilson

    Hi Jake Bantz is it possible to take a specific paragraph of an article and make it visible only to admins but not visible to the public?

    0
  • Cheeny Aban
    Zendesk Customer Advocate

    Hi Aaron,

    Unfortunately, article visibility is available per article. There is no option to take a specific paragraph of an article and make it visible only to admins but not visible to the public.

     

    0
  • Trapta
    Community Moderator

    Hi @Aaron Wilson,

    I don't think the option to do so is available in Zendesk right now, but maybe you can put the ID or the Class to the particular paragraph of your article content. Then, you can check the user role and article id of the current article and user by using Javascript. If it matches the condition you can show the paragraph.

    Thanks

    0
  • Dganit

    Hi community,
    Here's my scenario that I hope you can help me with. I have 1 category that includes 4 sections with articles in each section. I'd like to hide this 1 category/4 sections/all articles in the sections from the Help Center and enable people to reach the articles only by a direct link.
    I used Jake Bantz's very helpful guidance and was able to hide the category and (so far) 1 section from the Help Center. I'm still not getting the final result that I need. Here are my questions:
    1. When hiding sections, are the articles in each section automatically hidden or do I need to hide each article separately?
    2. How do I hide multiple sections? I was only able to hide one.
    3. After hiding a section, I then searched for an article in that section. The article came up in the search results and using the result, I was able to navigate back to the hidden section. In the attached screenshot, an article is retrieved from the Builder section, a section that I was able to hide. So what I am finding here, is that even if a section is hidden, searching for an article that is located in a hidden section will bring up the result with the Help Center breadcrumbs and not as a stand-alone article. This in effect negates hiding the section.
    Thanks for any guidance and tips.
    Best wishes, Dganit

    0
  • Ifra Saqlain
    Community Moderator

    Hi Dganit,

    See the below answes:

    1)Q. When hiding sections, are the articles in each section automatically hidden or do I need to hide each article separately?

    Ans. When you hide the section then all articles of that section will automatically hide.

    Screenshots for the same: Check the section ID 

    Start {{  }}

     

    End {{ }}

     

    Before hiding the section:

     

    After hiding the section

     

    2)Q. How do I hide multiple sections? I was only able to hide one.

    Ans. You can hide multiple sections.

    Screenshots for the same:

    Start {{ }}

     

    End {{ }}

     

    Your third question's answer I'll provide you soon.

    and can you send the screenshot for same as you asked in:

     I have 1 category that includes 4 sections with articles in each section. I'd like to hide this 1 category/4 sections/all articles in the sections from the Help Center and enable people to reach the articles only by a direct link.   ON WHICH TEMPLATE YOU WANT TO DO THIS.

     

    You can hide the category on homepage by checking the ID of the category.

    You can hide the multiple sections on the category page as I mentioned above screenshots.

     

    The idea is, for hiding the 1 category/4 sections/all articles, hide the category on homepage then sections with article won't show into inner pages.

     

    The second one is, hide the section's name on category page by checking the category ID like this;

     

     

     

    Output is:

    Before hiding the section title by the category ID {{  }}

     

     

    After hiding the section's title - showing only article links of both section's articles.

     

    Now hide the category name by checking the category ID:

     

    Now, all the articles links are showing on the page.

     

    Thanks

     

     

     

    0
  • Dganit

    Thank you so much Ifra Saqlain for this detailed reply! It is very much appreciated.

    0
  • Ifra Saqlain
    Community Moderator

    Let me know if you need more help :)

    0
  • Dganit

    Thanks again Ifra Saqlain. I will definitely reach out if I need more help.

    0

Please sign in to leave a comment.

Powered by Zendesk