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-LogicDesigner「繰り返し」「分岐」EL式の定義例

このCookBookでは、IM-LogicDesignerの「条件分岐」「繰り返し」制御要素の条件で利用するEL式について定義例を紹介しています。 ここでは主に「 IM-LogicDesigner上で …

no image

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

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

no image

スクリプト開発でのストアドプロシージャの実行方法

intra-mart Accel Platform 2017 Winter(8.0.18) より SharedDatabase, TenantDatabase に executeCallable AP …

no image

ワークスペースとToDo機能との連携

このCookBookでは、「intra-mart Accel Collaboration」の機能の1つであるワークスペースと「intra-mart Accel Collaboration」のToDo機 …

no image

スマートフォン版スケジュール画面から添付ファイルをダウンロードする方法

このCookBookでは、「intra-mart Accel Collaboration」のスケジュール機能において、スマートフォン版の画面から添付ファイルをダウンロードできるようにする方法について紹 …

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

RSSRSSRSSRSS