Retoolでwpのような繰り返しフィールドを作成する

管理画面が作れるローコードツール「Retool」でクイズアプリ使ってみます。

繰り返しフィールドはスクラッチであれば、そのままコードを書けばいいので考える事は無いのですが...
Retoolだと、どうやればいいかはまったのでメモとして残します。

使うもの

• retool
• スプレッドシート (手軽に検証したいためデータベース代わり)

csv

クイズの題名

quiz.csv

id,name,create_date,update_date
1,htmlの質問集,,2022-08-13T15:28:28.226Z

質問集

quiz_res.csv

id,quiz_id,name,question1,question2,question3,res
1,1,htmlに見た目を整えるのは？,css,テストphp,ruby,1
2,1,htmlに見た目を整えるのは？,css,テストphp,ruby,1
3,1,htmlに見た目を整えるのは？,css,php,ruby,1
4,1,htmlに見た目を整えるのは？,css,php,ruby,1
5,1,htmlに見た目を整えるのは？,css,php,ruby,1

コンポーネント

• listview → セットしたデータ分だけ子要素のコンポーネントを繰り返す
• container → 名前の通り囲む

コード

質問を追加

listviewで繰り返す数をtemporary statusで管理して追加した時足す

参考url
https://community.retool.com/t/dynamic-listview-row-numbers/4922

temporary status

{{res_query.data.filter(function(data) {
    return data.quiz_id == table1.selectedRow.data.id;
  }).length}}

質問の追加・更新

質問集は複数行のデータを更新しないといけなく「Resource query」単体では対応できなさそうなので、「javascript query」をループさせて「Resource query」を呼び出し更新をかけるようにする。

※注意点としてadditionalScopeを使用することで「Resource query」変数に渡せる。(ここがどうやるか分からずはまった。

↓javascript query

form1.data.listView1.forEach(function(item, i){
    if(item.textid != ""){
        //更新時
        res_up_query.trigger({
            additionalScope: { i: i }, // ここで変数`i`を上書きします
            // onSuccess関数でデータを取得するために引数を使用することができます
            onSuccess: function(data) {
            //最後の時だけ再度データを取得
                if(i + 1 == form1.data.listView1.length){
                      res_query.trigger();
                }
            },
            onFailure: function(error) {
              // errorsTextを発生したすべてのエラーで更新します
            }
          });
    }else{
        //新規追加時
        res_insert_query.trigger({
            additionalScope: { i: i }, // ここで変数`i`を上書きします
            // onSuccess関数でデータを取得するために引数を使用することができます
            onSuccess: function(data) {
                if(i + 1 == form1.data.listView1.length){
                      res_query.trigger();
                }
            },
            onFailure: function(error) {
              // errorsTextを発生したすべてのエラーで更新します
            }
          });
    }
});

まとめ

海外のツールなのでちょっと敬遠していましたが、使った見た感じ業務でも使えるように感じました。
reactで作られていそうなので知見がある人は、もっと複雑システムが構築できそうなのでぜひ触ってください！
(今回はクラウド版を使いましたが、オンプレミスも出来るようです