Salesforce LWCの設定情報について

これは何？

この記事は「24日後に立派なSalesforceエンジニアになるWEBエンジニア Advent Calendar 2022」の11日目の記事です。14日後に立派なSalesforceエンジニアになるために今日はLightning Web Component (LWC)のxmlで設定する項目について見ていきたいと思います。
設定可能なすべての項目についてはXML Configuration File Elementsに記載されています。ここでは独断と偏見に基づいて設定でよく使う項目についてピックアップしてみていきます。

isExposed

LWCを作るとデフォルトではfalseになっている。このままだとLightningページに表示されないのでtrueに変更する。

test.js-meta.xml

<isExposed>true</isExposed>

masterLabel

lwcのタイトルでLightningアプリケーションビルダーやLightningコンポーネントのリストビューなどで表示される。

test.js-meta.xml

<masterLabel>testコンポーネント</masterLabel>

ここに表示される。

targets

LWCを配置する場所を指定する。

test.js-meta.xml

<targets>
    <target>lightning__RecordPage</target>
</targets>

• lightning__AppPage
• lightning__RecordPage
• lightning__HomePage

あたりをよく使う（気がする）。

targetConfigs

targetConfigsでは異なるtargets毎に詳細な設定を行うことができる。以下のようにするとレコードページにこのコンポーネントを配置したときに指定する公開プロパティを設定することができるようになる。
targetConfigsは以下のようなサブタグを指定することができる。

property

test.js-meta.xml

<targetConfigs>
    <targetConfig targets="lightning__RecordPage">
        <property type="String" name="objectName" label="オブジェクト名" required="true" default="" ></property>
        <property type="String" name="fields" label="項目名(複数の場合は,区切り)" required="true" default="" ></property>
        <property type="String" name="title" label="タイトル" ></property>
        <property type="String" name="iconName" label="アイコン名" default="standard:user_role" ></property>
        <property label="表示モード(view/edit/readonly)" name="mode" type="String" datasource="view,edit,readonly" default="view"/>
    </targetConfig>
</targetConfigs>

また、ここから指定された値はjsで@apiデコレータをつけることで取得することができる。

test.js

export default class test extends LightningElement {
  @api recordId; // これでコンポーネントを配置するときに指定された値を取ってこれる
  @api objectName;
  @api fields;
  @api title;
  @api iconName;
  @api mode;

  connectedCallback() { 
    // fieldsは”,”をセパレータとして入力を促していたので扱いやすく加工する
    this.fields = this.fields ? this.fields.split(",") : [];
  }
}

objects

このコンポーネントがサポートするオブジェクトを指定する。

test.js-meta.xml

<targetConfigs>
    <targetConfig targets="lightning__RecordPage">
        <objects>
            <object>Account</object>
            <object>Contact</object>
        </objects>
    </targetConfig>
</targetConfigs>

上記のように指定した場合は取引先と取引先責任者のレコードページ以外の編集画面ではこのコンポーネントは表示されない。

最後に

今日はLWCでコンポーネントを作るにあたりよく使う設定をまとめました。
他の設定項目について気になる方はぜひこちらをご覧ください。
明日はLWCのライフサイクルについてみていきたいと思います。