Personalizzazione avanzata > Creare un nuovo task da zero per ThingWorx Navigate
  
Creare un nuovo task da zero per ThingWorx Navigate
Componenti di un task
Un task è costituito da diverse parti di base:
Mashup - Interfaccia utente del task.
Servizi - Java o script Java che esegue le azioni. I servizi si trovano in ptc-windchill-integration-connector.
Windchill - Origine dei dati.
Utilizzare ThingWorx Composer per creare il mashup e connetterlo ai servizi.
Esempio: creare un nuovo task
Nelle sezioni che seguono sono descritte le procedure per la creazione di un nuovo task in ThingWorx Composer. Nel task di esempio si esegue la ricerca di dati Windchill. I risultati vengono restituiti in una tabella. Quando si seleziona un elemento della tabella, vengono visualizzate ulteriori proprietà in una tabella sottostante e viene visualizzata anche una rappresentazione 3D interattiva dell'elemento. È possibile fare clic su un link per aprire la rappresentazione in Creo View. Il risultato è il seguente:
Questo esempio illustra come combinare i vari componenti di un task in un mashup. È possibile che molti dei servizi necessari per la propria organizzazione siano già inclusi nel mashup demo e in ptc-windchill-integration-connector.
Di conseguenza, è possibile assemblare molti task personalizzati utilizzando solo l'interfaccia utente ThingWorx e questi servizi predefiniti. Se è necessario definire i propri servizi, possono tornare utili le procedure relative ad alcuni servizi utilizzati di frequente. Consultare la guida di Windchill Extension nel sito PTC Documentazione di riferimento.
Procediamo innanzitutto con la creazione del task di esempio.
Pianificare il task
È consigliabile pianificare le funzionalità e il layout del task prima di iniziare in modo da determinare i servizi necessari, i pannelli richiesti per ogni servizio e il relativo layout. Una volta in possesso del piano, è possibile iniziare ad assemblare i servizi necessari sul connettore. Continuare con la procedura descritta nella sezione successiva.
Duplicare il connettore di integrazione e l'entità multimediale
1. A sinistra, nella scheda Sfoglia, alla voce VISUALIZZAZIONE selezionare Entità multimediali. L'elenco delle entità multimediali viene visualizzato a destra.
2. Selezionare la casella di controllo accanto ptc-windchill-integration-connector-proxy, quindi fare clic su Duplica. La finestra Nuova entità multimediale si apre a destra, con le impostazioni di ptc-windchill-integration-connector-proxy.
3. Impostare un nome per la nuova entità multimediale. Per questo esempio, utilizzare sample-connector-proxy.
* 
Assicurarsi che i nomi dell'entità multimediale e del connettore di integrazione siano correlati:
<connector_name>
<connector_name>-proxy
4. Fare clic su Salva. L'entità multimediale viene duplicata.
5. Duplicare quindi il connettore di integrazione. A sinistra, nella scheda Sfoglia, alla voce MODELLAZIONE selezionare Connettori integrazione. L'elenco dei connettori di integrazione viene visualizzato a destra.
6. Selezionare la casella di controllo accanto ptc-windchill-integration-connector, quindi fare clic su Duplica. La finestra Nuovo oggetto si apre a destra, con le impostazioni di ptc-windchill-integration-connector:
Tag - PTC Navigate
Modello di oggetto di base - WindchillSwaggerConnector
Shape implementate - WindchillContentProxyServiceProvider
7. Impostare un nome per il nuovo connettore. Per questo esempio, utilizzare sample-connector, quindi fare clic su Salva.
8. Per aprire i servizi del nuovo connettore di integrazione, fare clic su Servizi. Cercare il servizio Search_Get_SavedSearches, quindi fare clic per aprirlo e modificarlo.
9. Alla voce Info route, fare clic su +Nuova mappa API. Viene visualizzata la finestra di dialogo Nuova mappa API.
10. Impostare le seguenti proprietà:
ID mappatura - SavedSearch
Endpoint - findSavedSearch
Seleziona data shape - ptc-savedSearch-demo-shape
11. Trascinare l'attributo name dall'albero Endpoint all'attributo name della data shape.
12. Trascinare l'attributo id dall'albero Endpoint all'attributo objectid della data shape. La nuova mappa API sarà simile a quella raffigurata di seguito.
13. Fare clic su Fine, quindi nella pagina Route Search_Get_SavedSearches fare clic su Salva e continua.
14. Testare il servizio digitando quanto segue in Input:
$filter - scope ne null
$select - name
Fare clic su Esegui. In Output, le ricerche globali salvate in Windchill vengono visualizzate nella tabella dei risultati.
15. Fare clic su Fine. La route viene aggiornata.
Aggiungere un nuovo servizio locale: eseguire la ricerca salvata
1. Nella pagina Servizi fare clic su +Aggiungi, quindi selezionare Locale (JavaScript). Viene visualizzata la pagina Nuovo servizio.
2. Alla voce Info servizio, nella casella Nome digitare ExecuteSavedSearch.
3. Fare clic sulla sezione Input, quindi su +Aggiungi.
4. Nella finestra di dialogo Nuovo input, assegnare all'input il nome oid e assicurarsi che l'opzione Tipo di base sia impostata su STRING.
5. Fare clic su Fine.
6. Nella sezione Output, impostare i seguenti parametri:
Tipo di output - INFOTABLE
Data shape - ptc-part-demo-shape
7. Nello strumento Snippet, copiare il seguente codice:
// 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. Fare clic su Fine.
Aggiungere un nuovo servizio locale: GetViewableLinks
1. Tornare alla pagina Servizi e fare di nuovo clic su Aggiungi > Locale (JavaScript) per aggiungere un altro nuovo servizio.
2. Alla voce Info servizio, assegnare al servizio il nome GetViewableLinks.
3. Fare clic su Input, quindi aggiungere il seguente input:
Nome - oid
Tipo di base - STRING
4. Fare clic su Fine.
5. Fare clic su Output, quindi impostare il seguente output:
INFOTABLE
Data shape - ptc-creoview-info-shape
6. Nello strumento Snippet, copiare il seguente codice:
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;
}
}
Il servizio sarà simile a quello raffigurato di seguito.
7. Fare clic su Fine. Il servizio è stato creato.
8. A questo punto, fare clic su Salva per salvare il connettore.
Creare un nuovo mashup e impostare il layout
Con il connettore di integrazione pronto, è il momento di creare il mashup per il task.
1. Nel menu superiore di ThingWorx Composer, fare clic su + Nuova. Iniziare a digitare mashup, quindi selezionare Mashup dall'elenco. Viene visualizzata la finestra di dialogo Nuovo mashup.
2. Alla voce Vuoto, selezionare un layout Dinamico e fare clic su OK.
3. Nella pagina Informazioni generali digitare un nome per il mashup, quindi fare clic su Salva.
4. Fare clic su Progetta. Viene visualizzato Mashup Builder.
5. Nella scheda Widget, trascinare Layout nel workspace di Mashup Builder. Viene visualizzata la finestra di dialogo Configura layout.
* 
È possibile digitare il nome nella casella per recuperare rapidamente il widget senza scorrere l'elenco.
6. Fare clic su Orizzontale, quindi in Opzioni layout configurare il layout:
Barra laterale sinistra - Selezionare la casella di controllo
Colonne - 1
7. Fare clic su Fine.
8. Trascinate un altro layout nell'area delle colonne (a destra). Definire le seguenti opzioni:
Verticale
Intestazione - Selezionare la casella di controllo
Righe - 2
9. Fare clic su Fine, quindi su Salva.
A questo punto, il mashup avrà il seguente aspetto:
Procedere all'aggiunta dei widget.
Aggiungere widget al layout
È ora disponibile il framework di base del task. Il passo successivo consiste nell'aggiungere i widget per definire i componenti visivi di ogni pannello.
1. Cercare e trascinare i seguenti widget nelle posizioni indicate:
Elenco - Barra laterale sinistra. Visualizza un elenco delle ricerche salvate in Windchill. Quando si seleziona un elemento dell'elenco, i relativi dettagli vengono visualizzati nel pannello Griglia.
Griglia - Riga superiore del layout di destra. Mostra i dettagli dell'elemento selezionato dall'utente.
Pannello - Riga inferiore del layout di destra. Mostra una visualizzazione 3D della parte o dell'assieme, con una visualizzazione delle proprietà delle parti selezionate.
2. Selezionare il widget Pannello, quindi trascinare un widget Visualizzazione proprietà sul lato sinistro del pannello.
3. Trascinare un widget ThingView sul lato destro dello stesso pannello, accanto al widget Visualizzazione proprietà. Il widget mostra una vista 3D dell'elemento selezionato.
4. Fare clic su Salva.
L'interfaccia utente del task è pronta. Procedere alla sezione successiva per aggiungere i servizi.
Aggiungere servizi
Con la definizione dei widget, l'interfaccia utente può considerarsi completata. A questo punto si connettono le origini delle informazioni tramite il connettore di integrazione creato in precedenza (sample-connector). Nel passo successivo, si aggiungono l'origine dati e i servizi necessari per il funzionamento del mashup.
1. Nella scheda Dati nel pannello superiore destro di Mashup Builder, fare clic su per aggiungere una nuova origine dati. Viene visualizzata la finestra di dialogo Aggiungi dati.
2. Nella casella Cerca entità, iniziare a digitare il nome del connettore di integrazione, ad esempio sample-connector.
3. Selezionare il connettore di integrazione dall'elenco di risultati. I servizi disponibili per l'entità selezionata vengono visualizzati a sinistra.
4. Trovare i servizi, quindi fare clic su per selezionare ogni servizio:
Search_Get_SavedSearches
ExecuteSavedSearch
GetViewableLinks
I servizi vengono aggiunti all'elenco alla voce Servizi selezionati.
5. In Servizi selezionati, per il servizio Search_Get_SavedSearches selezionare la casella di controllo Mashup caricato?. Questa impostazione mostra le ricerche salvate in Windchill non appena il mashup viene caricato.
6. Fare clic su Fine, quindi su Salva per salvare il mashup.
Connettere i servizi ai widget
I servizi di dati sono disponibili, insieme agli elementi dell'interfaccia utente. Nei passi successivi si procede alla connessione di tutti i componenti.
1. Alla voce Search_Get_SavedSearches nel pannello Dati, espandere Dati restituiti.
2. Trascinare Tutti i dati nel widget Elenco. In questo modo vengono restituiti tutti i dati trovati in una ricerca salvata.
3. Alla voce Seleziona destinazioni di associazione, selezionare Dati. La connessione è completata. Un diagramma della connessione viene visualizzato nella parte inferiore di Composer.
* 
Questo passo sostituisce la creazione manuale di script Java sul lato client delle versioni precedenti di ThingWorx.
4. È possibile quindi configurare il widget. Nella scheda Proprietà widget sul lato sinistro di Mashup Builder, impostare i parametri seguenti:
AutoSelectFirstRow - Selezionato
DisplayField - name
ValueField - objectId
DisplayName - Digitare Saved Searches
* 
Per salvare ogni entità, fare clic all'esterno della casella di testo.
5. Assicurarsi che il servizio Search_Get_SavedSearches sia ancora selezionato nella scheda Dati. Nella scheda Proprietà dati, aggiungere i seguenti valori nella colonna Valore:
$filter - scope ne null
$select - name
6. Nella parte superiore, fare clic su Salva.
Associare i dati tra i servizi
Alcuni dei servizi dipendono dai dati di un altro servizio. Ad esempio, quando si seleziona una ricerca salvata dall'elenco, si desidera che venga eseguita. Nei passi successivi vengono create le connessioni tra i servizi. Si tratta di un'operazione di associazione.
1. Alla voce ExecuteSavedSearch, espandere Parametri.
2. Alla voce Search_Get_SavedSearches, espandere Dati restituiti, quindi espandere Righe selezionate.
3. Alla voce Righe selezionate, trascinare objectId in oid, nella sezione Parametri del servizio ExecuteSavedSearch.
La prima connessione è completata.
4. Per la seconda connessione, selezionare Search_Get_SavedSearches. Nella scheda Proprietà dati nel pannello in basso a destra vengono visualizzati gli eventi.
5. Trascinare quindi SelectedRowsChanged dal pannello Proprietà dati a ExecuteSavedSearch.
Questa connessione esegue il servizio ExecuteSavedSearch quando l'utente seleziona una riga dell'elenco.
Per la connessione successiva, associare i dati ai widget Griglia e ThingView.
1. Nella scheda Dati nel pannello superiore espandere ExecuteSavedSearch, quindi trascinare Tutti i dati nel widget Griglia.
2. Per associare i dati, alla voce Seleziona destinazione di associazione selezionare Dati.
3. Se si desidera modificare la visualizzazione delle colonne, nel widget Griglia passare il mouse su , quindi fare clic su Configura widget. Viene visualizzata la finestra di dialogo Configura widget. È possibile configurare l'ordine, il formato, la visualizzazione e altri attributi, quindi fare clic su Fine.
Mostrare una rappresentazione 3D della struttura
La struttura viene associata al widget ThingView per aggiungere l'area visualizzabile al task.
1. Espandere ExecuteSavedSearch, quindi espandere Righe selezionate. Espandere quindi GetViewableLinks.
2. Trascinare l'output objectId da ExecuteSavedSearch al parametro di input oid di GetViewableLinks.
3. Espandere GetViewableLinks, quindi espandere Tutti i dati. Trascinare il parametro di output structure nel widget ThingView. Viene visualizzata la struttura del prodotto nel widget ThingView.
4. Alla voce Seleziona destinazione di associazione, selezionare ProductToView.
5. Selezionare ExecuteSavedSearch. Gli eventi vengono visualizzati nella scheda Proprietà dati.
6. Trascinare l'evento SelectedRowsChanged in GetViewableLinks nel pannello superiore. In questo modo la struttura visualizzabile viene aggiornata quando l'utente seleziona un'altra riga nella griglia.
7. Fare clic su Salva.
Controllare le connessioni
A questo punto sono disponibili le seguenti connessioni. Selezionare un'entità per visualizzarne le connessioni.
Widget Elenco
ExecuteSavedSearch
Search_Get_SavedSearches
GetViewableLinks
Visualizzare il nuovo task
Fare clic su Visualizza mashup. Viene visualizzato il nuovo task. Fine dell'operazione.
A questo punto è possibile aggiungere il task alla home page di ThingWorx Navigate e personalizzarlo. Vedere l'argomento successivo, "Aggiungere un task personalizzato alla home page".
Per ulteriori informazioni, vedere le risorse seguenti:
Widgets
Data Services and Linking
Advanced Grid Widgets Extension
Aggiungere visualizzazione 3D al task