Personalização avançada > Configurando o servidor ThingWorx para trabalhar com o widget ThingView > Trabalhando com a propriedade de dados do ThingView
  
Trabalhando com a propriedade de dados do ThingView
É possível usar a propriedade Data do widget ThingView para realizar um destaque de seleção cruzada e cores entre o modelo 3D e uma fonte externa. Para usar essa propriedade Data juntamente com o widget Grid, realize os passos a seguir.
* 
Antes de realizar uma seleção cruzada, é necessário saber os caminhos de ID de ocorrência do modelo 3D.
Criando um formato de dados
Realize os passos a seguir para criar um formato de dados com o nome SamplePartDataShape:
1. No Composer, navegue para MODELING > Data Shapes.
2. Clique em New para criar um novo formato de dados.
3. Especifique o Name como SamplePartDataShape.
4. Clique em Save para salvar o formato de dados.
5. Clique em Field Definitions para adicionar campos.
6. Clique em Add. O painel New Field Definition é aberto.
7. Crie um campo com os detalhes a seguir:
NameIDPath
Base TypeSTRING
Selecione a opção Is Primary Key.
8. Salve o campo com os detalhes.
9. Crie e salve um segundo campo com os detalhes a seguir:
NamePartName
Base TypeSTRING
10. Crie e salve um terceiro campo com os detalhes a seguir:
NameStock
Base TypeNUMBER
Selecione Has Default Value. Especifique 0 como o valor default.
11. Clique em Save.
Criando uma coisa
Realize os passos a seguir para criar uma coisa com o nome SamplePartThing:
1. No Composer, navegue para MODELING > Things.
2. Clique em New para criar uma nova coisa.
3. Especifique o Name como SamplePartThing.
4. Especifique o Base Thing Template como GenericThing.
5. Clique em Save para salvar a coisa.
6. Clique em Services e Add a fim de definir um serviço para obter os detalhes da peça em uma infotable.
7. Especifique os detalhes a seguir para o serviço:
NameGetPartDetails
Especifique os detalhes do modelo que você deseja adicionar a uma tabela de dados. Por exemplo, o código de amostra a seguir especifica os detalhes IDPath, PartName e Stock do modelo:
var data = [
{
"IDPath": "/39",
"PartName": "BLOWER_COMPLETE_K01.PRT",
"Stock": 18
},
{
"IDPath": "/40",
"PartName": "LOWER_HOUSING_COMPLETE_K01.PRT",
"Stock": 35
},
{
"IDPath": "/41",
"PartName": "UPPER_HOUSING_COMPLETE_K01.PRT",
"Stock": 57
}
];
var result = DataShapes.SamplePartDataShape.CreateValues();
for(var i =0;i<data.length;i++) {
result.AddRow(data[i]);
}
Em Output, especifique os detalhes a seguir:
Tipo de saída — INFOTABLE
Data ShapeSamplePartDataShape
Infotable typeJust Infotable
8. Clique em Done para salvar o serviço.
9. Salve a coisa.
Criando definições de estilo
Realize os passos a seguir para criar três definições de estilo:
1. No Composer, navegue para VISUALIZATION > Style Definitions.
2. Clique em New para criar uma nova definição de estilo.
3. Especifique o Name como SampleLowStockStyleDefinition.
4. Clique em Style Information.
5. Selecione a Text Color como vermelho.
6. Clique em Save para salvar a definição de estilo.
7. Crie a segunda definição de estilo com o nome SampleMediumStockStyleDefinition.
8. Selecione a Text Color como amarelo e salve a definição de estilo.
9. Crie a terceira definição de estilo com o nome SampleHighStockStyleDefinition.
10. Selecione a Text Color como verde e salve a definição de estilo.
Criando a definição de estado
Realize os passos a seguir para criar uma definição de estado:
1. No Composer, navegue para VISUALIZATION > State Definitions.
2. Clique em New para criar uma nova definição de estado.
3. Especifique o Nome como SampleStockStateDefinition.
4. Clique em State Information.
5. Na lista Apply State, selecione Numeric.
6. Clique em Default.
7. Especifique o Display Name como DefaultStockDisplay.
8. Em Style, faça uma busca pela definição de estado que deseja configurar como default. Para este exemplo, faça uma busca por SampleHighStockStyleDefinition e selecione-a.
9. Salve as informações de estado.
10. Clique em Add em State Information para adicionar uma nova definição de estado.
11. Para este exemplo, mantenha o valor do Operator como Less than (<).
12. Especifique o Value como 20 e Display Name como Low Stock Levels.
13. Faça uma busca por SampleLowStockStyleDefinition e selecione-a.
14. Salve as informações de estado.
15. Crie o segundo estado com o Value definido como 40 e Display Name, como Medium Stock Levels.
16. Faça uma busca por SampleMediumStockStyleDefinition e selecione-a.
17. Salve as informações de estado.
18. Crie o terceiro estado com o Value definido como 100 e Display Name, como High Stock Levels.
19. Faça uma busca por SampleHighStockStyleDefinition e selecione-a.
20. Salve as informações de estado default.
21. Clique em Save.
Criando o mashup
Realize os passos a seguir para criar um mashup com o nome SamplePartMashup:
1. No Composer, navegue para VISUALIZATION > Mashups.
2. Clique em New. A caixa de diálogo New Mashup é aberta.
3. Selecione Static e clique em OK.
4. Especifique o Name como SamplePartMashup.
5. Clique em Save para salvar o mashup.
6. Clique em Design.
7. No painel Widgets, arraste o widget ThingView para o layout.
8. No painel Widgets, arraste o widget Grid para o layout.
9. No painel de encaixe, em Data, clique em +. A caixa de diálogo Add Data é aberta.
10. No campo Select Entity, faça uma busca pela coisa que você criou. Neste exemplo, faça uma busca por SamplePartThing e selecione-a. Os serviços disponíveis com a coisa são listados.
11. No campo Select Services, faça uma busca pelo serviço criado na coisa. Neste exemplo, faça uma busca por GetPartDetails.
12. Clique na seta apontando para a direita no serviço GetPartDetails para adicioná-lo ao mashup.
13. Clique em Done.
14. No painel de encaixe, expanda GetPartDetails.
15. Em Returned Data, clique em All Data e arraste-o. Os parâmetros disponíveis com o serviço são listados.
16. Arraste o parâmetro All Data para o widget ThingView. Os parâmetros disponíveis com o widget ThingView aparecem.
17. Selecione o parâmetro Data do widget ThingView. Os dados da peça agora estão associados ao widget.
18. Da mesma forma, em Returned Data, arraste o parâmetro All Data para o widget Grid. Associe-o ao parâmetro de dados do Grid.
19. Selecione o widget ThingView no layout. As bordas do widget juntamente com uma seta são mostradas na área de layout.
20. Coloque o ponteiro sobre a seta. Uma lista de opções disponíveis com o widget ThingView aparece.
21. Selecione Configure Bindings. A caixa de diálogo Configure Widget aparece.
22. Em Events, selecione Loaded.
23. Clique em Triggered Services. A caixa de diálogo Add Services to Trigger from this Event é aberta.
24. Selecione o serviço GetPartDetails.
25. Clique em Done em todas as caixas de diálogo abertas.
26. Na propriedade ProductToView, especifique o URL do arquivo de estrutura do Creo View.
27. Na propriedade OccurrenceField, selecione IDPath.
* 
Se os campos não forem exibidos na propriedade, selecione o widget ThingView no mashup para mostrar os campos disponíveis da propriedade de dados.
28. Na propriedade DataFormatter, clique em State Formatting. A caixa de diálogo Configure State Formatting é aberta.
29. Especifique os detalhes a seguir:
Selecione a opção State-based Formatting.
Em Dependent Field, selecione Stock.
Em State Definition, selecione SampleStockStateDefinition.
Clique em Done para salvar a formatação de estado.
30. Clique em Save para salvar o mashup.
31. Clique em View Mashup para ver o mashup.
No mashup, ao clicar na peça do modelo, a linha correspondente na tabela é selecionada automaticamente. Da mesma forma, ao selecionar uma peça na linha da tabela, ela será destacada no modelo.