How create widget to add cards in service portal page?

[Ankita Kolhe]

Hi Community,

I'm new to service portal .I want to create cards as shown below:-

Could anyone please help how to create widget for this?

Thanks,

Ankita

[Rahul Kumar17]

Hi,

To create the card layout as shown in the image, you'll need to create a custom widget in Service Portal. This custom widget will be used to display the data in the desired format. Here's a step-by-step guide on how to create the widget:

1. Access the Service Portal Designer:

   • Log in to your ServiceNow instance as an admin.
   • Go to "Service Portal" > "Service Portal Configuration."
   • Click on the "Designer" link for the desired portal.

2. Create a New Widget:

   • In the Service Portal Designer, click on the "Create a new widget" button.
   • Enter a unique name for the widget, such as "CustomCardWidget," and click "Create."

3. Widget Configuration:

   • In the widget editor, configure the widget settings, such as title, description, and widget options. Set the "Widget Category" as "Custom" to organize your custom widgets.

4. HTML Template:

   • In the "HTML" tab of the widget editor, you can write the HTML structure for the card layout.
   • You can use HTML and Service Portal AngularJS directives to create the layout. For the card layout shown in the image, you can use div elements, Bootstrap classes (for styling), and AngularJS expressions to display dynamic data.

   Example HTML template (adjust it based on your data):

<div class="card">
  <img src="{{data.picture}}" alt="{{data.name}}">
  <div class="card-body">
    <h5 class="card-title">{{data.name}}</h5>
    <p class="card-text">Email: {{data.email}}</p>
    <p class="card-text">Phone: {{data.phone}}</p>
  </div>
</div>

Server Script:

• In the "Server Script" tab of the widget editor, you can write the server-side script to fetch data (e.g., records from a table) that you want to display on the cards.
• You can use GlideRecord or any other server-side API to fetch the required data.

Example server script (assuming you want to display users' data from the "sys_user" table):

(function() {
  var gr = new GlideRecord('sys_user');
  gr.query();
  data.users = [];
  while (gr.next()) {
    var user = {
      picture: gr.getValue('picture'),
      name: gr.getValue('name'),
      email: gr.getValue('email'),
      phone: gr.getValue('phone'),
    };
    data.users.push(user);
  }
})();

1. Client Script:

   • In the "Client Script" tab of the widget editor, you can write JavaScript code to handle any client-side interactions or behavior.
   • In this case, you may not need any client-side script, as it's a simple display widget.

2. Save and Publish:

   • After completing the widget configuration, click on the "Save" button to save the widget.
   • Once the widget is saved, click on the "Publish" button to publish the changes to the Service Portal.

3. Add the Widget to a Page:

   • Go to the Service Portal Page where you want to display the cards.
   • Drag and drop the newly created "CustomCardWidget" onto the page in the desired location.

4. Test the Widget:

   • Save the changes to the Service Portal Page.
   • Preview the page or access the portal to see the cards with dynamic data displayed as per the HTML template.

Remember to adjust the HTML template and server script based on the data you want to display and the table you are fetching data from.

Thanks,

Rahul Kumar