How to add tumbs up/down buttons in KB articles Helpful Yes/No question?

[F_bio Gon_alves]

Good afternoon SNC,

I was given a requirement to change the OOTB "Yes"/"No" buttons in the question "Helpful?" in KB articles for more appealing Tumbs Up/Tumbs Down buttons.

Does anyone have an idea how to achieve this?

Regards,

Fábio Gonçalves

[Callum Ridley1 · Accepted solution]

Hi Fábio,

Yes this can be done, and you'll be pleased to hear it's not too difficult.

I've got a little tutorial on my website on how to do it here, but for simpleness I've copied that here for you.

Changing the KB Article 'Helpfulness' Buttons to Thumbs up and Thumbs Down

Firstly The UI Macro we are concerned with here is 'kb_view_ratings'.

Before you go in all guns blazing, I'd recommend you make a copy of this UI Macro to preserve it should you want to return to the OOB version at a later date.

Once you've made a copy and renamed the original you can go ahead and make the changes. Below are two code excerpts, the first is the original code and second is the altered code. I've highlighted the two lines you are going to change (in the UI Macro these are lines 121 & 122)

Original Code

<span class="kb-article-yn-label">${gs.getMessage('Helpful?')}</span>

<span class="kb-article-yn-box">

        <button class="btn btn-success-subdued kb-article-yes-btn" onclick="kbArticleRating.feedback('yes')">${gs.getMessage('Yes')}</button>

        <button class="btn btn-destructive-subdued kb-article-no-btn" onclick="kbArticleRating.feedback('no')">${gs.getMessage('No')}</button>

        <j2:if test="$[jvar_useful_percentage > 0]">

                  <span class="kb-article-yn-percentage">${gs.getMessage("{0}% found this useful", '${jvar_useful_percentage}')}</span>

        </j2:if>

</span>

Updated Code

<span class="kb-article-yn-label">${gs.getMessage('Helpful?')}</span>

<span class="kb-article-yn-box">

        <button class="btn btn-success-subdued kb-article-yes-btn" onclick="kbArticleRating.feedback('yes')"><span class="glyphicon glyphicon-thumbs-up"/></button>

        <button class="btn btn-destructive-subdued kb-article-no-btn" onclick="kbArticleRating.feedback('no')"><span class="glyphicon glyphicon-thumbs-down"/></button>

        <j2:if test="$[jvar_useful_percentage > 0]">

                  <span class="kb-article-yn-percentage">${gs.getMessage("{0}% found this useful", '${jvar_useful_percentage}')}</span>

        </j2:if>

</span>

Hope this helps

Callum

[F_bio Gon_alves]

Hi Callum,

That worked perfectly! 🙂

Thank you so much for your reply!

Regards,

Fábio Gonçalves

[Sweta1012]

Hi @Callum Ridley1 ,

Thanks for the solution, it works perfectly in ITIL view or in backend. I want this to be implemented in the Employee Center Portal as well. Can you guide me like how to achieve this?