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:
Thank you for sharing wonderful information with us to get some idea about that content.
ReplyDeleteServiceNow Admin Online Training
ServiceNow Online Training in India
0stirinnatdzu Max Mullen https://wakelet.com/wake/y21Omg6A7HqKYH0uCqHZk
ReplyDeletefranovthrontha
0sumpprurQterpchi_Des Moines Megan Davis ESET NOD32 Internet Security
ReplyDeleteAdobe Acrobat Pro DC
Google Chrome browser
giosmaretun
Very helpful post
ReplyDeleteservicenow admin course
Thanks for sharing valuable information
ReplyDeleteservicenow administrator certification
Clear and easy to understand
ReplyDeleteservicenow administrator course
Great explanation
ReplyDeleteservice now admin course
Very informative content
ReplyDeleteservicenow admin training
Very informative content
ReplyDeleteservicenow administrator training
Well written and engaging
ReplyDeleteservicenow system administrator course
Useful tips, thank you
ReplyDeleteservicenow system administrator training
Keep up the good content
ReplyDeletelearn servicenow administration
Simple and well explained
ReplyDeleteservicenow admin full course
Appreciated the clarity
ReplyDeleteservicenow admin certification training
Great insights shared
ReplyDeleteservice now administrator training
Nice and informative post
ReplyDeleteservicenow admin online training