Client state parameters (クライアントステータスパラメーター)

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

クライアントサイドインタラクションとは

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

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

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

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

UI ビルダーでクライアント側のインタラクションを作成するには、以下が含まれます。

• Client state parameters (クライアントステータスパラメーター)
• イベント
• クライアントスクリプト

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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