CookBook

スプレッドシートでSpreadJSライブラリを利用してFormaの画面に対して入力チェックを実行する方法

投稿日:

このCookBookでは、スプレッドシートでSpreadJSライブラリを利用して入力チェックを実行する方法について紹介しています。
SpreadJSライブラリはクライアントサイドで動作するため、サーバ通信せずに入力チェックを行うことが可能です。

SpreadJSライブラリについては以下のGrapeCity社のマニュアルを参照してください。
SpreadJS

サーバサイドでの入力チェックは以下の記事を参照してください。
スプレッドシートでForma入力チェックユーザプログラムを利用して入力チェックを実行する方法

完成イメージ


1. 入力値に対してリアルタイムで入力チェックを行います。

・ 表示されているダイアログのOKボタンをクリックすると再度セルにフォーカスが当たり、値を変更することを求めます。
・ キャンセルボタンをクリックするとセルの入力内容を元の状態に戻します。


2. 登録ボタンのアクション設定で入力項目に対する必須チェックを行います。

完成サンプル

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

種類 定義名 補足説明
Formaアプリケーション情報 SpreadJSを利用してスプレッドシートに対して入力チェックする 通勤交通費申請を行うアプリケーションです。

レシピ

  1. Formaアプリケーションを作成し、通勤交通費申請書を表現したフォームにスプレッドシートアイテムを配置します。
  2. スクリプトアイテムを配置し、スプレッドシートアイテムに対して入力チェック機能を実装します。
  3. 登録ボタンのアクション設定で入力項目に対する必須チェックを設定します。

完成サンプルを見ながら以下の解説を確認してください。

1. Formaアプリケーションを作成し、通勤交通費申請書を表現したフォームにスプレッドシートアイテムを配置します。

以下の項目をシート上のフィールドとして定義してください。

  • Applicant
  • Affiliation department
  • Applicant's address
  • Closest station

以下の項目をシート上のテーブルとして定義してください。

  • Public transport fare

以下の項目をテーブルに表示する列として設定してください。

  • Transportation to use
  • Boarding section (From)
  • Boarding section (To)
  • 3 months (commuter pass)
  • 1 month (commuter pass)
  • one day (round trip)

2. スクリプトアイテムを配置し、スプレッドシートアイテムに対して入力チェック機能を実装します。

入力チェックには、以下の SpreadJS API を使用しています。(GrapeCity社のマニュアルへ遷移します。)

詳しい処理内容はインラインでコメントを入れています。

3. 登録ボタンのアクション設定で入力項目に対する必須チェックを設定します。

登録ボタンのクリックイベントにカスタムスクリプトを指定し、以下のスクリプトを記述します。

セルの値取得には、以下の SpreadJS API を使用しています。(GrapeCity社のマニュアルへ遷移します。)

詳しい処理内容はインラインでコメントを入れています。

-CookBook
-,

執筆者:


comment

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

関連記事

no image

IM-BISで作成したコンテンツ画面の内容をIM-PDF DesignerでPDFとして出力する方法

このCookBookでは、IM-BISで作成したコンテンツ画面の内容をIM-PDF DesignerでPDFとして出力する方法を紹介しています。 単票および表形式の帳票出力を行います。 完成イメージ …

IM-LogicDesignerを利用して、IM-Workflowの未処理案件の処理対象者を再展開する

このCookBookでは、IM-LogicDesignerを利用して、IM-Workflowの未処理案件の処理対象者を再展開する方法について紹介しています。 人事異動を重ねることで、未処理案件の中には …

no image

imuiValidateでhiddenの隠し要素をバリデーションする方法

このCookBookでは、imuiValidateでhiddenの隠し要素をバリデーションする方法について紹介しています。 今回は閉じられたimuiGadgetBar 内の入力項目に対して、クライアン …

no image

ノード毎に入力モード(表示モード)変換を切り替える方法

このCookBookでは、BISワークフローにおいて、ノード毎に各アイテムの入力(表示)モードを切り替える方法を紹介します。 ノード毎に別画面を作成する方法もありますが、本稿ではアクション設定を利用し …

no image

申請画面の入力データをExcelファイルにダウンロードする

このCookbookでは、IM-BIS 2017 Winterから新たに追加された「 外部連携のレスポンスとして、ファイルデータを受け取る 」機能を利用する方法を紹介いたします。 BISで作成した申請 …

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

RSSRSSRSSRSS