テーマを変更中で、表示が崩れているところがあります…!

【Bubble】Repeating GroupにInputを配置して登録したい※auto-bindingなし

.bubble
.bubble

こちら下書きは2021/8/25のもので、ちょっと古いです…。放置されていました。。

以下のtipsに関連します。

どんな場面で利用するか?

選択肢の登録をエンドユーザーに行わせたい場合を想定しています。例えば部署名やタグのリストなど。

auto-bindingなしで、「保存」をクリックした時に初めて保存するUIを求められて色々考えた結果、以下のような形になりました。

でももっといい方法あったら教えてくださいまし。

今回は auto-binding なしですが、プラグインを利用したり、作成したりしています。

出来上がりはこんな感じ

保存をクリックするまでDBに保存はしていません。なので、保存をクリックする前にページを再読み込みすると、変更前のデータを表示します。(これがauto-bindingを使うと困るところ)

使っているプラグイン

List Shifter Karma-Ware

自作のプラグイン(配列の指定の位置のテキストを書き換える、配列の指定の位置のテキストを削除する)

画面を作る

前回と同じく、更新するType(テーブル)は Master を用意します。

画面には、Repeating Group、Input、Addボタン、Delボタン、保存ボタン、ListShifterを配置します。

Repeating GroupにはMasterを設定
Custom Statesを設定

Repeating GroupにCustom Statesを2つ設定しました。
・DeleteList —- 保存ボタンクリック時に削除するリストを保持しておく
・ChangeList —- 画面に表示するテキストのリストを保持する

Addボタン

Addボタンは初期表示は非表示にしておき、最後の行のときのみ表示するように設定。

Delボタンは常に表示。

inputはちょっと特殊で、Repeating GroupのCustom Statesの値を、行indexで拾ってきます。

List Shifterは、Repeating Groupのリストとします。

Workflowを設定する

設定するWorkflowはちょっと多いです。

  • Page is loaded : ページ読み込み時
  • Button Save is clicked : 保存ボタン押下時
  • Icon Add is clicked : Addボタン押下時
  • Icon Del is clicked : Delボタン押下時
  • Input’s value is changed : Inputの値変更時
  • ListShifterKW A Iterate from List Shifter : ListShifterの処理開始時
  • ListShifterKW A Iteration Complete : ListShifterの処理終了時

ページ読み込み時

  • Repeating Groupが空のときは新しい行を作成
  • Custom States 「ChangeItem」にMasterの名前配列を設定
1.リストが空のとき、空白行を作成

2.ChangeListに名前配列を設定

保存ボタン押下時

  • BEGIN ITERATE ListShifterKW A を実行
1.BEGIN ITERATE ListShifterKW A を実行

Addボタンクリック時

  • 空白行を作成
  • 作成した空白行をChangeListに追加
1.空白行を作成
2.作成した空白行をChangeListに追加

Delボタンクリック時

  • ChangeListからクリックした行のテキストを削除 ※独自プラグイン
  • ChangeListに削除結果のリストを設定
  • DeleteListにクリックした行のMasterを設定
  • Repeating Groupからクリックした行のMasterを削除
1.ChangeListからクリックした行のテキストを削除
2.ChangeListに削除結果のリストを設定 / DeleteListにクリックした行のMasterを設定
3.Repeating Groupからクリックした行のMasterを削除

Inputの値変更時

  • ChangeListからクリックした行のテキストを変更 ※独自プラグイン
  • ChangeListに変更結果のリストを設定
1.ChangeListからクリックした行のテキストを変更
2.ChangeListに変更結果のリストを設定

ListShifterの処理開始時

  • ChangeListを1行ずつ保存する
1. ChangeListを1行ずつ保存する

ListShifterの処理終了時

  • 削除対象のDeleteListをDBから削除する
1. 削除対象のDeleteListをDBから削除する

タイトルとURLをコピーしました