Looking for best practices on how to display HTML and PDF documents in knowldege base

[Jessica Spates]

We are working on our Employee Center and have an extensive knowledge base between our Finance, HR, and IT teams. With 500 articles give or take across the platform we have a mix of HTML and PDF documents for SOPs, How to Guides, Videos, FAQs etc. We have a large deskless workforce, but we do not want to force the app on them, as they are overwhelmed with apps.

The issue we are having is that the format of HTML on our pages makes them scroll over, cutting off images and makes guides with multiple numbering steps a pain to format. We have teams that like to download a PDF to give to their teams as well, especially when it is a how to guide for a department on something like "New TM Guide." I am wondering if anyone has some great tips for us on how to do the following.

1: Ensure the knowledge block/PDF etc. is responsive to the device screen size to prevent the iframe bouncing or HTML scrolling left to right.
2. Allow for HTML documents to download to a PDF format (and keep it looking nice)

The concept I am looking for is not much different than when you go to look for a recipe online. You can read through the article and learn about how the chef learned this from their grandmother and get the hidden tips and tricks, or you can say "Jump to Recipe" and save it to your recipe box or download a PDF. Even better, if there is a video, have that option in the text as well and allow them to view a small screen view of the process or enlarge it to their screen size.

Is this concept appealing to anyone else? And is there any movement to improve the knowledge base design elements to allow for more user-friendly customizations such as this in the future? I would love to learn more if I am missing some important updates that are out there or if someone has found some hacks to get their team members that next level learning experience.

[Rafael Batistot]

Hi @Jessica Spates 

Question 1) 

In this article show 2 options for fit your article as responsive to the device screen is

Option 1) Edit the CSS properties for the content of the article to make it more responsive.

Option 2) Edit the CSS of the KB Article widget instance option or corresponding page to make all elements of that type (such as table) fit within the widgets available space.

Knowledge Articles content does not fit in the portal and required scrolling to the right - Support ...


Question 2) 

To download an article, html to PDF with nice view may you use via Script include + Background script 

This particular code will download all 500 article to pdf, with imagens... everything. They'll be storage in the article that you give the id in the Background script 

Script include

var KBToPDFExport = Class.create();
KBToPDFExport.prototype = Object.extendsObject(AbstractAjaxProcessor, {

    exportAllPublished: function(exportedArticles) {
        var gr = new GlideRecord("kb_knowledge");
        gr.addEncodedQuery('workflow_state=published');
        gr.query();

        while (gr.next()) {
            var header = 'Number: ' + gr.number.getDisplayValue() + ' <br/>';
            header += 'Knowledge Base: ' + gr.kb_knowledge_base.getDisplayValue() + ' <br/>';
            header += 'Category: ' + gr.kb_category.getDisplayValue() + ' <br/>';
            header += 'Title: ' + gr.short_description.getDisplayValue() + '<br/>';

            var style = "<style>img { max-width: 100%; height: auto; }</style>";
            var html = style + header + gr.text.toString();

            var filename = gr.kb_knowledge_base.getDisplayValue() + '-' +
                gr.kb_category.getDisplayValue() + ' - ' +
                gr.number.getDisplayValue();

            var v = new sn_pdfgeneratorutils.PDFGenerationAPI();
            var result = v.convertToPDF(html, "kb_knowledge", exportedArticles, filename);
        }

        return "Export completed.";
    },



    type: 'KBToPDFExport '
});

Background script 

var exportador = new KBToPDFExport();
exportador.exportAllPublished('<article_id>');

If you need one by one may you try via URL 
Export to PDF functionality for Knowledge articles - Support and Troubleshooting

or use the same script, but change this part 

gr.addEncodedQuery('workflow_state=published');

to like 

gr.addQuery('sys_id', <aticle_id>)

[wow-on-now]

Hi @Jessica Spates There is a better way to achieve this without any coding and it would be available for all knowledge authors within the company. Please take a look at Amaze by Intellective.  Amaze is a certified ServiceNow plugin that runs natively in ServiceNow.  With Amaze, you can not only embed PDFs but also other rich media like lucid charts, videos etc. You can get a free trial from the ServiceNow store.  Hope this helps. Also, here is a playlist of some of the other features of Amaze: https://www.youtube.com/playlist?list=PLDF5A6hS2fbuUlzB5ApcKdMJjRqlzLsr2

[LloydoL]

I agree with Rafael with respect to responsiveness through CSS. You can set breakpoints for different device sizes. You can adjust fonts, styles and tables at different device width tolerances.

For in-built styling of articles, I came across a low-code css styling option, whereby the style specifies to page break before or after specific tags. For images, you can specify to never break through them. If you're looking for something you can just embed into your article templates without heavy scripts then this may be a good option.

I had originally attached some links for reference however my reply was rejected. All I can suggest is to do some searching in relation to breakpoints, media queries and css page break styling for tags.