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

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

関連記事

スケジュールにログインしている本人しか表示されない場合の対応方法

このCookBookでは「intra-mart Accel Collaboration」スケジュール機能を利用する前の注意点について紹介しています。 お客様で「intra-mart Accel Col …

IM-BloomMaker Bulma タイルの利用方法

この CookBook では、 2020 Summer でリリースした Bulma の「タイル」エレメントの利用方法について説明していきます。 「タイル」エレメントは自由にグリッドレイアウトを構築する …

no image

Payara の Docker を作成する。

この CookBook では、Payara の Docker の作成手順について紹介しています。 レシピ ベースイメージの作成 Payara の Docker イメージを作成します 実行します 1. …

no image

ViewCreatorとIM-FormaDesignerを利用して、既存テーブルのデータを表示する。

このCookBookでは、ViewCreatorとForma画面を利用して、既存テーブルのデータを表示する方法を説明します。 ViewCreatorでテーブルデータの一覧を表示し、IM-FormaDe …

no image

IM-LogicDesignerで、ファイルアップロードに添付されたファイルの内容を、画面上に表示させる方法

このCookBookでは、IM-LogicDesignerで、ファイルアップロードに添付されたファイルの内容を、画面上に表示させる方法を紹介します。 完成イメージ 完成サンプル 以下の完成サンプルをダ …

RSSRSSRSSRSS