Personnalisation du style de la carte

Accédez à la Tous > Portail de services > CSS, puis personnalisez l’enregistrement wsdConfigurableCard en fonction de vos préférences. Vous pouvez remplacer les styles en fonction du type de carte que vous souhaitez personnaliser. Par exemple :

/* Customizing the profile image size for the user card */
.wsdConfigurableUserCard {
    .profile-image {
        width: 100px;
        height: 100px;
        border-radius: 35px;
    }
}

Ajout d’une section

Dans le code XML du modèle (macro), ajoutez un <div> élément dans lequel vous souhaitez créer une section, puis incluez d’autres éléments à l’intérieur du <div>. Par exemple :

<!-- 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>

Ajout d’un bouton

Ajoutez la logique du bouton dans l’include de script WSDConfigurableCardDataInjector . Assurez-vous d’ajouter la logique à l’intérieur de la méthode extendCardsData . Par exemple :

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

Ajout d’un champ

Dans le code XML du modèle (macro), ajoutez un <div> élément dans la section qui nécessite un nouveau champ, puis ajoutez la logique pour renseigner la valeur du champ dans l’include de script WSDConfigurableCardDataInjector . Par exemple :

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

Ajout d’une logique personnalisée pour une carte

Vous pouvez ajouter une logique personnalisée pour une carte dans l’include de script WSDConfigurableCardDataInjector .

Dans la méthode extendCardsData , ajoutez la logique personnalisée pour fournir des données pour la nouvelle section de la carte. Par exemple, pour modifier le titre de la carte en fonction du nom d’un bâtiment :

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;
},

Masquage d’un élément

Dans le code XML du modèle (macro), supprimez la balise XML de la section que vous souhaitez supprimer ou entourez-la d’un bloc de commentaires. Par exemple :

<!-- 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> -->

Après avoir masqué l’élément, assurez-vous de supprimer la logique personnalisée ou de l’entourer d’un bloc de commentaires. Par exemple :

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