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

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

例えば、ユーザーは列ヘッダーをクリックしてリストを並び替えることができます。この場合、ページ全体ではなくリストのみが並び替えられます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

両方のクライアントステータスパラメーターが適用されると、フィルターはリストに適用されず、タイトルはすべての特別行事 (All Special Occasions) になります。

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

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

「クライアントステータスパラメーターを更新」イベントハンドラーを使用して、実行時にクライアントステータスパラメーターの値を変更します。「クライアントステータスパラメーターを更新」イベントハンドラーには、2 つのプロパティ (更新するクライアントステータスパラメーターと、クライアントステータスパラメーターに使用する新しい値) が含まれます。

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

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