Content management and Jelly code examples
Summarize
Summary of Content Management and Jelly Code Examples
This document provides practical Jelly code examples for ServiceNow customers working with Content Management System (CMS) pages. It demonstrates how to dynamically manage and display website content using Jelly scripting, a key technology in ServiceNow’s CMS for customizing page behavior and appearance.
Show less
Header Example
The header example shows how to include a UI script named servicenow.website.globals via the <g:requires> tag. This script is referenced with a .jsdbx extension, indicating it is a JavaScript file stored in the database and cached for performance. This approach enables dynamic content blocks that require specific scripts to function properly, such as those using the “Two Phase” option.
Page Title and Description Example
This example illustrates how to dynamically display page titles and descriptions on CMS pages using Jelly. It uses conditional logic (<j:if>) to tailor the output based on the current page name, incorporating translation capabilities with ${gs.getMessage()}. This enables multilingual support and dynamic navigation links, enhancing the user experience by personalizing the content displayed.
List Block Pulling From Knowledge Articles Example
This advanced example demonstrates how to create a customizable list of knowledge articles within a CMS page. Key points include:
- Use of a container
divwith a unique CSS class (cmsknowledgelist customersuccess) for styling flexibility. - Looping through knowledge article records with
<g:foreachrecord>, allowing control over the number of entries displayed. - Display of a custom logo field (
ulogo) associated with each knowledge article, useful for showing customer or partner logos on pages like awards. - Linking each item to the detailed knowledge article page using the article’s unique
sysid, ensuring users can navigate directly to full article content. - Inclusion of article metadata such as short description and an optional author name (commented out), supporting rich content presentation.
This example emphasizes the flexibility of the CMS combined with Jelly and HTML/CSS skills to create visually appealing and functional content listings tailored to business needs.
Practical Benefits for ServiceNow Customers
- Enables dynamic and localized page content that adapts based on page context and user language.
- Supports embedding custom scripts and assets efficiently to enhance page capabilities.
- Facilitates sophisticated content listing from knowledge bases with custom branding and intuitive navigation.
- Provides a foundation for customers to innovate with CMS design using Jelly scripting and front-end technologies.
Code examples
- Header Example Code
This dynamic content block needs to be active and have the "Two Phase" option clicked. The g:requires tag is including the UI script defined in the system whose name is "servicenow.website.globals". The file extension in the call is .jsdbx and is used only in the call to the UI script, not in the name of the script in the system. For JSDBX, the file being called is a JavaScript(.js) defined within the database (db) that needs to be cached (x).
<?xml version= "1.0" encoding= "utf-8" ?><j:jelly trim = "false" xmlns:j = "jelly:core" xmlns:g = "glide" xmlns:j2 = "null" xmlns:g2 = "null" > <g:requires name = "servicenow.website.globals.jsdbx" /> </j:jelly>- Page Title and Description Example Code
This dynamic content block needs to be active. There are two actions within this code snippet. First is a forward-looking string container that allows site translation, the ${gs.getMessage('Your Text')} string call). The second action pulls in the page title and description, ${current_page.getName()} and ${current_page.getDescription()}.
<?xml version= "1.0" encoding= "utf-8" ?><j:jelly trim = "false" xmlns:j = "jelly:core" xmlns:g = "glide" xmlns:j2 = "null" xmlns:g2 = "null" > <j:if test = "${current_page.getName()=='Solutions'}" ><h1 class = "page_name" > <b> <a href = "solutions.do?" title = "${gs.getMessage('Solutions')}" >${gs.getMessage('Solutions')}</a> </b> </h1><p class = "page_description" > ${current_page.getDescription()} </p> <br /></j:if><j:if test = "${current_page.getName()=='IT 3.0'}" ><h1 class = "page_name" > <b> <a href = "solutions.do?" title = "${gs.getMessage('Solutions')}" >${gs.getMessage('Solutions')}</a> </b> | ${current_page.getName()}</h1><p class = "page_description" > ${current_page.getDescription()} </p> <br /></j:if></j:jelly>- List Block Pulling From Knowledge Articles Example Code
This code example contains one of the best tricks in the CMS. Using the type field with draws from a number of defined list definitions to make slight, or very dramatic changes, to list display. Because the UI is open to configuration and innovation, this is a good opportunity to use design skills. Anyone who can use HTML and CSS knows that a basic list can be turned into a float grid or be made inline. The combinations are limited only by what the designer can dream up and code.
In the code example, there is a custom logo field (u_logo) added to the Knowledge form. The custom field displays customer logos, partner logos, and award images on the awards page. There are a number of different sections that use this list definition so efficient reuse is taking place.- div class="cms_knowledge_list customer_success" - Begin by creating an outer container with a unique class name that can be used as a basis for CSS style selectors and rules. From the outer container, many of the child elements can be accessed for theming.
- <g:for_each_record file="${current}" max="${jvar_max_entries}"> - Loop for list creation that calls the selected table record and the entries set on the list form.
- <a href="knowledge.do?sysparm_document_key=kb_knowledge,${current.sys_id}"><img src="${current.u_logo.getDisplayValue()}" alt="${current.text}" width="110px"/> - Defines linking to the article detail in the knowledge base. For further reference, look at content types within the site definition and you will see some similarities. The knowledge.do? portion of the URL points to the knowledge detail page which (as mentioned above) is mandatory if you plan to call the knowledge base in your CMS site. The rest of the URL represents the syntax for calling a knowledge article by its sys_id. Each and every item housed within the system has a unique sys_id.
- <ttt>${SP}-${SP}${current.author.first_name}${SP}${current.author.last_name}</tt> - This example is commented out and not used, but it is still interesting in that it has a jelly call ${SP} and it pulls the knowledge article's author by first and last name.
<?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 class = "cms_knowledge_list customer_success" ><g:for_each_record file = "${current}" max = "${jvar_max_entries}" ><br /><table cellspacing = "0" cellpadding = "0" border = "0" class = "background_transparent" ><tr><td class = "cms_knowledge_list_image" ><j:if test = "${current.u_logo.getDisplayValue() != ''}" ><div class = "knowledge_article_logo" ><a href = "knowledge.do?sysparm_document_key=kb_knowledge,${current.sys_id}" > <img src = "${current.u_logo.getDisplayValue()}" alt = "${current.text}" width = "110px" /> </a></div></j:if> </td><td width = "100%" ><a href = "knowledge.do?sysparm_document_key=kb_knowledge,${current.sys_id}" target = "_top" ><span class = "cms_knowledge_list_link" >${current.short_description}</span></a><p class = "kb_description" > "${current.description}" <!--${SP}-${SP}<span class="cms_knowledge_list_author">${current.author.first_name}${SP}${current.author.last_name}</span>--></p></td></tr><tr><td width = "100%" colspan = "2" class = "kb_learn_more" ><p class = "kb_learn_more" ><a href = "knowledge.do?sysparm_document_key=kb_knowledge,${current.sys_id}" >Learn More</a></p></td></tr></table> </g:for_each_record></div> </j:jelly>