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

 Release :

    - australia

ft:locale :

    - pt-BR

ft:publication_title :

    - Australia Employee Service Management

ft:clusterId :

    - emplsm

bundleId :

    - emplsm

workflow :

    - Employee


---

# Card Configuration examples

# Card Configuration examples {#ariaid-title1}

* Versão de lançamento: Australia
* 
* Atualizado 12 de mar. de 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 min. de leitura

Add buttons, fields, and sections to the workplace card configuration.
Nota:  
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/ACV1GsoPOPRWp95QMWK0sA "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'
                });
            }
        }
    });

Nota:  
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, 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 {#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');
    }
    }
    }); */

**Referência relacionada**   

* [Components installed with Workplace Core](https://servicenow-prod.fluidtopics.net/lN6PbESvvg3sjn0mUzAcIQ "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/obIB72dpn_vRLUZ28A6Phw "Customize the properties available with the Workplace Core.")
* [Workplace Profile Location Assignment form](https://servicenow-prod.fluidtopics.net/7pcfXX5xJOEH3pdjKHwzyg "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/igpNsfRWsYJUHvzSRcuFww "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/NvzBAutbvigZ0kM8xJxlvw "The reserve a space form helps you select the location and duration of your reservation.")