Customizable and Responsive UI
Improve efficiency in your design process with an object-oriented approach.
Guide Concept
This project will introduce you to the concept of using Containers in ThingWorx for creating a reusable experience.
Following the steps in this guide, you will be able to create a reusable user interface to shorten development time and increase scalability.
We will teach you how to create Containers inside of Mashups in order to create a standard look and feel for your application.
Guide Info
| Level | Intermediate |
| Est. Time | 30 Minutes |
| Published | July 11, 2019 |
| Author | Jason Johnson |
You'll learn how to
- Create a Gadget
- Create a Gadget Library
- Create a Dashboard
- Utilize Containers in UI development
-
Creating reusable Mashups
- Create a Mashup and add a Panel Widget
- Use the Panel-in-Panel technique
- Define specific Properties for a Panel
- Create a Mashup and add a Layout Widget
- Subdivide Layouts in your Mashup
- Create sidebars in your Mashup
Things used in this guide
Environment:
This guide requires a connection to the ThingWorx Foundation.
It assumes that you are utilizing the hosted Foundation server or the downloadable trial.
Software components:
ThingWorx Foundation
Previous knowledge:
CUSTOMIZABLE AND RESPONSIVE UI
Outline
- Step 1: Completed Samples
- Step 2: Dashboard - Create Gadget
- Step 3: Dashboard - Create Gadget Library
- Step 4: Dashboard - Configure Dashboard
- Step 5: Dashboard - Finalize Dashboard
- Step 6: Reusable Mashup - Embedded Mashup
- Step 7: Master & Menu - Create Menu
- Step 8: Master & Menu - Create Master
- Step 9: Widget Placement - Add Panel Widget
- Step 10: Widget Placement - Panel-in-Panel Technique
- Step 11: Widget Placement - Panel Properties
- Step 12: Next Steps