カード構成の例

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間：6分

    • 職場カード構成にボタン、フィールド、およびセクションを追加します。

    注:
    次の例は、 ワークプレイスコア でのカード構成のカスタマイズです。カードの構成の詳細については、「 職場カードの構成」を参照してください。

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

    移動先 すべて > サービスポータル > 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');
        }
    }
}); */