Zenn
🦔

【LWC】Salesforceレコードページのヘッダーを実装する

2023/12/19に公開
HTML
JavaScript
Salesforce
LWC
tech

はじめに

LWC（Lightning Web Component）でSalesforceレコードページのヘッダーを実装しました。

完成形

実装方法

コード

HTML

header.html
<template>
    <div class="slds-page-header slds-page-header_record-home">
        <!-- ヘッダー上部 -->
        <div class="slds-page-header__row">
            <div class="slds-page-header__col-title">
                <div class="slds-media">
                    <div class="slds-media__figure slds-align_absolute-center">
                        <lightning-icon icon-name="standard:account"></lightning-icon>
                    </div>
                    <div class="slds-media__body">
                        <div class="slds-page-header__name">
                            <div class="slds-page-header__name-title">
                                <h1>
                                    <span>取引先</span>
                                    <span class="slds-page-header__title  slds-truncate">{account.Name}</span>
                                </h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slds-page-header__col-actions">
                <div class="slds-page-header__controls">
                    <div class="slds-page-header__control">
                        <lightning-button label="Web検索" onclick={handleSearchWithGoogle}></lightning-button>
                    </div>
                </div>
            </div>
        </div>
        <!-- ヘッダー下部 -->
        <div class="slds-page-header__row slds-page-header__row_gutters">
            <div class="slds-page-header__col-details">
                <ul class="slds-page-header__detail-row">
                    <li class="slds-page-header__detail-block">
                        <p class="slds-text-title">種別</p>
                        <p>{account.Type}</p>
                    </li>
                    <li class="slds-page-header__detail-block">
                        <p class="slds-text-title">Webサイト</p>
                        <p><lightning-formatted-url value={account.Website} target="_blank"></lightning-formatted-url></p>
                    </li>
                    <li class="slds-page-header__detail-block">
                        <p class="slds-text-title">年間売上</p>
                        <p><lightning-formatted-number value={account.AnnualRevenue} format-style="currency" currency-code="JPY"></lightning-formatted-number></p>
                    </li>
                    <li class="slds-page-header__detail-block">
                        <p class="slds-text-title">評価</p>
                        <p>{account.Rating}</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

JavaScript

header.js
import { LightningElement } from 'lwc';

export default class Header extends LightningElement {
    account = {}

    connectedCallback() {
        this.account = {
            Id: 'xxxxxxxxxxxxxxx',
            Name: '○○○株式会社',
            Type: 'Technology Partner',
            Website: 'https://example.com',
            AnnualRevenue: 350000000,
            Rating: 'Hot'
        };
    }

    handleSearchWithGoogle() {
        window.open('https://www.google.com/search?q=' + this.account.Name);
    }
}

参考

https://www.lightningdesignsystem.com/components/page-headers/#Record-Home

終わりに

もう少しhtmlが簡潔に書ければいいですね。

Discussion