Scribd
Upload
10 views11 pages

CRM Presentation 1

Uploaded by

Chanakya Varma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views11 pages

CRM Presentation 1

Uploaded by

Chanakya Varma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Styling Pages and Widgets in ServiceNow

M. Chanakya Varma

VU22CSCI0200029
Introduction

ServiceNow allows extensive customization of pages and


widgets.
ServiceNow provides a flexible platform for developing and
managing applications with a focus on IT service
management.
The visual appeal and user experience of applications can be
significantly enhanced through effective styling of pages and
widgets.
This involves using CSS, HTML, and JavaScript to create a
user-friendly interface.
Styling Pages

In ServiceNow, pages can be styled through various methods:


Custom CSS: Apply styles to HTML elements within
ServiceNow widgets or service portals.
UI Policies: Dynamically alter form behavior and styles based
on conditions.
Client Scripts: Apply dynamic styles based on form data.
Example: Adding Custom CSS

Code:
< style >
. my - custom - class {
background - color : # f2f2f2 ;
color : #333;
}
</ style >
Usage:
Custom CSS can be embedded in the HTML of a widget or
portal page.
Apply CSS classes to elements for consistent styling.
Using UI Policies

UI Policies can be used to apply conditional styling on forms:


Make fields mandatory or read-only.
Set field visibility based on form data.
Dynamic Styling with Client Scripts

You can use Client Scripts to dynamically apply styles to fields:


function onLoad () {
var field = g_form . getControl ( ’ field_name ’) ;
field . style . backgroundColor = ’# ffcccc ’;
}
Example: Change the background color of a field dynamically.
Styling Widgets

Widgets provide more flexibility for custom styling:


HTML Template: Define the structure of the widget using
HTML.
CSS Styling: Customize the appearance with embedded or
external CSS.
Widget HTML Template Example

HTML Code:
< div class = " widget - container " >
< h2 class = " widget - title " > Custom Widget </ h2 >
<p class = " widget - content " > This is a widget . <
/p>
</ div >
Widget CSS Example

CSS Code:
< style >
. widget - container {
background - color : # e0e0e0 ;
padding : 20 px ;
border - radius : 5 px ;
}
. widget - title {
font - size : 24 px ;
color : #4 a4a4a ;
}
</ style >
Conclusion

ServiceNow offers flexibility for styling pages and widgets


using CSS, JavaScript, and HTML.
Customizing the appearance can improve the user experience
and align with branding guidelines.
Thank You!

You might also like