Preformatted callout boxes in KB articles

[Bradley Ross]

It would be helpful to have an option to quickly insert preformatted callout boxes in a knowledge article. These might be tips or warnings. One  university using a different platform has a style guide that shows four pre-built alert boxes you can insert in a knowledge article.  

How can I set up my ServiceNow environment to allow my article editors to format their articles to include this sort of alert box? I don't see a way to edit the choices available in the "Style" dropdown on the HTML editor. 

This is further complicated because there are at least three different environments where a given article can be displayed, each with its own CSS: Platform view, Portal view, Workspace view.

[Claude DAmico · Accepted solution]

I had a request to build out custom templates that pull data from fields for incidents in which I developed a UI Action to bring up a modal UI Page containing the names of the templates. Based on the template selection, the script matched the selection to the output and appended or prepended it to the work notes field.

If you look at the UI Action for Insert to Article for knowledge blocks, that has further specificity for inserting where the cursor is placed in the article body.

You could combine these two methods to accomplish what you are looking for in a single, custom UI Action. Let me know if you have any questions!

[thirschi]

I was doing what you suggested but I don't even see the UI Action "Insert to Article".  Just wondering how you would accomplish this....

[Claude DAmico]

It's entirely possible that you don't have the Knowledge Blocks plugin enabled which may be why that UI Action is not listed for you. Here is something to get you started. I'll work with you as you develop if you have any questions also.

UI Action:

• Client - True
• Form button - True
• Action name - apply_template
• Onclick - applyNewTemplate();
• Script

function applyNewTemplate(){
	var dialog = new GlideModal('apply_kb_template');
	dialog.setTitle("Select Template");
	dialog.render();
}

UI Page:

• Name - apply_kb_template
• HTML

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<div>
<h3>Templates</h3>
</div>

<div>
<select id="template">
<option></option>
<option>Template1</option>
<option>Template2</option>
<option>Template3</option>
<option>Template4</option>
</select>
</div>

<footer class="modal-footer flex">
<g:dialog_buttons_ok_cancel ok="return onOK();" cancel="return onCancel();" ok_type="button" cancel_type="button/>
</footer>

</j:jelly>

• Client script
  •  

function onOK(){

var selectedTemplate = jQuery("#template").val();
var destroyModal = GlideModal.prototype.get('apply_kb_template')
var whereToApply = g_form.getValue('text');

var Template1 = "<div><p>Testing template1 application.</p></div>";
var Template2 = "<div><p>Testing template2 application.</p></div>";
var Template3 = "<div><p>Testing template3 application.</p></div>";
var Template4 = "<div><p>Testing template4 application.</p></div>";

	switch(selectedTemplate){
		case "":
			alert("No template selected. Please select a template.";
			return;
		case "Template1":
			whereToApply += Template1;
			g_form.setValue('text', whereToApply);
			break;
		case "Template2":
			whereToApply += Template2;
			g_form.setValue('text', whereToApply);
			break;
		case "Template3":
			whereToApply += Template3;
			g_form.setValue('text', whereToApply);
			break;
		case "Template4":
			whereToApply += Template4;
			g_form.setValue('text', whereToApply);
			break;
	}
	destroyModal.destroy();
}​

function onCancel() {
	var destroyModal = GlideModal.prototype.get('apply_kb_template');
	destroyModal.destroy();
}

The 'Insert to Article' UI Action has a line for g_form.insertContentAtCursor(curfield, insertBlockInfo[i].blockdetails) which does exactly as it is read. This is essentially g_form.insertContentAtCursor(fieldToPut, contentToPut) which you would use instead of g_form.setValue() in the Client Script of the UI Page if you wanted that level of specificity. However, curfield is a variable referencing a scratchpad variable called currentField on the form populated by an onLoad Client Script which is fortunately on the kb_knowledge table:

//Description: Onload register the focus event for html and translated html type fields so that whenever user clicks/focuses on the field, and on Add Blocks, Block will be added to the last selected HTML field

function onLoad() {

    var tableName = g_form.getTableName();
    if (tableName == 'kb_knowledge_block')
        return;

    var contentDoc = top.document;

    if (top.document.getElementById('gsft_main'))
        contentDoc = top.document.getElementById('gsft_main').contentWindow.document;

    contentDoc.onreadystatechange = function() {
        var fields = g_form.elements;
        var count = 0;
        g_scratchpad.currentField = null;
        for (var i = 0; i < fields.length; i++) {
            if (fields[i].type == 'html' || fields[i].type == 'translated_html') {
				// For kb article templates by default 'text' column is inherited and hidden by a UI policy.
				if ( tableName != 'kb_knowledge' && fields[i].fieldName == 'text')
					continue;
                g_scratchpad.currentField = fields[i].fieldName;
				
                var htmlElement = contentDoc.getElementById(fields[i].getID() + '_ifr');
                if (htmlElement) {
                    htmlElement.contentWindow.onfocus = onHtmlElementFocus(fields[i].fieldName);
                    count++;
                }
            }
        }

        if (count > 1) {
            g_scratchpad.currentField = null;
            for (var i = 0; i < fields.length; i++) {
                if (fields[i].type != 'html' && fields[i].type != 'translated_html') {
                    var nonHtmlElement = contentDoc.getElementById(fields[i].getID());
                    if (nonHtmlElement)
                        nonHtmlElement.onfocus = onNonHtmlElementFocus();
                }
            }
        }
    };

    function onHtmlElementFocus(fieldName) {
        return function(event) {
            g_scratchpad.currentField = fieldName;
        };
    }

    function onNonHtmlElementFocus() {
        return function(event) {
            g_scratchpad.currentField = null;
        };
    }
}