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

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

関連記事

IM-BloomMaker ボタンに効果音を付ける方法

このCookBookでは、2022 Spring でリリースした「音声または動画○を再生する」アクションアイテムの利用方法について説明します。「音声または動画○を再生する」 アクションアイテムは、指定 …

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

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

no image

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

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

画面アイテム「スプレッドシート」の特定セルをIM-ContentsSearchの検索対象にする方法

画面アイテム「スプレッドシート」の特定セルをIM-ContentsSearchの検索対象にする方法について紹介します。 本CookBookでは、スプレッドシート上の個人情報や、外部に公開したくない内容 …

IM-Wiki

Wiki機能の活用例

このCookbookでは、intra-mart Accel Platform 2018 Springから利用可能なWiki機能(IM-Wiki)の活用例について紹介します。 今回の記事では実際にWik …