tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:AppExchangeアイコンメニュー作成をインストールしてみました

f:id:tyoshikawa1106:20140830113932p:plain

AppExchangeでSalesforce Labsが提供しているアプリ「アイコンメニュー作成」が8/22にリリースされていたのでインストールしてみました。メニュー画面を簡単に作成できる便利なアプリです。

アイコンメニュー作成


インストールするとメニューアプリケーションが追加され、メニュー情報タブとメニュータブが使用できます。メニュー情報タブでメニュー情報を登録できるみたいです。

f:id:tyoshikawa1106:20140830114955p:plain


メニュータブを選択するとChatterを表示アイコンがデフォルトで用意されていました。

f:id:tyoshikawa1106:20140830114531p:plain


Chatter表示アイコンを選択するとChatterフィードが表示されました。

f:id:tyoshikawa1106:20140830114743p:plain:w300

新しいメニューの作成

メニュー情報の新規作成では初めにレポートタイプを選択するみたいです。メニュー、セクション、アイテムの順番でレコードを用意していきます。セクション、アクション、はそれぞれ詳細ページの関連リストから作成していくことも可能です。

f:id:tyoshikawa1106:20140830115243p:plain


登録内容はこんな感じでした。必須項目はタイトルのみとなっています。

f:id:tyoshikawa1106:20140830115427p:plain


セクション関連リストから新規ボタンをクリックするとレコードタイプの選択画面が表示されるので、セクションを選択します。

f:id:tyoshikawa1106:20140830115805p:plain


セクション情報の入力内容はこんな感じです。

f:id:tyoshikawa1106:20140830120212p:plain


同じようにアイテムを登録します。

f:id:tyoshikawa1106:20140830120453p:plain


メニュー、セクション、アイテムとこの3つが最低必要な情報だと思います。
f:id:tyoshikawa1106:20140830122714p:plain


アイテム情報の詳細ページからはアイコンを指定することができます。

f:id:tyoshikawa1106:20140830122904p:plain:w300


アイコン選択画面はVisualforceページで作成されていました。

f:id:tyoshikawa1106:20140830122954p:plain


レスポンシブ対応もされていて画面サイズに合わせて最適化されています。

f:id:tyoshikawa1106:20140830123056p:plain:w300


呼び出し元のリンクは数式項目で用意されています。リンクテキストに [ ] が付くと大分雰囲気が変わりますね。

f:id:tyoshikawa1106:20140830123917p:plain


アイコンを用意するリンクも紹介されていました。使い方を覚えれば便利そうなサイトでした。

Icons DB - free custom icons

f:id:tyoshikawa1106:20140830130301p:plain


設定の仕方が間違っているみたいアイコンの選択時に反映されなかったのと、登録したメニュー情報の表示の仕方がよくわからなかったので今回の確認はここまでにしようと思います。このパッケージは未管理パッケージになっているのでVisualforceのコードを参照することもできます。こんな感じの機能の実装方法を確認したりできてすごく良かったです。

f:id:tyoshikawa1106:20140830131517p:plain

追記

Twitterでとりあえず動作確認するための方法を教えてもらったので試してみました。初期レイアウトには表示されていないのですが、アイコンIDという項目があるのでそちらにドキュメントIDを直接指定することで設定できるみたいです。

f:id:tyoshikawa1106:20140830202903p:plain


ドキュメントIDはドキュメントオブジェクトのMenuIconsフォルダ内で確認できます。

f:id:tyoshikawa1106:20140830203049p:plain


これでひとまずアイコンの指定もできましたので動作確認の続きをしたいと思います。とりあえず必須項目他すべての項目に値を入力してメニュータブから画面を表示してみました。

f:id:tyoshikawa1106:20140830203731p:plain

デフォルトのままですね。。値の登録以外にもまだ設定が必要みたいです。URLパラメータとかかなと思うのですが、とりあえずパッケージのVFページを確認してみました。

ページ
  • vfChooseIcon
  • vfMenuPage
  • vfMenuSimpleCss
  • vfMenuSmallTileCss
  • vfMenuSmallTileNBCss
  • vfMenuTemplate
  • vfMenuTileCss
  • vfMenuTileNBCss
  • vfMenuChatterBlockCss
Apexクラス
  • clsMenuControl
  • clsChooseIcon


vfMenuPageがメニュータブの画面。vfChooseIconがアイコン設定画面です。CSSとTemplateはそれぞれのページ内で呼び出されています。


とりあえずApexクラスを確認してみたところURLパラメータの値を取得しているところがありました。

f:id:tyoshikawa1106:20140830211359p:plain


33行目のsfdc.tabNameの部分です。通常タブを選択した際にしてされるパラメータですが、ここにメニュー情報オブジェクトにあるタブID項目の値をセットすればいいみたいです。

f:id:tyoshikawa1106:20140830211758p:plain:w300


これで登録したメニュー情報を画面に表示できました。

f:id:tyoshikawa1106:20140830211853p:plain


メニュースタイルを変更してあげれば表示形式が変わります。アイコン表示の枠無しなどの設定ができました。

f:id:tyoshikawa1106:20140830212243p:plain:w300


デフォルトのChatterメニューが表示されていますが、vfMenuTemplate内に処理があったのでこのあたりが関係していそうです。

f:id:tyoshikawa1106:20140830212542p:plain