こんにちは、アンダーソンです。
今回はLWCからApexを呼び出して、組織のデータを取得する方法についてみていきます。
Apexを作成
まずLWCから呼び出せるApexを作成していきます。
今回はmyComponentControllerという名前のApexを作成し、簡単な検索ワードを受けて
SOQLで検索しそのリストを返すという内容にしていきます。
まずLWCから呼び出せるApexメソッドは
- @AuraEnabledがついていること
- staticであること
- publicもしくはglobalであること
が条件ですので、ここは抑えておきましょう。
public with sharing class myComponentController {
@AuraEnabled
public static List<Test1__c> serachTestRecord( String serachWord ){
serachWord = serachWord.trim();
if ( serachWord == null ) {
return [
SELECT
Id,
Name,
Text__c,
CheckBox__c,
Datetime__c,
PickList__c
FROM Test1__c
];
}
serachWord = '%' + serachWord + '%';
return [
SELECT
Id,
Name,
Text__c,
CheckBox__c,
Datetime__c,
PickList__c
FROM Test1__c
Where Name Text__c :serachWord
];
}
}
めちゃくちゃ簡単ですがテキストの検索をするようにしてみました。
入力が何もない場合は全て返すようにしています。
呼び出すJavaScriptを作成
次は作成したApexを呼び出すJavaScriptを書いていきます。
LWCではあらかじめApexのコントローラとメソッドをインポートしておいて、
それをコード内で使用するという流れになります。
import serachRecord from '@salesforce/apex/myComponentController.serachTestRecord';
さきほど作成したコントローラとメソッドをインポートしてJavaScript内で使用する変数に置き換えました。
ではこれを呼び出す関数を作成していきます。
changeWord(event){
this.searchWord = event.target.value;
}
search(){
this.searchWord = this.searchWord;
serachRecord({serachWord: this.searchWord})
.then (result => {
this.tests = result;
})
}
これでOKです。
changeWordは文字が入力されるたびに検索文字を変更します。
search関数は呼ばれるとApexの先ほどインポートして用意しておいたメソッドを
呼び出して検索文字を投げてくれます。
返却に問題がなければtestsの中に返却値を入れるという流れです。
さらにこれに応じたhtmlも編集していきます。
ちょっとコンポーネント系のデザインがまだ掴めていなかったので
熊追跡のTrailheadを参考にしています。
<template for:each={tests} for:item="test">
<lightning-layout key={test.Id} size="3" class="slds-p-around_x-small">
<lightning-card title={test.Name}>
<div class="slds-p-horizontal_small">
<div class="slds-media">
<div class="slds-media__body">
<p class="slds-m-bottom_xx-small">{test.Text__c}</p>
<p class="slds-m-bottom_xx-small">{test.CheckBox__c}</p>
<p class="slds-m-bottom_xx-small">{test.Datetime__c}</p>
<p class="slds-m-bottom_xx-small">{test.PickList__c}</p>
</div>
</div>
</div>
</lightning-card>
</lightning-layout>
</template>
templateの中でfor:eachとfor:itemで宣言することで繰り返し処理を意味します。
VFで言うところのvalueとvarの関係です。
これで実行してみると下記のようになります。

ちゃんと検索文字に引っかかって出てきてますね。
まとめ
今回はLightningWebComponentからApexの呼び出し方についてまとめてみました。
簡単な検索画面ですが、応用してレコードの編集とかにも使えそうです。
その辺もまた勉強してお伝えしていきたいと思います。
今回のコードもGitHubに載せていますのでぜひ参考にしてみてください。
おまけ
今回Apexの呼び出しが一回なので簡単に実装できていますが、
これがいくつも呼び出しとなるとかなりめんどくさいコーディングになってきます。
そこで調べているとこのブログでものすごく楽な方法があったのでご紹介させていただきます。

ポイントはasync関数の中でawaitさせて非同期で取得しているのでコードがスッキリしています。
こんなやり方もあるのか。。。さすがです。
コメント