サンプル LWC : Contact Profile Card コンポーネント

contactProfileCard.css

:host {
    /* Custom CSS variables for reusing style in this component and child components */
    --primary-color: #00373e;

    /* Text styling hooks */
    --slds-g-color-neutral-base-10: var(--primary-color);
    --slds-g-color-neutral-base-30: var(--primary-color);

    /* Border styling hooks */
    --slds-g-color-border-base-1: var(--primary-color);

    /* Icon styling hooks */
    --sds-c-icon-color-foreground: var(--primary-color);
}

.profile-card {
    background-color: #bddad7;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.profile-photo {
    border-radius: 50%;
    width: 70px;
}

contactProfileCard.html

<template>
    <article class="slds-card profile-card">
        <div class="slds-card__body slds-card__body_inner">
            <c-error-panel
                lwc:if={error}
                errors={error}
                friendly-message="Failed to retrieve contact profile"
            ></c-error-panel>
            <template lwc:elseif={hasData}>
                <!-- Avatar, name and location -->
                <div class="slds-grid slds-wrap">
                    <div class="slds-align-middle">
                        <img
                            class="profile-photo"
                            src={photoURL}
                            alt="Profile picture"
                        />
                    </div>
                    <div class="slds-align-middle slds-p-left_medium">
                        <h1 class="slds-text-heading_medium">
                            <strong>{name}</strong>
                        </h1>
                        <h2>{mailingCity}, {mailingState}</h2>
                    </div>
                </div>

                <lightning-record-view-form
                    record-id={recordId}
                    object-api-name="Contact"
                >
                    <!-- 2 column layout -->
                    <div
                        class="slds-grid slds-border_bottom slds-p-vertical_medium"
                    >
                        <div class="slds-col slds-size_1-of-2">
                            <lightning-output-field field-name="External_Id__c">
                            </lightning-output-field>
                            <lightning-output-field field-name="MobilePhone">
                            </lightning-output-field>
                        </div>
                        <div class="slds-col slds-size_1-of-2">
                            <lightning-output-field
                                field-name="Preferred_Name__c"
                            >
                            </lightning-output-field>
                            <lightning-output-field field-name="Email">
                            </lightning-output-field>
                        </div>
                    </div>

                    <!-- Single column layout with icons -->
                    <div class="slds-grid slds-wrap slds-p-top_medium">
                        <div
                            class="slds-size_1-of-12 slds-align_absolute-center"
                        >
                            <lightning-icon
                                icon-name="utility:einstein"
                                size="x-small"
                                variant="inverse"
                                alternative-text="Einstein icon"
                            ></lightning-icon>
                        </div>
                        <div class="slds-size_11-of-12">
                            <lightning-output-field field-name="Guest_Type__c">
                            </lightning-output-field>
                        </div>
                        <div
                            class="slds-size_1-of-12 slds-align_absolute-center"
                        >
                            <lightning-icon
                                icon-name="utility:cart"
                                size="x-small"
                                variant="inverse"
                                alternative-text="Cart icon"
                            ></lightning-icon>
                        </div>
                        <div class="slds-size_11-of-12">
                            <lightning-output-field
                                field-name="Lifetime_Value__c"
                            >
                            </lightning-output-field>
                        </div>
                    </div>
                </lightning-record-view-form>
            </template>
        </div>
    </article>
</template>

contactProfileCard.js

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';

import NAME_FIELD from '@salesforce/schema/Contact.Name';
import MAILING_CITY_FIELD from '@salesforce/schema/Contact.MailingCity';
import MAILING_STATE_FIELD from '@salesforce/schema/Contact.MailingState';
import PHOTO_URL_FIELD from '@salesforce/schema/Contact.Photo_URL__c';

const fields = [
    NAME_FIELD,
    MAILING_CITY_FIELD,
    MAILING_STATE_FIELD,
    PHOTO_URL_FIELD
];

export default class ContactProfileCard extends LightningElement {
    @api recordId;

    @wire(getRecord, { recordId: '$recordId', fields })
    contact;

    get hasData() {
        return this.contact?.data !== undefined;
    }

    get error() {
        return this.contact?.error;
    }

    get name() {
        return getFieldValue(this.contact.data, NAME_FIELD);
    }

    get mailingCity() {
        return getFieldValue(this.contact.data, MAILING_CITY_FIELD);
    }

    get mailingState() {
        return getFieldValue(this.contact.data, MAILING_STATE_FIELD);
    }

    get photoURL() {
        const photoURL = getFieldValue(this.contact.data, PHOTO_URL_FIELD);
        return photoURL
            ? photoURL
            : 'https://res.cloudinary.com/btahub/image/upload/v1708357811/ntbg5p1mwixury672dxy.png';
    }
}

contactProfileCard.js-meta.xml

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>61.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Contact Profile Card</masterLabel>
    <description>Card that displays Contact record highlights</description>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
              <object>Contact</object>
            </objects>
          </targetConfig>      
    </targetConfigs>
</LightningComponentBundle>