高度なカスタマイズ > ThingWorx Navigate における新規タスクの最初からの作成
  
ThingWorx Navigate における新規タスクの最初からの作成
タスクブロックの作成
タスクは、いくつかの基本的な部分で構成されています:
マッシュアップ - タスクのユーザーインタフェース。
サービス - 操作を実行する Java または Java スクリプト。サービスは ptc-windchill-integration-connector 上にあります。
Windchill - データのソース。
ThingWorx Composer を使用し、マッシュアップを作成してサービスに接続します。
例: 新規タスクの作成
以下のセクションでは、ThingWorx Composer での新規タスクの作成手順全体について説明します。サンプルタスクでは、ユーザーは Windchill データをサーチし、テーブルに結果が表示されます。テーブルからアイテムを選択すると、下のテーブルにさらにプロパティが表示され、そのアイテムの対話型 3D 表現が示されます。リンクをクリックすることで、その表示を Creo View で開くことができます。これらを実行すると以下のような表示になります。
この例では、タスクのビルディングブロックを組み合わせて、機能するマッシュアップを作成する方法を示します。組織が必要とするサービスの多くはデモマッシュアップと ptc-windchill-integration-connector にすでに含まれています。
このため、ThingWorx ユーザーインタフェースとこれらの既成のサービスを使用するだけで、さまざまなカスタムタスクをアセンブリできます。独自のサービスを記述しなければならない場合に役立つ、頻繁に使用するいくつかのサービスのステップについて以下で説明しています。PTC の参照ドキュメントサイトで Windchill Extension ガイドを確認してください。
最初は、サンプルタスクを作成してみましょう。
タスクの計画
始める前に、タスクの機能とレイアウトを計画しておくことが役立ちます。そうすることにより、必要なサービス、各サービスに必要なパネル、およびそれらがどのようにレイアウトされるかを知ることができます。計画の作成後、コネクタで必要なサービスの組み立てを開始できます。次のセクションの手順に進みます。
統合コネクタとメディアエンティティを複製します。
1. 左側の 「ブラウズ」タブの「ビジュアリゼーション」で、「メディア」を選択します。右側に、メディアエンティティのリストが表示されます。
2. ptc-windchill-integration-connector-proxy の横にあるチェックボックスをオンにし、「複製」をクリックします。右側に「新規メディア」ウィンドウが開き、ptc-windchill-integration-connector-proxy からの設定が表示されます。
3. 新しいメディアエンティティの名前を設定します。この例では、sample-connector-proxy を使用します。
* 
メディアエンティティと統合コネクタの名前が関連付けられていることを確認してください。
<connector_name>
<connector_name>-proxy
4. 「保存」をクリックします。メディアエンティティが複製されました。
5. 次に、統合コネクタを複製します。左側の 「ブラウズ」タブの「モデリング」で、「統合コネクタ」を選択します。右側に、統合コネクタのリストが表示されます。
6. ptc-windchill-integration-connector の横にあるチェックボックスをオンにし、「複製」をクリックします。右側に「新規 Thing」ウィンドウが開き、ptc-windchill-integration-connector からの次の設定が表示されます。
「タグ」 - PTC Navigate
「ベース Thing Template」 - WindchillSwaggerConnector
「実装されたシェイプ」 - WindchillContentProxyServiceProvider
7. 新しいコネクタの名前を設定します。この例では、sample-connector を使用します。その後、「保存」をクリックします。
8. 「サービス」をクリックして、新しい統合コネクタのサービスを開きます。サービス Search_Get_SavedSearches をサーチし、クリックして開いて編集します。
9. 「ルート情報」で、「+新規 API マップ」をクリックします。「新規 API マップ」ダイアログボックスが開きます。
10. 次のプロパティを設定します。
「マッピング ID」 - SavedSearch
「エンドポイント」 - findSavedSearch
「データシェイプを選択」 - ptc-savedSearch-demo-shape
11. name 属性を、「エンドポイント」ツリーからデータシェイプの name 属性にドラッグします。
12. id を、「エンドポイント」ツリーからデータシェイプの objectid 属性にドラッグします。新しい API マップは次のようになります。
13. 「完了」をクリックし、「Search_Get_SavedSearches」ルートページで「保存して続行」をクリックします。
14. 「入力」で次のように入力して、サービスをテストします。
$filter - scope ne null
$select - name
「実行」をクリックします。「出力」で、Windchill からの保存されたグローバルサーチが結果テーブルに表示されます。
15. 「完了」をクリックします。ルートが更新されます。
新しいローカルサービスの追加: 保存されたサーチの実行
1. 「サービス」ページで、「+追加」をクリックし、「ローカル (JavaScript)」を選択します。「新規サービス」ページが開きます。
2. 「サービス情報」「名前」「ExecuteSavedSearch」と入力します。
3. 「入力」セクションをクリックし、「+追加」をクリックします。
4. 「新規入力」ダイアログボックスで、この入力に「oid」という名前を指定し、「ベースタイプ」「STRING」に設定されていることを確認します。
5. 「完了」をクリックします。
6. 「出力」セクションで、次のパラメータを設定します。
出力のタイプ - INFOTABLE
「データシェイプ」 - ptc-part-demo-shape
7. スニペットツールで、次のコードをコピーします。
// result: JSON
var csrf_token = me.Security_Get_CSRF().items[0].attributes.nonce;
var params = {
infoTableName : "InfoTable",
dataShapeName : "ptc-part-demo-shape"
};
// CreateInfoTableFromDataShape(ptc-part-demo-shape)
var result = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape(params);
var select = "";
// infotable datashape iteration
var dataShapeFields = result.dataShape.fields;
for (var fieldName in dataShapeFields) {
select += ',' + fieldName;
}
// result: JSON
var searchResult = me.Search_Get_SavedSearch_Results({
arguments: undefined /* JSON */,
oid: oid /* STRING */,
CSRF_NONCE: csrf_token /* STRING */,
$select: select /* STRING */
});
var row = {};
for each (var hit in searchResult.items) {
row = hit.attributes;
row.objectId = hit.id;
result.AddRow(row);
}
8. 「完了」をクリックします。
新しいローカルサービスの追加: ビューデータのリンクの取得
1. 「サービス」ページに戻り、「追加」 > 「ローカル (JavaScript)」を再度クリックして、別の新しいサービスを追加します。
2. 「サービス情報」で、サービス GetViewableLinks に名前を指定します。
3. 「入力」をクリックして、次の入力を追加します。
「名前」 - oid
「ベースタイプ」 - STRING
4. 「完了」をクリックします。
5. 「出力」をクリックし、次の出力を設定します。
「INFOTABLE」
「データシェイプ」 - ptc-creoview-info-shape
6. スニペットツールで、次のコードをコピーします。
var params = {
infoTableName : "InfoTable",
dataShapeName : "ptc-creoview-info-shape"
};
// CreateInfoTableFromDataShape(infoTableName:STRING("InfoTable"), dataShapeName:STRING):INFOTABLE(ptc-creoview-info-shape)
var result = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape(params);
// result: JSON
var vizResult = me.Visualization_Get_Viewable({
forceCreoViewPlugin: undefined /* BOOLEAN */,
navigationCriteria: undefined /* STRING */,
oid: oid /* STRING */
});
// ptc-creoview-info-shape object
for each (var rep in vizResult.attributes.representations) {
// loop through all reps until the default rep is discovered
if (rep.attributes.default) {
// result: JSON
var fieldvalues = me.RewriteContentProxyFieldValues({
object:
{"twodthumbnail":rep.attributes.twodthumbnail,
"threedthumbnail" :
rep.attributes.threedthumbnail, // STRING
"structure":
vizResult.attributes.structure } /* JSON */
});
fieldvalues.launchCreoViewUrl = rep.attributes.launchCreoView; // HYPERLINK
result.AddRow(fieldvalues);
result.AddRow(fieldvalues);
break;
}
}
サービスは次のようになります。
7. 「完了」をクリックします。サービスが作成されます。
8. ここで、「保存」をクリックしてコネクタを保存します。
新しいマッシュアップの作成とレイアウトの設定
統合コネクタの準備ができたら、次はタスクのマッシュアップを構築します。
1. ThingWorx Composer の上部のメニューで、「+ 新規」をクリックします。「マッシュアップ」と入力し始めて、リストから「マッシュアップ」を選択します。「新規マッシュアップ」ダイアログボックスが開きます。
2. 「空白」「レスポンシブ」レイアウトを選択し、「OK」をクリックします。
3. 「一般情報」ページで、マッシュアップの名前を入力し、「保存」をクリックします。
4. 「設計」をクリックします。Mashup Builder が開きます。
5. 「ウィジェット」タブで、「レイアウト」を Mashup Builder のワークスペースにドラッグします。「レイアウトを設定」ダイアログボックスが開きます。
* 
リストをスクロールせずにウィジェットを素早く取得するには、ボックスに名前を入力します。
6. 「水平」をクリックし、「レイアウトオプション」でこのレイアウトを設定します。
「左サイドバー」 - チェックボックスを選択
「列」 - 1
7. 「完了」をクリックします。
8. 別のレイアウトを列領域 (右側) にドラッグします。次のオプションを定義します:
「垂直」
「ヘッダー」 - チェックボックスを選択
「行」 - 2
9. 「完了」をクリックしてから、「保存」をクリックします。
ここまでに作成したマッシュアップは次のとおりです:
次に、ウィジェットを追加します。
ウィジェットをレイアウトに追加
タスクの基本的なフレームワークができました。次に、ウィジェットを追加して各パネルの視覚的コンポーネントを定義します。
1. これらのウィジェットをサーチして、次の場所にドラッグします:
「リスト」 - 左サイドバー。Windchill からの保存されたサーチのリストが表示されます。このリストからアイテムを選択すると、その詳細が「グリッド」パネルに表示されます。
「グリッド」 - 右側のレイアウトの一番上の行。ユーザーが選択したアイテムの詳細が表示されます。
「パネル」 - 右側のレイアウトの一番下の行。部品またはアセンブリの 3D ビジュアリゼーションが表示され、選択した部品のプロパティも表示されます。
2. 「パネル」ウィジェットを選択して、「プロパティ表示」ウィジェットをパネルの左側にドラッグします。
3. 同じパネルの右側の「プロパティ表示」の横に、「ThingView」ウィジェットをドラッグします。このウィジェットには、選択したアイテムの 3D ビューが表示されます。
4. 「保存」をクリックします。
タスクのユーザーインタフェースが使用可能になります。次のセクションに進んで、サービスを追加します。
サービスの追加
ウィジェットが追加されたので、ユーザーインタフェースが作成されます。以前に作成した統合コネクタの sample-connector を使用して、情報のソースを接続します。次のステップでは、マッシュアップを機能させるために必要なデータソースとサービスを追加します。
1. Mashup Builder の右上パネルにある「データ」タブで、 をクリックして新しいデータソースを追加します。「データを追加」ダイアログボックスが開きます。
2. 「エンティティをサーチ」ボックスで、sample-connector などの統合コネクタの名前の入力を開始します。
3. その結果から、統合コネクタを選択します。そのエンティティに使用可能なサービスが左側に表示されます。
4. 以下のサービスを見つけて、 をクリックして各サービスを選択します。
Search_Get_SavedSearches
ExecuteSavedSearch
GetViewableLinks
「選択したサービス」の下のリストにサービスが追加されます。
5. 「選択したサービス」の下で、Search_Get_SavedSearches に対して「マッシュアップはロード済み」チェックボックスを選択します。これにより、マッシュアップがロードされるとすぐに、Windchill から保存されたサーチが表示されます。
6. 「完了」をクリックし、「保存」をクリックして、これまでのマッシュアップを保存します。
ウィジェットにサービスを接続
データサービスと、ユーザーインタフェースの要素が追加されました。次のステップでは、すべてのものを接続します。
1. 「データ」パネルで、Search_Get_SavedSearches の下の「戻されたデータ」を展開します。
2. 「すべてのデータ」「リスト」ウィジェットにドラッグします。これにより、保存されたサーチで検出されたすべてのデータが返されます。
3. 「バインドターゲットを選択」で、「データ」を選択します。接続が確立されます。Composer の下部に接続ダイヤグラムが表示されます。
* 
このステップは、以前のバージョンの ThingWorx で行う必要があった、手動によるクライアント側 Java スクリプトの作成から置き換えられました。
4. 次に、ウィジェットを設定します。Mashup Builder の左側にある「ウィジェットプロパティ」タブで、次のパラメータを設定します。
「AutoSelectFirstRow」 - 「選択済み」
DisplayField - name
ValueField - objectId
DisplayName - 「Saved Searches」と入力
* 
テキストボックスの外側をクリックして各エンティティを保存します。
5. 「データ」タブで Search_Get_SavedSearches が選択されていることを確認します。「データプロパティ」タブで、「値」列に次の値を追加します。
$filter - scope ne null
$select - name
6. 一番上で、「保存」をクリックします。
サービス間でデータをバインド
一部のサービスは別のサービスのデータに依存しています。たとえば、保存されたサーチをリストから選択した場合、それが実行される必要があります。次の手順では、このようなサービス間の接続を作成します。これを "バインド" と呼びます。
1. ExecuteSavedSearch の下で、「パラメータ」を展開します。
2. Search_Get_SavedSearches の下で、「戻されたデータ」を展開してから、「選択行」を展開します。
3. 「選択行」の下ある objectIdExecuteSavedSearch「パラメータ」セクションにある oid にドラッグします。
1 つ目の接続が完成しました。
4. 2 つ目の接続に対して、Search_Get_SavedSearches を選択します。右下のパネルの「データプロパティ」タブに、イベントが表示されます。
5. 次に、SelectedRowsChanged「データプロパティ」パネルから ExecuteSavedSearch にドラッグします。
この接続は、ユーザーがリストで行を選択すると ExecuteSavedSearch サービスを実行します。
次の接続では、データをグリッドと ThingView ウィジェットにバインドします。
1. 上のパネルの「データ」タブで、ExecuteSavedSearch を展開し、「すべてのデータ」をグリッドウィジェットにドラッグします。
2. データをバインドするには、「バインドターゲットを選択」で、「データ」を選択します。
3. 列の表示を変更する場合は、グリッドウィジェット内で にカーソルを合わせて、「ウィジェットを設定」をクリックします。「ウィジェットを設定」ダイアログボックスが開きます。順序、フォーマット、表示、およびその他の属性を設定できます。その後、「完了」をクリックします。
構造の 3D 表現の表示
この構造を ThingView ウィジェットにバインドして、ビューデータ領域をタスクに追加します。
1. ExecuteSavedSearch を展開して、「選択行」を展開します。次に、GetViewableLinks を展開します。
2. objectId 出力を、ExecuteSavedSearch からGetViewableLinks 入力パラメータ oid にドラッグします。
3. GetViewableLinks を展開して、「すべてのデータ」を展開します。structure 出力パラメータを ThingView ウィジェットにドラッグします。これにより、ThingView ウィジェットに製品構造が表示されます。
4. 「バインドターゲットを選択」の下で、ProductToView を選択します。
5. ExecuteSavedSearch を選択します。イベントは、「データプロパティ」タブの下に表示されます。
6. イベント SelectedRowsChanged を上部パネルの GetViewableLinks にドラッグします。これにより、ユーザーがグリッド内の別の行を選択したときに、ビューデータ構造が更新されます。
7. 「保存」をクリックします。
接続を確認
この時点では接続は以下のように表示されます。以下の各エンティティを選択してその接続を確認します。
リストウィジェット
ExecuteSavedSearch
Search_Get_SavedSearches
GetViewableLinks
新しいタスクの表示
「マッシュアップを表示」をクリックします。新規タスクが開きます。おつかれさまでした!
ThingWorx Navigate ホームページにタスクを追加して、調整を加えることが可能になりました。次のトピック「ホームページへのカスタムタスクの追加」を参照してください。
詳細情報が掲載されているリソース
ウィジェット
データサービスとリンク
アドバンスグリッドウィジェット拡張機能
タスクへの 3D ビジュアリゼーションの追加