アプリでテーブルレコードのインタラクティブなリストやコネクタの出力を表示する

ここでは、アプリ内でレコードやオブジェクトのクリッカブルリストを表示する方法について説明します。

この記事では、以下のことを学びます。

• 変数に基づき複数のテーブルレコードを表示する方法
• リストからレコードを選択し、アプリに読み込む方法
• コネクタ出力をインタラクティブなリストに変換する方法
• オペレータがインタラクティブ・リストの行を選択すると、トリガー・ロジックを起動する方法

注：このチュートリアルを使用するには、テーブルの作成方法を理解している必要があります。まだ作成したことがない場合は、別のガイドを参照してください。

これらの一般的な現場資産を、オペレーターや技術者に表示する必要がありますか？

• ワークステーションごとの作業指示のリスト
• 検査が必要な機械
• 設備内の工具とその位置
• ステーションに記録された問題と、その解決への進捗状況
• 材料リスト

その場合、App EditorでEmbedded Table Widgetを使用する必要があります。

Embedded Table Widgetには、以下のデータソースが供給されます。

• 複数行のSQL出力
• HTTPコネクタからのオブジェクトの配列
• Tulipテーブルのレコード
• ユーザーフィールド

データソースを設定した後、オペレータにフィルタリングされたリストを表示し、テーブル内の任意の行をクリックできるようにすることができます。レコードを選択した後、トリガーロジックを起動することもできます。

このガイドでは、上記の各データソースを使用してインタラクティブ・テーブルを作成する方法を説明します。

文脈の中で例を見たい場合は、このガイドをチェックして、駅ごとの作業指示の可視化を処理する

埋め込みテーブルウィジェットを追加する

テーブル

まず、画面の左側にレコードプレースホルダーを作成します。これにより、リストから1つのレコードをアプリに読み込むことができます。

次に、ツールバーから「埋め込み」を選択し、「Tulip Table」を選択して、ウィジェットをステップに追加します。

次に、"Data Source "ドロップダウンでTulip Tableにリンクします。

{height="" width="350"}.

その後、埋め込みテーブルをレコードプレースホルダーに���ンクし、コンテキストペインでフィルタの追加を開始することができます。以下はその様子です。

{高さ="" 幅="350"}です。

列を追加するには、ドロップダウン リストから列を選択し、一度に 1 つずつ追加します。

{高さ="" 幅="350"}。

App EditorやPlayerで各カラムをドラッグしてカラムの幅を変更することで、Tableのレイアウトを変更することができます。

コネクタ出力

Connector 出力からインタラクティブなリストを作成する方法を説明します。

まず、Tulip アプリに配列を送信するコネクタをセットアップします。コネクタとアプリの接続を設定する方法については、こちらをご覧ください。

次に、上図のように、ステップにEmbedded Tableを追加します。

次に、データソースとして「変数」を選択し、コネクタの関数からの出力配列を格納する変数を選択します。

{height="" width="350"} とします。

最後に、出力を格納するために "Object" タイプの Variable を選択するか、"Linked Variable" ダイアログ内で作成する。

{height="" width="350"}.

次に、表示したいオブジェクト内の各プロパティの列を選択する。

{height="" width="350"}.

トリガーロジックの起動とステップの設計

Embedded Tableを設定した後、2つの使い方があります。

1. オペレータが行を押したときにトリガーアクションを即座に発生させる
2. 変数またはレコードプレースホルダーを更新し、トリガーを起動しない。

このセクションでは、あなたのアプリでそれらの両方の状況を設定する方法を説明します。

トリガーロジックの起動

プレーヤーで行が押されたり、クリックされたりしたときに起動するトリガーを追加するには、コンテキストペインのトリガーラベルの横にある "+"ボタンをクリックします。トリガーエディタが開き、"When "句が "when a row is selected "に設定されているのが確認できます。

ステップを設計する

ここでは、プレーヤーでの埋め込みテーブルの一般的な使用方法の概要を説明します。

埋め込みテーブルは、他の2つのウィジェットと一緒に使用されています。

1. テキスト・ウィジェットは、オペレータにレコードをクリックまたはプレスするよう指示するために使用されます。
2. どのレコードが選択されたかを表示するためのテーブル レコード ウィジェット。

レコードを選択するには、オペレータはレコードを押す必要がありますが、正しいレコードを正常に選択したというフィードバックを与えたいと思うかもしれません。

これを行うには、「テーブル・レコード」テキスト・ウィジェットをステップに追加します。

そして、コンテキストペインにある「埋め込まれたテーブル」と同じ「レコード」プレースホルダにリンクさせます。

プレーヤーでテストすると、レコードプレースホルダがリアルタイムで更新されるはずです。

埋め込みテーブルの表示を変更する

行のサイズ

デフォルトでは、行のサイズはラップトップまたはデスクトップでクリックされるように最適化されています。しかし、タブレットやモバイルデバイスで簡単に押せるように、各行を大きくしたい場合があります。

その場合は、コンテキストペインで「フォントサイズ」を変更します。これにより、フォントサイズに合わせて行の高さが自動的に大きくなります。

各行のボタン

各行の横にあるボタンを削除するには、「ボタン選択」オプションでボタンの表示/非表示を切り替えます。

ボタン選択」のオン・オフにかかわらず、行のどこかを押したり、クリックしたりすることで行を選択することができます。

行インデックス

有効にすると、テーブル内にレコードのインデックスが表示されます。

ページあたりの行数

テーブル内で一度に利用可能な行数を決定します。

ウィジェットでフィルタとソートを設定する

このセクションは、チューリップテーブルとユーザーフィールドに接続されている埋め込みテーブルにのみ適用されます。

オペレータに表示されるレコードのリストをフィルタリングしたいと思うでしょう。以下に基づいてフィルタリングすることができます。

1. アプリを実行しているステーション
2. アプリを使用しているオペレーター
3. アプリ内の変数に含まれる値
4. その他

フィルタオプションの隣にある "Edit "アイコンをクリックして、フィルタをセットアップします。

フィルターオプションには以下が含まれます。

1. 静的な値
2. 変数
3. チューリップテーブルのレコード
4. アプリ情報

まず、テーブルからフィルタを設定したいフィールドを選択します。次に、条件を選択します。Variable」オプションには、ユーザーやステーションなどのアプリのメタデータと、アプリに関連する変数の両方が表示されます。

フィルタを選択したら、モーダル右上の "X "をクリックします。

Sort By "オプションで、Embedded Tableのソートを設定することができます。

参考資料

• アプリ エディタでテーブル レコードを使用する方法
• アプリでコネクタ関数の出力にアクセスする方法
• 駅ごとの作業指示をリアルタイムで確認する方法

お探しのものは見つかりましたか？

また、community.tulip.coに質問を投稿したり、他の人が同じような質問に直面していないかどうかを確認することができます。