Qodlyアプリケーションをステートでダイナミックかつインタラクティブにする

ステートは、4D Qodly Proでダイナミックでレスポンシブなインターフェイスを作成する上で重要な役割を果たします。ステートを使うことで、ユーザーの役割や権限、データベースのデータなど、特定の条件に基づいてウィジェットの表示や動作を制御することができます。

このブログでは、このコンセプトを説明し、様々なタイプのステートを紹介し、パフォーマンスレビューアプリケーションの例を通して、ステートの効果的な活用方法を説明します。

パフォーマンスレビューアプリケーション

Qodly Studioのステートとは何ですか？

状態とは、ある瞬間のページの特定の構成を表し、その外観や機能を定義します。

例えば、状態は以下のように使用できます：

• 定義された条件に基づいて要素を表示または非表示にする。
• 特定のスタイルの適用。
• ロール、権限、またはデータに応じて、ユーザーインターフェースを動的に調整する。

完全な概要については、ステートに関する公式ドキュメントを参照してください。

Qodlyスタジオのステートタイプ

Qodly Studioには2種類のステートがあります：

非条件ステート

非条件ステートは、動的な条件に依存せず、静的に適用されます。これにより、定義済みの方法でウィジェットを有効または無効にすることができます。

例ユーザーがボタンをクリックしたときだけフォームを表示する。

条件付き状態

条件付き状態は、ユーザー定義のロジックに基づいています。ユーザのロールやデータベースの値などの条件に基づいて、ウィジェットの表示やスタイルを変更します。

例タスクがすでに完了している場合、”Submit” ボタンを非表示にする、またはユーザーの役割に基づいてフィールドを有効/無効にする。

ステートの例

ステートの使い方をよりよく説明するために、Performance Review アプリケーションから2つの具体例を示します。

例1：ステータスに基づいた編集の制限

Performance Reviewアプリケーションでは、レビューのステータスはユーザがデータを閲覧または編集できるかどうかを決定します。

• Collaborator：ステータスがDoneまたはCloseの場合、データは読み取り専用です。
• マネージャー：ステータスが「クローズ」の場合、データは読み取り専用です。
• HR: ステータスに関係なく、データにフルアクセスできます。

 

読み取り専用」状態の作成

レビューのステータスに基づいてデータの編集を制限するために、“readOnly“という特定のステートを作成します。

先ほど作成した“readOnly“状態を選択してください。ステートがアクティブで、変更したいものであることを確認するには、ページ編集エリアの右下にその名前が表示されていることを確認してください。

 

ウィジェット表示の設定

各入力ウィジェットの “disabled “属性をtrueに変更し、フィールド編集を無効にします。

次に、Editボタンの名前をViewに変更します。

次に、displayプロパティをnoneに設定することで、CreateボタンとSaveボタンを非表示にします。

さらに、[表示]ボタンによって開かれるモーダルダイアログにも同じ修正を適用します：

• 入力フィールドを無効にします。
• 入力フィールドを無効にする。
• Cancelの名前をCloseに変更する。

ボタンが誤って非表示になってしまった場合は、Qodly Studio のアウトラインパネルを使って、その場所を特定し、設定を修正してください。

表示ロジックの実装

次のステップは、レビューステータスとユーザーの役割に基づいて、“readOnly“状態を有効または無効にするロジックを実装することです。

ユーザの役割はセッションデータに格納されます。例えば、マネージャーは二重の役割を持っています。チームのレビューを扱うときはマネージャーとして行動し、自分自身のレビューを管理するときはコラボレーターとして行動します。アプリケーションのメニューバーで、Collaboratorを選択するとストレージのrole属性が“collaborator“に更新され、Managerを選択すると“manager“に更新されます。

Reviewエンティティに計算された属性を追加します：

exposed Function get isReadOnly() : Boolean
  var $status : Boolean:=False
  If (ds.getUserInfo()#Null)

   If ((ds.getUserInfo().role="Collaborator") && (This.ID_Status>2))
    $status:=True
   End if

   If ((ds.getUserInfo().role="Manager") && (This.ID_Status>3))
    $status:=True
   End if
  End if

  return $status

この関数は、ユーザーがデータの閲覧のみを許可されている場合はtrueを返し、データの変更を許可されている場合はfalseを返します。

注意: getUserInfo() 関数は、セッション・ストレージへのアクセスを提供します。

条件を “readOnly “状態にリンクする

最後に、“readOnly“ステートの条件ボタンをクリックして、表示ルールを定義します。

条件を追加します。

 

数式を入力するだけです：「selectedReview.isReadOnly is True “と入力してください。

この設定により、手動介入や複雑なコードを必要とせずに、ページが読み取り専用と編集モードの間で動的に切り替わります。

例2: データ状態に基づいたボタンの可視性の制御

Performance Reviewアプリケーションでは、レビューが選択されるとサイドバーが表示されます。このサイドバー内に表示されるボタンは、いくつかの要因に依存します：

• ステータスが読み取り専用か、読み取り/書き込み専用か。
• PDF 文書が利用可能かどうか。
• ユーザーの役割がManager、Collaborator、HRのいずれであるか。
• PDFが表示されているかどうか。

これらの異なるケースを効率的に処理するために、私たちはすべての可能な組み合わせの状態を作成します。

情報のために、役割はユーザーがログインし、HR、Manager、またはCollaboratorページを選択したときに割り当てられます。この情報はセッションのストレージに保存されます。この概念は、アプリケーションの様々なページ間のナビゲーションについて説明する次回のブログ記事でさらに詳しく説明します。

各シナリオのステートの作成

スムーズなユーザー体験を保証するために、上記の条件に基づいてボタンの可視性を制御する特定のステートを定義します。それぞれのステートは、関連するアクションだけを表示するようにインターフェイスを動的に調整します。

例

 

再利用可能な条件の保存

状態管理を単純化し、冗長なロジックを避けるために、再利用可能な名前付き条件を定義する：

• Collaborator: userInfo.roleが “Collaborator”
• Manager: userInfo.roleが “Manager”
• HR: userInfo.roleが “HR”
• selected: selectedReview が Null でなく、かつ selectedReview.pdfDocument が Null である。
• selectedWithPDF: selectedReview.pdfDocument は Null ではありません。
• viewPDF: viewPdf は True
• isReadOnly: selectedReview.isReadOnly が True。
• isReadWrite: selectedReview.isReadOnly は False です。

 

条件を保存するには、”… “ボタンをクリックし、メニューから “条件を保存 “を選択してください。

ステートに条件を適用する

これらの定義済み条件を使用すると、ステートの設定が非常に簡単になります。各ステートに複雑な条件を手動で設定する代わりに、保存された条件を参照するだけです。これにより、明快さ、一貫性、メンテナンスのしやすさが保証されます。

例えば、「readWritePDFManager」状態の可視性を定義するために、 selectedWithPDF、isReadWrite、およびManagerという条件を設定します。

他のステートがどのように設定されているかは、あなた次第です。質問があれば、4Dフォーラムに参加してください。

このアプローチにより、インターフェイスが様々なユーザーの役割やレビュー状態に動的に適応し、直感的で効率的なユーザー体験を提供することができます。

結論

4D Qodly Proでステートを活用することは、ユーザーエクスペリエンスをカスタマイズし、インターフェースを最適化するための強力なアプローチです。ステートを効果的に使用することで、以下のことが可能になります：

• 役割と権限に基づいて要素の可視性を調整する。
• インタラクティブ性と利用可能なアクションの関連性を向上させます。
• 実際のユーザーのニーズに合わせた堅牢なアプリケーションの設計。

詳細については、ステートに関する完全なドキュメントをご覧ください。

Qodlyアプリケーションでステートをどのように使用していますか？あなたのアイデアや質問を4Dフォーラムで共有してください！