bubbleでデータベースに入れる前にrepeating group表示し、表示確認後にデータベースに入れたい。

下記添付のスクリーンショットを元に説明いたします。

1.Inputフォームに任意の文字を入力
2.「追加する」ボタン押下
3.リピーティンググループ上に表示される
4.「キャンセル」ボタン押下でデータベースに保存されず、ひとつ前のページに戻る
5.「キャンセル」ボタンではなく、「登録」ボタン押下でデータベースに追加される

以上を実装するにはどうしたらよいでしょうか?

1~3の時点でデータベースに保存すればリピーティンググループで表示することはできたのですが、その場合だと、「キャンセル」もしくはキーボードのバックスペースなどを押してもデータベースには保存されたままになってしまいます。
あくまで、「追加」ボタンはリピーティンググループに一時的に表示するだけで、「登録」ボタンによってデータベースに保存される仕様にしたいです。

ご教授お願い致します。

スクリーンショット

https://tinyurl.com/2bzouptl

レコードを複数新規登録するのか、単数登録するのかによって難易度が変わります。
スクリーンショットを見る限り、複数レコードの新規登録だと思いますので
そちらを想定して回答いたします。

  1. RepeatingGroupに表示する一時的な入れ物「CustomState」を作成
    Text型のListにします。

    2.追加ボタン押下したときに、1のCustomStateに格納します。

    3.RepeatingGroupにCustomStateを表示します。

    ここまでで一時保存した内容をRepeatingGroupに表示することができます。
    ※リロードを押すことでCustomStateのデータは消えます。
    こちらを利用してキャンセル処理を作成します。
    4.キャンセルボタン押下したときにRefresh the page

    5.最後にリスト形式で保存しているCustomStateをデータベースに保存します。
    データの新規作成は1つずつしか行えないので、List Shifterというプラグインを追加します。

    6.List ShifterKWという elementsを配置します
    Datatypeはtext
    List to ShiftはRepeatingGroup text’s List of textsを選択してください。

    7.登録ボタン押下したときにListShifterを起動させます。

    8.ListShifterが起動したときにレコード追加アクションを設定します。

    WorkFlowはCreata a new thing
    Typeは保存したいデータベース
    set another fieldにThis List Shifter KW’s Current Iteration Itemを選択

    長くなりましたが、ここまで設定することで、以下のような動きが実装できます。
    https://i.gyazo.com/2da8d6ac46b985961b86256a6db7f7c1.gif
    https://i.gyazo.com/baad25182d0d89120ce97d14285cba0b.gif

ListShifterについてはケイタロウさんの記事を参考にしています。
こちらの「新規レコードの複数追加」がとても分かりやすいので一度読んでみて下さい。
https://note.com/nocoder_k/n/nc22bf8cd4c6d

「いいね!」 1

入会後、初めて質問させて頂きましたが、想像を大きく上回る丁寧で的確なご回答に驚愕しました。
まさに期待していた機能がそのまま実装できました。
また、参考記事も併せてご紹介いただきありがとうございす。
まだ記事の方が拝読しておりませんが、より理解が深まりそうです。
ありがとうございました。

「いいね!」 2

参考になったようで何よりです。

「いいね!」 1

すいません。追加で質問させてください。
目的は変わらないのですが、添付画像のように保存する項目が複数の場合はどのような方法があるでしょうか?
一度で質問を完結できず申し訳ありません。


CustomStateでは1種類のデータしか保持できず、RepeatingGroupには1つのCustomStateしか選択できません。
なので、CustomStateを3つ作成し、RepeatingGroupを3つ作成して横並びにするのはどうでしょうか。

作成方法は上記で作成した仕組みをあと2つ追加するだけなので割愛します。
※注意点として、価格の部分のみNumber型に指定してください。

「いいね!」 1

申し訳りません。
CustomStateに重複する値を格納することができないということを失念していました。
同じ値段や同じ種類になったときに一つのデータとして結合してしまうので、他の方法を試した方がよいですね。
良い方法が見つかり次第こちらに投稿します。

「いいね!」 1

度々のご回答ありがとうございます。
CustomStateにはそういった特徴があったのですね。
bubbleで出来ないことを知るのも勉強の一つになりました。
ありがとうございました。

「いいね!」 1