UI 要素の表示を制御する

特定のユーザーの UI 要素の表示を制御するには、visible プロパティを使用します。ウィジェットに関連性がない場合、またはユーザーがウィジェットを使用できない場合、ユーザーからウィジェットを非表示にできます。たとえば、ユーザーがレコードを変更するまで、ページにはレコードへの変更を保存するための [Save] ボタンは必要ありません。ユーザーがページにアクセスする権限を持っていない場合、そのページへのリンクを非表示にできます。

主なコンセプト:

  • visible プロパティはブール値を保持します(true = 表示、false = 非表示)。値をバインドするかスクリプトを使用して、ユーザーがウィジェットを表示するための要件を満たしているかどうかを判断できます。
  • 表示の条件が別のサーバー スクリプトまたはサードパーティ サービスからの情報に依存する場合、クライアント スクリプトからサーバー スクリプト関数を呼び出します。
  • ウィジェットに他のウィジェットが含まれている場合、親ウィジェットの設定がその子ウィジェットに適用されます。たとえば、タイトル、入力フィールド、および [Submit] ボタンを含むフォーム ウィジェットがある場合、個々のコンポーネントまたはフォーム全体を非表示にできます。

スクリプトを使用してウィジェットの表示を制御する

  1. ユーザーがウィジェットにアクセスできるかどうかを判断し、ブール値を返すクライアント スクリプトを記述します。たとえば、出張承認のテンプレートにはクライアント スクリプト Utility が含まれます。ユーザーが特定の役割のメンバーであるかどうかをテストする 3 つの関数があります。

    /**
         * Determines whether the user has specified role.
         * @param {string} roleName - name of the role to check.
         * @return {boolean} true if user has the role.
         */
        function hasRole(roleName) {
          return (app.user.roles.indexOf(roleName) > -1);
        }
    
        /**
         * Determines whether the user is admin.
         * @return {boolean} true if user is an admin.
         */
        function isAdmin() {
          return hasRole('Admins');
        }
    
        /**
         * Determines whether the user is approver.
         * @return {boolean} true if user is an approver.
         */
        function isApprover() {
          return hasRole('Approvers');
        }
        

    hasRole(roleName) 関数は、現在のユーザーがメンバーである役割のリストを取得し、指定された役割の存在を検索します。たとえば、クライアント スクリプトが isAdmin() を呼び出す場合、スクリプトは管理者役割を検索します。管理者役割が存在する場合、インデックス値は 0 以上、戻り式は true と評価されます。

  2. 表示を設定するウィジェットを選択します。階層内でこのウィジェットの下位にあるウィジェットは、親ウィジェットの表示設定を継承することに注意してください。

  3. プロパティ エディタで [Display] をクリックします。

  4. [visible] プルダウン メニューをクリックし、[binding] を選択します。

  5. [binding] ダイアログで、クライアント スクリプトを呼び出す式を入力します。たとえば、ユーザーが管理者または承認者のメンバーである場合にウィジェットを表示するには、次のように入力します。

    isAdmin()||isApprover()
        

バインディングを使用してウィジェットの表示を制御する

  1. 表示を設定するウィジェットを選択します。階層内でこのウィジェットの下位にあるウィジェットは、親ウィジェットの表示設定を継承することに注意してください。
  2. プロパティ エディタで [Display] をクリックします。
  3. [visible] プルダウン メニューをクリックし、[binding] を選択します。
  4. [binding] ダイアログで、バインディング式を記述します。たとえば、管理者役割のメンバーにアクセスを許可するには、次のように記述します。

    @user.role.Managers
        

バインディングで数値と文字列をブール値として使用する

visible プロパティは、数値または文字列値(日付ではない)のフィールドにバインドできます。その場合、App Maker によって値がブール値に自動的に変換されます。数値および特殊なケース(未定義、null、および NaN)の変換は、JavaScript の型変換と一致します。一方、文字列の変換は、JavaScript の型変換と一致しません。

フィールドの型 True(表示) False(非表示) JavaScript と同じ
ブール値 値: ボックスが選択される 値: ボックスがクリアされる
数値
  • 1、1.0
  • False のリストにないすべての値(2、208.1、-7、Infinity、-Infinity など)
0、-0、0.0、-0.0
文字列 "true"、"True"、"TRUE"(大文字と小文字は区別されません)
  • "false"、"False"、"FALSE"(大文字と小文字は区別されません)
  • True のリストにないすべての値("employee"、"admin" など)
×