Lightning Web Component　組織のデータを取得して表示させる方法

2023年8月14日

環境
Salesforce

書式
JavascriptAPIを使用します

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

api: プロパティを公開
wire: 組織からデータを取得
getRecod: Lightningデータサービスを使用してデータを取得

操作例
1.JSコード(MyComponent.js)　データを取得する
説明
@api recordId
現在のIdを取得します

@wire{getRecord, {recordId: '$recodId’,fields}}
@wireデコレータでコンポーネントが呼び出されたり、
イベントが発生するたびにgetRecord関数を呼び出します。

サンプルコード

import { LightningElement, api , wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi'
const fields = [
    'Test123__c.Name','Test123__c.Text__c','Test123__c.Datetime__c','Test123__c.CheckBox__c'
];

export default class MyComponent extends LightningElement {
    @api recordId;
    name;
    text;
    checkbox;
    datetime;
    
    @wire(getRecord, { recordId: '$recordId', fields } )
     loadTests ({error, data}) {
        if (error) {
            // エラー処理コード
        } else if (data) {
            this.name = data.fields.Name.value;
            this.text = data.fields.Text__c.value;
            this.checkbox = data.fields.CheckBox__c.value;
            this.datetime = data.fields.Datetime__c.value;
        }
    }
}

2.データを表示します
htmlコード(appComp.html)
書式

lightning-output-field field-name=フィールド名
lightning-record-view-form　record-id={レコードID}　object-api-name="オブジェクトAPI名"

サンプルコード

<template>
    <lightning-card title="レコード表示テスト">
        <lightning-record-view-form
        record-id={recordId}
        object-api-name="Test123__c"
        colums="2">
        <div class="slds-theme_default">
            <lightning-output-field field-name="Name">
            </lightning-output-field>
            <lightning-output-field field-name="Text__c">
            </lightning-output-field>
            <lightning-output-field field-name="CheckBox__c">
            </lightning-output-field>
            <lightning-output-field field-name="Datetime__c">
            </lightning-output-field>
        </div>
    </lightning-record-view-form>
    </lightning-card>
</template>