Add and Configure Components
This topic contains the following information on how to utilize ThingWorx Navigate components in a mashup:
• Insert the Component into a Mashup
• Select a Predefined Configuration
• Configure the Component
• Bind the Component’s Properties
Insert the Component into a Mashup
1. In the ThingWorx Composer, create a new mashup or open an existing mashup. Click on the Design tab to open the Mashup Builder.
2. Navigate to the left dock and find the desired component.
a. To find components that are widgets, go to the Widgets panel and select Themeable in the Category box.
b. To find the Item List component, go to the Mashups panel and search for PTC.Nav.ItemListMashup.
c. To find the Action Bar component, go to the Widgets panel and select Beta in the Category box.
3. Drag the component into your mashup.
For more information, see The Mashup Builder Workspace in the ThingWorx Help Center.
Select a Predefined Configuration
1. Select an existing component from your mashup.
2. Click 
in the top right corner of the Widget Properties panel. The configuration dialog box appears.
in the top right corner of the Widget Properties panel. The configuration dialog box appears.3. Use the Configuration Type drop-down menu to select an initial configuration. If the component has any named predefined configurations, then select one in the dropdown menu. If not, the Generic configuration is automatically selected.
4. Click Done to save your work. If you need to make changes to this initial configuration for satisfying your requirements, proceed to the next section. When you are done working in the Mashup Builder, click Save at the top of the page.
Configure the Component
You can configure a component by editing its configuration. Follow these steps:
1. Select an existing component from your mashup.
2. Click in the top right of the Widget Properties panel. The configuration dialog box appears.
in the top right of the Widget Properties panel. The configuration dialog box appears.3. In the Configuration box you can edit the component’s configuration. The configuration is written in JSON format and is made up of configuration properties. To make changes, find the configuration property that you want to change and edit its value.
For more information on the configuration properties for a component or predefined configuration, see its topic page:
◦ Activity
◦ Tasks
◦ Progress
◦ Tiles
 | You can use the Restore defaults command to restore the out-of-the-box configuration. Note that you cannot restore the last saved configuration. |
4. Click Done to save your work. When you are done working in the Mashup Builder, click Save at the top of the page.
Bind the Component’s Properties
1. In the Mashup Builder, select the component that you want to bind from your mashup.
2. Navigate to the Properties panel in the left dock.
3. Bind the appropriate properties to a data source or to another component.
For more information on the binding properties for a component or predefined configuration, see its topic page:
◦ Activity
◦ Tasks
◦ Progress
◦ Tiles
| | Not all properties visible in the Properties panel are intended for binding or modification. To ensure that a given component works properly, only bind the properties listed in the Binding Properties table for that component. Use of all other properties is not supported by ThingWorx Navigate. |
For more information on how to bind a data service to a property, see Data Services and Bindings in the ThingWorx Help Center.