The community features are wonderful, especially the post actions. However, what happens when the default actions aren't exactly what you are looking for? Currently there is no way to add or modify the actions that are available, but with Curlybars the existing actions can be re-purposed. Please note that this information will only affect the customer facing actions, as the admin options in the drop-down cannot be modified.
Displaying new status icons
For the purpose of this article, let's say we want to change the actions from Planned, Not Planned, Completed, and Answered to: In the Works, Under Construction, Implemented, and Officially Answered. To make these modifications, the replacement text will need to be inserted in all of the affected pages. To learn more about how to use Curlybars to make these changes, see Enhanced Help Center theming framework .
The image below displays what the original statuses look like:
The image below displays what the new statuses will look like:
There are two steps to change all customer facing instances to the desired replacement name:
Modifying 'Show all'
- In the Help Center, Edit your theme code. For more information on how to edit a Help Center theme, see Customizing your Help Center theme.
- Select the community_topic_page.hbs as the template to edit.
- Locate the code for the filter labels inside the dropdowns:
- Modify the {{#each filters}} with the following 'identifier' information:
{{#each filters}} <a href="{{url}}" aria-selected="{{selected}}" role="menuitem"> {{#is identifier 'all'}}{{name}}{{else}} {{#is identifier 'not_planned'}}Gathering Feedback{{/is}} {{#is identifier 'planned'}}In the Works{{/is}} {{#is identifier 'answered'}}Officially Answered{{/is}} {{#is identifier 'completed'}}Implemented{{/is}} {{/is}} </a> {{/each}}
- Click Publish.
Changing status icons' names
The next change you need to make is for the actual status icons on the Community topic page. Your updated status icons will resemble the image below.
- Scroll down to the {{#is status 'none'}} expression lower on the Community topic page.
- Enter the following code to change your status icons:
{{#is status 'none'}}
{{else}}
<span class="status-label-{{status_dasherized}} status-label striped-list-status">
{{#is status 'not_planned'}}Gathering Feedback{{/is}}
{{#is status 'planned'}}In the Works{{/is}}
{{#is status 'answered'}}Officially Answered{{/is}}
{{#is status 'completed'}}Implemented{{/is}}</span>
{{/is}} - Click Publish.
- Next, select the community_post_list_page.hbs template and locate the same {{#is status 'none'}} expression.
- Enter in the above code there as well.
- You have successfully modified your list pages and drop-downs. The only thing left to do is make sure the status indicator on the individual posts reflect the correct wording as shown in the screen shot below.
- Select the community_post_page.hbs template to modify individual posts.
- Enter the following code on the {{#if post.status}} expression:
{{#is post.status 'none'}}
{{else}}
<span class="status-label-{{post.status_dasherized}} status-label">
{{#is post.status 'not_planned'}}Gathering Feedback{{/is}}
{{#is post.status 'planned'}}In the Works{{/is}}
{{#is post.status 'answered'}}Officially Answered{{/is}}
{{#is post.status 'completed'}}Implemented{{/is}}
</span>
{{/is}} - Click Publish.
Using dynamic content to translate your statuses
If your Help Center is available in multiple languages you can use dynamic content helpers to translate your new terms. For more information on dynamic content see, Dynamic content helpers and Providing multiple language support with dynamic content .
You can create the dynamic content in Zendesk Support and then use the helpers below in place of the previous term.
This will enable your status icons to translate for your many customers.
Now that all of your bases are covered, all end-user information should display your own words, and not the default options provided with the feature!
24 Comments
Thank you! I this is exactly what someone asked me for today and it was so helpful to have a walkthrough guide.
Thanks for this article!
My statuses are displayed as light gray text underneath the post.
I would like to be able to display the statuses as icons as is shown above in this article, with different colors for each status icon. Why is it not displayed this way in mine? I am using the Wirey Merchant Theme, is that why?
I also don't have the VOTES and COMMENTS in those square boxes on the right side.
Mine look something like this, the votes/comment/status are grayed-out though:
Multiple products to email
Is there any way to have those nice icons that you have above?
At this point I'll be happy to have them as nice icons, I will worry about changing the status texts later...
Thanks
Merav
Hi @Merav! The styling for the status is all done in the CSS, so I would look to see what you have in your CSS. A great way to do this would be to take a look at a basic Wiry Merchant template, and see how the content should be styled and then compare this to what you have in your own template's CSS. For example, there are several CSS properties for both .post-status that affects the style of the status. The individual colors are represented in individual classes such as: .post-planned.
To change the dropdown menu for the agent setting the status, you can add this to the JS:
Thank you! This is just what we needed. Can someone tell me if this is also the way to add more status labels? We would like to have a total of 6 status labels instead of the original 4.
Hi Brenda - I'm glad this article was helpful. At this time, however, there is no way to add more statuses than the original 4. I would definitely recommend sharing your input in our Product Feedback forums. I found this post, which is similar to your request.
Thanks for getting back to me so quickly, Laura. :) And thank you for including that link to that related Product Feedback post. I voted it up!
Thanks for the JS to change the status for agents who are changing the statuses, Elizabeth.
Laura, is there a way to do this using the the ZD Templating language?
Hi Joel,
Unfortunately the select+identifier combo is not able to be broken down to manipulate each of the selections on their own, so the only workaround is to use Javascript.
Hope this helps!
Thanks, Jake. It does help me sleep a little better.
Wonder why we have to worry about curlybars and code. A simple customizable field with free content for admins would solve the problem.
Hey Michael -
Welcome to the Zendesk Community! The Product Managers are aware of this request. However, development activities are focused on some high-priority things for Guide at the moment. They may return to developing things for the community platform in the future, but for the moment this is the best workaround we can offer.
Elizabeth:
Thanks for the JS to update the Action menu for agents. Unfortunately, I can't seem to make it work! :( I've pasted your JS in directly ... is there something specific I am missing? Does it need to be in a specific section of the JS file? Is there somewhere else I need to update the Action menu?
I don't seem to find {{#if status}} and {{#if post.status}} in the relevant pages, i assume there had been some changes and this post is not updated.
Hey Daanish -
We'll have the documentation team double check and will get back to you on this.
Hi Daanish -
You're correct, this article is in need of updating. We're going to pull it down while we work on it, and, so long as you've clicked the "follow" button at the top of the page, you'll receive a notification once it's been updated and re-published. Thanks for your patience!
Good news!
Laura updated this article so it's back. Enjoy!
Thank you!
In script.js, we added:
The code for the labels works great. I am having issues with the .js for the drop downs. I am using the Copenhagen theme. Is there a different code needed for this theme?
Hi Mike! Welcome to the Community!
Can you go into some more detail about what you're trying to do with the drop downs? We might have an article or tip that'll help you out!
Hello Jessi,
I am trying to change the drop down to match the new status icons and I cannot seem to get it to work with the Copenhagen theme.
Hey Mike!
Which dropdown are you trying to change? Is it a custom drop-down?
Not sure if others experienced an issue, but my Community posts were not displaying with an error message like this:
Tier 3 support got back and said:
"It sounds like they made a change which led to the 500 errors you (and others) were seeing, and then they promptly reverted it. That's why things are working now. They let me know that the errors were related to using
post.actions
in a conditional. That's theoretically not allowed, sincepost.actions
is a helper and not an object, but there was no validation around this, so it was allowed to go through (and work) until now.The devs recommend that you move away from using conditionals like this, since it's something they are looking to start enforcing in the future."
I hope that if this workaround is no longer viable that there would be an acknowledgement of the need and another work around provided or a feature added to Gather that would allow for custom statuses.
Even though it was rolled back, at some point in the future the devs will enforce not using post.actions in a conditional. So, I created a product suggestion for anyone that cares to have the post.status and post.action lists aligned.
https://support.zendesk.com/hc/en-us/community/posts/360038841553-Make-Custom-Post-Status-for-Agents-match-what-has-been-set-for-end-users
Please sign in to leave a comment.