Building applications with ThingWorx can dramatically improve the time to “go live” for most applications, but it is easy to become a victim of pitfalls if you are not considering some important aspects right from the beginning and if you are not using the correct tool for the job. Building on top of more than sixty years of combined experience developing complex applications that IQNOX has, we have put together his list of best practices that we often see missed in ThingWorx applications.

For each, we outline why they are important and how you can implement them using either native functionality, or our IQNOX Widgets Pack.

This article is meant to put you in a specific mindset when you plan to create a new UI, but more than that, it will list some questions that you should answer first, before starting the actual work. First, consider developing only after you have an answer to these questions:

1. What ThingWorx version are we targeting?

2. What devices are being used to access the application?

• Is it a desktop? Then what resolution?

• Is it a tablet? What type and screen dimension? Are we expecting usage in portrait or landscape mode?

• Are we targeting both mobile and desktop devices? If yes, is it a common UI, or are specific versions needed for each targeted device?

3. Who is the target user and what is the environment (outside, inside, in the factory, etc.) they are working in?

4. What are the main building blocks of the application we’re trying to build?

Secondly, maintainability is one of the most important aspects that should be considered. We must develop applications that are easy to upgrade, adapt and extend. Additionally, building on top of a proper foundation will improve the time-to-fix for new enhancements and issues.

Here are our top five best practices you need to consider when developing UIs from scratch with ThingWorx:

Designing for maintainability is crucial in the development of a User Interface (UI) for several reasons. Firstly, it ensures the longevity of the application by allowing for easy modification and updates in response to changing business needs or technological advancements. Additionally, maintainable UI design facilitates the onboarding of new team members, reduces the cost of fixing bugs, and improves the overall reliability and stability of the application. Furthermore, a maintainable UI design also enables developers to quickly identify and resolve issues, reducing downtime and improving the overall user experience.

The Mashup Builder tool presents limitations in terms of scalability for complex scenarios that require the display and hide of specific widgets. To address this, the developer is compelled to employ expressions and validators in their implementation, which can prove to be a challenging task, particularly for those new to the platform. This can result in the introduction of bugs and impact the overall maintainability of the application.

Therefore, for complex development scenarios, we recommend the use of Code Host, an open-source tool that facilitates the consolidation of code in a simple editor. This enhances maintainability in several ways, such as:

• enabling easier navigation of bindings;

• allowing for quick searching through functions using ctrl-click (similar to using VSCode) and ctrl-F;

• enabling multiple outputs from a single input, which is not possible when using validators or expressions.

• all your business logic in one place, without the need to play detective with mashup bindings

Furthermore, as Code Host is dependent on the Monaco Editor, the developer will have access to additional enhancements such as indentation, code formatting, and auto complete. Monaco Editor will replace all ThingWorx Service editors.

In conclusion, designing for maintainability is an essential aspect of UI development as it offers numerous benefits for both the development team and end-users.

The significance of this subject lies in its provision of information to users regarding the activities of the system, thereby fostering trust and confidence. Furthermore, it serves to educate users on the means of interacting with the system, the status of actions taken, and the current state of the system. Such information is crucial for users to effectively utilize the system and make informed decisions, resulting in an improved user experience.

While navigating through the User Interface and engaging in actions such as clicking buttons, expanding dropdowns, or selecting items from a list, it is advisable to inform the user about the status of the system. Specifically, providing feedback to the user during these actions is essential. This helps to avoid confusion and unintended actions, such as clicking a button multiple times.

For example, when sending a command to a device by pressing a button in an application, you want to make sure the user knows the command was registered and give them the status of that command. This can be achieved by displaying an indicator that the action is in progress and confirming that the command has been received. Otherwise, the user might repeat the action which could cause the device to behave unpredictably. These scenarios highlight the importance of communicating effectively with users through various UI hints, in order to provide a seamless and efficient user experience.

Below we will share how these matters are addressed in ThingWorx and what other alternatives are possible using something that we developed internally.

This is a situation when we have a button that will trigger a service. Then, a message will appear if the whole flow has been executed successfully.

Here, we share a snapshot from the bindings area.

If the service executes correctly, the message is displayed.

But what happens if the button is pressed multiple times, because the user is unaware that an action is in progress? How do we handle the cases when the action failed? Sometimes a good approach is to offer the user the opportunity to retry.

In more complicated scenarios, implementing a custom widget might help not only to have something tailored to the application, but also to further develop it to cater to different needs in the UI.

IQNOX has developed a custom Button widget that helps to streamline this process. With only the toggle of a checkbox, this widget can show us whether the service is loading and give some feedback when it’s finished. Be it Success or Failure. All these states are fully customizable with developer defined colors, messages and all available CSS styles options.

Here is an example of how that would work:

The widget also has an isLoading property which allows the developer to use it in different parts of the application and change the behavior of other widgets, maybe with a loading animation done with some CSS code.

Another good example of how to present the system state is with the input widget. It is important to give messages to the user when the input that has been typed is not valid/expected. Giving the user real-time feedback on the input text will help save time because they can identify mistakes as they are happening, and they don’t have to go back after attempting to submit and redo the form.

Using the right widget can improve the user experience and prevent frustration on the users’ side. This is a good alternative to mitigate that.

The IQNOX input widget gives you access to a lot of useful extra features. The most important one is the ‘InputType’ property that will allow you to select which type of input your application expects.

Good application performance while running a UI is important because it directly impacts the user experience. A slow or unresponsive user interface can frustrate users and lead to decreased productivity and satisfaction.

Identifying bottlenecks helps to locate the specific areas of the application that are causing performance issues. This information can then be used to optimize the application and improve its performance. By eliminating bottlenecks, the application can run more smoothly and efficiently, leading to a better user experience.

As a developer, it is crucial to consider the selection of appropriate widgets for presenting information to the user during the development of a user interface (UI). Based on our experience, utilizing a label widget instead of a value display offers improved performance outcomes and is therefore a preferable option. Although, in some cases, there is no replacement for the functionality that the value display offers.

Additionally, identifying and resolving performance issues can also improve the scalability and reliability of the application, making it more suitable for use in a wide range of situations.

The IQNOX widgets have been designed with the aim of maximizing performance for load times of the application and reduce the development time with the tools offered with the pack. The utilization of these widgets is characterized by the implementation of a streamlined Document Object Model (DOM) structure and the optimization of Cascading Style Sheet (CSS) generation.

Using the standard HTML objects, such as <button> <input> <label>, that browsers are familiar with and very well optimized to render them, will result in a better load performance overall.

The following patterns should be maintained across all the screens of your application.

• User experience: Consistent design patterns, layout and navigation help users quickly understand how to use the interface, reducing the learning time to be efficient in that application.

• Brand Identity: Consistent design elements and styles help to reinforce a company’s brand identity and create a sense of familiarity for users. Being able to achieve the exact branding guidelines styles is not an easy task.

• Development Efficiency: Following standards and patterns allow developers to work more efficiently, reducing the amount of time required to build and maintain the interface.

• Accessibility: Standards and consistency make it easier to ensure that the interface is accessible to all users.

The Out-of-the-Box widgets present a means of developing a User Interface that adheres to standards and embodies consistency in best practices. However, it should be noted that these widgets are optimized for and inherently tied to the PTC Convergence Theme, the default style utilized by ThingWorx.

In essence, the Out-of-the-Box widgets have been created to be compatible with PTC’s Convergence Theme.

The IQNOX widget pack is customizable enough to achieve just about any style that is needed without requiring the developer to write any CSS code, but still retains the capability should you wish to use CSS. As well as creating and customizing as many types as needed of the same widget the developer wants. This need to create, for example, “normal” and “small” buttons was in too many of our use cases to ignore. The capability is available for all widgets in the pack.

IQNOX widgets package encompasses an array of widgets that are developed to support a multitude number of styles for a specific theme/brand guide.

Here is an example from how the developer would customize the look of a particular widget, in this case, the Button widget. The “Configurator” as we call it, allows for the creation of templates with varying styles, thereby facilitating the process with minimal effort. Furthermore, these created templates can serve as references for other components of a similar nature. Utilizing this package provides an added advantage in the form of being able to modify the mashup theme without the need to leave the context of the mashup builder. This can be done within the same window, thereby maintaining a seamless workflow.

There are no restrictions in terms of how many templates for the button that can be created, any state like hover, active, disabled, etc, can be customized, and if needed, the developer can apply any CSS if the use case requires a complex styling.

Overall, consistency and standards in User Interface promote usability, reinforce a company’s brand identity, improve development efficiency, and promote accessibility.

Consistency within the brand is not the only thing the developers need to consider; industry standards are also very important. For example: if users are used to seeing the user menu on top right by clicking their name or user image, then that is a good standard to follow to make sure the user doesn’t have to relearn that action in your application.

Using colors and icons can help to quickly and effectively communicate important information, such as status, importance, or available actions, to users. They provide a visual cue that can be easily and instantly understood, even without the need for written text – using icons will save us some time for not being forced to use localization. This can help to improve the user experience by making information more easily accessible, increasing efficiency, and reducing cognitive load. Additionally, using consistent colors and icons across a user interface can help to create a more cohesive and visually appealing design, making it easier for users to navigate and understand the information presented to them. The templates from the “Configurator” will make it easier to reuse colors for icons throughout the application.

The package discussed in previous sections affords developers a comprehensive collection of icons that are intuitive and straightforward to comprehend. This is made possible through integration with libraries that enable access to these widely recognized icons. These icons exhibit exceptional discoverability, allowing developers to effortlessly search and utilize the icons of their choice.

The IQNOX widget pack comes also with a few helping tools and icon fonts to use within the widgets. By clicking the start icon in the Mashup Builder, you get access to the popup below.

There you can use the search to incorporate an icon into your application.

For a better user experience in searching for the icons, there are tags attached to each icon in order to make them easy to find. For example, searching for “home” will give you results for house. And developers can also filter based on the category – Material Symbols, Font Awesome, Media Entity, etc.

If a “Material Symbols” icon is used, it can be customized through the configurator to change the weight, whether it’s filled or not, to achieve the perfect result for the desired look of the icon.

With the current developments, using icons into ThingWorx applications starts becoming less and less desirable. Let’s change that, since now the icon is a standalone widget and incorporated into other widgets, such as: button, label, tabs, button group, status message and even Line chart.

By using style templates, it is easy to incorporate colors in your application and especially easy to iterate on them and make changes.

Another example would be to transform a status message from an Alert message to an Error message by changing the icon and the template to style it differently.

In conclusion, the creation of User Interfaces (UI) ought to be executed while adhering to a comprehensive array of best practices and industry standards. It is advisable to formulate a plan prior to the actual development, generate prototypes, and ensure the design aligns with the requirements of the customer.

To have a successful mashup in Thingworx, ensure consistent visibility of system status, maintain complete consistency and standards, and use meaningful colors and icons to facilitate communication with your user. Profile your application’s performance to identify bottlenecks and design with maintainability in mind by taking advantage of open-source tools.

Companies rely on IQNOX to provide them with enhanced Thingworx Widgets and technical support for all their IoT needs. Interested in purchasing the IQNOX Widgets Pack or talking with one of our Thingworx experts about your situation?

Contact us today!