CookBook

スクリプト開発で登録フォームを作成する

投稿日:2015-12-10 更新日:

このCookBookでは、スクリプト開発で登録フォームを作成する際に役立つ Tips を紹介します。

完成イメージ

<操作方法>


1. フォームに任意の内容を入力し「登録」ボタンをクリックしてください。
2. 入力形式が不適切な場合はエラーメッセージが表示されます。
3. データの送信に成功した場合は登録処理の結果が表示されます。

完成サンプル

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

e builder プロジェクト : im_cookbook_109004.zip
imm ファイル : im_cookbook_109004-1.0.0.imm

ローカル環境で表示させる場合は、以下のURLにアクセスしてください。
http://localhost:8080/imart/im_cookbook/109004/edit
なおベースURLである以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

  1. 入力項目を作成する。
  2. 登録ボタンを作成する。
  3. form タグを記述する。
  4. Ajax でデータを送信する。

1. 入力項目を作成する。

プレゼンテーションページに入力項目を配置してください。
今回は、入力フォームを表示するために 入力フォーム用テーブル「table.imui-form」 を使用してください。
必須入力の項目には 必須入力記号「label.imui-required」 を使用して、必須入力であることが視覚的にわかるようにしましょう。

cb_109004_imui-form

2. 登録ボタンを作成する。

入力フォームの下に登録ボタンを配置してください。
ボタン配置エリア「.imui-operation-parts」 の中にボタンを配置すると、ボタンの表示位置が自動調整されます。

3. form タグを記述する。

「1. 入力項目を作成する。」で作成したテーブルを form タグで括ります。

action属性にデータ送信先のURLを指定してください。
以下のようにマッピングされていますので、action 属性に「/im_cookbook/109004/ajax」と指定することで「im_cookbook_109004/ajax/ajax.js」が呼び出されます。

4. Ajax でデータを送信する。

imuiAjaxSend を使用し、フォームに入力されている値を Ajax で送信してください。

Ajax通信後に画面遷移させる場合は imuiAjaxSubmit を使用してください。

-CookBook
-,

執筆者:


comment

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

関連記事

no image

EWS2017 「業務への適用イメージがすぐに湧く!  魔法の業務ロジック作成ツール『IM-LogicDesigner』実用例 10本勝負!」講演内容のご紹介

この記事では、EWS2017 Technology Track「業務への適用イメージがすぐに湧く!  魔法の業務ロジック作成ツール『IM-LogicDesigner』実用例 10本勝負!」での講演内容 …

no image

IM-LogicDesignerを利用して、IM-Workflowの到達処理で任意の参照者を追加する方法

このCookBookでは、LogicDesignerを利用して、IM-Workflowの到達処理で任意の参照者を追加する方法について紹介しています。 承認ノードの到達処理で、申請者を参照者として登録し …

no image

祝日や会社の予定を設定したカレンダーを作成する

このCookbookでは、祝日や独自の予定を設定したカレンダーを活用する方法について紹介します。テナント管理者はカレンダーの作成、メンテナンスを行えます。また、テナントのデフォルトカレンダーを設定でき …

no image

申請時の注意事項を添付ファイルとして配置する方法

このCookBookでは、申請時の注意事項を記載したファイルを、申請画面の添付ファイルとして配置する方法について紹介しています。 FormaDesignerの前処理プログラムで任意の添付ファイルを設定 …

no image

後処理プログラムで画面アイテム「ファイルアップロード」にバリデーションを実行する方法

このCookbookでは、画面アイテム「ファイルアップロード」に添付されたファイルをバリデーションする方法を紹介します。 後処理プログラムを使用してバリデーションを実行することで、画面に表示するエラー …

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

RSSRSSRSSRSS