Developer

【Lightning Web Component】組織のデータを表示させよう【Salesforce】

Developer
この記事は約6分で読めます。

こんにちは、アンダーソンです。
引き続きLWCについてやっていきます。
今回は組織のデータを取得して表示させるというのをやっていきます。

スポンサーリンク

デコレータとJavascriptAPIをインポートする

今回はレコードページに表示させるコンポーネントを作りました。
現在表示しているレコードの項目の値を表示させるイメージです。

まず組織のレコードを取得するにはデコレータのインポートと、
JavascriptAPIを使用します。
まずJavaScript側で上記の宣言をしていきます。

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

これでOKです。

このあと説明しますが、それぞれの役割です。
・apiはプロパティを公開します。
・wireは組織からデータを取得するのに必要です。
・getRecordはアダプタ関数と言われ、Lightning データサービスを使用してデータを取得することができます。
今回するくらいのことであればApexは不要で済みます。

次に表示させたいデータを設定します。

const fields = [   
    'Test1__c.Name',
    'Test1__c.Text__c',
    'Test1__c.Datetime__c',
    'Test1__c.CheckBox__c',
    'Test1__c.PickList__c'
];

ここでは取得したデータが入る定数を宣言しています。

データを取得する

次に先ほどインポートしたデコレータとJavaScriptを使用してデータを取得していきます。まず

@api recordId;

recordIdという変数を公開状態にしておきます。こうすることで現在のIdを取得することが可能になります。
次にデータの取得ですが、

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

@wireデコレータでコンポーネントが呼び出されたり、何かイベントが発生するたびにgetRecordアダプタ関数を呼び出すことが可能になります。
$recordIdは変更されたIdが入ります。今回はレコードページへのコンポーネントの表示なので、ページが切り替わる、違うレコードに切り替わるたびにこの値が変化し、
recordIdに代入されます。
recordIdに設定されたレコードの項目が先ほど定数として宣言した
項目に入っていくというイメージです。

次にエラーとデータを返す関数を呼び出し、そこで表示させる項目に対して値をセットしていきます。

loadTest1 ({error, data}) {
    if (error) {
        // TODO: Error handling
    } 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;
        this.picklist = data.fields.PickList__c.value;
    }
}

this.項目名はあらかじめ宣言していたものです。
そこに返されたdataに含まれている定数filedsの中にある項目名のvalueを取得する
という形で値をセットしています。

表示を綺麗にしてみよう

この状態でレコードページをみてみると下記のような感じになります。

ソースは下記のような感じです。
まあpタグで囲んでるだけなんで仕方ないですね。

<template>
    <div>
        <lightning-card title="レコード表示テスト">
            <div>
                <p>{name}</p>
                <p>{text}</p>
                <p>{checkbox}</p>
                <p>{datetime}</p>
                <p>{picklist}</p>
            </div>
        </lightning-card>
    </div>
</template>

てことでもう少し見た目を綺麗にしていきたいと思います。

    <lightning-record-view-form
        record-id={recordId}
        object-api-name="Test1__c"
        colums="1">
        <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>
            <lightning-output-field field-name="PickList__c">
            </lightning-output-field>
        </div>
    </lightning-record-view-form>

こんな感じで表示を変えてみました。

しっかり表示も変わってますね。
他にも編集時の表示や、作成画面などの表示もありますが、
今回はあくまでもView画面なのでこんな感じにしています。

まとめ

今回は組織からレコードIDを取得してその内容を表示させるというところをやってみました。まだ一つのコンポーネントの話なのでそこまで難しくないかなとは思います。
次回くらいからネストさせて、イベント用意してとかもやって行こうかなと思います。

今回のコードもGitHubに載せています。ぜひ参考にしてみてください。

その他の開発に関する記事はこちらです。

Developerも含めた試験問題にチャレンジしてみましょう。

コメント