Add Custom Field to Help Center Articles

Hello Jason,

Have you played with Labels?  I'm picking that you may be able to add a label for the version number, and then have some code insert the image if the specific label is present...

Would need someone who understands a little code to make this real... where's @wes when you need him!? :-)

@Andrew and @Jason - I heard someone mention my name so figured I would drop by.  

You can show labels on the articles with the below code.  You can add this to your HTML tab.

{{#each article.labels}}{{identifier}}{{/each}}

You would need to add some CSS to make it look nice and neat.  If you don't use labels for any other purposes then yes the above code would work and you can add version numbers as labels.

I do agree and I've asked for custom fields in the Help Center also so hopefully we will see custom fields down the road.

Hey Wes, thanks for that!

Is there any way to look for a label to be present and maybe trigger a specific background image with CSS?

Or maybe some content CSS? or... you know,  something magic like you always do.

@Andrew - Yes that would be doable via JQuery.  Could look for a certain label on the page and add a background image or html.

Thank you @Wes for that information but can you please tell me what you mean by the "HTML tab"? I'm a bit of a newbie. Is that something I access via the theme editor?

Thanks!

@Jason - Yes you access this via the theme editor, from the top nav bar select

"General - "Customize Design"

Select "Edit Theme" and it will default to your "Home Page".  Change "Home Page" to "Article Page" and insert the code that I gave you above.  If you have labels for your articles you should now see them when you view that article.  There are quite a few steps here in order for this to occur so I will try and take it one step at a time.

Well, it looks like I am unable to add labels to my articles due to not having the Pro subscription. But thanks anyway for your help.

@Wes - I upgraded to Pro and now I can see the labels! This is great except now the labels don't have spaces in between. Might you be able to give me a hint on how to add a space? Do I use the CSS word spacing property?

This is what I see after entering 2 labels "files" and "saving":

@Jason lets add a little style to them.  Add the following:

HTML (Article Page)

<ul class="tags">
Tags: {{#each article.labels}}
<li class="tag">{{identifier}}<li>
{{/each}}
</ul>

CSS

.tags {
list-style: none !important;
margin: 0;
overflow: hidden;
padding: 0;
display: inline-flex;
}

.tag {
background: #808080;
border-radius: 3px 0 0 3px;
color: #fff;
display: inline-block;
height: 26px;
line-height: 26px;
padding: 0 20px 0 23px;
position: relative;
margin: 0 10px 10px 0;
text-decoration: none;
-webkit-transition: color 0.2s;
margin-left: 5px;
}

.tag::before {
background: #fff;
border-radius: 10px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
content: '';
height: 6px;
left: 5px;
position: absolute;
width: 6px;
top: 10px;
}

.tag::after {
background: #fff;
border-bottom: 13px solid transparent;
border-left: 10px solid #808080;
border-top: 13px solid transparent;
content: '';
position: absolute;
right: 0;
top: 0;
}

When finished they should look like this:

@Wes - thank you! It worked exactly as you've shown. I really appreciate your help.

@Jason - Glad to hear, if you need anything else just let me know.

@wes - always the hero!  Well done!

@Wes - Thanks for that bit of script. I'm a brand new user of Zendesk Help Centre, trying to transfer/rebuild our archaic material to it. Everytime I wonder if something can be done, I search the forum and happen to find the answer provided by you!

How would we further extend the above to show only specific labels?

ie. We plan to label articles by the type of content (video, pdf, faq), other labels will exist relating to the content of the article.

So essentially I'd only like to display this 'type' label, not the 'content' labels

I would then further use this to change the article lists on the Category & Section pages to show a type icon, similar to the Promoted article icon, which will be straight forward once I get the label looping.

I'm sure Wes takes coffee donations :)

@AndrewJ - ModeratorWes always needs coffee since he's always up late working on something :-)  

@Andrew R - great question and yes there are several ways to do this.  I already have some code on my github account that will work but I may be able to make it easier by using the API.

Here is one way to do it: https://gist.github.com/moderatorwes/9f20dabd77e4257887a9

** I'm using FontAwesome icons you will will need to add the Font Awesome CDN to your document head.  In the title of your article put something like this:  Video:Title of Article

You can give this a try and we can enhance it but I'll think about what you can do using the API.

@Wes - Wow, that's perfect, the string replace is much simpler than trying to filter the labels, I didn't even think of that!

@Andrew Ritchie- Awesome, glad to hear that solution will work for you.  I have tons of other code on my GitHub and Gist account that you may find useful so feel free to look around.  If you are ever interested in a custom Help Center theme you can contact me here.

BTW: welcome to the Zendesk Help Center and Zendesk Community.  I'm glad to hear that some of my solutions are working for you and if you need any further help just let me know.  

Welcome, Andrew Ritchie!

Adding a question from a different post:

USE CASE:  Occasionally , an article has to be unpublished or archived.  Months later, an Agent will ask why this occurred.  It would be good to have a NOTES or COMMENTS text field added to all articles to track why an action was taken.  This field is INTERNAL only. Is this possible?

Is there maybe another way to track in ZD Guide besides creating a tracking ss?

Hey Mary!

It's not possible to add any custom fields or anything to articles. But you could add a note to the top of the article before it's archived indicating the reason it was archived.

Hello Jessie!

Are there any plans for that? My use case is to be able to have a hero image for every article. I don't want that image to be part of the content itself. Rather, it would be a separate field which I can use to display in articles overview (like a thumbnail) or in the article detail page itself (like a hero image).

Hi John - 

I don't believe there are current plans for a separate field to be available on articles the way you're speaking about; it's not something I've seen requested before. 

If you'd like to share a more detailed request with our product managers, I encourage you to post it in the Feedback on Guide topic in the community, which they receive notifications from. If you haven't posted in our product feedback forums before, here's a handy guide on how to write an effective feedback post. 

@John Darryl Pelingo, 

This wouldn't be a small amount of dev work - but you can technically create a Sunshine Custom Object and create a relationship to an Article.  You can control the schema of the custom object directly and make the object type end user accessible using role based access controls so that if a customer needed to see something connected to the object, they could.  This could allow you to hold extra parameters like links to a hero image inside of the custom object that you could tap into with the sunshine API endpoints using the end users credentials (since they would have access if you make the object type accessible to them).  

The challenges really come to making this easy to use for your agents.  You can't easily integrate object updates into the Guide UI like you could for Support - but you could create some sort of Navbar app inside of support to manage article metadata objects inside of support, then in your theme read from those objects.  

Some areas you can read into:

• Sunshine Custom Object Types
• Sunshine Relationship Types - you'd be looking at the zen:article object to connect your custom object to
• Custom Objects Permissions