例: リストウィジェットへの状態フォーマットの適用
リスト
リストウィジェットに状態定義エンティティを適用できます。以下の例では、状態フォーマットを使用して、文字列値に基づいてリストアイテムの現在のステータスをハイライトしています。以下の図は、状態フォーマットを適用する前の、ランタイムでの、ラベルウィジェットとボタンウィジェットがあるマッシュアップ内のリストウィジェットを示しています。
リストには、バインドされているインフォテーブル内のデータが表示されています。PTC Convergence Theme のデフォルト値を使用して、リスト内の各アイテムにスタイルと色が適用されています。この例では、状態フォーマットを適用して、リスト上の各タスクの状態をハイライトします。
 | このトピックでは ThingWorx インフォテーブル内にデータを作成して整理する方法について理解していることを前提としています。 |
状態フォーマットを適用するには、各タスクの状態を指定するときに使用可能なデータ列をウィジェットのインフォテーブルに追加する必要があります。この列のデータを使用して、Mashup Builder でウィジェットに状態フォーマットを適用します。リスト内の各タスクは、状態フォーマット列の文字列と一致する 4 つの状態のいずれかを持つことができます。
状態 | 一致する文字列 |
|---|---|
 To Do | ToDo |
 In Progress | InProgress |
 Done | Done |
 - デフォルト | その他の値はデータにエラーがあるものと見なされます。この例では、テキストは赤色で表示され、リストアイテムの横にアイコンが表示されます。 |
状態定義を作成して条件を定義するには、以下の操作を行います。
1. スタイル定義のアイコンをメディアエンティティとしてアップロードします。
2. Composer で、状態定義エンティティを作成し、「状態情報」タブを開きます。
3. 状態を追加し、各状態のスタイルを選択します。
4. 「スタイル」で、各状態に使用するスタイル定義エンティティを選択するか、カスタムスタイル定義を定義します。
カスタムスタイル定義を定義するには、以下の操作を行います。
a. 「スタイル」エンティティピッカーで、「新規スタイル定義」をクリックします。「新規カスタムスタイル」ダイアログボックスが開きます。
b. スタイルオプションを設定し、手順 1 で作成したメディアエンティティを選択します。
c. 「完了」をクリックしてスタイル定義を保存します。
5. 「保存」をクリックして状態定義エンティティを保存します。
以下の図は、スタイル条件を定義した後にリストされる状態を示しています。
状態定義を作成した後、状態フォーマットをウィジェットに適用します。
1. Mashup Builder で、キャンバス上のリストウィジェットを選択します。
2. 「プロパティ」パネルで、プロパティ ListFormat の横で「状態のフォーマット」をクリックします。状態フォーマットダイアログボックスが開きます。
3. 「状態ベースのスタイル定義」をクリックしてから、前の手順で作成した状態定義エンティティを選択します。
4. バインドされているインフォテーブルで、依存フィールドを選択します。この例では、このインフォテーブル列には Status という名前が付いています。
5. 「完了」をクリックしてダイアログボックスを閉じ、マッシュアップを表示します。
ランタイムで、リストアイテムが表示され、Status 列内の値に従って各アイテムのスタイルが設定されます。以下の図は、状態フォーマットが適用されている、マッシュアップ内のリストウィジェットを示しています。
状態フォーマットのほかにも、「スタイルプロパティ」パネルで使用可能なスタイルを使用して、ウィジェットのラインやその他の部分をカスタマイズできます。