UI Page

[atanufghosh]

What is the use of html, client script & processing script in UI page

[Danish Bhairag2]

Hi @atanufghosh ,

In a ServiceNow UI Page, you can use HTML, Client Scripts, and Processing Scripts to create custom user interfaces and functionality. Here's an explanation of each and an example for each:

1. **HTML:** The HTML section of a UI Page is where you define the structure and layout of your custom user interface. You can use standard HTML, ServiceNow's UI macros, and even include client-side JavaScript and CSS.

   Example HTML:

   <div>

       <h1>Welcome to My Custom Page</h1>

       <p>This is a custom UI Page in ServiceNow.</p>

       <button id="myButton">Click me</button>

   </div>

2. **Client Script:** Client Scripts in a UI Page allow you to add client-side behavior and interactions. They are written in JavaScript and executed in the user's browser.

   Example Client Script:

   // Attach a click event handler to the button

   document.getElementById("myButton").addEventListener("click", function() {

       alert("Button clicked!");

   });

3. **Processing Script:** The Processing Script is executed on the server-side when the UI Page is loaded. It's often used to retrieve or manipulate data from the ServiceNow database before rendering the page.

   Example Processing Script (Server-side JavaScript):

   // Fetch data from a table

   var gr = new GlideRecord('incident');

   gr.addQuery('priority', '1'); // Filter incidents with priority 1

   gr.query();

   // Prepare data for rendering in the HTML

   var data = [];

   while (gr.next()) {

       data.push({

           number: gr.getValue('number'),

           short_description: gr.getValue('short_description')

       });

   }

   // Pass data to the HTML template

   data;

In this example:

- The HTML section defines the structure of the UI Page.

- The Client Script adds a click event handler to the button to display an alert when clicked.

- The Processing Script fetches incident records with a priority of 1 from the database, processes the data, and passes it to the HTML for rendering.

These three components work together to create custom UI Pages in ServiceNow, enabling you to build tailored interfaces and functionality for various use cases.

Please mark my answer helpful & accepted if it helps you resolve your query.

Thanks,

Danish

[Nivedita Patil]

Hi @atanufghosh ,

Please refer the below document.

https://docs.servicenow.com/en-US/bundle/utah-api-reference/page/script/server-scripting/reference/r...

Mark my answer correct and helpful if  helps you.

Thanks,

Nivedita Patil.

[Harish Bainsla]

1. HTML (Hypertext Markup Language):

   • Use: HTML is the standard markup language for creating the structure and content of a web page. It defines the elements and their layout on a webpage, such as text, images, forms, links, and more.
   • Role: HTML is responsible for defining the static or semistatic parts of a UI page. It provides the basic structure and content that users see when they load a web page in their browser. It's a declarative language, meaning it describes how elements should be displayed, but it doesn't handle dynamic interactions or data processing on its own.

2. Client-Side Scripting (e.g., JavaScript):

   • Use: Client-side scripting languages like JavaScript are used to add interactivity and dynamic behavior to a UI page. They run in the user's web browser.
   • Role: Client-side scripts can be used to respond to user actions (e.g., clicking a button), validate form data, create animations, update the UI without requiring a full page reload (AJAX), and interact with web APIs. They make the UI more responsive and interactive, enhancing the user experience.

3. Processing Script (Server-Side Scripting) (e.g., PHP, Python, Ruby, Node.js):

   • Use: Server-side scripting is used to handle server-side processing tasks, such as data validation, database interactions, and business logic.
   • Role: Processing scripts are responsible for handling data submitted by the user (e.g., form submissions), querying databases, processing data, and generating dynamic content. They ensure that the server can manage and manipulate data securely and efficiently. These scripts often generate HTML dynamically based on the user's input or other factors and send it to the client for display.