CookBook

IM-BloomMaker カスタムスクリプトの使い方と$variableからの取得・代入の方法

投稿日:

このCookBookでは、IM-BloomMakerのアクションの一つであるカスタムスクリプトの使い方と$variable(変数)からの取得および代入の方法について紹介しています。
実際にサンプル画面を作成しながらカスタムスクリプトと$variableについて解説を行います。

完成イメージ

このCookBookで作成するサンプル画面です。

  • デザイナ画面

  • 実際の画面

動作内容は以下の通りです。

  1. チェックボックスが一つも選択されていない状態で「Execute」ボタンを押下するとエラーメッセージを表示します。
  2. チェックボックスが選択されている状態で「Execute」ボタンを押下すると確認ダイアログを表示します。
  3. 確認ダイアログのOKを押下すると完了メッセージを表示します。
  4. 確認ダイアログのキャンセルを押下するとキャンセルした旨のメッセージを表示します。

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。

画面サンプルインポートファイル : cookbook_163287.zip
IM-BloomMakerのインポート画面からインポートしてください。

ローカル環境で表示させる場合は、以下のURLにアクセスしてください。
http://localhost:8080/imart/bloommaker/designer/im_cookbook_163287?css-framework=imui
なおベースURLである以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

サンプル画面の作成手順を以下に示します。

  1. エレメントをページに配置する
  2. 処理に必要な変数を宣言し、配置したエレメントに紐づける
  3. アクションを作成し、カスタムスクリプトを記述する

1. エレメントをページに配置する

  • エレメントパレットの「繰り返し」から「ボックス(繰り返し)」をページに配置してください。

  • エレメントパレットの「フォーム部品」から「チェックボックス」を先ほど配置した「ボックス(繰り返し)」の中に配置してください。

  • エレメントパレットの「フォーム部品」から「ボタン」をページに配置してください。
    配置後、プロパティタブのvalueに「Execute」を入力してください。

2. 処理に必要な変数を宣言し、配置したエレメントに紐づける

  • 変数タブのプルダウンで「変数」が選択されていることを確認し、JSONエディタに以下のJSONを貼り付けて変数を作成してください。

  • 変数作成後、変数ツリーの「checkResult」の編集ボタンを押下して変数エディタを開き、値の型を「真偽値」に変更してOKボタンを押下してください。
    同様に、「rtnConfirm」の値の型を「真偽値」に変更してください。

  • ページに配置した「ボックス(繰り返し)」を押下し、プロパティタブの「list」プロパティに「$variable.userName」を設定してください。

  • ページに配置した「チェックボックス」を押下し、プロパティタブの「textContent」プロパティに「$variable.userName[$index]」を設定してください。

    なお、$indexについては こちらの記事 をご覧ください。

  • 続けて、「value」プロパティに「$variable.userName[$index]」を設定してください。

  • 続けて、「checked」プロパティに「$variable.checkStatus[$index]」を設定してください。

3. アクションを作成し、カスタムスクリプトを記述する

ⅰ. 「Execution」アクションを作成する
  • アクションタブの「新規作成」ボタンを押下してアクションエディタを開き、アクション名に「Execution」を入力してください。

  • 左ペインの「アクション」→「標準」から「カスタムスクリプトを実行する」を右ペインにドラッグ&ドロップし、以下のコードを入力してください。

カスタムスクリプトには、JavaScript言語で処理を記述することができます。
ただし、DOMの操作はできないのでご注意ください。

カスタムスクリプト内で $variable.変数のキー名 と記述することで getter および setter 経由で変数にアクセスできます。
参照渡しではないのでご注意ください。

定数・入力の場合は以下のように記述してください。
$constant.定数のキー名
$input.入力のキー名

  • 左ペインの「アクション」→「標準」から「メッセージ□を表示する」を右ペインの「カスタムスクリプトを実行する」の下にドラッグ&ドロップし、以下のように設定してください。
設定項目 設定内容
メッセージ□を表示する $variable.successMessage
クリックして閉じるフラグ (任意) オン
閉じる時間(ミリ秒) (任意) 3000

  • 左ペインの「実行条件」→「標準」から「上記カスタムスクリプトの返却値が true のとき」を右ペインの「メッセージ□を表示する」にドラッグ&ドロップし、以下のコードを入力してください。

  • 左ペインの「アクション」→「標準」から「エラーメッセージ□を表示する」を右ペインの「メッセージ□を表示する」の下にドラッグ&ドロップし、以下のように設定してください。
設定項目 設定内容
エラーメッセージ□を表示する $variable.cancelMessage
クリックして閉じるフラグ (任意) オン
閉じる時間(ミリ秒) (任意) 3000

  • 左ペインの「実行条件」→「標準」から「上記カスタムスクリプトの返却値が true のとき」を右ペインの「エラーメッセージ□を表示する」にドラッグ&ドロップし、以下のコードを入力してください。

  • OKを押下してアクションエディタを閉じてください。
ⅱ. 「Check」アクションを作成する
  • アクションタブの「新規作成」ボタンを押下してアクションエディタを開き、アクション名に「Check」を入力してください。

  • 左ペインの「アクション」→「標準」から「カスタムスクリプトを実行する」を右ペインにドラッグ&ドロップし、以下のコードを入力してください。

  • 左ペインの「アクション」→「標準」から「アクション□を実行する」を右ペインの「カスタムスクリプトを実行する」の下にドラッグ&ドロップし、プルダウンから「Execution」を選択してください。

  • 左ペインの「実行条件」→「標準」から「上記カスタムスクリプトの返却値が true のとき」を右ペインの「アクション□を実行する」にドラッグ&ドロップし、以下のコードを入力してください。

  • 左ペインの「アクション」→「標準」から「エラーメッセージ□を表示する」を右ペインの「アクション□を実行する」の下にドラッグ&ドロップし、以下のように設定してください。
設定項目 設定内容
エラーメッセージ□を表示する $variable.errorMessage
クリックして閉じるフラグ (任意) オン
閉じる時間(ミリ秒) (任意) 3000

  • 左ペインの「実行条件」→「標準」から「上記カスタムスクリプトの返却値が true のとき」を右ペインの「エラーメッセージ□を表示する」にドラッグ&ドロップし、以下のコードを入力してください。

  • OKを押下してアクションエディタを閉じます。

  • 最後に、ページに配置した「Execute」ボタンを押下し、プロパティタブの「イベント」→「クリック時」に「Check」アクションを設定してください。

以上でカスタムスクリプトおよび$variableを用いたサンプル画面の作成は完了です。

動作確認

作成したアクションおよびカスタムスクリプトが正しく動作するか確認します。
ツールバーの「プレビュー」アイコンを押下することで動作確認を行えます。

以下のように動作していれば問題ありません。

  • チェックボックスが一つも選択されていない状態で「Execute」ボタンを押下するとエラーメッセージが表示されること。
  • チェックボックスが選択されている状態で「Execute」ボタンを押下すると確認ダイアログが表示されること。
  • 確認ダイアログのOKを押下すると完了メッセージが表示されること。
  • 確認ダイアログのキャンセルを押下するとキャンセルした旨のメッセージが表示されること。

-CookBook
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

No.8 Excel からの一括ユーザ一括登録

この記事は、EWS 2017で行われたLogicDesignerの講演内容に関する記事です。 こちらの例では、LogicDesignerを利用して、入社や組織変更等の発生時に有用なExcelファイルの …

no image

グリッドテーブルのイメージからワークフローの案件内容を表示するには

このCookbookでは、グリッドテーブルの「イメージ」から申請済みの案件の詳細画面を呼び出す方法を紹介します。 この方法を利用すると別の案件を参照しながら新しく申請を行うことができます。 BISで作 …

no image

FormaのスクリプトからAjax処理を呼び出す

このCookBookでは、Formaのスクリプトからサーバサイドロジックを呼び出し、Ajax処理を実現する方法をご紹介します。 IM-LogicDesignerを利用し、サーバサイドロジックとその呼び …

結合処理で「多数決」承認機能を実現する

このCookBookでは、「多数決」承認機能を実現する方法について紹介しています。 完成イメージ 以下の完成サンプルをダウンロードしてご活用ください。 im_logicdesigner-data-14 …

no image

AWS 上に Accel Platform を構築する方法

  この CookBook では、AWS の仮想マシン機能(Amazon EC2)を用いて、スタンドアローンで intra-mart Accel Platform を構築する方法について紹介 …

まだデータがありません。

RSSRSSRSSRSS