CookBook

入力欄を増やすボタンを作成する方法

投稿日:

このCookBookでは、入力欄を増やすボタンを作成する方法について紹介しています。

完成イメージ

完成サンプル

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

このサンプルは、2020 Summer 版以降でインポートできます。

ローカル環境で表示させる場合は、以下のURLにアクセスしてください。 http://localhost:8080/imart/im_cookbook/bloommaker/215651

なおベースURLである以下の部分は、環境に合わせて適宜変更してください。 http://localhost:8080/imart

レシピ

1. エレメントの配置

2. アクションの作成

3.実践

1. エレメントの配置

以下の画像に従って、コンテナページにエレメントを配置してください。

  • お好みで画面の微調整をしてください。
  • 次に、変数を以下のように作成してください。
  • 変数を以下のようにプロパティに設定してください。
    • ボックス(繰り返し)のlistプロパティ
      • $variable.familyInformation
    • テキスト入力エレメントのvalueプロパティ
      • $variable.familyInformation[$index].name
      • $variable.familyInformation[$index].familyRelationship
  • 上記のように変数を設定することで、familyInfomation配列の要素数が増えるごとにテキスト入力欄が追加で表示されます。

2. アクションの作成

  • 以下のようなアクションを作成し、ボタンエレメントのクリック時のアクションに設定します。
  • このように設定することで、ボタンをクリックするごとに、$variable.familyInformationの要素数が増加します。

3. 実践

  • プレビュー画面を開いてください。
  • ボタンを押すと、入力欄が追加されます。
  • このCookBookでご紹介したように、繰り返しのエレメント、[$index]、配列に要素数を追加するアクションを使用することで、他にも応用ができそうですね。

-CookBook

執筆者:


comment

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

関連記事

IM-BloomMaker 日付入力の preserveTime プロパティを利用して時刻入力に同一の変数を指定する方法

このCookBookでは、2020 Winter でリリースした「日付入力」エレメントと、2022 Winterでリリースした「時刻入力」エレメントを同一の変数に対して利用する方法を説明します。 「日 …

no image

IM-FormaDesignerで作成したフォーム内でIME入力モードを制御する方法【IE・EDGE】

注意事項     Microsoft Edge 41 より ime-mode 属性は利用できなくなりました。 このCookbookでは、IM-FormaDesignerで作成したフォーム内の 画面アイ …

no image

IMBox に投稿種別を追加する方法(iframe)

この CookBook では、IMBox に投稿種別を追加する方法について紹介しています。 以下のドキュメントを参照することで、IMBox に投稿種別を追加することができます。 IMBox プログラミ …

no image

IM-BloomMaker エレメントを狙った位置に配置する方法

この CookBook ではエレメントを狙った位置に配置する方法について紹介します。エレメントを配置する方法として、エレメントをドラッグ&ドロップする方法がありますが、配置先のスペースが狭いとなかなか …

no image

ViewCreatorでカレントの組織コードや会社コードを取得する動的パラメータの作り方

このCookBookでは、カレントの組織コードや会社コードを取得するViewCreatorの動的パラメータの作成方法についてご紹介します。 動的パラメータについての詳細は下記のドキュメントを参照してく …