Labels

UI Pages

The following is a basic example of how to use UI Macros in ServiceNow to be reusable blocks of content (whether it be text, javascript, css, or HTML) for UI Pages.

UI macros are modular, reusable components that can be used throughout the ServiceNow platform. They are like little “include” files, if you want, that can be inserted on pages, forms, etc.

To demonstrate how we can use a UI Macro inside of a UI page, let’s assume we want to have a standard Header and Footer on a set of UI Pages. We don’t want to copy the Header and Footer code and paste them in each UI page. This would be a maintenance nightmare. Instead, we will create a UI macro for the Header and one for the Footer. We will then include references to the macros inside of our UI Page.


CREATING THE HEADER

Browse to System UI > UI Macros in your navigation pane in ServiceNow, and create a new UI Macro.

Name: BuddyHeader

Active: checked

XML:

<?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 style='width:100%; font-size: 40px; color: black; text-align: center; background-color: Blue;'>

Hi, Welcome to ServiceNow Buddies. Please note I am an Header

</div>

</j:jelly>


Click submit


CREATING THE FOOTER

Click the NEW button on the UI Macro list to create another macro.

Name: BuddyFooter

Active: checked

XML:

<?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 style='width:100%; font-size: 25px; color: Red; text-align: center; background-color: black;'>

I am the footer of page <a href="https://servicenowbuddies.blogspot.com/">ServiceNow Buddies</a>

</div>

</j:jelly>


Click submit


CREATE THE UI PAGE

Browse to System UI > UI Pages

Click the NEW button on the UI Page list to create a new UI Page.

Name: ServiceNow Buddies

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">

<g:macro_invoke macro="BuddyHeader" />

<title>W3.CSS</title>

<meta name="viewport" content="width=device-width, initial-scale=1"/>

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine"/>

<style>

.w3-tangerine {

  font-family: "Tangerine", serif;

}

</style>

<body>


<div class="w3-container w3-tangerine">

  <p class="w3-xxlarge">Nitesh Tarwe</p>

  <p class="w3-xxxlarge">From</p>

  <p class="w3-jumbo">ServiceNow Buddies</p>

</div>

</body>

<g:macro_invoke macro="BuddyFooter" />

</j:jelly>

Notice the tags inside the UI Page. They tell the page to query a UI Macro and insert the contents of that macro in its place. The attribute macro=”BuddyHeader” tells the UI page to query all UI Macros for a macro named, “BuddyHeader”. That is the macro that will be used.


If you were to test the UI page that leverages these two macros, your page would look something like the following:



Labels:

Comments

Post a Comment

Popular Posts