Card Configuration examples
Summarize
Summary of Card Configuration examples
This document outlines how to customize card configurations in Workplace Core for ServiceNow. It provides practical examples for adding buttons, fields, sections, and custom logic to workplace cards, enabling a tailored user experience.
Show less
Key Features
- Customizing Card Styles: Modify card appearance via CSS in the wsdConfigurableCard record, allowing for adjustments such as profile image size.
- Adding Sections: Incorporate new sections by adding
<div>elements in the macro XML, enhancing the card's informational structure. - Adding Buttons: Implement custom buttons within the WSDConfigurableCardDataInjector script to enhance interactivity on cards.
- Adding Fields: Introduce new fields in the card by modifying the XML and injecting logic to populate the field values dynamically.
- Custom Logic: Adjust card data with custom logic in the script to dynamically change titles or other card information based on specific conditions.
- Hiding Elements: Remove or comment out XML tags to hide unnecessary sections from the card display.
Key Outcomes
By utilizing these customization techniques, ServiceNow customers can create more relevant and functional workplace cards. This leads to improved user engagement, allowing users to access pertinent information and actions quickly. Ultimately, these enhancements contribute to a better overall user experience within the ServiceNow platform.
Add buttons, fields, and sections to the workplace card configuration.
Customizing the card style
Navigate to , then customize the wsdConfigurableCard record based on your preference. You can override the styles based on the type of card you want to customize. For example:
/* Customizing the profile image size for the user card */
.wsdConfigurableUserCard {
.profile-image {
width: 100px;
height: 100px;
border-radius: 35px;
}
}
Adding a section
In the template (macro) XML code, add a <div> element where you want to create a section, then include other elements inside the <div>. For example:
<!-- The following section is to add a phone number -->
<div class="section support-section" ng-if="data.contact">
<div class="section-label">
<div class="label-text">{{ translations.space.supportSectionTitle }}</div>
</div>
<!-- The following link specifies the phone number fetched from the data -->
<a href="tel:{{ data.phone }}" class="section-content section-content-text">
{{ data.phone }}
</a>
</div>
<!-- The following div inserts a divider between sections -->
<div class="divider" ng-if="mustDisplayDivider()"></div>
<!-- The following section is to add extra services -->
<div class="section book-services-section" ng-if="data.link">
<div class="section-label">
<div class="label-text">{{ translations.space.bookServicesSectionTitle }}</div>
</div>
<!-- The following link specifies the services link fetched from the data -->
<a href="{{ data.link }}" class="section-content section-content-link">
{{ data.link }}
</a>
</div>Adding a button
Add the logic for the button in the WSDConfigurableCardDataInjector script include. Make sure to add the logic inside the extendCardsData method. For example:
/* Adding functionality for a custom button */
extendCardsData: function(cards) {
cards.forEach(function(card) {
if (card.type === 'space') {
card.data.actions.secondary.push({
label: 'Custom Action',
id: 'custom_action',
action: 'custom_action',
isDisabled: false,
type: 'secondary'
});
}
}
});Primary action buttons section of the card.Adding a field
In the template (macro) XML code, add a <div> element in the section that requires a new field, then add the logic to populate the field value in the WSDConfigurableCardDataInjector script
include. For example:
<!-- Adding a new row with a new field -->
<div class="info-row" ng-if="data.usable_size_sq_meter">
<div class="info-icon">
<i class="fa fa-arrows-alt"></i>
</div>
<div class="info-text">{{ data.usable_size_sq_meter }}m square</div>
</div>/* Custom logic to populate the field value */
cards.forEach( function(card) {
if (card.type ==='space') {
var spaceGr.get(card.data.sysId)) {
card.data.usable_size_sq_meter = spaceGr.getValue('usable_size_sq_meter');
}
}
});Adding custom logic for a card
You can add custom logic for a card in the WSDConfigurableCardDataInjector script include.
In the extendCardsData method, add the custom logic to provide data for the new section to the card. For example, to modify the card title based on a building name:
extendCardsData: function(cards) {
/* Modify card title based on the building display name */
cards.forEach(function(card) {
if (card.data.building && card.data.building.displayValue === 'HQ') {
card.data.title = '[HQ] ' + card.data.title;
}
});
return cards;
},Hiding an element
In the template (macro) XML code, delete the XML tag for the section that you want to remove, or surround it in a comment block. For example:
<!-- The following section is in a comment block, therefore hidden on the card -->
<!-- <div class="info-row" ng-if="data.usable_size_sq_meter">
<div class="info-icon">
<i class="fa fa-arrows-alt"></i>
</div>
<div class="info-text">{{ data.usable_size_sq_meter }}m square</div>
</div> -->After hiding the element, make sure that you remove the custom logic, or surround it in a comment block. For example:
/* The following method is in a comment block, therefore is not run on the card */
/* cards.forEach( function(card) {
if (card.type ==='space') {
var spaceGr.get(card.data.sysId)) {
card.data.usable_size_sq_meter = spaceGr.getValue('usable_size_sq_meter');
}
}
}); */