2017が先日7月21日(金)に開催されおかげさまで大盛況でございました。ご来場くださいました皆様本当にありがとうございます。今回のブログの内容はDeepDiveセッションで講演しました「Salesforceの入力をもっと便利に!アドバンスドUX実現のためのコンポーネント開発手法を知る」のDEMO内容で、SkyVisualEditorを使いExcelからコピペでデータを登録できるAppComponentの紹介をいたしました。セッション内でお約束しましたこのAppComponentの作成の仕方を紹介していきたいと思います。・本ブログの内容は個別の開発ですので標準サポートの対象外でございます。・ご利用につきましては、ご自身の判断でご利用いただきテスト等は行ってください。・コードの内容についてはサンプル程度とお考え下さい。ご質問はお受けできません。AppComponentの紹介Excelからコピペコピペ後AppComponentは、上の画像で言いますとExcelのデータを張り付けるダイアログの部分になります。Excelからコピペというカスタムボタンをクリックして開きます。このダイアログの部分はVisualforceコンポーネントで作成しております。このVisualforceコンポーネントをSkyVisualEditorの部品として配置できるようにするというものになります。※Excelデータ列の順番とVisualforceページのテーブルの列項目の順番は一致している必要があります。選択用のチェックボックス、カスタムボタンは除きます。SkyVisualEditorのStudioでの配置、設定の仕方Studioでの設定1カスタムボタンの配置SkyVisualEditorの標準のコンポーネントであるカスタムボタンを配置します。配置場所は任意の場所でかまいませんが、テーブルの近くが良いかと思います。】にページスクリプトに作成したJavaScriptを呼び出す設定をします。以下で作成していく「ExcelからコピペAppComponent」を配置します。配置場所は任意の場所でかまいませんが、テーブルの下辺りに配置したら良いと思います。設定するプロパティは【対象テーブルのId】【行追加メソッド】の2つです。今回のExcelからコピペAppComponentの作成手順は以下になります。Visualforceコンポーネントの作成Visualforceコンポーネントの構成要素は3つになります。i.受け取る属性Studioのプロパティから設定される【対象テーブルのId】【行追加メソッド】の2つii.JavaScriptメインロジックの部分になります。今回はApexは使用せずJavaScriptで行います。張り付けられたExcelデータの解析とデータのセットをします。開いたダイアログでデータを張り付ける為のテキストエリア処理を実行させるボタンそれでは完成コードを元に解説していきます。開発のメニューから【Visualforceコンポーネント】を選択します。Visualforceコンポーネント名は【CopyDialog】としておきます。【対象テーブルのId】ダイアログやJavaScriptの処理を呼び出す時に目印として受け渡します。【行追加メソッド】SkyVisualEditorが持っていますApexの行追加メソッドをそのまま利用します。データ型が「ApexPages.Action」でメソッドが受け取れます。JavaScriptでデータを張り付ける処理を作成するJavaScriptの解説をします。【pasteDataToArray】Excelからコピーして貼り付けられたデータを配列で返します。文字列に変換してセットします。※SkyVsialEditorのマスター取得機能の流用です。【setRecordData】ダイアログのボタンをクリックしてActionが呼ばれた後に、oncompleteの処理としてこのメソッドが呼ばれます。Actionが呼ばれるとデータテーブルに【tableAddRows】でセットした分の行が作成されますので、そこにExcelからコピーして貼り付けられたデータを貼り付けていく処理です。「ダイアログ部分」ダイアログ部分ですが、divで囲みこの部分がダイアログとして開きます。/>】Visualforceのコマンドボタンを利用します。クリックでJSの処理、次にSkyVisualEditorのメソッドを呼びだす。oncompleteで更にJSの処理を行います。ダイアログ呼び出し用のページスクリプトの作成ダイアログを呼び出す処理です。UIを利用しているのでそのまま利用しダイアログを開きます。このスクリプトは共通して使いますのでページスクリプトに記述します。XML定義ファイルの作成AppComponent.xmlファイルを編集します。AppComponent.xmlファイルはCDKをダウンロードして必要な部分を編集してください。】部分にとApexComponentの部分とPropertiesの部分になります。CDKのダウンロードは以下からできます。anyPlaceをtrueにすることでどこでも配置が可能になります。ApexAttributeのvar属性とPropertiesの子要素のname属性が一致している必要があります。】の部分ApexComponentの子要素、Propertiesの子要素を編集してください。仕上げに1.作成したVisualforceコンポーネントが保存されていることを確認してください。2.AppComponent.xmlファイルを「AppComponent」という名前で静的リソースにアップしてください。まとめ今回はAppComponentの開発の仕方を説明しましたが、パッケージングまではしていません。いろいろな組織のページで作成するにはAppExchangeパッケージにしていただけると、他組織でも利用することができるようになります。今回は、皆様に完成コードを提供しておきたいと思います。こちらを参考に独自のAppComponentを作成されてもよいと思います。そのまま作成される場合には以下のことに注意をお願いいたします。※このAppComponentは新規作成時のみの使用を想定しています。編集用では使えません。おまけセッションでは、ボタンのラベルを変えたり、表示位置を右にしたいなどの要望に対応できるようにプロパティを追加したりしましたのでおまけとしましてプロパティを追加したバージョンを掲載しておきます。ボタンの名称を指定できるようにしています。ボタンの位置も指定できるようにしています。</div></apex:component>Visualforceコンポーネント:CopyDialogAppComponent.xmlファイル静的リソースに【AppComponent】という名前でアップロードしてください。</AppComponents></ComponentDefinition>AppComponent.xmlダイアログ開くためのページスクリプトですSkyVisualEditorのStudioでページスクリプトに貼り付けます。カスタムボタンを配置し、プロパティを設定します。関連する記事SkyVisualEditorを使って関連リストAppComponentを作ってみた別Windowを開いて登録(編集)をして閉じたら、画面を自動更新するAppComponentを作ってみた!SkyVisualEditorのCTI対応AppComponentを作ってみたSkyVisualEditorでlightningの新機能「recordEditForm」を利用するAppComponent関連するキーワードAppComponentSkyVisualEditorTerraSkyBaseについてTerraSkyBaseはクラウドサービスを手掛ける株式会社テラスカイのコンテンツプラットフォームです。