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

共通マスタのアカウント更新を契機に、IMBoxグループに参加させる方法(IM-LogicDesigner トリガ定義)

このCookBookでは、共通マスタのアカウント更新を契機に、IMBoxのGroupBoxに参加させる方法を紹介します。 IM-LogicDesignerのトリガ定義を利用することで、ノンプログラミン …

no image

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

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

IM-BloomMaker グラフエレメントの使い方(円グラフ編)

この CookBook では、intra-mart Accel Platform 2019 Winter から利用可能になった IM-BloomMaker の円グラフの活用方法について紹介しています。 …

no image

BISやFormaのテーブルにCSVファイルからのインポート・エクスポートを行うには

このCookbookでは、明細テーブルやグリッドテーブルとCSVファイルを連携する方法を紹介します。 この方法を活用することにより、明細テーブルやグリッドテーブルへの入力の手間を軽減できます。 完成イ …

no image

request.log を Kibana で可視化する方法

この CookBook では、request.log を Kibana で可視化する方法について紹介しています。 方法は色々ありますが、この CookBook では Logstash と logsta …

RSSRSSRSSRSS