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

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以外での挙動がおかしいことがある
等、ドキュメントに記載があります。

詳細については以下を参照ください

Salesforce Developers

Salesforce Developer Network: Salesforce1 Developer Resources

まずはここからAppComponentをインストールします。

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

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