クライアントステータスパラメーター

クライアントステータスパラメーターを使用して、値をコンポーネント構成にバインドします。クライアントステータスパラメーターの値が変更されると、コンポーネントは新しい値を使用するように更新されます。

クライアント側のインタラクションとは

Web ベースのアプリケーションでは、ブラウザーで起こることはすべてクライアントサイドです。クライアント側のインタラクションは、ユーザーがクリックしてエクスペリエンスコンポーネントを操作するときに発生します。クライアント側のインタラクションの例には、次のようなものがあります。

• ボタンをクリック
• フィルターの適用
• リストのソート
• リストの更新
• インライン検索結果の提供
• 不完全または不正確なデータをユーザーに警告する

ユーザーは、他のページに移動するためにページを操作することがあります。また、ユーザーがページのコンテンツ、外観、またはデータを更新したい場合もあります。クライアント側のインタラクションでは、ページ全体を更新するのではなく、ページの影響を受ける部分のみが更新されます。

たとえば、ユーザーは列ヘッダーをクリックしてリストをソートできます。ソートすると、ページ全体ではなくリストのみが再描画されます。

UI ビルダー でクライアント側のインタラクションを作成するには、次の操作を行います。

• クライアントステータスパラメーター
• イベント
• クライアントスクリプト

クライアントステータスパラメーターとは

クライアントステータスパラメーターはページ変数です。クライアントステータスパラメーターを定義して設定し、その値を使用してコンポーネントを設定します。クライアントステータスパラメーターは、ページコンポーネントの構成値を一元管理します。 UI ビルダー は、クライアントステータスパラメーターを使用してユーザーエクスペリエンスを向上させ、パーソナライズされたコンテンツとサービスを提供します。

クライアントステータスパラメーターの例

この例では、ページに color と呼ばれるクライアントステータスパラメーターがあります。3 つのコンポーネントのうち 2 つは、色クライアントステータスパラメーターを使用するように構成されています。色がオレンジに設定されている場合、コンポーネントはオレンジ色になります。色が紫色に設定されている場合、コンポーネントは紫色になります。色が緑に設定されている場合、コンポーネントは緑色になります。クライアントステータスパラメーターは、ページの共通の値を管理するための単一の場所です。クライアントステータスパラメーターがない場合、値が使用される各コンポーネントは、その値が変更された場合に個別に更新する必要があります。

たとえば、Web エクスペリエンスでは、コンポーネントで使用されるプライマリ色を色クライアントステータスパラメーターに格納します。コンポーネントがクライアントステータスパラメーターを使用するように構成されている場合、クライアントステータスパラメーターの値を変更すると、コンポーネントが新しい値に更新されます。

ボタンをエクスペリエンスに追加して、ユーザーがページコンポーネントの色を選択できるようにすることができます。ユーザーは 1 回のクリックで、ページ上のすべてのコンポーネントの色を同時に変更できます。ユーザーの色の選択内容をクライアントステータスパラメーターに格納し、クライアントステータスパラメーターを使用してページのコンポーネントを構成します。ユーザーの操作によってクライアントステータスパラメーターの値が変更されると、ページのコンポーネントがリアルタイムで更新されます。

クライアントステータスパネル

クライアントステータスパネルは、デフォルトでは折りたたまれています。左側のナビゲーションバーのクライアントステータスアイコンをクリックして、クライアントステータスパネルを開きます。

クライアントステータスパネルには、次の 2 つのセクションがあります。

• クライアントステータスパラメーター:ページのクライアントステータスパラメーター
• クライアントステータスのプレビュー:ページのクライアントステータスパラメーターの JSON

クライアントステータスパラメーターの作成

クライアントステータスパラメーターをページに追加するには、[クライアントステータスパラメーター] セクションの [+ 追加 ] ボタンをクリックします。

クライアントステータスパラメーターには 3 つの構成フィールドがあります。

• 名前:パラメーターの名前。名前にスペースを含めることはできません
• タイプ:パラメーターのタイプ
  • 文字列
  • 番号
  • ブール
  • JSON
• 初期値:パラメーターのデフォルト値

この例では、[クライアントステータス] パネルに 2 つのクライアントステータスパラメーターがあります。

• occasionTypeQuery はデフォルト値のない文字列です
• occasionListTitle は、デフォルト値が「すべての特別な機会」の文字列です

クライアントステータスパラメーターの操作

クライアントステータスパラメーターを取得したら、それを使って何ができるでしょうか? クライアントステータスパラメーターを操作するには、まずクライアントステータスパラメーターの値をコンポーネント構成にバインドします。クライアントステータスパラメーターの値が変更されると、コンポーネントは新しい値を使用するように更新されます。クライアントステータスパラメーターの値を変更する 1 つの方法は、イベントハンドラーを使用することです。

クライアントステータスパラメーターページの作成の例では、2 つのクライアントステータスパラメーター (OccasionTypeQuery と occasionListTitle) が特別な機会アプリケーションに追加されています。デフォルトでは occasionTypeQuery パラメーターには値がなく、 occasionListTitle のデフォルト値は All Special Occasions です。これらのクライアントステータスパラメーターは、機会リストコンポーネントに適用され、リストのタイトルとフィルターが設定されます。ボタンを使用してこれらのクライアントステータスパラメーターの値を更新し、リストを動的に更新します。

クライアントステータスパラメーターのバインディング

クライアントステータスパラメーター値は、ページコンテキスト、ペイロード、およびデータリソースと同じ方法でコンポーネント構成フィールドにバインドできます。コンポーネントを構成するときは、フィールドにカーソルを合わせ、[ 動的なデータバインディング]を選択して、クライアントステータスパラメーターをフィールド値にバインドします。この例では、機会リストコンポーネントのフィルターフィールドの [ 動的なデータバインディング ] ボタンが強調表示されています。

文字 @ はデータバインディングを示し、ステータスオブジェクトにはクライアントステータスパラメーターが含まれています。選択リストからクライアントステータスパラメーターを選択します。例は、 occasionTypeQuery クライアントステータスパラメーターの選択を示しています。occasionTypeQuery クライアントステータスパラメーターのデフォルト値は空であるため、デフォルトではフィルターは適用されません。

コンポーネントのタイトルは、同様の方法で設定されます。[タイトル] フィールドの [動的なデータバインディング ] ボタンを選択するか、「@」と入力して、選択リストから state.occasionListTitle クライアントステータスパラメーターを選択します。occasionListTitle クライアントステータスパラメーターのデフォルト値は [すべての特殊な機会] です。この例は、クライアントステータスパラメーターを使用するように構成されたタイトルとフィルターの両方を示しています。

両方のクライアントステータスパラメーターが適用されている場合、リストにはフィルターは適用されず、タイトルは「 すべての特別な機会」になります。

クライアントステータスパラメーターの occasionTypeQuery と occasionListTitle は、クライアントステータスパラメーターの値を変更するコンポーネントをユーザーが操作するまで変更されません。

クライアントステータスパラメーター値の変更

ユーザーは、実行時にクライアントステータスパラメーターの値を変更するために 、[クライアントステータスパラメーターの更新] イベントハンドラーを使用します。[ クライアントステータスパラメーターの更新 ] イベントハンドラーには、更新するクライアントステータスパラメーターとクライアントステータスパラメーターに使用する新しい値の 2 つのプロパティがあります。

たとえば、Special Occasions アプリケーションの機会リストコンポーネントの上に [誕生日] ボタンが追加されます。このボタンの目的は、リストの タイトル を [ すべての誕生日] に変更し、誕生日のみを表示するようにリストのフィルターを調整することです。この目的を達成するために、2 つのイベントハンドラーがボタンのボタン クリック イベントにマップされ、1 つは occasionTypeQuery クライアント状態パラメーターを変更し、もう 1 つは occasionListTitle クライアント状態パラメーターを変更します。この画像は、occasionTypeQuery クライアントステータスパラメーターを special_occasion=birthday に設定するように構成された [クライアントステータスパラメーターの更新] イベントハンドラーを示しています。これにより、誕生日のみを表示するようにリストがフィルタリングされます。

Button clicked イベントがイベントハンドラーにマッピングされ、occasionTypeQuery と occasionListTitle の両方のクライアントステータスパラメーターが更新されると、ボタンをクリックするとクライアントステータスパラメーターが更新され、機会リストコンポーネントが新しい値で自動的に更新されます。

• でのクライアントステータスパラメーターの使用 UI ビルダー
  定型テキストコンポーネントと 2 つのボタンをエクスペリエンスページに追加して、シンプルなカウンターを作成します。クライアントステータスパラメーターを使用して機能を実装し、ボタンが選択されたときにカウントが増減するようにします。
• クライアントステータスパラメーターを使用してコンポーネントのステータスを更新する
  UI ビルダー でクライアントステータスパラメーター値を作成して、コンポーネントにバインドします。コンポーネントにカスタム値を追加することで、これらのコンポーネントをスクリプトによって自動的に更新できます。