Qodly Studio for 4D：ページ状態による動的ユーザーインターフェース

4D 20 R6で、Qodly Studio for 4Dはエキサイティングな新機能を導入しました：ページステートです。もしかしたら、すでに前の投稿をご覧になった方もいらっしゃるかもしれませんが、ダイナミックUIにとってこの機能がどのような価値があるのかを探ってみましょう。

それぞれのユーザーのステップやコンテキストに即座に適応するUIがあったとしたらどうでしょう？

ページステートがその実力を発揮するようなユースケースをいくつかご紹介しましょう：

• ユーザーのアクションに基づいてコンポーネントを有効または無効にする(例：すべての必須フィールドが入力されたときのみ「保存」ボタンを有効にする)。
• ライトモードとダークモードをシンプルなボタンで切り替える。
• ユーザーの権限に基づいて、アクション(読み出し、更新など)を制限する。

 

PIQS_States

ページステート：インタラクティブなUIのための動的ソリューション

しかし、ページステートとは一体何なのでしょうか？ステート(状態)とは、ベースページと呼ばれるオリジナルのQodlyページとどのように異なるかによって定義され、これによってユーザーのインタラクションに基づいてUIエレメントを条件付きで表示したり、あるいは異なるスタイルを適用したりすることができます。そして、すべてはあなたのUIのオリジナルのレイアウトであるベースページから始まります。

ステートを扱うために新しいStatesセクションがあります。

簡単な例から話を始めましょう。

このQodlyページには、透明な背景を持つスタイルボックスがあります。これがベースページです。

このベースページのバリエーションをユーザーに表示したい場合は、新しいステートを作成し、ステートリストでそれを選択してデザインしてください。

ここでは、ベースページの透明な背景の代わりに緑色の背景を持つ、Greenのステートが作成されています。

また、ベースページの透明な背景の代わりに紫色の背景を持つ、Purpleのステートが作成されています。

目的は、ユーザーエクスペリエンス中に発生する状況に応じて、ステートを有効または無効にすることです。

Qodlyページでは、エンドユーザーが遭遇するであろうユースケースに応じて、必要な数だけステートを作成することができます。

一度に複数のステートを有効にすることもできます。

ステートを有効または無効にするには？

ステートを有効または無効にするには、3つの方法があります：

1. 標準アクションを使用する
2. 条件の組み合わせ
3. サーバー上のバックエンドコードから

 

ステートの標準アクション

標準アクションのおかげで、ユーザーがページを操作するときにステートを有効/無効にできます。

下の例では、UIはライトモードとダークモードが用意されています。Light ステートはlightMode CSSを使用してライトモードを管理します。

そしてDark ステートはdarkMode CSSを使用してダークモードを管理します。

下はベース・ページです。ユーザーがライトアイコンをクリックすると、Light ステートが有効になり、Dark ステートが無効になります。

(ユーザーがダークアイコンをクリックすると、その逆の動作が行われます。Dark ステートが有効化され、Light ステートが無効化されます。）

これが最終的な結果です。

条件付きステート

これを使うと本当に魔法のようにステートを管理できます。ステートは 条件にバインドすることができ、これによってUIがユーザー権限やデータ値などの特定の条件に対応できるようになります。 コンディションをTRUEまたはFALSEと評価することで、ステートが動的に有効化または無効化されます。

この例では、UIは商品のリストと、 最終的に選択された商品名を 更新する商品詳細セクションを表示しています。

ここでは2つのステートが作成されています：

• ReadOnly ステート
• Update ステート

ここでの説明はそんなに必要ないでしょう。Update ステートは、ユーザーが選択した商品を更新できるときに必要で、ReadOnly状態は、ユーザーが商品データを表示のみできるときに必要です。

下記は Update ステートです。商品詳細セクションで、Nameフィールドが有効化されており、Save ボタンがあります。

そして、これがReadOnly ステートです。商品詳細セクションでは、無効化されたName フィールドだけあります。

ReadOnly ステートとUpdate ステートは、それぞれ条件に割り当てられています。商品を更新できるかどうかは、選択された商品のupdatable 属性に依存します。

ReadOnly ステートは、theProduct.updatable = false という条件の場合に有効になります。更新状態は、条件theProduct.updatable = true の場合に有効になります。

これが最終的な表示結果です。

 

強力で使いやすい 条件エディタのおかげで、とても複雑なビジネスロジックでも処理できる入れ子の条件を作成できます！

これらの条件は、Qodly ソースの値や、セッションが何らかの権限を持っているか持っていないかなどの基準に基づいて設定することができます 。 詳しくは ドキュメントをご覧ください。

サーバーからステートを扱う

最後に注意すべきことは、バックエンドでのみ評価できるビジネスルールがある場合には、バックエンドのコードからステートを有効/無効にすることが役立つ、ということです。

添付のデモでは、この例を見ることができます。ユーザは商品を選択します。選択された商品の合計金額が$300以上になると、商品の選択を禁止するステートが有効になります。

Web Form.enableState() 関数とWeb Form.disableState() 関数を使うで、これを管理することができます。

以下はそのコードです。このLimitReached ステートは、ユーザーが商品を選択できないようにします。

	If ($tempSelection.sum("price")>=300)
		Web Form.enableState("LimitReached")
		Web Form.disableState("Initial")
	End if 

これが最終的な結果です。

 

実際に動かして見ますか？

添付のPlay In Qodly Studio (Qodly Studioで遊ぼう)デモをダウンロードして、ページステートの使い方と、エンドユーザーに動的なインターフェースを提供する方法を学んでください。