---
sourceDocument: Australia Employee Service Management
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/employee-service-management

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia Employee Service Management

ft:clusterId :

    - emplsm

bundleId :

    - emplsm

workflow :

    - Employee


---

# Card Configuration examples

# Card Configuration examples {#ariaid-title1}

Release version: Australia  
Updated March 12, 2026  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 minutes to read
Summarize  
![AI sparkle icon](https://servicenow.com/docs/portal-asset/ai-sparkle-icon) Summarized using AI  
This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.  

## Summary of Card Configuration examples

This guide explains how to customize workplace card configurations in ServiceNow Workplace Core, allowing you to add buttons, fields, sections, and apply custom styles.
These configurations enable you to tailor cards to your organization's specific needs, improving user interaction and data presentation within the Service Portal.
Show full answer Show less  

## Customizing Card Style

You can modify card appearance by editing the `wsdConfigurableCard` CSS record in Service Portal \> CSS. For example, you can resize profile images on user cards by overriding CSS classes, enabling consistent branding and layout control.

## Adding Sections and Fields

* **Sections:** Add a new section by inserting a `<div>` element with appropriate classes in the card's XML template (macro). Use AngularJS expressions like `ng-if` to conditionally display content.
* **Fields:** Insert a `<div>` element for the field in the template, then populate its value with custom logic in the `WSDConfigurableCardDataInjector` script include, particularly in the `extendCardsData` method.

## Adding Buttons and Redirect Buttons

* **Buttons:** Implement button logic inside the `extendCardsData` method of the `WSDConfigurableCardDataInjector` script include. Buttons are added to the card's primary or secondary actions and can trigger custom actions.
* **Redirect Buttons:** Add buttons that redirect users to internal KB articles or external portals by specifying `action: 'redirect'` and a URL. Use the `target` attribute to control whether the link opens in the same tab or a new tab.

## Adding Custom Logic

Enhance card data dynamically by extending the `extendCardsData` function in the `WSDConfigurableCardDataInjector` script include. For example, you can modify card titles based on data values such as building names, enabling personalized and context-sensitive card content.

## Hiding Elements

To remove a section or field, delete or comment out the corresponding XML code in the template. Additionally, disable or comment out any related script logic in the `WSDConfigurableCardDataInjector` to prevent errors and maintain clean configurations.  
Add buttons, fields, and sections to the workplace card configuration.
Note:  
The following examples are to customize the card configurations in Workplace Core. For more information about configuring the cards, see [Configure a workplace card](https://servicenow-prod.fluidtopics.net/w9s4ZmnkTgtNV3qq7UCOsQ "Create a workplace card to be used in your workplace applications.").

## Customizing the card style {#card-configuration-examples__section_yhf_2qg_g3c}

Navigate to AllService PortalCSS, 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 {#card-configuration-examples__section_n5b_cqg_g3c}

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 {#card-configuration-examples__section_yd5_cqg_g3c}

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'
                });
            }
        }
    });

Note:  
Buttons are displayed in the `Primary action buttons` section of the card.

## Adding a field {#card-configuration-examples__section_nxb_dqg_g3c}

In the template (macro) XML code, add a `<div>` element in the section that requires a new field.

You can 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 a redirect button {#card-configuration-examples__section_m1y_jlc_1kc}

You can add redirection buttons (e.g. to a KB article or external portal) on WSD location cards using the `action == 'redirect'` and a URL. You can use the target attribute to open the link in the same tab or a
new tab.

    cards.forEach(function(card) {
        if (card.type === 'space') {
            // Internal KB article (same tab)
            card.data.actions.secondary.push({
                label: 'Custom Action',
                id: 'custom_action',
                action: 'custom_action',
                label: gs.getMessage('Workplace guidelines'),
                id: 'kb_guidelines',
                action: 'redirect',
                url: '/kb?id=kb_article_view&sysparm_article=KB0012345',
                isDisabled: false,
                type: 'secondary'
            });
            // External portal (new tab)
            card.data.actions.secondary.push({
                label: gs.getMessage('Catering portal'),
                id: 'catering_portal',
                action: 'redirect',
                url: 'https://catering.example.com/order',
                target: '_blank',
                isDisabled: false,
                type: 'secondary'
            });
        }
    });

## Adding custom logic for a card {#card-configuration-examples__section_zy5_jtt_g3c}

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 {#card-configuration-examples__section_aky_xqg_g3c}

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');
    }
    }
    }); */

**Related reference**   

* [Components installed with Workplace Core](https://servicenow-prod.fluidtopics.net/W9pwjorZZRca1vZnSh8Q6A "Several types of components are installed with installation of the Workplace Core application, including user roles, scheduled jobs, tables, and business rules.")
* [Properties installed with Workplace Core](https://servicenow-prod.fluidtopics.net/tGv4JGBHSWwtKZtwYNcoPw "Customize the properties available with the Workplace Core.")
* [Workplace Profile Location Assignment form](https://servicenow-prod.fluidtopics.net/G4ciiun1KD~_ZXp9dZlM9w "The location assignment form helps you assign a location or a neighborhood to a workplace profile.")
* [Workplace location assignment anomaly types](https://servicenow-prod.fluidtopics.net/mhGLRNK6qFuvH6IFNMvr5w "Anomalies occur when there’s a mismatch in the allocation or assignment of a workplace profile and workplace location.")
* [Reserve a space form](https://servicenow-prod.fluidtopics.net/wojFhItxqcm0WCMEIj9NoQ "The reserve a space form helps you select the location and duration of your reservation.")

*[\>]: and then