複数ページのアプリケーションの作成

すべてのRetoolアプリケーションは、固有のWebページ上にあります。これは、タブ付きコンテナー、ウィザード、モーダルなどのコンポーネントを含む複数の「ページ」に構成できますが、複数のアプリケーション間で機能を分割するとパフォーマンスが向上する場合があります。

アプリケーション同士を結び付けるときには、App Aを開いた状態で、URLパラメーターを使用してデータをApp Bに渡します。複数のアプリケーションで大量のデータを共有するには、localStorageを使用します。

別のアプリケーションを開いてデータを渡すコンポーネントの作成

このセクションでは、クリックすると別のアプリケーションを開き、その別のアプリケーションにデータを渡すコンポーネントの作成方法を説明します。ステップ1～4では、Buttonコンポーネントを使用しますが、TableコンポーネントとTextコンポーネントも使用できます。

1. 2つのアプリケーションを作成します

このチュートリアルでは、2つのアプリケーションをApp AとApp Bと呼びます。

1. Retoolのダッシュボードにログインします。
2. Createをクリックします。
3. 新しいアプリケーションの名前を入力して、**Create!**をクリックします。
4. 上のステップを繰り返して、2つ目のアプリケーションを作成します。

2. App Aにボタンを追加します

App Aに追加したButtonコンポーネントは、最終的にApp Bへの接続としての機能を果たします。ユーザーがこのボタンをクリックすると、App Bが開きデータが渡されます。

1. キャンバスの背景をクリックして、右側にコンポーネント・リストを表示します。

2. コンポーネント・リストから、Buttonコンポーネントをキャンバスにドラッグします。

3. App AのボタンをApp Bに結び付けます

App Bを開いてデータを渡すボタンの設定は、すべてコンポーネント・エディターから行います。

1. キャンバスに追加したボタンをクリックして選択します。右側にコンポーネント・エディターが表示されます。

2. Action > On-ClickをOpen another Retool pageに設定します。
3. Retool Page to Openドロップダウン・リストから、開くアプリケーションを選択します。
4. URL Parameters to addで、App Bに渡すデータを指定します。keyフィールドとvalueフィールドにはRetoolのJavaScript構文({{}})を指定できます。

例えば、App AにText Inputコンポーネントがあり、このコンポーネントの値をApp Bに渡す必要があるとします。keyフィールドをnameなどの分かりやすい名前に設定してから、valueフィールドを{{textinput1.value}}に設定します。

ユーザーがText Inputの値をElvisに設定したとします。

ユーザーがOpen App Bボタンをクリックすると、https://example.tryretool.com/apps/B?name=Elvis のようなURLでApp Bが開きます。

4. App AからのデータをApp Bで使用します

App AからのデータにApp Bでアクセスするには、urlparams変数を使用します。前のセクションの例に続けて、Textコンポーネントの値をHello, {{urlparams.name ? urlparams.name : 'World'}}!に設定すると、nameパラメーターがURL内にある場合(また、Elvisに設定されている場合。つまり、name=Elvis)に、Hello, Elvis!が表示されます。そうでない場合は、代替テキストであるHello, World!が表示されます。

Tableコンポーネントでの結び付けとデータの受け渡し

Tableコンポーネントでも、上のステップ3で説明したAction > On-Click > Open Another Retool Pageのワークフローがサポートされています。テーブルのセルをクリックすると、{{ currentRow }}オブジェクトによって、クリックした行内のデータにアクセスできるようになります。

データにアクセスするには、ステップ4で説明したようにurlparamsオブジェクトを使用します。

Textコンポーネントでの結び付けとデータの受け渡し

上のステップ3で説明したAction > On-Click > Open Another Retool Pageのワークフローのかわりに、Textコンポーネントをリンクにして、JavaScriptで自分でApp BへのURLを作成することもできます。

<a href="https://example.tryretool.com/apps/B?name={{ textinput1.value }}">
  Open App B
</a>

データにアクセスするには、ステップ4で説明したようにurlparamsオブジェクトを使用します。

localStorageでの大量のデータの共有

RetoolではlocalStorageがサポートされています。これは、主要なすべてのブラウザーでサポートされているWebプラットフォームAPIです。大量のデータを保存する必要があるが、そのデータをキーと値のペア(KVP)として構造化できる場合は、localStorageで十分にニーズを満たすことができるでしょう。

KVPを記述するには、Run JS Codeクエリー内でlocalStorage.setValue(key, value)を使用します。KVPを読み取るには、{{ localStorage.values.example }}を介してそれにアクセスします。ここでのexampleはキーの名前です。正式なRetool APIリファレンスについては、Local Storage( English )を参照してください。

🚧

KVPは文字列として保存されます

変換には、parseInt() またはparseFloat() を使用します。

同じ配信元のすべてのWebページは単一のlocalStorageを共有します。例えば、2つのRetoolアプリケーションがあり、Aが https://example.tryretool.com/apps/A に、Bが https://example.tryretool.com/apps/B にあるとします。App Aは、{{ localStorage.setValue('date', '20190303') }}を使用してlocalStorageに書き込みます。App Bは、{{ localStorage.values.date }}を使用して、その同じKVPを読み取ることができます。

🚧

名前の競合に注意してください

localStorageを使用して多数のアプリケーションにわたりデータを渡す場合は、同じキーを異なる目的で使用していないことを確認してください。1つの解決策としては、各キーに、それが使用されているアプリケーションの名前を接頭辞として付けるという方法があります。例えば、https://example.tryretool.com/apps/B にあるアプリケーションからdateというキーを設定した場合は、そのキーをdateではなくB-dateという名前にします。