how to a custom cards for Incidents on the Event Management Landing Page of the workspace.

[learn nv]

Hi All,

I would like to show custom cards related to incidents and problems on the Event Management landing page of SOW.

Could you please suggest.

[Shaqeel]

Hi @learn nv 

You can follow these steps:

Step 1: Define the Data Sources
First, you need to ensure that you have the data sources for incidents and problems ready.
Incidents Data Source:
Navigate to Now Experience Framework > Data Sources.
Create a new data source for incidents, or use an existing one. Configure the data source to retrieve the relevant incident records.
Problems Data Source:
Similarly, create or configure a data source for problem records.

Step 2: Create Custom Cards
Next, you'll need to create custom cards that will display the incident and problem data.
Create a UI Component:
Navigate to Now Experience Framework > UI Builder.
Open the page where you want to add the custom cards, in this case, the Event Management landing page.
If the page doesn’t already exist, you may need to create it or extend an existing page.
Add a Card Component:
Drag and drop the Card component onto the desired location on the page.
Bind the card’s data properties to the incidents or problems data source created earlier.
Customize the Card Appearance:
Configure the card’s appearance by setting the header, description, and any other relevant fields that you want to display.
You can use the fields like short_description, priority, and state for incidents and problems.
Repeat for Each Card Type:
Repeat the process to create another card for problems.

Step 3: Bind the Data
Ensure the cards are dynamically displaying the correct data.
Bind Incidents to Incident Card:
In the UI Builder, bind the data source of the Incident Card to the incident data source.
Set up filters, conditions, or sorting as needed to refine which incidents are shown.
Bind Problems to Problem Card:
Similarly, bind the data source of the Problem Card to the problem data source.
Apply any necessary conditions or filters.

Step 4: Configure the Page Layout
Make sure the landing page layout is set up to accommodate these cards effectively.
Layout Configuration:
Adjust the layout to ensure the cards are well-positioned and visually appealing.
Consider using a grid or flex layout to align the cards side by side or in a vertical stack, depending on your design requirements.

Step 5: Test the Page
Preview the changes and test the functionality.
Test in Service Operations Workspace:
Open the Service Operations Workspace and navigate to the Event Management landing page.
Ensure that the custom cards for incidents and problems are displaying the expected data correctly.
Validate Data Updates:
Check that the cards update dynamically as new incidents and problems are logged or existing ones are resolved or updated.

Step 6: Publish and Deploy
Once you are satisfied with the setup:
Save and Publish:
Save the changes in the UI Builder.
Publish the page so that it is available to the users in the workspace.
Deploy the Customization:
If necessary, package and deploy the customization to other instances using update sets or your preferred deployment method.

*************************************************************************************************************
If my response proves useful, please indicate its helpfulness by selecting "Accept as Solution" and " Helpful." This action benefits both the community and me.

*************************************************************************************************************

Regards

Shaqeel

[Haseeb-Ahmed]

Hi @learn nv ,

You may follow below document to customize landing page

https://www.servicenow.com/community/itsm-articles/configuration-activities-for-service-operations-w...

Please mark it helpful if it answers your query.

Thanks,
Haseeb Ahmed