機能フラグの切り替え
ユーザーごとに機能フラグを切り替えるツールを作成します
**多数の機能がある複雑な製品があります。ユーザーごとにこれらの機能を管理するツールが必要です。**作成にかかる時間は、5分です。
1. ユーザーの取得
最初に、ユーザーを取得するAPIへのリクエストを作成します。サーバーに対してRESTクエリーを作成し、Runをクリックして(⌘⏎を押して)、クエリーをプレビューします。結果がよければ、Saveをクリックして(⌘Sを押して)保存します。タブ内のクエリー名をクリックすると、getUsers
のような、query1
よりも分かりやすい名前を付けることができます。

results.preview
でユーザーのプレビューを表示できます
APIから取得したデータがあります。見やすいようにテーブルでデータを表示しましょう。右側からテーブル・コンポーネントをページにドラッグし、デフォルトのデータ値を{{ getUsers.data }}
に置換し、クエリー・データをテーブルに読み込みます。

テーブルがクエリー・データに接続されています
テーブルに列が多数表示されているので、一部の列を非表示にすることが必要になる場合があります。例えば、address
列はあまり重要ではないようです。この列をテーブル設定で非表示にできます。"Column Options"の下に、列のリストが表示されます。ここで、表示名など、テーブルの列の多数のプロパティを変更できます。今は、address列を非表示にしましょう。

address
列のオプション
一部の列を非表示にすると、テーブルが非常に見やすくなりました。

2. 機能の表示
ここで、ユーザーに対して有効にする機能を確認する必要があります。トグル・リスト・コンポーネントを使用します。これは、機能のフラグ設定に適しています。機能ごとに、トグル・リストでトグルを作成できます。

リストされた機能に説明およびタグを追加することもできます
では、ユーザーに対して有効になっている機能を実際に確認できるように、ライブ・データが含まれるトグル・リストを接続しましょう。テーブルのユーザーに基づいて各トグルのToggle Checked?
属性を動的に設定するには、{{ table1.selectedRow.data.feature_flags.feature1 }}
(データ構造で同等のもの)に設定します。選択した行を変更して、値が変更されるのを確認してみます。
3. 機能の編集
あと一息です。残っている作業は、これらのフラグをバックエンドに接続することです。これを行うには、機能を有効または無効にするクエリーを作成します。新規RESTクエリーを作成して、これにturnOnFeature1
という名前を付け、エンドポイントをサーバー上に作成してユーザーの機能を有効または無効にします。POST
リクエストを送信して、フォームエンコード済み本文としてデータを送信できます。

userId
が、テーブル内の選択されたユーザーのid
に動的に設定されます
このクエリーを使用すると、実行時に、選択したユーザーに対してfeature1
が有効になります。ここで、これをfeature1
トグルにリンクする必要があります。トグル・リストのプロパティで、feature1
トグルを変更します。"Query to run when toggled on"を、作成したturnOnFeature1
クエリーに設定します。

トグルがオンになると常に、turnOnFeature1
がトリガーされます
これにより、ツールがバックエンドに接続され、変更が永続的なものになりました。ここで、トグルをオフにしたときに実行するクエリーを作成する必要があります。これは、enabled
がtrue
ではなく、false
になっている点以外、turnOnFeature1
クエリーと同様です。これをturnOffFeature1
と呼びます。クエリーを作成すると、"Query to run when toggled off"をturnOffFeature1
に変更することで、これをアクティブ化できます。
この時点でトグルで実行でき、効果を確認できます。これはデータベースに接続され、変更が永続的になっています。他の機能に対してこの処理を繰り返すと、機能フラグを切り替える完全なツールの作成が完了します。
4. 実際の使用
このツールの本番での稼働の準備が完了しました。リンクを同僚に送信すると、同僚はこのツールを使用して個々のユーザーの機能フラグをすばやく変更できるようになります。必要であれば、ユーザーの検索フィールドや変更の承認フローを追加することもできます。
オペレーターに特定の権限を付与している場合、オペレーターはツールの編集やクエリーの変更を行うことはできません。実行できるのは、作成したツールを使用することだけです。
機能フラグを切り替えるツールの作成にかかった時間は、全部で5分です。
Updated 30 days ago