intra-mart Accel Platform ローコード開発チュートリアルガイド 第15版 2024-04-01

4.3.3. ワークフロー画面の修正

「シンプルなワークフロー」テンプレートから作成した画面はワークフローで利用する1つの画面で作られています。
しかし、テンプレートから生成された画面では、申請時に承認コメントや承認者が入力できてしまいます。
修正せずとも画面の利用は可能ですが、申請画面として使われている場合や処理画面として使われている場合などを判定し、必要な項目のみを表示するように画面を修正していきます。
以下のアプリケーション全体図にある、色が塗られたところが該当箇所です。
../../../_images/screen_overall.png

4.3.3.1. 入力、表示項目の修正

画面の入力、表示項目の修正を行います。

4.3.3.1.1. 入力項目の修正

「サイトマップ」→「Accel Studio」→「アプリケーション管理」→「アプリケーション一覧」→「【チュートリアル】日報アプリケーション」の順に遷移します。
アプリケーション管理画面のアプリケーション構成情報で「画面」のタブを選択します。
「【チュートリアル】日報アプリケーションWF画面」を選択します。
IM-BloomMaker コンテンツ編集画面で「デザイン編集」を選択します。
IM-BloomMakerの「デザイン編集画面」が表示されます。
画面上部のタブの中から「Input Area」タブを選択します。

まず、 「承認コメント」と「承認者」の項目を申請時には非表示にするよう修正します。
画面左側の「レイアウト」 - 「ボックス」を選択し、一番下に追加します。
画面右側に表示されている「画面構成」タブを選択します。
../../../_images/workflow_screen3.png

画面構成の一番下に先ほど追加した「ボックス」が追加されています。
追加したボックスの配下に「承認コメント」、「承認者」のフィールドをドラッグ&ドロップで移動します。
../../../_images/workflow_screen4.png

画面構成でボックスを選択した状態で「プロパティ」タブを開きます。
「共通」 - 「表示/非表示」のラジオボタンで変数値を選択し、入力ボックスに以下の値を入力します。
「= $input.imwPageType != $constant.pageType.apply」

bm_preview をクリックし、 承認コメント、承認者が非表示になっていることを確認します。
../../../_images/workflow_screen5.png

続いて、承認時にのみ「承認者」と「承認コメント」の入力ができるよう修正します。
承認コメントのテキストエリア要素を選択します。
「エレメント固有」 - 「readonly」で変数値を選択し、以下の値を入力します。
「= $input.imwPageType != $constant.pageType.process」
../../../_images/workflow_screen6.png

承認者のテキスト入力要素を選択します。
「エレメント固有」 - 「static」を変数値から固定値に変更します。
「エレメント固有」 - 「readonly」で変数値を選択し、以下の値を入力します。
「 = $input.imwPageType != $constant.pageType.process 」
../../../_images/workflow_screen7.png

4.3.3.1.2. 手動入力を制限する修正

次に「提出日」、「申請者」の項目の手動入力を制限します。

提出日の日付入力要素を選択し、「プロパティ」タブを開きます。
「エレメント固有」 - 「readonly」のラジオボタンで「固定値」を選択します。
ラジオボタンの下に表示されたチェックボックスにチェックを入れます。
../../../_images/workflow_screen8.png

申請者のテキスト入力要素を選択し、「プロパティ」タブを開きます。
「エレメント固有」 - 「readonly」のラジオボタンで固定値を選択します。
ラジオボタンの下に表示されたチェックボックスにチェックを入れます。
../../../_images/workflow_screen9.png

bm_preview をクリックし、 提出日、申請者が入力を受け付けなくなっていることを確認します。

4.3.3.2. アクションの修正

画面のアクションを修正します。

4.3.3.2.1. 提出日の自動入力アクションを追加

提出日を自動で入力するよう修正します。

画面右側に表示されている「アクション」タブを選択します。
bm_action_create_new をクリックします。
../../../_images/workflow_screen10.png

アクション名に「提出日の自動入力」と入力します。
「標準」 - 「カスタムスクリプトを実行する」を右側のスペースへドラッグ&ドロップします。
以下の値を入力します。
$variable.state.entity.submission_date = new Date();
次に、申請時のみ動作するよう実行条件を追加します。
アクションエディタ画面左上にある「実行条件」タブを開きます。
「標準」 - 「変数〇が〇のとき」を先ほど追加したアクションに重ねるようにドラッグ&ドロップします。
変数の右側にある bm_search をクリックし、セレクタを表示させます。
「入力」の「$input > imwPageType」を選択し、「決定」をクリックします。
右辺の「abc▼」をクリックし、入力値の種類を固定値から変数値へと変更します。
表示された入力ボックス右側にある bm_search をクリックし、セレクタを表示させます。
「定数」の「$constant > pageType > apply」を選択します。
../../../_images/workflow_screen11.png

「決定」をクリックし、アクションエディタを閉じて編集を終了してください。

4.3.3.2.2. 申請者の自動入力アクションを追加

申請者を自動で入力するように修正します。

画面右側に表示されている「アクション」タブを選択します。
bm_action_create_new をクリックします。
../../../_images/workflow_screen12.png

アクション名に「申請者の自動入力」と入力します。
「標準」 - 「変数〇に〇を代入する」を右側のスペースへドラッグ&ドロップします。
変数の右側にある bm_search をクリックし、変数セレクタを表示させます。
申請者の入力フォームに紐づいている「$variable > state > entity > applicant」を選択します。
右辺の「abc▼」をクリックし、入力値の種類を固定値から変数値へと変更します。
表示された bm_search をクリックし、セレクタを表示させます。
「環境」 から 「$env > userContext > userProfile > userName」 を選択します。

次に、申請時のみ動作するように実行条件を追加します。
アクションエディタ画面左上にある「実行条件」タブを開きます。
「標準」 - 「変数〇が〇のとき」を先ほど追加したアクションに重ねるようにドラッグ&ドロップします。
変数の右側にある bm_search をクリックし、セレクタを表示させます。
「入力」の「$input > imwPageType」を選択します。
右辺の「abc▼」をクリックし、入力値の種類を固定値から変数値へと変更します。
表示された入力ボックス右側にある bm_search をクリックし、セレクタを表示させます。
「定数」の「$constant > pageType > apply」を選択します。
../../../_images/workflow_screen13.png

「決定」をクリックし、アクションエディタを閉じて編集を終了してください。

4.3.3.2.3. Initializeアクションの修正

作成した2つのアクションを画面表示時に実行されるInitializeアクションに追加します。

画面右側に表示されている「アクション」タブを選択します。
Initializeアクションの bm_action_edit をクリックします。
../../../_images/workflow_screen14.png

「標準」 - 「アクション〇を実行する」を右側下部のスペースへドラッグ&ドロップし、最後尾のアクションとして追加します。
入力プルダウンの一覧から、先ほど作成した「提出日の自動入力」を選択します。

「標準」 - 「アクション〇を実行する」を右側下部のスペースへドラッグ&ドロップし、最後尾のアクションとして追加します。
入力プルダウンの一覧から、先ほど作成した「申請者の自動入力」を選択します。
../../../_images/workflow_screen15.png

「決定」をクリックし、アクションエディタを閉じて編集を終了してください。
bm_preview をクリックして、 提出日、申請者が自動入力されていることを確認します。
../../../_images/workflow_screen16.png
これでワークフロー画面の修正は完了です。