CookBook

ラジオボタンの値やフォーカスによってアイテムの色を変更するには

投稿日:

このCookbookでは、カスタムスクリプトによるフィールドスタイルの変更方法を説明します。
アクション設定とカスタムスクリプトの組み合わせにより、入力値やフォーカスイベントに合わせてアイテムのスタイルを変更できます。

完成イメージ


サンプルでは、以下のイベントでフィールドスタイルが変更されることを確認できます。
1) ラジオボタンの値が選択されたとき
2) 項目にフォーカスが当たったとき

完成サンプル

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

サンプルに含まれる定義情報は以下の表の通りです。

種類 定義名 補足説明
BIS定義 im_cookbook_115987 関連するFormaアプリケーション定義やIM-Workflowのフロー定義等の情報も含まれます。

上記のサンプルの利用条件は以下の通りです。

  • intra-mart Accel Platform(Advanced) 2016 Summer(8.0.14), IM-BIS 2016 Summer(8.0.11)以降のバージョンであること
  • サンプルデータのインポートが行われていること

サンプルは、intra-mart Accel Platform(Advanced) 2016 Summer(8.0.14), IM-BIS 2016 Summer(8.0.11)で動作確認を行っています。

レシピ

  1. 「フィールドスタイル」とは
  2. 入力値に基づいてアイテムの背景色を変更する方法
  3. フォーカスによってアイテムの背景色を変更する方法

1. 「フィールドスタイル」とは

画面アイテムのプロパティには、「フィールドスタイル」という設定項目があります。
IM-BISやIM-FormaDesignerで作成した画面の項目の背景色などの装飾を行うにはこの設定を行ってください。
im_cookbook_115987_1

このCookbookでは、このフィールドスタイルの設定をカスタムスクリプトから変更する方法をご紹介いたします。

詳しくは以下のドキュメントをご覧ください。

2. 入力値に基づいてアイテムの背景色を変更する方法

入力値に合わせてアイテムの背景色を変更するにはアクション設定を利用できます。

2-1. 入力値を条件に設定する

  1. アクション設定の「イベント設定」では、背景色を変更するイベントのトリガのアイテムとイベントタイプを設定してください。
    im_cookbook_115987_2
    1. で設定したアイテム・イベントタイプの行の「設定」をクリックしてください。
  2. アクションを「カスタムスクリプト」に設定します。
    im_cookbook_115987_3
  3. 入力値に対する条件をアクション設定の「条件」に設定してください。
    im_cookbook_115987_4

サンプルでは、ラジオボタンの送信値を条件に設定しています。

定義例

条件の詳細は以下のCookbookをご覧ください。

2-2. カスタムスクリプトでアイテムの背景色を変更する

  1. アクション設定の「カスタムスクリプト」を編集してください。
    im_cookbook_115987_5
  2. 対象のアイテムに合わせて、以下の内容を参考にスクリプトを実装してください。

定義例

3. フォーカスイベントによってアイテムの背景色を変更する方法

3-1. フォーカスイベントでフィールドスタイルを変更できるアイテムの種類

フォーカスイン・フォーカスアウトでフィールドスタイルを変更する場合、対象の画面アイテムがフォーカスイベントに対応している必要があります。
目的のアイテムの対応状況の詳細は以下のドキュメントをご覧ください。

3-2. アクション設定を登録する

  1. アクション設定の「イベント設定」では、背景色を変更するイベントのトリガのアイテムとイベントタイプを設定してください。
    イベントタイプには「フォーカスイン」または「フォーカスアウト」を選択してください。
    im_cookbook_115987_6
    1. で設定したアイテム・イベントタイプの行の「設定」をクリックしてください。
  2. アクションを「カスタムスクリプト」に設定します。
    im_cookbook_115987_7
  3. 以下の内容を参考にスクリプトを実装してください。
    画面アイテムの種類による実装方法は「2-2. カスタムスクリプトでアイテムの背景色を変更する」を参照してください。

定義例

カスタムスクリプトを利用すると、背景色以外にも「ラベルスタイル」や「フィールドスタイル」の設定を変更できます。
以下は、画面アイテム「文字列」の場合の実装例です。

上記を参考にして要件に合わせたスクリプトを実装してみてください。

-CookBook
-

執筆者:


comment

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

関連記事

no image

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

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

no image

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

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

no image

IM-FormaDesignerで作成したフォーム内で、外部連携を利用して最も簡単に値を渡す方法(単一アイテム編)

このCookBookでは、IM-FormaDesignerで作成したフォーム画面の中で、アイテムからアイテムへ値を渡す方法について紹介します。 今回は例として、文字列と数値の値を同時にアイテムからアイ …

no image

外部連携の後処理で任意のエラーメッセージを表示する

このCookbookでは、外部連携の後処理で任意のエラーメッセージを表示する方法を紹介します。 この方法を活用することにより、外部連携の後処理ででエラーが発生した場合、利用者に内容を通知することができ …

no image

ワークフローの一覧を使い分けるには(改訂版)

このCookbookでは、以前に公開した「IM-Workflowの一覧を業務別に使い分けるには」に関して、お問い合わせいただいた内容を追加してワークフローの一覧の検索条件を付与する方法をご紹介いたしま …

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

RSSRSSRSSRSS