カードスタイルのカスタマイズ

移動先 すべて > サービスポータル > CSSをクリックし、必要に応じて wsdConfigurableCard レコードをカスタマイズします。カスタマイズするカードのタイプに基づいてスタイルを上書きできます。たとえば、次のようになります。

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

セクションの追加

テンプレート (マクロ) XML コードで、セクションを作成する <div> 要素を追加してから、 <div>内に他の要素を含めます。たとえば、次のようになります。

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

ボタンの追加

WSDConfigurableCardDataInjector スクリプトインクルードにボタンのロジックを追加します。必ず extendCardsData メソッド内にロジックを追加してください。たとえば、次のようになります。

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

フィールドの追加

テンプレート (マクロ) XML コードで、新しいフィールドを必要とするセクションに <div> 要素を追加し、 WSDConfigurableCardDataInjector スクリプトインクルードにフィールド値を入力するロジックを追加します。たとえば、次のようになります。

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

カードのカスタムロジックの追加

WSDConfigurableCardDataInjector スクリプトインクルードでカードのカスタムロジックを追加できます。

extendCardsData メソッドで、新しいセクションのデータをカードに提供するカスタムロジックを追加します。たとえば、建物名に基づいてカードタイトルを変更するには、次のようにします。

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

要素を非表示にする

テンプレート (マクロ) XML コードで、削除するセクションの XML タグを削除するか、コメントブロックで囲みます。たとえば、次のようになります。

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

要素を非表示にした後は、必ずカスタムロジックを削除するか、コメントブロックで囲んでください。たとえば、次のようになります。

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