針對 ThingWorx Navigate 從頭建立新任務
任務的建構區塊
您的任務由多個基本部份組成：
• 混搭 - 任務的使用者介面。
• 服務 - 執行動作的 Java 或 Java 指令集。服務位於 ptc-windchill-integration-connector。
• Windchill - 您的資料來源。
使用 ThingWorx Composer 建立混搭並將其連線到服務。
範例：建立新任務
以下部份中，我們將完成在 ThingWorx Composer 中建構新任務的整個過程。使用者可以使用我們的範例任務在表格中搜尋 Windchill 資料並接收結果。當他們從表格中選取項目時，他們將會在下表中看到更多內容以及項目的互動式 3D 表示。他們可以按一下連結以在 Creo View 中開啟表示。當我們完成任務以後，它的外觀如下：
此範例將顯示如何將任務的建構區塊合併到一個工作混搭中。您可能會發現，您的組織需要的許多服務已隨附於示範混搭與 ptc-windchill-integration-connector。
因此，您只需使用
ThingWorx 使用者介面與這些現成的服務即可組裝多個自訂任務。如果您需要寫入自己的服務，我們會提供一些常用服務的步驟，可能對您很有幫助。檢查 PTC
參考文件網站上的 Windchill 延伸功能指南。
但首先，讓我們來建構範例任務。
計劃一個任務
在開始之前計劃任務的功能和版面配置是很有幫助的。然後您將會知道您需要哪些服務，針對每個服務所需要的面板，以及它們的版面配置方式。當您確定計劃之後，您便可以開始在連接器上組裝您需要的服務。繼續下一節中的步驟。
複製整合連接器和媒體實體
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 旁邊的核取方塊，然後按一下「複製」。「新物件」視窗即會在右側開啟，包括來自 ptc-windchill-integration-connector 的設定：
◦ 「標簽」- PTC Navigate
◦ 「基礎物範本」- 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. 返回「服務」頁，按一下 > 再次新增另一個新服務。
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 的上方選單中，按一下 + NEW。開始鍵入「混搭」，然後從清單選取「混搭」。「新混搭」對話方塊隨即開啟。
2. 在「空白」底下選取「回應式」配置圖，然後按一下「確定」。
3. 在「一般資訊」頁中，鍵入混搭名稱，然後按一下「儲存」。
4. 按一下「設計」。混搭建立器即會開啟。
5. 在「小器具」標籤中，拖曳「版面配置」至混搭建立器的工作區。「配置版面配置」對話方塊即會開啟。
| 您可以在方塊中鍵入名稱，以快速取得小器具，而無需捲動清單。 |
6. 按一下「水平」，然後在「版面配置選項」下進行版面配置：
◦ 「左側資訊看板」- 選取核取方塊
◦ 欄 - 1
7. 按一下「完成」。
8. 將另一個配置圖拖曳到欄區域 (右側)。定義以下選項：
◦ 「垂直」
◦ 「標題」- 選取此核取方塊
◦ 列 - 2
9. 按一下「完成」，然後按一下「儲存」。
以下是目前為止的混搭：
現在，我們將新增小器具。
將小器具新增至配置圖
現在您已完成任務的基本架構。接下來，新增小器具來定義每個面板的視覺化元件。
1. 搜尋並將這些小器具拖曳至以下位置：
◦ 「清單」- 左側資訊看板。顯示 Windchill 中已儲存搜尋的清單。當您從清單中選取項目時，其詳細資訊會出現在「格點」面板中。
◦ 「格點」- 右側配置圖的頂部列。顯示使用者選取的項目的詳細資訊。
◦ 「面板」- 右側配置圖的底部列。顯示 3D 視覺化零件或組件，並顯示所選零件的内容。
2. 選取「面板」小器具，然後再將「內容顯示」小器具拖曳至左側面板。
3. 將 ThingView 小器具拖曳至右側的相同面板中，在「內容顯示」旁邊。此小器具會顯示所選項目的 3D 檢視。
4. 按一下「儲存」。
任務的使用者介面準備就緒。繼續下一部分以新增服務。
新增服務
現在，我們的小器具已設定完畢，接下來將建構使用者介面。我們將使用之前建立的整合連接器 sample-connector 連接資訊來源。在下一步驟中，我們將新增資料來源以及混搭工作所需的服務。
1. 在混搭建立器右上方面板的
「資料」
標籤上，按一下 以新增新的資料來源。
「新增資料」對話方塊即會開啟。
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. 接下來，我們可以配置小器具。在混搭建立器左側的「小器具內容」標籤上設定這些參數：
◦ 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. 在「所選列」下，將 objectId 拖曳至 oid (其位於 ExecuteSavedSearch 的「參數」部份)。
第一個連接完成。
4. 針對第二個連接對，選取 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 首頁新增任務，並新增調整。請參閱下一個主題「向您的首頁新增自訂任務」。
需要更多資訊？此處給出了一些資源
