2018.02.21

SkyVisualEditorでlightningの新機能「recordEditForm」を利用するAppComponent

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

2/11にSpring’18がリリースされました。
みなさん早速新機能をいろいろと試されていることだと思います。
さて、Spring’18では新たに「lightning:recordEditForm」および「lightning:inputField」というLightningコンポーネントが追加されました。
今回はSkyVisualEditorからrecordEditFormとinputField、そしてWinter’18で追加されたdataTableを配置できるAppComponentをご紹介します。

※完成イメージは以下のようになります。

完成イメージ

当AppComponentでは
・lightning:recordEditFormおよびlightning:inputFieldによる主オブジェクトの編集
・lightning:dataTableによる子オブジェクトの一覧表示
ができます。

dataTableはソートや列幅変更も可能です。

制限事項として
・主オブジェクトに主従・参照項目を配置した場合正常に動作しません(inputFieldの制限。LEX上でしか動きません)
・子オブジェクトは参照のみで編集や追加は出来ません
・新規時は当AppComponentは表示されません。ページを編集で開いてください

また、recordEditFormは
・項目間連動が動く
・項目レベルセキュリティやレコードの権限が適用される
・選択リストの値はレコードタイプを見てくれる
・Chrome以外での挙動がおかしいことがある
等、ドキュメントに記載があります。

詳細については以下を参照ください
まずはここからAppComponentをインストールします。

リンクをクリックすると以下の画面が表示されます。
AppComponentをインストールしたい組織のID/パスワードを入れるとインストールが開始されます。

インストールが完了したらSkyVisualEditorを開き、AppComponent「Lightning親子表示」を配置します。

配置後、プロパティを以下のように設定します。

主オブジェクト項目は以下のように設定します

子オブジェクト項目は以下のように設定します

これでデプロイすると以下のようになります。

なお、当AppComponentはサポート対象外です。
ご利用は自己責任でお願いします。
今回のソースをGitHubに置きました
17 件

関連する記事