Salesforce LWCで特定の項目を表示・編集するコンポーネントを作ってみた

これは何？

この記事は「24日後に立派なSalesforceエンジニアになるWEBエンジニア Advent Calendar 2022」の14日目の記事です。11日後に立派なSalesforceエンジニアになるために今日からはLightning Web Component (LWC)でいくつか実際に簡単なコンポーネントを作ってみたいと思います。

何を作る？

レコード詳細ページでオブジェクトと項目を指定して、指定されたものだけを編集したり閲覧したりできるコンポーネントを作る。

オブジェクトのページレイアウトに追加すれば、項目として表示したり編集したりできるようになるが、今回の完成イメージのようにオブジェクトのページレイアウトで設定できる詳細情報とは分けて別の場所に配置したい時に使うコンポーネント。

完成したコンポーネントのイメージ

作り方

今回はレコードページ画面で利用するコンポーネントなのでxml内のtargets　は　lightning__RecordPageを指定してやれば良い。

columns.js-meta.xml

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

コンポーネントを配置したときにオブジェクト名や項目名を指定したいのでxmlでpropertyを設定して、値を受けるjs側は @api デコレータを使う。「表示モード」についてはview,edit,readonlyから選択をさせたいのでdatasourceを指定することで選択リストにする。

columns.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>

columns.js

  @api recordId; // 上記で入力された値を受け取る変数
  @api objectName;
  @api fields;
  @api title;
  @api iconName;
  @api mode;

また完成したコンポーネントのイメージ図の左側にあるように、コンポーネント名を日本語で表記したいのでmasterLabelを指定する。

columns.js-meta.xml

<masterLabel>特定の項目のみ編集or表示する</masterLabel>

項目名は「,」区切りで受け取るが、今回は配列で使いたいからセパレートしておく。

columns.js

  connectedCallback() { // ここで初期化処理を行う
    this.fields = this.fields ? this.fields.split(",") : [];
  }

レコードの項目を表示する部分は標準で用意されているlightning record formを使う。これだけでフォームができてデフォルト値のセットや値の更新までできちゃうから便利！

columns.html

    <lightning-record-form
      record-id={recordId}
      object-api-name={objectName}
      fields={fields}
      mode={mode}
    ></lightning-record-form>

見た目を良くするためにアイコンとタイトルを追加する。iconのリストに書かれているものは全て使うことができるのでお好きなものを選んでね。

columns.html

  <lightning-card title={title} icon-name={iconName}>

  </lightning-card>

まとめ

columns.js

import { LightningElement, api } from "lwc";

export default class Columns extends LightningElement {
  @api recordId;
  @api objectName;
  @api fields;
  @api title;
  @api iconName;
  @api mode;

  connectedCallback() {
    this.fields = this.fields ? this.fields.split(",") : [];
  }
}

columns.html

<template>
  <lightning-card title={title} icon-name={iconName}>
    <lightning-record-form
      record-id={recordId}
      object-api-name={objectName}
      fields={fields}
      mode={mode}
    ></lightning-record-form>
  </lightning-card>
</template>

columns.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>特定の項目のみ編集or表示する</masterLabel>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <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>
</LightningComponentBundle>

これでレコードの一部項目だけを切り出して表示したり編集したりするコンポーネントが完成！
標準で用意されてるコンポーネントを使って作っているので実際に書くコードは思ったより少なかった。

最後に

今回も昨日に引き続きLWCを使って実際にコンポーネントを作ってみました。昨日はhtml部分がなかったので今日は軽く触れてみました。
明日はLWCで動的選択肢リストの作り方についてみていきます。