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.