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 サポート 中村 憲一郎