Dynamics CRM 2011 Web リソースを利用したグラフ

みなさん、こんにちは。

今回は、Web リソースを利用したグラフを紹介します。

Web リソースを利用したグラフ

グラフ領域には、Web リソース上の HTML ファイルを呼び込むことが可能です。
またこの HTML ファイル上に Web リソース上の JScript や画像、または Silverlight を
埋め込むことが可能になっています。ではまず簡単なサンプルから見ていきましょう。

Web リソースの作成

まずグラフに読み込ませる Web リソースを作成します。

1. Internet Explorer を利用して Dynamics CRM 2011 に接続します。

2. 設定 | カスタマイズ | システムのカスタマイズを開きます。

3. Web リソースを選択して、新規をクリックします。

4. 名前と表示名に ChartWebResource と入力し、種類より HTML を選択します。

5. テキストエディターボタンをクリックして、リッチテキストの画面に任意の
文字を入力して、OK をクリックします。

6. 上書き保存をクリックして、公開をクリックしてから、画面を閉じます。

グラフ用 XML ファイルの作成

デスクトップ等任意の場所に、以下の内容の XML ファイルを作成します。

<visualization>
  <name>Web リソースグラフ</name>
  <description>Web リソースのサンプルグラフ</description>
  <webresourcename>new_ChartWebResource</webresourcename>
  <primaryentitytypecode>account</primaryentitytypecode>
  <isdefault>false</isdefault>
</visualization>

webresoucername は表示名ではなく、実際の名前になることに注意してください。

グラフの作成

最後にグラフを作成します。

1. ワークプレース | 取引先企業を開きます。

2. リボンよりグラフタブをクリックし、グラフのインポートをクリックします。

3. 作成した XML ファイルを指定して、グラフを作成します。

4. 作成されたグラフが以下のように表示されます。

image

グラフの画面で、作成した Web リソースが表示されていることが確認できます。

Web リソースの更新

次に、作成した Web リソースに変更を加えてみます。

1. 設定 | カスタマイズ | システムのカスタマイズを開きます。

2. Web リソースを選択して、新規をクリックします。

3. 名前を表示名に ChartImageSample と入力し、種類より JPG 形式を選択します。

4. 適当な画像を JPG として作成し、その画像を指定してアップロードします。

5. 上書き保存をクリックして、公開をクリックしてから、画面を閉じます。

6. ChartWebResource Web リソースを開きます。

7. テキストエディターをクリックして、開いた画面で画像の追加をクリックします。

8. Web リソースより、先ほど作成した画像 Web リソースを選択します。

9. 適当な大きさにサイズを設定して、OK をクリックします。

10. 上書き保存をクリックして、公開をクリックしてから、画面を閉じます。

11. Internet Explorer を F5 でリフレッシュします。

12. ワークプレース | 取引先企業へ移動して、作成したグラフを表示します。

image

グリッドとの連携

このようにグラフには Web リソースを配置することができますが、今回の例の場合、
ビューの種類やフィルターと連動するような動きはありません。常に同じ画面です。

グラフ部分には、グリッドのレコードの情報が自動では渡されないため、別途 REST
エンドポイントや SOAP エンドポイントを利用して、データを取得する必要があります。

逆に、Dynamics CRM 以外のデータソースに対してのクエリも自由に記述ができますので、
必要に応じて試してみてください。

まとめ

既存で提供されているグラフ機能は非常にパワフルですが、追加の機能が必要な
場合には、 Web リソースで実現することを検討してください。 Web リソースは
ベースとして HTML が必要ですが、その上に JScript や Silverlight を乗せることが
できますので、柔軟なソリューションが作成可能です。

参考

Silverlight で Chart コントロールを利用する場合には、Toolkit が利用できます。
Toolkit では Chart コントロール他、さまざまな追加機能が提供されています。

Silverlight Toolkit
https://silverlight.codeplex.com/

Bing マップのサンプルは以下のブログで紹介されています。ただし日本語環境で
利用するには、少々工夫が必要になります。

Custom Charting Capabilities in Microsoft Dynamics CRM 2011
https://blogs.msdn.com/b/crm/archive/2011/01/19/custom-charting-capabilities-in-microsoft-dynamics-crm-2011.aspx

日本語で利用するには、まずグラフ用の XML で、国と位置を以下のように修正します。

<visualization>
  <primaryentitytypecode>account</primaryentitytypecode>
  <name>Account Locations in Japan</name>
  <datadescription>日本</datadescription>
  <presentationdescription>35.6,139.7,4</presentationdescription>
  <webresourcename>new_accountsOnMap</webresourcename>
</visualization>

またスクリプト部分で日本語の文字列をエンコードするように、かつ、国と地域以外に
都道府県名をフィルタ条件用に取得するように変更します。

function loadAccountsFromCrm(dataDescription) {
            // Address1_StateOrProvince を追加して都道府県を取得対象に入れる
            var url = "/AccountSet?$select=Address1_StateOrProvince,Address1_Country,Address1_City,Name";
            if (null != dataDescription) { 
            // フィルタ用の文字列をエンコードする
            dataDescription = encodeURI(dataDescription); 
            url += "&$filter=Address1_Country eq '" + dataDescription + "'";
            }

Bing Map に紐付ける際に、都道府県が利用されるように変更します。

function plotAccountLocations(accounts) {
            if (accounts.length > 0) {
                var account = accounts.pop();
                // 都道府県をアドレスの条件に追加
                var address = account.Address1_City + ', ' + account.Address1_StateOrProvince + ', ' + account.Address1_Country;

尚、Bing Map の URL は既定で英語のカルチャを利用します。日本語のカルチャに
変更する場合には、リンクの後ろに mkt を指定して ja-JP を指定可能です。

<script type="text/javascript" src=https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3&mkt=ja-JP"></script>

Bing Map のカルチャに関しては、以下の URL を参照してください。
https://msdn.microsoft.com/ja-jp/library/cc469974.aspx

Bing Map のサンプルを試される場合には、上記の内容を変更して試してみてください。

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