카드 스타일 사용자 지정

다음으로 이동 모두 > 서비스 포털 > 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');
        }
    }
}); */