Dynamics CRM 2011 リボンのカスタマイズ パート 5


みなさん、こんにちは。

今回でリボンのカスタマイズシリーズは終わりです。最終回は
テンプレートの機能を紹介します。

リボンのコントロールは、複数の表示形式があります。以下に
その例を挙げてみます。

[アイコン大]
image

[文字とアイコン小]
image

[アイコン小のみ]
image

リボンには複数のコントロールをまとめている単位としてグループが
ありますが、グループ内のコントロールも様々なものが混在しています。
またスケーリング時の動作も、グループによって異なります。

[取引先担当者グリッドの既定のタブ、最初のグループ]
image

[スケーリング時]
image

テンプレートを利用すれば、このような動作をきめ細かく制御可能です。

Templates 要素

まずは RibbonDiffXml の Template 要素から解説します。サンプルとして
以下のような Templates 要素を用意しました。

<Templates>
  <RibbonTemplates Id=”Mscrm.Templates”>
    <GroupTemplate Id=”MyTemplate”>
      <Layout Title=”Large”>
        <OverflowSection Type=”OneRow” TemplateAlias=”m1″ DisplayMode=”Large”/>
      </Layout>
      <Layout Title=”MediumThreeRow”>
        <OverflowSection Type=”ThreeRow” TemplateAlias=”m1″ DisplayMode=”Medium”/>
      </Layout>
      <Layout Title=”Small”>
        <OverflowSection Type=”ThreeRow” TemplateAlias=”m1″ DisplayMode=”Small”/>
      </Layout>            
      <Layout Title=”Popup” LayoutTitle=”Large” />
    </GroupTemplate>
  </RibbonTemplates>
</Templates>

GroupTemplate 要素

テンプレートは、グループレベルでの指定が可能です。その際に指定
する Template として、Id 属性の値を利用します。

Layout 要素

1 つの GroupTemplate 内に、複数の Layout を保持できます。これは
スケーリングで利用されるコントロールのレイアウト情報です。ここでは
Large、MediumTreeRow、Small、Popup を作成しています。

OverflowSection 要素

1 つのLayout 内には、複数のレイアウト要素である OverflowSection
を保持できます。ここでは各レイアウトごとに 1 つだけ定義しています。
属性は以下の通りです。

Type : 列のタイプを指定します。アイコン大を表示するためには OneRow
が必須ですが、他は TwoRow、ThreeRow 等から選択できます。
DisplayMode : コントロールの表示形式です。アイコン大が Large、
アイコン小と文字が Medium、アイコン小が Small です。
TemplateAlias : 各コントロールに指定する Alias 名です。この機能で
同じグループ内のコントロールでも異なる表示形式を選択できます。

サンプルの編集とテスト

では早速試してみましょう。サンプルはパート 3 で紹介したカスタム
グループ追加を利用します。

RibbonDiffXML の編集

1. addacustomgrouptoanexistingtabforaspecificentity.zip を
デスクトップ等任意の場所にコピーします。

2. zip を解凍して、customizations.xml をデスクトップ等任意の場所に
コピーします。

3. customizations.xml を Visual Studio 2010 で開いて、前回まで
と同じ手順でスキーマを読み込ませます。

4. Templates 要素を以下のように書き換えます。

<Templates>
  <RibbonTemplates Id=”Mscrm.Templates”>
    <GroupTemplate Id=”MyTemplate“>
      <Layout Title=”Large”>
        <OverflowSection Type=”OneRow” TemplateAlias=”m1” DisplayMode=”Large”/>
      </Layout>
      <Layout Title=”MediumThreeRow”>
        <OverflowSection Type=”ThreeRow” TemplateAlias=”m1” DisplayMode=”Medium”/>
      </Layout>
      <Layout Title=”Small”>
        <OverflowSection Type=”ThreeRow” TemplateAlias=”m1” DisplayMode=”Small”/>
      </Layout>            
      <Layout Title=”Popup” LayoutTitle=”Large” />
    </GroupTemplate>
  </RibbonTemplates>
</Templates>

5. 新しく作成したテンプレートを利用するため、グループ定義も書き換えます。
グリッド用のグループ定義を探して、以下のようにグループの Template と
各コントロールの TemplateAlias 属性を更新します。

<CustomAction Id=”Sample.contact.grid.CustomGroup.CustomAction” Location=”Mscrm.HomepageGrid.contact.MainTab.Groups._children” Sequence=”140″>
  <CommandUIDefinition>
    <Group Id=”Sample.contact.grid.CustomGroup.Group” Command=”Sample.contact.grid.CustomGroup.Command” Title=”$LocLabels:Sample.contact.CustomGroup.Title” Sequence=”29″ Template=”MyTemplate” Image32by32Popup=”$webresource:sample_/icons/TIcon32x32.png”>
      <Controls Id=”Sample.contact.grid.CustomGroup.Controls”>
        <Button Id=”Sample.contact.grid.CustomGroup.Button.A” Command=”Sample.contact.CustomGroup.Button.A.Command” Sequence=”10″ LabelText=”$LocLabels:Sample.contact.CustomGroup.Button.A.LabelText” ToolTipTitle=”$LocLabels:Sample.contact.CustomGroup.Button.A.LabelText” ToolTipDescription=”$LocLabels:Sample.contact.CustomGroup.Button.A.Description” TemplateAlias=”m1” Image16by16=”$webresource:sample_/icons/AIcon16x16.png” Image32by32=”$webresource:sample_/icons/AIcon32x32.png” />
        <Button Id=”Sample.contact.grid.CustomGroup.Button.B” Command=”Sample.contact.CustomGroup.Button.B.Command” Sequence=”20″ LabelText=”$LocLabels:Sample.contact.CustomGroup.Button.B.LabelText” ToolTipTitle=”$LocLabels:Sample.contact.CustomGroup.Button.B.LabelText” ToolTipDescription=”$LocLabels:Sample.contact.CustomGroup.Button.B.Description” TemplateAlias=”m1” Image16by16=”$webresource:sample_/icons/BIcon16x16.png” Image32by32=”$webresource:sample_/icons/BIcon32x32.png” />
        <Button Id=”Sample.contact.grid.CustomGroup.Button.C” Command=”Sample.contact.CustomGroup.Button.C.Command” Sequence=”30″ LabelText=”$LocLabels:Sample.contact.CustomGroup.Button.C.LabelText” ToolTipTitle=”$LocLabels:Sample.contact.CustomGroup.Button.C.LabelText” ToolTipDescription=”$LocLabels:Sample.contact.CustomGroup.Button.C.Description” TemplateAlias=”m1” Image16by16=”$webresource:sample_/icons/CIcon16x16.png” Image32by32=”$webresource:sample_/icons/CIcon32x32.png” />
      </Controls>
    </Group>
  </CommandUIDefinition>
</CustomAction>

6. Layout の名前が違うので、スケーリングの情報も更新が必要です。

<CustomAction Id=”Sample.contact.grid.CustomGroup.MaxSize.CustomAction” Location=”Mscrm.HomepageGrid.contact.MainTab.Scaling._children” Sequence=”150″>
  <CommandUIDefinition>
    <MaxSize Id=”Sample.contact.grid.CustomGroup.MaxSize” GroupId=”Sample.contact.grid.CustomGroup.Group” Sequence=”21″ Size=”Large” />
  </CommandUIDefinition>
</CustomAction>
<CustomAction Id=”Sample.contact.grid.CustomGroup.Popup.CustomAction” Location=”Mscrm.HomepageGrid.contact.MainTab.Scaling._children” Sequence=”180“>
  <CommandUIDefinition>
    <Scale Id=”Sample.contact.grid.CustomGroup.Popup.1″ GroupId=”Sample.contact.grid.CustomGroup.Group” Sequence=”220” Size=”Popup” />
  </CommandUIDefinition>
</CustomAction>

7. ファイルを保存し、ソリューションに上書きしてから、組織に
インポートしてください。

8. インポート完了後、ワークプレースの取引先担当者をクリックします。
以下のようにカスタムグループが確認できます。英語になっているのは、
LocLabels に日本語を追加しなかったためです。

image

9. Internet Explorer の幅を変えて、表示領域を狭くします。Sequence
を 220 にしたため、一番最後の Popup 化します。

image

スケーリング動作の追加

1. では次に、スケーリングのパターンを増やしてみます。Scale を以下のように
既存のものの上部に追加してください。各 ID を一意にすることと、Sequence に
注意してください。

<!– Add Start–>
<CustomAction Id=”Sample.contact.grid.CustomGroup.Scale.1.CustomAction” Location=”Mscrm.HomepageGrid.contact.MainTab.Scaling._children” Sequence=”160″>
  <CommandUIDefinition>
    <Scale Id=”Sample.contact.grid.CustomGroup.Scale.1″ GroupId=”Sample.contact.grid.CustomGroup.Group” Sequence=”200″ Size=”MediumThreeRow” />
  </CommandUIDefinition>
</CustomAction>
<CustomAction Id=”Sample.contact.grid.CustomGroup.Scale.2.CustomAction” Location=”Mscrm.HomepageGrid.contact.MainTab.Scaling._children” Sequence=”170″>
  <CommandUIDefinition>
    <Scale Id=”Sample.contact.grid.CustomGroup.Scale.2″ GroupId=”Sample.contact.grid.CustomGroup.Group” Sequence=”210″ Size=”Small” />
  </CommandUIDefinition>
</CustomAction>
<!– Add End –>
<CustomAction Id=”Sample.contact.grid.CustomGroup.Popup.CustomAction” Location=”Mscrm.HomepageGrid.contact.MainTab.Scaling._children” Sequence=”180″>
  <CommandUIDefinition>
    <Scale Id=”Sample.contact.grid.CustomGroup.Popup.1″ GroupId=”Sample.contact.grid.CustomGroup.Group” Sequence=”220″ Size=”Popup” />
  </CommandUIDefinition>
</CustomAction>

2. 上記の設定で、最大時は Large 定義、その後 MediumThreeRow、Small
Popup の順で表示が変わります。変更を加えた後、以下のような表示と
動作となります。

[最大表示時]
image

[その次の段階]
image

[さらに次の段階]
image

[最後は Popup 化で、Popup の中身は最大表示と同じ]
image

複数の TemplateAlias

現在は、3 つのボタンが全て同じように変化していきます。最後に
この動作をカスタマイズします。ボタン A が常に最大のままに
なるように、また Popup 化の中身が ボタン A が最大、残りが
小アイコンと文字になるように変更します。

1. MyTemplate の各 Layout 要素に OverflowSection を追加
します。既存の m1 は、常に OneRow、Large とし、新規に追加
した m2 で、大きさが変わるようにしてあります。また、Popup の
LayoutTitle は Large ではなく MediumThreeRow を指定しました。

<GroupTemplate Id=”MyTemplate”>
  <Layout Title=”Large”>
    <OverflowSection Type=”OneRow” TemplateAlias=”m1″ DisplayMode=”Large”/>
    <OverflowSection Type=”OneRow” TemplateAlias=”m2″ DisplayMode=”Large”/>
  </Layout>
  <Layout Title=”MediumThreeRow”>
    <OverflowSection Type=”OneRow” TemplateAlias=”m1″ DisplayMode=”Large”/>
    <OverflowSection Type=”ThreeRow” TemplateAlias=”m2″ DisplayMode=”Medium”/>
  </Layout>
  <Layout Title=”Small”>
    <OverflowSection Type=”OneRow” TemplateAlias=”m1″ DisplayMode=”Large”/>
    <OverflowSection Type=”ThreeRow” TemplateAlias=”m2″ DisplayMode=”Small”/>
  </Layout>
  <Layout Title=”Popup” LayoutTitle=”MediumThreeRow” />
</GroupTemplate>

2. コントロールの TemplateAlias を更新します。初めのボタンは
m1 のままで、残りのボタンを m2 にします。

3. 現在のままでは、ボタンの文字列が長いことから期待した
動作にならないため、LocLabels を以下のように変更します。
※ Button A Label -> Button A を短く変更

<LocLabel Id=”Sample.contact.CustomGroup.Button.C.LabelText”>
  <Titles>
    <Title languagecode=”1033″ description=”Button C” />
  </Titles>
</LocLabel>
<LocLabel Id=”Sample.contact.CustomGroup.Button.B.LabelText”>
  <Titles>
    <Title languagecode=”1033″ description=”Button B” />
  </Titles>
</LocLabel>
<LocLabel Id=”Sample.contact.CustomGroup.Button.A.LabelText”>
  <Titles>
    <Title languagecode=”1033″ description=”Button A” />
  </Titles>
</LocLabel>

4. 変更を加えた後ソリューションを上書きすると、以下のような
表示と動作になります。

[最大表示時]
image

[その次の段階]
image

[さらに次の段階]
image

[Popup 化]
image

ボタンコントロールの動作と Popup 化の動作が期待した通りです。

まとめ

リボンのカスタマイズはいかがだったでしょうか。非常に柔軟な UI が
提供できる機能だと、個人的には考えています。アイコンやスクリプトも
Web リソースとしてソリューション化できますし、スケーリングの制御も
自由自在です。

是非ご活用ください。

– Dynamics CRM サポート 中村 憲一郎

Comments (14)

  1. dehyon.chon より:

    いつも有益な情報ありがとうございます。

    リボンのカスタマイズで質問ですが、既存のボタン(高度な検索)を

    ログインユーザのセキュリティーロールを参照し、表示/非表示は可能でしょうか?

    忙しいところ、お手数ですが、ご教授お願いします。

  2. 質問ありがとうございます。

    既存のボタンに関しては、以下の手順で対応が可能です。

    1. 既存のボタンを HideCustomAction を利用して非表示にする。

    2. カスタムボタンを追加する。この際カスタムボタンの定義を、既存の定義を再利用する形で追加する。ただし ID や Sequence は重複しないように変更。

    3. カスタムの DisplayRule を追加する。セキュリティロール単位でのチェックは無いため、EntityPrivilegeRule 等を利用することを検討してください。

    4. ボタンが利用している CommandDefinition の定義を再利用する形で再定義して、DisplayRule に作成した DisplayRule の ID を追加する。CommandDefinition 自体の ID はカスタム用に変更する。

    5. カスタムボタンが参照している CommandDefinition を追加したカスタムの CommandDefinition の ID に変更する。

    既存の定義は sdkresourcesexportedribbonxml にあります。

    是非試してください。

  3. dehyon.chon より:

    早速の回答、ありがとうございます。

    できないと思い、諦めるところでした。質問してよかったです。

    早速試してみます。

    宜しくお願いします。

  4. dehyon.chon より:

    実装しました!ありがとうございます。

    これからも宜しくお願いします。

  5. 無事動作したようでよかったです。是非またコメントをお寄せください。

    中村

  6. いつもお世話になっております。

    リボンのカスタマイズについてですが、新しく追加したエンティティに対して、

    カスタマイズしたく、方法や手順を教えてください。

    ソリューションのエクスポートで、リボンエクスポートを実行するのでしょうか?

    エクスポートしたファイル内のcustomizations.xml、solution.xml、Content_Types.xml

    を利用するのでしょうか?

    まず、何から始めたら良いのかも分からず・・・

    BlogやSDKを参考したりと色々試行錯誤しておるのですが、やり方が正しいのかも

    分からず、悩んでおります。

    お手数をお掛けしますが、何卒よろしくお願い致します。

  7. Sachie Saito より:

    手順としては、ソリューションにカスタムエンティティを追加してエクスポートが作業しやすいです。

    エクスポートしたソリューションの Customization.xml にある RibbonDiffXMLを編集します。

    既存アイテムの情報は以下の SDK に記載されていますので、参考としてください。

    Microsoft Dynamics CRM で使用できるリボン

    msdn.microsoft.com/…/gg309420.aspx

    エンティティ リボン

    すべてのエンティティで、エンティティ リボン テンプレートと呼ばれる共通のリボン定義が使用されます。エンティティ リボン テンプレート定義は、applicationribbon.xml ファイル内にあります。ユーザー定義エンティティを作成した場合、表示されるリボンは、エンティティ リボン テンプレートによって定義された既定のリボンです。各システム エンティティには、エンティティ リボン テンプレート定義に基づいて作成された個々の <RibbonDiffXml> (RibbonDiffXml) 定義があります。

    具体的にはSDK の Resource の ApplicationRibbon.XMLで Id="Mscrm.HomepageGrid.{!EntityLogicalName}.MainTab

    とか Id="Mscrm.HomepageGrid.{!EntityLogicalName}.View とかがテンプレートで、EntityLocalNameはカスタムエンティティの名前です。

  8. ご連絡が大変遅くなり申し訳ありません。

    質問に関するご回答ありがとうございます。

    本日カスタムエンティティのリボンに追加したいボタンを実装

    することが出来ました。

    お手数をお掛けして申し訳ありませんでした。

    今後とも宜しくお願い致します。

  9. Sachie Saito より:

    追加したいボタンを実装できたとのこと、お知らせいただきありがとうございます。

    またコメントをお寄せください!

  10. Yui より:

    こんにちは。

    高度な検索(既存のボタン)についてはユーザーによって表示/非表示の制御ができるようですが、

    カスタムで追加したボタンについても、同様にユーザーによって表示/非表示の制御が可能でしょうか?

    恐れ入りますが、ご教示ください。

  11. コメントありがとうございます。

    カスタムで追加したボタンに関しても、同様にコントロールが可能です。

    ユーザーによってではなく権限によってであれば EntityPrivilegeRule を、

    より柔軟なコントロールが必要な場合は、CustomRule をご利用ください。

    中村

  12. Yui より:

    お返事ありがとうございます!

    EntityPrivilegeRuleとCustomRuleを試してみたいと思います!

  13. お世話になっております。

    カスタムで追加したボタンのアクションを他のWebサイトへの遷移としたいのですが、

    このような事は可能でしょうか?

    可能な場合、どの様に指定すれば宜しいのでしょうか?

    お手数をお掛けしますが、何卒よろしくお願い致します。

    例:現在は以下の様に指定しましたが、エラーとなってしまいます。

    Url Address="192.168.1.1/…/test.aspx"

  14. コメントありがとうございます。

    リボン内の Url Address に渡すパスは、相対または絶対パスとなりますので、HTTP:// や HTTPS:// から始まるアドレスを入れてみて頂けますでしょうか。

    ただ遷移ということではなく、新しいウィンドウが開くことになりますので、要件が満たせるか一度お試しください。

    中村

Skip to main content