チュートリアル : ActionControlコンポーネントの使用
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
ActionControlコンポーネントを使用して、アクションリンクを含むパネルを作成します。これにより、ユーザーは、自分が置かれているコンテキストで役立つ一連のアクションにすばやくアクセスできます。
このチュートリアルでは、次の方法について説明します。
ActionControlを使用する
SPEAKページでActionControlコンポーネントを使用するには:
-
ActionControlコンポーネントをページに追加します。通常は、水平方向の配置を設定できるコンテナにコントロールを追加します。これは、ActionControlが右揃えの場合に最適に機能するためです。
-
一部のコンポーネントは、ActionControlのプレースホルダーを提供します。 ApplicationHeaderページのサブ構造にはActionsプレースホルダーがあり、AdvancedExpanderコントロールにはActionBarプレースホルダーがあります。これらのプレースホルダを使用すると、SPEAKはSPEAKビジュアル ガイドラインに従ってActionControlコンポーネントのスタイルと位置を設定します。
-
PageSettingsアイテムの子として、構成アイテムのフォルダーを作成します。
-
ActionControlコンポーネントのDataSourceプロパティを、次の設定項目フォルダに作成したActionControl項目にバインドします。PageSettings.
-
このフォルダにActionControl項目を追加します。この項目は、メニューを形成する構造の始点です。この項目では、値を設定する必要はありません。
-
ActionColumnアイテムをActionControlアイテムの子として追加します。メニューに含める列ごとに1つのActionColumn項目を追加します。この項目では、値を設定する必要はありません。
-
必要なグループ見出しごとに、ActionColumn項目の子としてActionGroup項目を追加します。項目のTextフィールドに見出しテキストを指定します。
-
ActionアイテムをActionGroupsの子アイテムとして追加します。メニューに追加するアクションごとに1つのAction項目を追加します。各項目には、ユーザーがクリックできるメニュー項目が表示されます。Titleフィールドに表示する名前と、アクションをClickフィールドに設定します。
-
アクションは、他のコンポーネントでインタラクションを指定するのと同じ方法で指定できます。
アクションの有効化と無効化
ActionControlコンポーネントは、含まれているすべてのアクションをデフォルトで有効にします。個々のアクションを無効および有効にするには、いくつかの異なる方法があります。
-
アクションを無効にするには,ActionアイテムのDisableチェックボックスをオンにし、有効にするにはチェックボックスをオフにします。
-
ActionControlコンポーネントが提供するactions配列をJavaScriptで使用できます。例えば：
this.ActionControl1.viewModel.actions()0.disable()をクリックして、配列の最初のアクションを無効にします。 enable機能を使用して、アクションを有効にします。
-
ViewモデルのgetActionメソッドを使用できます。例えば：
this. ActionControl1.viewModel.getAction(‘data-sc-actionId=\”Sitecore ID of Action item\”\’).disable() をクリックして、指定したSitecore IDがActionアイテムにあるアクションを無効にします。代わりにenable機能を使用して有効にします。
Dataプロパティを使用する
ActionControlのDataプロパティでデータを指定でき、このデータには、たとえば、ActionControl内のActionアイテムのClickイベントからアクセスできます。
次の例は、Dataプロパティを使用する方法を示しています。このサンプル・データでは、ActionControl・コンポーネントをListControlにバインドしています。ActionControlには、Show ItemというActionアイテムがあります。ActionControlコンポーネントは最初は無効になっており、ユーザーがListControlでアイテムを選択するとSPEAKはActionControlを有効にします。ユーザーがShow Itemアクションをクリックすると、SPEAKは選択したアイテムの名前 ($displayNameの値) を含むアラートを表示します。
この機能を実装するには、次の手順を実行します。
-
ActionControlのDataプロパティを {Binding ListControl1.SelectedItem}のように設定します。つまり、ActionControlのDataプロパティには、ListControlの現在選択されている項目 (存在する場合) へのポインターが常に含まれます。
-
ActionControlのIsEnabledプロパティを次のように設定します: {Binding ListControl1.HasSelectedItem}。つまり、SPEAKは、ListControlにアイテムが選択されている場合にのみ、ActionControl (およびそれに含まれるActions) を有効にします。
-
Show ItemアクションのClickプロパティをjavascript:this.viewModel.app.showItem(this.get("data"))に設定します。つまり、ユーザーが アイテムの表示 アクションをクリックしたときに、SPEAKはPageCodeスクリプト ファイルでshowItemというメソッドを呼び出し、Dataプロパティの内容を引数として渡します。このプロパティの内容は、現在選択されている項目です。
-
PageCodeスクリプトファイルで次のようにshowItem関数を定義します。