皆様、GWはいかがお過ごしでしたでしょうか?リフレッシュできましたでしょうか?さあ!連休は終わりましたよ、気持ちを切り替えて頑張っていきましょう!(自分にも言い聞かせています...。)では早速、今回紹介するのはこちら!「別Windowを開いて登録(編集)をして閉じたら、画面を自動更新するAppComponentを作ってみた!」と題しまして、よく開発をする際に別ウィンドウを開いてレコードの新規登録や編集など行うことがあるかと思います、そのあと開いたWindowを閉じるのですが、呼び出し元の画面はF5キーなどで更新しないと内容が反映されない!こんなことよくあるかと思います。今回はその問題を解決でき、且つ、SkyVisualEditorで作成したいろいろ画面で使いまわすことができるようにAppComponentにしてみようという内容で記事を書きたいと思います。AppComponentを作成してみようVisualforceコンポーネント(以下、VFコンポーネントとします。)を作成しましょう!今回は2つのVFコンポーネントを作成したいと思います。1.Salesforce標準の新規画面を呼び出すカスタムボタンのAppComponent2.SkyVisualEditorで作成したVisualforceページを呼び出すカスタムボタンのAppComponent使用目的(どんな時につかえる?)例えば、このような場合に要件として上がることが多いです。・項目数が非常に多いような画面で、画面の1部だけを抜き出して編集したい。・新規登録や編集をしたいが遷移はしたくない。・新規登録したいが項目数が多いので別Windowで開きたい。・新規登録の際にパラメータを渡したい。例)登録するレコードごとにレコードタイプが分かれている場合Salesforce標準の新規画面を呼び出すカスタムボタンのAppComponent作成コンポーネントの作成(1)1つ目の「Salesforce標準の新規画面を呼び出すカスタムボタンのVFコンポーネント」から作っていきましょう。Developer組織をご用意いただいて、【開発】から【Visualforceコンポーネント】で新規作成します。表示ラベル:別WindowOPEN(標準画面)とでもしときます。/></apex:component>OpenWindow_StandardURLFOR関数で指定しているActionは取引先責任者専用です。こちらif文でオブジェクトがContactだったらなどで分けると汎用性が上がって良いかもしれません。[accid=RecordId,isdtp='vw'])}";}※他のオブジェクトでは「$Action.【オブジェクト名】.New」で新規が開くのですが取引先責任者のみ「$Action.Contact.NewContact」となるそうです。※Visualforce開発者ガイドには記載がなく少しはまりました。URLFOR関数のパラメータの「accid=RecordId」この部分ですが「accid」これは標準画面に取引先のIdを渡しています。」こちらは標準画面を別Windowで開く際にヘッダーとサイドバーを非表示にするためのパラメータです。.open」をし、「setInterval」で1秒ごとに監視します。閉じられると「location.reload();」で再描画させます。AppComponent.xmlファイルの作成VFコンポーネントも完成したので、SkyVisualEditorのStudioで使えるように、AppComponent.xmlファイルの作成を行いましょう。以下のページからCDKをダウンロードし、AppComponent.xmlファイルを編集すると容易に作成できます。</AppComponents></ComponentDefinition>AppComponent.xml静的リソースにアップロードする静的リソースに「AppComponent」という名前で作成して、xmlファイルをアップロードしてください。完了しましたら、SkyVisualEditorのStudioを起動し、組織に接続してください。・XMLファイルが不正SkyVisualEditorスタジオからSalesforceに接続後にダイアログでエラーが表示されます。「取引先責任者」のデータテーブルもはページブロックの中に配置しています。ページブロックの「ボタン表示領域」の中に配置します。※XMLファイル作成時に配置できる場所は指定も可能です。今回設定は以下のようにしました。:{!record.id}※この書き方で主レコードのIdをVFコンポーネントへ渡しています。開いたページで新規登録して保存したあと、開いてあるWindowを閉じると、自動で更新がかかり、データテーブルに1件の取引先責任者レコードが追加されたことが確認できます。※今回の例では、レコードタイプの選択画面を開いています。商品ごとにレコードタイプが変わる。経費レコード登録の際にレコードタイプで経費の種別が分かれている場合などに利用できるかとおもいます。SVEで作成したVFページを開くためのカスタムボタンAppComponentの作成コンポーネントの作成(2)2つ目のコンポーネントです。・参照用ページを作成しておき、保存後・編集後には遷移先に参照用ページを指定する・カスタムボタンを配置し、ラベルは「閉じる」としておき、OnClickで「window.close();」を実行するVisualforceコンポーネントの作成(VFページを開く用ボタン)表示ラベル:別WindowOPEN(SVE)とでもしときます。/>開きたいVisualforceページ名を指定できるようにします。[id=RecordId])}";URLFOR関数を使い「$Page」でVisualforceページのURLを取得しますパラメータとして親のレコードidを受け取るように「id=RecordId」としておきます。一部分だけ抜粋して掲載します。</AppComponents></ComponentDefinition>AppComponent.xml完成しましたら、静的リソースにアップロードします。SkyVisualEditorのStudioで作成したAppComponentのボタンを配置しデプロイしてください。Experienceの標準の新規登録画面では、一度に複数件のレコードを登録したり、一括で編集したりすることができません。SkyVisualEditorを利用いただければ、一括登録や一括編集の画面も簡単に作成することができます。以下はSkyVisualEditorで作成したVisualforceページの利用例になります。※今回実装していませんが、SkyVisualEditorから出力する画面は、LightningDesignSystemのスタイル適用することもできます。関連する記事SkyVisualEditorを使って関連リストAppComponentを作ってみたSkyVisualEditorのCTI対応AppComponentを作ってみたSkyVisualEditorでlightningの新機能「recordEditForm」を利用するAppComponentLightningコンポーネントをSkyVisualEditorで使用するには関連するキーワードAppComponentSkyVisualEditorTerraSkyBaseについてTerraSkyBaseはクラウドサービスを手掛ける株式会社テラスカイのコンテンツプラットフォームです。