Mashup Builder > The Mashup Builder User Interface
  
The Mashup Builder User Interface
The Mashup Builder provides a customizable user interface for creating your mashup web pages. Following is the Mashup Builder default interface:
The default Mashup Builder user interface
The top of the interface has the following options:
General Information – Opens the General Information page for the mashup.
Design – Opens the design interface for the mashup.
Custom CSS – Opens the Custom CSS page for the mashup.
Refer to Custom CSS for more information.
Permissions – Opens the Permissions page where you can specify the organizations you want to have visibility, run time, or design time access to the mashup.
Change History – Opens the Change History page where you can view previous changes made to the mashup.
View Relationships – Opens the page where you can edit either the entities on which the mashup depends or the entities that use the mashup.
The Parts of the Design Interface
Following is the default Mashup Builder design interface:
The Mashup Builder design interface consists of the following main parts:
The parts of the Mashup Builder user interface
The layout part of the interface is where you design your mashup. It enables you to drag widgets onto the page and arrange them as desired. You can select multiple widgets in the layout by either clicking and dragging a selection box or by using CTRL+Click. You can also click Widget Dropdown icon on the upper-left corner of a widget to do things like configuring bindings and events.
The following other options are available in this part of the interface:
Cut, copy, and paste buttons
Enables you to cut, copy, and paste widgets.
Alignment buttons
Enables you to align widgets based on the widgets’ top, bottom, center, and so forth.
Size buttons
Enables you to control the size of the widgets.
Spacing buttons
Enables you to control the spacing of the widgets.
Mashup resolution dropdown
Enables you to preview the resolution required for the mashup in design time.
Mashup language dropdown
Enables you to preview the language for the text in the mashup in design time.
Workspace dropdown
Enables you to control how the design interface is arranged. Refer to Customizing the Design Interface below for more information.
The Connections part of the interface displays the flow of data and events in the mashup. For example, if a button press causes a Thing’s service to be called, then you see a connection from the Button widget’s Clicked event to that Thing’s service. For example:
Example connection for a button’s clicked event
This part also provides a To-Do panel with reminders of things you need to do to complete the configuration for the widgets in the mashup.
The left and right sides of the interface are docks. Each dock can contain up to three sections. These sections can have any number of panels, represented by tabs on the section. For example:
The parts of a panel
When a section contains more panels than can be displayed, the Widget Dropdown icon option displays to the right of the section tabs. Click this option to see the hidden panels.
You can close a dock by either clicking and dragging the inside border of the dock or by clicking this option on the inside border:
Close dock icon
When a dock is closed, the sections in the dock appear as icons:
Section icons on a closed dock
When you click one of the icons, the associated section is overlaid on the interface. Click this option to open a closed dock:
Open dock icon
By default, the left dock contains two sections with the following panels:
Widgets – Provides the list of widgets you can add to your mashup.
You can drag a widget from the list onto the layout area. This section contains a Category dropdown list that enables you to filter the list of icons based on their associated category. You can also start entering text in the Filter Widgets option to filter the list based on the text you enter.
Layout – Displays layout options for containers and items in a Responsive (Advanced) mashup.
Mashups – Provides a list of all of the other mashups available in your environment.
You can drag a mashup from this list onto the layout area to become a contained mashup in your mashup. Note that a contained mashup must be in a Contained Mashup widget. You can start entering text in the Filter Mashups option to filter the list based on the text you enter.
Explorer – Displays the widgets currently in your mashup in a hierarchical tree.
You can use this list to select widgets that might be hidden in the layout. You can start entering text in the Filter Explorer option to filter the list based on the text you enter.
Widget Properties – Displays a list of properties for the currently selected widget.
Modify the properties to configure the widget. You can start entering text in the Filter Properties option to filter the list based on the text you enter.
By default, the right dock contains two panels with the following sections:
Data – Provides access to the data to display in your mashup.
The data is provided by a ThingWorx entity, such as a Thing or Thing Template. Click the Add data icon option to open the Add Data window where you can find entities and add selected services from them.
Refer to Data Services and Linking for more information.
Session – Provides access to the session parameters.
Session parameters are similar to global variables and can be used by multiple mashups. Session parameters keep information such as cookies or security information for a logged-in user inside the current application session. Refer to Session Parameters for more information.
User – Provides access to the properties of the current user.
Refer to User for more information.
Data Properties – Displays a list of properties for the currently selected data element.
This includes parameters, events, and so forth.
Functions – Lists Expression and Validator functions. Click the Add function icon option to open the New Function window where you can create expression and validator functions.
Customizing the Design Interface
The Mashup Builder enables you to customize the design interface to meet your needs. You can rearrange the interface as desired to create a custom workspace and then save that workspace for future sessions. Workspace customization is based on the two dock parts of the interface and the sections and panels in those docks.
You can customize your workspace in the following ways:
Resize a dock.
Click and drag the inside border of a dock to make it smaller. If a section in the resized dock contains more panels than can be displayed, the Section display icon option displays to the right of the panel tabs. Click this option to see the hidden sections.
Resize sections in a dock.
Click and drag the top or bottom border of a section to resize it.
Close one or both of the docks.
Click this option on the dock’s inside border to close a dock:
Close dock icon
The dock closes, and the panels in the dock appear as a list of icons.
Drag a panel from a section in a dock to a different section.
Click on a panel tab and drag it to the top of a different section. If you can drop the panel on that section, the panel tabs are outlined in green:
Dropping a panel on a different section
Drop the panel, and it is added to the other section. If there are no more panels in the section from which you dragged the panel, that section disappears.
Drag a panel from a section in a dock to create a new section in a dock.
Click on a panel tab and drag it to the bottom of a different section. If you can drop the panel on that dock, the bottom of the section is outlined in green:
Dropping a panel on a different section
Drop the panel, and it is added to a new section. A dock can have a total of three section. If there are no more panels in the section from which you dragged the panel, that section disappears.
The view of your workspace is controlled by the Workspace option:
Default Workspace dropdown
Whenever you modify the design interface, the setting in Workspace changes from Default to Custom:
You can always return to the default workspace by selecting Default in this option.
To save a custom workspace to use in future sessions:
1. Arrange the Mashup Builder design interface as desired.
2. Select Create New in the Workspace option.
The New Workspace window opens.
3. In the New Workspace window, enter the name for your custom workspace in the Workspace Name option and click Done.
The name for your new workspace appears in the Workspace option.
Custom Workspace dropdown This will be available in future sessions.
The Remove workspace icon option also appears next to the Workspace option. Click this option to delete a saved workspace.