先日出勤中に、ピカピカのランドセルを背負った小さなお子さんと笑顔満面のご両親が揃って入学式のために学校へ向かう姿とすれ違い、いよいよ新年度を迎えたんだなとしみじみと感じました。雨上がりではありましたが、とても晴れやかな光景でした。皆さまも新年度を迎え、日に新たにそれぞれの目標に向かってスタートを切られていることと思います。私自身も今年度の目標を掲げ、それに向かってスタートを切りました。その1つが、「お客様の期待に期待以上に応える」ということです。営業としては、当たり前のことですし、常に考えていることではありますが、営業の基本として大切にしたい目標です。今回のブログでは、複数のお客様より紹介してほしいとお話がありました、「SkyVisualEditorでSalesforceのレポートグラフを表示したい」という声にお応えしたいと思います。AppComponentとはAppComponentとは、コンポーネントベースでSkyVisualEditorに独自の機能を配置できる仕組みです。詳細は前回のブログで説明しておりますので、こちらをご覧ください。今回は、以前社内の有志が作成したSalesforceのレポートグラフのAppComponentを紹介します。以下で紹介します内容はサンプルであり、SkyVisualEditorの製品サポート対象外ですので、ご理解の上、ご参考としていただけますと幸いです。今回のAppComponentの完成イメージまずはSkyVisualEditorで作成画面にSalesforceのレポートグラフのAppComponentを配置した画面イメージです。Salesforceで作成したレポートのグラフをSkyVisualEditorの画面上に配置することができるようになります。AppComponentをつくってみようそれでは、いよいよAppComponentをつくってみましょう。今回のAppComponentは次の3つのステップで作成できます。静的リソースにXMLファイルを保存SkyVisualEditorで配置それでは1つずつ紹介していきます。Visualforceコンポーネントを作成まず、Salesforceの設定画面のクイック検索より、「Visualforceコンポーネント」を検索し、[新規]ボタンをクリックします。Visualforceのコンポーネントの作成画面が表示されますので、「表示ラベル」「名前」を任意で設定し、以下のソースを記載し、保存します。次に、Salesforceの設定画面のクイック検索より、「静的リソース」を検索し、[新規]ボタンをクリックします。静的リソースの作成画面が表示されますので、「名前」に"AppComponent"と入力いただき、以下のサンプルソースよりXMLファイルを作成いただき、作成したXMLファイルをSalesforceへ保存してください。下記サンプルソース内の「SVEReportGraph」については、Visualforceコンポーネントを作成した際に設定した名前に差し替えてください。以上でSkyVisualEditorで利用する準備ができましたので、SkyVisualEditorスタジオにログインします。ログイン後、レポートグラフを配置したい画面を開き、画面左側のコンポーネントエリア内の「AppComponent」のセクションに作成したレポートグラフのAppComponentが表示されますので、ドラッグ&ドロップで画面に配置します。AppComponent配置後に、画面右側のコンポーネントプロパティより表示したいレポートAPI名や、サイズ等を設定します。レポートAPI名は、Salesforceのレポートを保存する際に「レポートの一意の名前」で設定したものを利用します。プロパティの設定イメージは以下をご覧ください。最後に、画面をデプロイすれば作業は完了です。今回はSalesforceのレポートグラフをそのまま表示するAppComponentを作成しましたが、以下のリンクにどのような拡張ができるかが記載されていますので、ご参考にしていただき、是非皆さまのご要件に合ったレポートグラフのAppComponentをご作成いただけますと幸いです。今回、レポートグラフのAppComponentを検証した際に、SkyVisualEditorの「タブ」コンポーネントを同時に配置すると、レポートグラフが表示されないという事象がありました。Issuesに公開されていましたので、詳細は以下リンクをご覧ください。tagSalesforceのレポートグラフのAppComponentに関するサンプルは以上です。SkyVisualEditorで画面作成をしているSIerや開発者の方々は、上記サンプルをご参考にしていただき、Salesforce/SkyVisualEditorの標準機能にはないが、複数の画面で共通して利用する機能をAppComponentとしてご作成いただき、開発生産性をあげていただけると幸いです。今後も皆さまの期待にお応えできるような内容を届けていきたいと思います。今年度も皆さま、どうぞ宜しくお願いいたします。Experienceのレコードページをもっと便利にするAppExchangeを社内導入する時に見たい!5つのポイント関連するキーワードSkyVisualEditorTerraSkyBaseについてTerraSkyBaseはクラウドサービスを手掛ける株式会社テラスカイのコンテンツプラットフォームです。