Dynamics CRM 2011 Xrm.Page サンプルライブラリ紹介その 3

Article
10/06/2011

みなさん、こんにちは。

今回も引き続き、クライアントサイドスクリプトの紹介を行います。

サンプルを確認するにあたり準備があるため、こちらの記事を
ご覧いただき、サンプルのインストールを行ってください。

サンプル紹介

前回までフォーム上のコントロールについてのサンプルを紹介しました。
今回はセクションとタブについてのサンプルを一部紹介します。

サンプルは以下のフォルダにあります。
SDK\SampleCode\JS\FormScripts\SDK.SectionSamples.js SDK\SampleCode\JS\FormScripts\SDK.TabCollectionSamples.js SDK\SampleCode\JS\FormScripts\SDK.TabSamples.js

セクション操作サンプル

セクションはタブの子要素であり、コントロールの親要素です。 Xrm.Page スクリプトで行えることはいくつかありますが、良く使われるものはセクションの表示/非表示、またはセクションの親/子要素の取得です。

[toggleVisibleSections 関数]
セクションの表示/非表示を切り替えます。forEach メソッドの利用方法がポイントです。

toggleVisibleSections: function () {
// Xrm.Page.ui.tabs の get メソッドでフォーム上の全てのタブ取得
var tabs = Xrm.Page.ui.tabs.get();

for (var i in tabs) {
   // タブを1つ取得
   var tab = tabs[i];
   // tab.sections の forEach メソッドを利用。このメソッドではタブにある
   // セクションを、順次渡された関数で処理
   tab.sections.forEach(function (section, index) {
    // セクションが表示されているか取得
    if (section.getVisible()) {
     // 表示されている場合は非表示に
     section.setVisible(false);
    }
    else {
     // 非表示の場合は表示に
     section.setVisible(true);
    }
   });
}
},

[getFirstControlAttribute 関数]
ページ -> タブ -> セクション -> コントロールを 1 行で取得するサンプルです。

getFirstControlAttribute: function () {
// Xrm.Page.ui.tabs.get()[0] で、フォーム上の一番初めのタブを取得
// そのまま sections.get()[0] で、タブ内の一番初めのセクションを取得
// そのまま controls.get()[0] で、セクション内の一番初めのコントロールを取得
var firstControl = Xrm.Page.ui.tabs.get()[0].sections.get()[0].controls.get()[0];

alert("The attribute label of the first control on the form is '" + firstControl.getLabel() + "'.");
},

タブ操作サンプル

タブはページの子要素で、セクションの親要素です。セクションと同様に子要素の
取得や自身の表示/非表示などの操作がよくされます。

[toggleTabDisplayState 関数]
セクションと異なり、タブは折りたたみと展開が可能です。このサンプル関数でその
方法を紹介しています。

toggleTabDisplayState: function () {
// Xrm.Page.ui.tabs の get メソッドでフォーム上のすべてのタブを取得
var tabs = Xrm.Page.ui.tabs.get();

for (var i in tabs) {
// タブを 1 つ取得
var tab = tabs[i];
// 表示の展開状態を取得
var currentTabState = tab.getDisplayState();
// 展開のステータス情報を保持する文字列を用意
var newTabState = "";

// タブが展開している場合
if (currentTabState == "expanded") {
   // 折りたたみのステータスをセット
   newTabState = "collapsed";
}
// タブが折りたたまれている場合
else if (currentTabState == "collapsed") {
   // 展開のステータスをセット
   newTabState = "expanded";
}

// setDisplayState メソッドのステータスを渡して状態を変更
tab.setDisplayState(newTabState);
}
},

[toggleVisibleTabs 関数]
タブも表示/非表示を切り替え可能です。

toggleVisibleTabs: function () {
// Xrm.Page.ui.tabs の get メソッドでフォーム上のすべてのタブを取得
var tabs = Xrm.Page.ui.tabs.get();
for (var i in tabs) {
   // タブを 1 つ取得
   var tab = tabs[i];
   if (i > 0) {
    // 表示の状態を取得
    if (tab.getVisible()) {
     // 表示の切り替え
     tab.setVisible(false);
    }
    else {
     // 表示の切り替え
     tab.setVisible(true);
    }
   }
}
},

まとめ

Xrm.Page.ui を利用することで、フォーム上のオブジェクトを行き来する
ことが容易にできます。コントロールからセクションを取得して、そこから
タブを取得。タブ全体を折りたたむといったことや、その逆も可能です。

尚、セキュリティの観点からは、特定のオブジェクトの表示/非表示を
切り替えたい場合は、既定で非表示を使用してください。こうすることで
スクリプトの実行にタイムラグがある場合や、エラーが発生した場合にも
オブジェクトが意図せず表示されません。

またパフォーマンスの観点からは、非表示/表示を切り替えたいものを
同じセクションやタブにまとめて、より上位のオブジェクトで表示/非表示を
切り替えてください。こうすることで、子要素の切り替えが不要になります。

セクションやタブのサンプルは他にもありますので、是非ご覧ください。

次回はナビゲーション部分を操作するサンプルスクリプトを紹介します。

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

Dynamics CRM 2011 Xrm.Page サンプルライブラリ紹介 その 3

Additional resources

Dynamics CRM 2011 Xrm.Page サンプルライブラリ紹介その 3