UIスクリプト

UIスクリプトとは、イベントをトリガーとしてクライアントサイドで実行する処理です。
アクション（サーバーサイド実行）と使い分けることで、入力チェックや画面内の値連携を高速に実装できます。

種類	動作する箇所	リクエスト消費
UIスクリプト	クライアントサイド	しない
アクション	サーバーサイド	する

注意

• アプリケーション設定 - セキュリティポリシーを有効にしている場合、デフォルトの設定値だとUIスクリプトの実行が許可されません。
  script-srcの値に'unsafe-eval'を設定いただくことで実行が可能となります。

UIスクリプトの主な利用例は次のとおりです。

• 必須チェック
• 入力内容の妥当性チェック
• 入力内容の変更チェック
• 事前メッセージの表示
• セレクトコンポーネント変更時の連動更新

エディタ起動

1. コンポーネントを選択して、右クリックからコンテキストメニューを開きます。
2. コンテキストメニューから[UIスクリプト]を選択します。
3. UIスクリプトエディタが起動します。

ノート

• キャンバスに配置されたボタンコンポーネントにのみ設定することが可能になります。

処理記述

UIスクリプトは、JavaScript言語を使って記述します。
見た目と操作性はアクションエディタと同様です。

記述にあたって次のサポートがあります。

• $uiオブジェクト を使って、コンポーネントの値やプロパティを取得・設定できます。
• ユーザ関数はスクリプトのみ利用できます（SQL/RESTはUIスクリプトでは選択不可）。
• UIスクリプトからアクションを呼び出す場合は$fn.callAction()を利用できます。
• UIスクリプトで利用できるビルトイン関数は以下になります。
  • $fn.message
  • $fn.openDialog
  • $fn.closeDialog
  • $fn.callAction

ノート

• UIスクリプトの記述がある場合でも、クリックイベントにアクションを選択している場合はアクションが実行されます。
• $fn.callAction()は非同期関数です。UIスクリプトで呼び出す場合はawaitで実行してください。
• console.logで記述した内容は、構成と監視-ログには記録されず、以下に出力されます。
  • デバッグデプロイ時のデバッグコンソール
  • ブラウザの開発ツール内のコンソール

記述例

テキストフィールドの入力チェックをクライアント側で実行し、条件を満たした場合のみサーバーサイドのアクションを呼び出す例です。

if (!$ui.textfield.value) {
  $ui.textfield.error = true;
  $ui.textfield.helperText = "入力してください。";
  return;
}

$ui.textfield.error = false;
$ui.textfield.helperText = "";
await $fn.callAction();

解説

1行目で入力値を確認し、未入力の場合はエラー表示を設定して処理を終了します。
入力値がある場合はエラー表示を解除し、最後にawait $fn.callAction()でアクションに記述された処理を実行します。

グローバル関数

• UIスクリプト用のグローバル関数は、アクション用とは別管理となります。
• リポジトリ上では、UIスクリプト用グローバル関数はラベルGlobal Functions UIで表示されます。
• グローバル関数画面はUIスクリプトタブとアクションタブに分かれます。

ローディング表示

種類	ローディング表示
UIスクリプト	常に表示しない
アクション	制御可能