こんにちは、アンダーソンです。
引き続き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も含めた試験問題にチャレンジしてみましょう。
コメント