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 | Aug 17, 2020 |
| Author | Jason Johnson |
You'll learn how to
- Create a Gadget
- Create a Gadget Library
- Create a Dashboard
- Utilize Containers in UI development
- Create 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
This guide is part of a Learning Path. We've curated other guides relevant to this one to help you learn and get up to speed as quickly as possible.
Learning Path Overview
Customize UI and Display Options to Deploy Applications
Build, customize, and deploy IoT applications with ThingWorx.
In This Learning Path
1
Experience
2
Experience
3
Experience
4
Experience
5
Experience
6
Manage
7
Experience