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

前回のログイン時刻を表示するポートレットの作成方法

このクックブックでは、前回のログイン時刻を表示するポートレットの作成方法をご紹介します。 具体的には、以下の3つの情報を表示するポートレットを作成します。 前回のログイン時刻 前回ログイン時のIPアド …

ワークフローの案件削除時にBIS/Formaの関連データも削除する方法

このCookBookでは、ワークフローの案件削除時にBIS/Formaの関連データも併せて削除する方法について紹介しています。 BIS/Formaで作成したワークフローには、機能ごとに個別で管理するト …

no image

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

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

no image

スクリプト開発した画面にバリデーション(入力チェック)を実装する

このCookBookでは、作成した画面項目に対してバリデーション(入力チェック)を設定する方法をご紹介します。 今回はスクリプト開発で登録フォームを作成するで作成した画面項目に対して、クライアントサイ …

no image

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

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

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

RSSRSSRSSRSS