Best Practices for Creating Mashups Using Widgets and Functions
Use the following best practices while creating mashups with widgets.
Add Layout as Top-Level Widget in a Mashup
It is recommended that you add a Layout widget at the top-level of any container even if you add one widget. Adding a top-level Layout widget gives you the flexibility to add an additional row or column to the area as well as a header or footer in future.
Visibility of Widgets on a Mashup
You can manipulate the visibility of ThingWorx widget at runtime using the widget property Visible.
Validating User Input
Use the Validator function to validate the input that the users want to send to a device. These inputs may change the state of the device, operate the device remotely, and so on. It is recommended to check if the user input is valid. You can use one Validator function for each field you want to validate, or one for more fields if they require the same validations.
Validators accept regular expressions (regex) as input, which enables you to check almost any type of content. If the validation returns false, you can display a status message to the user, and reset the input field to the default value.
Mathematical Conversions
Use the Expression function to perform mathematical conversions at runtime. For example, consider a case where the data about a temperature is displayed in degree Celsius (C). You can provide a radio button that enables a user to see the temperature details in Fahrenheit (F). Based on the user selection of the unit of measurement, the Expression function calculates the value of the temperature and displays it.
It is recommended to use the Expression function rather than a server-side custom service for simple calculations.
Keyboard Navigation and Focus
In addition to the new keyboard navigation features in ThingWorx 9.4 and later, accessibility features related to keyboard navigation and focus are also available to ensure that users with disabilities can use the Mashup Builder interface effectively.
• Create clear and accessible forms by including a descriptive label for each widget in a mashup.
• Make sure that support for keyboard navigation in your mashup follows a logical order using the TabIndex property. Exclude widgets that are not required from the tab index sequence.
• Make sure that users are able to use the mashup using the keyboard only.
Tooltips
Add tooltips to provide helpful text to your users. Tooltips are helpful for users that are using screen reader devices.
Configure the auto focus to highlight widgets that users are likely to interact with when they open a mashup for the first time. This can reduce the time it takes to navigate to a specific widget in a mashup.
Make sure your style themes are accessible. Use sufficient contrast to make sure the mashup is visible on different devices and screens.