IoT Tips

This post is part of the series Forced Root Cause Monitoring via Mashups and Modal Popups To not feel lost or out of context, it's recommended to read the main post first. Required Logic The following logic will help us realizing this particular use case: The trigger property on the AlertThing switches from false to true. The MashupMain will receive dynamic Property updates via the AlertThing.GetProperties service. It will validate the value of the trigger Property and if it's true the MashupMain will show the MashupPopup as a modal popup. A modal popup will be exclusively in the foreground, so the user cannot interact with anything else in the Mashup except the modal popup. In the modal popup the user chooses one of the pre-defined AlertStateDefinitions. When a State is selected, the popup will set the State as a Mashup Parameter, pass this to the MashupMain and the popup close itself. When the MashupPopup is closed, the MashupMain will read the Mashup Parameter The MashupMain will set the selectedReason in the AlertThing to the selected value. It will also reset the trigger property to false. This allows the property to be set to true again to trigger another forced popup. On any value change the AlertThing will store the selectedReason State in a ValueStream to capture historic information on which root causes were selected at which time. The ValueStream information will be displayed as a table in a GridWidget in the MashupMain once the new properties have been set.

  Create Your Application Guide UI Part 4    Step 6: Apply Services   You now have an idea of what your Mashup will look like, but without Data Services, it won't accomplish anything productive. In the following steps you'll apply Mashup Data Services to the Widgets.   Add Data Services   Click the + button in the top-right in the Data tab.   In the Entity Filter field, search for and select MBQSThing. In the Select Services field, search for and select GetPropertyValues. Check the Execute on Load checkbox for GetPropertyValues. In the Services Filter field, search for and select SetProperties. In this case, you WILL NOT check the box for Mashup Loaded? because we do not want to call this Service upon initial Mashup load. 6. Click Done. Both the GetPropertyValues and SetProperties Services now appears under the Data tab as well. 7. Click Save.   GetPropertyValues   GetPropertyValues has brought all the values of our Thing's Properties into the Mashup. Now let's tie these values to the Widgets. Expand All Data under the GetPropertyValues Service on the right under the Data tab.   Drag-and-drop Gears_Count onto the textfield-gears-count Widget.   On the Select Binding Target pop-up, click Text.   Repeat Steps 2 and 3, binding Pistons_Count to textfield-pistons-count and Wheels_Count to textfield-wheels-count. Drag-and-drop Gears_Count_Manually_Set onto the checkbox-gears-manual Widget.   On the Select Binding Target pop-up, click State.   Repeat Steps 5 and 6, binding Pistons_Count_Manually_Set to checkbox-pistons-manual and Wheels_Count_Manually_Set to checkbox-wheels-manual. Click Save.   SetProperties   We want to tie the Widgets to the SetProperties Service to manually set the inventory counts in case something has gone wrong with our IoT sensors in the warehouse. On the right under the Data tab, minimize the GetPropertyValues Service and expand the SetProperties Service.        2. Click the textfield-gears-count Widget to select it. 3. Click the top-left drop-down of the TextBox to expand the options. 4. Drag-and-drop Text onto SetProperties > Gears_Count. 5. Repeat Steps 2 through 4, binding Text from textfield-pistons-count onto Pistons_Count and textfield-wheels-count onto Wheels_Count. 6. Click the checkbox-gears-manual Widget to select it. 7. Click the top-left drop-down of the Checkbox to expand the options. 8. Drag-and-drop State onto Gears_Count_Manually_Set. 9. Repeat Steps 6 through 8, binding State from both checkbox-pistons-manual to Pistons_Count_Manually_Set and checkbox-wheels-manual to Wheels_Count_Manually_Set. 10. Click the button-manual-set Widget to select it. 11. Click the top-left drop-down of the Button to expand the options. 12. Drag-and-drop the Clicked Event onto SetProperties under the Data tab. NOTE: The previous steps in this section where we bound Widgets to Properties simply defined what-goes-where in terms of storing the values into the ThingWorx Foundation backend.To actually push those values, the SetProperties Service itself must be called. 13. With the SetProperties Service selected, drag-and-drop SetProperties' ServiceInvokeCompleted Event (in the bottom-right Data Properties section) onto the GetPropertyValues Service (in the top-right Data tab). If you don't see ServiceInvokeCompleted, ensure that you have the Data Properties tab selected. This will cause the GUI to update once the new values have been saved to the platform’s backend. 14. Click Save.   Manual Data Retrieval   We want to tie a Button to GetPropertyValues to update the GUI with the backend's ever-changing inventory counts without requiring a page reload. Click button-manual-retrieve to select it. Click the top-left drop-down of this Button Widget to expand the options. Drag-and-drop the Clicked Event onto the GetPropertyValues Service. This will create another way to update the part counts in the GUI, other than reloading the page. 4. Click Save.   Click here to view Part 5 of this guide. 

  Create Your Application Guide UI Part 3    Step 5: Add Widgets to Mashup    At this point, you should have an understanding of how the Widgets in your Mashup relate to the data from devices you've connected via the ThingWorx platform.   Scenario   Now, let's try to imagine a real-world scenario. For this example, assume that you are in a company developing an IoT application utilizing ThingWorx Foundation.   Developer Role Responsibility Edge Developers Utilize the Edge MicroServer, Software Development Kits, or ThingWorx Kepware Server to connect devices and bring data into the platform. Backend Developers Created Things, Thing Templates, and Thing Shapes to store and manipulate the data within ThingWorx Foundation. Frontend Developer Tasked with taking the IoT data and creating an interface with which your users can interact to gain insight from the data. In this scenario, you are the Frontend Developer. The Thing you imported previously represents those Edge and Backend Developers’ work. The data is all there. Specifically, let's assume that this Data Model represents a factory inventory system. You want to quickly build a GUI that is a Minimum Viable Product (MVP) to display the current counts of various products in your warehouse, while also allowing you to manually edit those counts if you receive a report that an IoT scanner in the warehouse has malfunctioned. Since this is a real factory, inventory is constantly increasing and decreasing as manufactured parts are completed or shipping orders are fulfilled. In this lesson, we'll simulate these changes by a 10-second-timer which will increment the counts until a shipping order has been fulfilled (100 total parts), at which point the current inventory count for that part will be reset.   Create the Mashup   Follow the subsequent steps to create an MVP GUI for the example scenario: Click Browse > VISUALIZATION > Mashups > + New. Keep the default of Responsive (with NO Responsive Templates chosen), and click OK in the pop-up window. In the Name field, enter MBQSMashup.   If the Project field is not already set, search for and select PTCDefaultProject.  At the top, click Save. At the top, click Design. On the left, click the Left Arrow to slide-back the navigation pane, leaving more room for the Mashup Builder. At the topleft on the Layout tab, for Positioning, check the radio-button for Static.   Add Labels   Follow the subsequent steps to add Labels that clarify GUI sections of the application. Select the Widgets tab, then drag-and-drop three Label Widgets onto the central Canvas.   With the top Label Widget selected (by clicking on it), change the DisplayName to label-gears-count and hit the Tab key on your keyboard to lock in the modification. NOTE: You can find the DisplayName and all other Widget Properties in the bottom-left of the Mashup Builder. Changing the Widget DisplayNames to recognizable values is highly recommended, as it assists with your logic inspection in the bottom-center Connections window.        3. With the newly-named label-gears-count still selected, type Gears Count in the LabelText field and hit the Tab key.       4. Click on the middle Label; then, in the bottom-left Widget Properties panel, change the DisplayName to label-pistons-count and LabelText to Pistons Count.       5. Similarly, change the bottom Label's DisplayName to label-wheels-count and LabelText to Wheels Count.       6. Click Save.   Add TextBoxes   Follow the subsequent steps to display some information on the various part-counts in our inventory. Drag-and-drop three Text Field Widgets onto the central Canvas.   With the top Text Field Widget selected, change the DisplayName to textfield-gears-count and hit the Tab key.   Change the middle Text Field's DisplayName to textfield-pistons-count, and hit the Tab key. Change the bottom Text Field's DisplayName to textfield-wheels-count, and hit the Tab key. Click Save.   Add Checkboxes   We want to display that inventory counts have been manually set when something went wrong, rather than have someone assume that the information is current and coming from an IoT sensor. This also allows us to flag any sensors that are experiencing issues. Follow the subsequent steps to create checkboxes. Drag-and-drop three Checkbox Widgets onto the central Canvas.   With the top Checkbox Widget selected, change the DisplayName to checkbox-gears-manual and the Label property to Gears Manually Set. Change the middle Checkbox's DisplayName to checkbox-pistons-manual and Label to Pistons Manually Set. Change the bottom Checkbox's DisplayName to checkbox-wheels-manual and Label to Wheels Manually Set.   Click Save.   Add Buttons   After our manual count has been entered, we need to trigger storing it in the backend. We can do this with a Button Widget. In addition, it would be helpful to be able to update the changing counts in the Textboxes without having to reload the entire Mashup. Follow the subsequent steps to add Buttons. Drag-and-drop two Button Widgets onto the central Canvas.   With the top Button Widget selected, change the DisplayName to button-manual-set, the Label to Manually Set Counts, and click-and-drag the right-side of the Button to expand its size.   With the bottom Button Widget selected, change the DisplayName to button-manual-retrieve, the Label to Manually Retrieve Counts, and click-and-drag the right-side of the Button to expand its size.   Click Save.   Resize the Mashup   Follow the subsequent steps to enable the Mashup to fit on a smartphone screen. Click-and-drag your Widgets around the Mashup such that they look roughly like the pictures shown above. Click-and-drag the right-side of the Mashup, pulling it to the left to reduce the horizontal size. Click-and-drag the bottom of the Mashup, pulling it up to reduce the vertical size.   Click Save.         Click here to view Part 4 of this guide.   

  Basic Mashup Widgets Guide Part 2    Step 3: Slider   A Slider allows your application users to interactively select a numeric value. When the user changes the position of the slider bar, an event is fired and the value property is changed. On the New Mashup tab, enter slider inside the Filter field in the top left. Drag-and-drop the Slider widget onto the top-right Container of your Mashup. 3. In the lower panel of the left dock, scroll to the Maximum property and change the value to 1000. 4. Change the Value property to 500 set the default position of the slider.   Add Value Display To demonstrate the Slider functionality we will add a Value Display Widget within the same Container of your Mashup as the Slider and bind the slider widget output to the input of the Value Display.         1. In the Filter field where you entered slider, enter value.        2. Drag-and-drop a Value Display widget onto the same upper-right Container as the Slider widget. 3. Click the drop-down arrow on the left side of the Slider widget. 4. Click and drag the Value property listed in the Slider drop-down onto the Value Display widget. 5. Click the Data property that is available from the Select Binding Target pop-up. 6. Click Save to save your Mashup. 7. Click View Mashup then adjust the slider to see the changing value shown in the Value Display widget.             Many properties are available that give control over how a Slider widget will be displayed. Properties can be changed both statically when designing the Mashup, and dynamically in response to changes in property values.   Bindable Name Type Default Direction Description Value Number 0 Input/Output Value defined by position of Slider that can be used by downstream widgets or services Minimum Number 0 Input/Output Value for left-most position of Slider, bottom-most position of Vertical Slider Maximum Number 100 Input/Output Value for right-most position of slider, top-most position of Vertical Slider HandleSize Number 34 Input Size in pixels of the slider handle Visible Boolean True Input Widget is visible if set to true StepSize Number 1 Input Smallest change in value when slider is moved   Static Name Type Default Direction DisplayName String None Name used for widget in user-facing interactions Description String None Description used for widget in user-facing interactions HandleIcon None/Circle/Split Circle Slider handle style SliderBar Thick/Thin Thick Slider bar style SteppingMode Boolean False When True, moves the slider by Step amount toward the click on the Slider bar TrackingMode Boolean False When True, the slider generates events as it changes value. Use with caution, this mode generates many events rapidly. DisplayMinMaxLabels Boolean True When enabled, displays the minimum and maximum values of the slider DisplayValueLabel Boolean True When enabled, displays the value of the slider   Widget Events Name Description ValueChanged Fired when Slider Value changes   Widget Services Name Description Increment Increase value of Slider by Step amount Decrement Decrease value of Slider by Step amount     Step 4: Toggle Button   A Toggle Button widget is used when a Mashup user may select only one choice from two options. On the Widgets tab in the top-left, enter button in the Filter field. Drag-and-drop the Toggle Button widget onto the lower left container of the mashup.   Scroll to the State property in the lower panel of the left dock where Toggle Button widget properties are shown. Click the check box to set the default state to true.   Add Value Display To demonstrate the toggle Button, we will add a Value Display Widget to the same Mashup container and bind the toggle Button State property to be shown by the Value Display. Drag-and-drop a Value Display Widget onto the same lower left container of the Mashup where the Toggle Button was placed. Click the drop-down arrow on the left side of the Toggle Button Widget. Click and drag the State property listed in the drop-down onto the Value Display Widget and a Select Binding Target pop-up will appear.  Click the Data property that is available from the Value Display Widget. Click Save to save your Mashup so it can be tested. Click View Mashup then click the Toggle Button to see the value of the button shown in the Value Display Widget.   Other properties are available to provide control over how a Toggle Button Widget will be displayed. Properties can be changed both statically when designing the Mashup, and dynamically in response to changes in property values.   Bindable Name Type Default Direction Description State boolean false Input/Output Value of toggle, can be used by downstream Widgets or Services Label String None Input Text that is displayed next to toggle button Visible Boolean True Input Widget is visible if set to true   Static Name Type Default Description DisplayName String auto-generated Name used to identify Widget in Mashup Builder Description String None Description used for Widget in user-facing interactions Height number autosize Sets the height of the widget in pixels LabelAlignment Left/Right Left Where label is shown relative to toggle button   Widget Events Name Description StateChanged Fired when user clicks the button   Click here to view Part 3 of this guide.

    Step 10: Building and Importing   After you’ve completed your code updates, it’s time to build and import! Below are instructions for building with the framework you have set for the project.   Build Extension with Ant   Go to the Package explorer view. Right click on build-extension.xml. Hover over Run As and select Ant Build.   Your console output will indicate BUILD SUCCESSFUL. This will build your project and create the extension zip in the your_project->build->distributions folder of your project.   Build Extension with Gradle   Right click on your project ->Gradle (STS)->Tasks Quick Launcher.   Set Project from the drop-down menu to your project name and type Tasks as build. Press Enter.   Your console window will display BUILD SUCCESSFUL. Your extension has been created and stored as a zip file in your_project->build->distributions folder.     Import Extension   Go to ThingWorx Composer. In the lower left, click Import/Export, then select Import under.   Select Extension for the type of import.   Choose the zip file in the distributions folder under the build directory. Click Import. Click Close on the prompt to refresh your Composer instance.   After you have imported your new widget and refreshed Composer, you will see your new widget as an option on the Mashup Design tab.     Step 11: Tips   When a new version of an extension contains model changes for one or more of its entities, the previous version of the extension and any entities created from that extension must be deleted before installing the new version of the extension. To avoid having to recreate the entities after the new extension is installed, you can include an extension migrator with the extension that imports the entities created with the previous version.   Adding an Extension Migrator   To create a migrator class for your extensions, follow these steps: Choose the ThingWorx menu and select New Extension Migrator. Select or enter your source folder and package. Enter a name, such as CustomMigrator. Click Finish. The Java source file is created and the configfiles/metadata.xml file is updated automatically.   NOTE: If a migrator has already been created, the previous migrator class name will be replaced in the metadata.xml file with the new migrator class name. The previous migrator Java file will not be changed.   Element Selection   Use this.jqElement to limit your element selections. This will reduce the chance of introducing unwanted behaviors in the application when there might be duplicate IDs and/or classes in the DOM.   ///Don’t do the following: $('.add- btn').click(function(e){...do something...}); ///Do this: this.jqElement.find('.add-btn').click(function(e){ ...do something...});   Logging   We recommend that you use the following methods to log in the Mashup Builder and runtime environment: TW.log.trace(message[,message2,...][,exception]) TW.log.debug(message[,message2,...][,exception]) TW.log.info(message[,message2,...][,exception]) TW.log.warn(message[,message2,...][,exception]) TW.log.error(message[,message2,...][,exception]) TW.log.fatal(message[,message2,...][,exception])   You can view the log messages in the Mashup Builder by opening the log window via the Help->Log menu item; in the Mashup runtime, you can now click on the Show Log button on the top left corner of the page to show log window. If the browser you use supports console.log(), then the messages will also appear in the debugger console.   Formatting   If you have a property with baseType of STYLEDEFINITION, you can get the style information by calling: var formatResult = TW.getStyleFromStyleDefinition( widgetProperties['PropertyName']);   If you have a property of baseType of STATEFORMATTING: var formatResult = TW.getStyleFromStateFormatting({ DataRow: row, StateFormatting: thisWidget.properties['PropertyName'] });   In both cases formatResult is an object with the following defaults: { image: '', backgroundColor: '', foregroundColor: '', fontEmphasisBold: false, fontEmphasisItalic: false, fontEmphasisUnderline: false, displayString: '', lineThickness: 1, lineStyle: 'solid', lineColor: '', secondaryBackgroundColor: '', textSize: 'normal' };     Step 12: Next Steps   Congratulations! You've successfully completed the Create A Mashup Widget Extension tutorial.   You've learned how to:   Utilize the Eclipse Plugin and Extension SDK Create and configure an Extension project Create a mashup widget Extension Build and import an Extension   Learn More   We recommend the following resources to continue your learning experience:    Capability    Guide Build Application Development Tips & Tricks   Additional Resources   If you have questions, issues, or need additional information, refer to:    Resource         Link Community Developer Community Forum Help Center  Custom Widget Tips and Example    

Composer Enhancement: -Improved workflow support NG Composer challenging to navigate -> Usability challenges with editing and viewing data Feature: -Tab style editing support -Horizontal tabs -New Grids with Resizing -Resizing in Entity Grids -Schedule Editor Problem: Need modernization of platform visualization toolset -> -New Webcomponent widgets -Responsive layout now GA -Theming now GA -Key messaging -New ability to build responsive modern web applications   Theming and Theme editor -Centralized style management -Easily apply to all Mashups of an applications -Bindable, can be changed dynamically -Set Colors Typography, Lines, Borders, States -Set globally or by group of elements (buttons, grids, inputs) -Mashup Preview can be set   New Widgets in 8.5 -Breadcrumb -Dynamic panel -Icon -Image -List Shuttle -Property Display -Slider -Value Display -Advanced Grid now part of platform Functions: -Confirmation -Event Router -Logout  -Navigation -Status Message   Responsive Layout -New responsive layout editor, based on Flex -Content lays out according to rules, adapts to the screen size and settings -Static and size range support   Migration When you open a mashup containing legacy widgets for which there are web component replacements available OR You open a mashup containing legacy layouts, a banner appears at the top of the design page Clicking Yes will migrate to new widgets and new flex layout -Bindings in the mashup are retained -Recommended to review widgets sizes   Layout Migration -Static layous are migrated to a responsive flex container Q: There is still no Right mouse click support?  A: We don't have a right click context menu yet, but we're looking into what can be included based on the context for a future release. Q: With flex containers, is it still possible to create a mashup with two columns, one covering 1/3 of the screen, the other 2/3 of the screen, when the size of the screen is not known upfront? A: Correct - you can set container rules to grow and shrink (in your case, set one container to use 1/3rd and the other 2/3rd) Q: Do we have the cut/paste function in the responsive containers so we're able to move content around? A: Yes, now you can move the whole container too! You can either use the cut/ copy/ paste from the toolbar, or use keyboard shortcuts (shift for cut/ move and alt for copy). Q: The old layout widget allowed setting column size as percentage, rather than absolute size. How can that be done in containers? A: With containers, it uses the standard flex-grow and flex-shrink css properties. We have Grow Ratio and Shrink Ratio properties available, and you can set the values there. Q: How are we addressing the expand/collapse functions we used to have in the headers/footers/righ&left side bar? A: Each container  will have an option to Expand/ Collapse. Based on where the container is located (left/ right or top/ bottom), it will expand accordingly - so left/ right sidebar or header/ footer. Q: Does it show which widgets are undergoing the changes from legacy to new? A: The legacy widgets are grouped in the 'Legacy' widget category, and are indicated with an icon noting it's a legacy widget. Q: What about migrating from widget from extension (ie advanced grid) ? Those will be replaced also? A: Correct - when you move to 8.5, you won't have to import the extension any longer. If you have any Mashups with the Advanced Grid in place, it'll pick it up. Q: Can we add CSS to the themes? A: Yes, you can add. The Custom CSS tab is available for Themes specifically too. Q: Bindings of containers won't be saved - does that mean that if we use contained mashup with mashup parameters, all bindings will be lost? A: The bindings within the container should not change; the Mashup parameters will be exposed so that you can bind in/ out. The bindings should be retained - when you migrate from the old layout to the new, any bindings you have should not be lost/ broken.

We will host a live Expert Session: "Thingworx Mashup 101 - Do's and Don'ts" on February 24th, 13h30 EST.   Please find below the description of the expert session and the registration link.   Expert Session: Thingworx Mashup 101 - Do's and Don'ts Date and Time: February 24th, 13h30 EST Duration: 1 hour Host: Aanjan Ravi - Technical Product Manager Registration Here: https://www.ptc.com/en/events/thingworx-mashup-101   Description: This session covers the most common and useful tips about how to correctly use Mashup builder, Widgets and Layouts – and what to avoid -  to create applications with good principles of UI/UX and easier to maintain.   Existing Recorded sessions can be found on support portal using the keyword ‘Expert Sessions’. You can also suggest topics for upcoming sessions using this small form.   Here are some recorded sessions that might be of your interest. You can find recordings for the full library of webinars using the keyword ‘Expert Sessions’ in PTC support portal search Thingworx Active Active Clustering This session will cover the main aspects of the High Availability Clustering feature launched with the ThingWorx 9.0 release.   Recoding Link Upgrade to Thingworx 9 – How to Plan / Evaluate Impacts This session highlights the key points you should evaluate to properly plan your upgrade to Thingworx 9. Recording Link Top 5 items to check for Thingworx Performance Troubleshooting How to troubleshoot performance issues in a Thingworx Environment? Here we cover the top 5 investigation steps that will help you understand the source of your environment issues and allow better communication with PTC Technical Support     Recording Link

  Discover how ThingWorx Widgets can be implemented in a compelling Mashup design.   Guide Concept   This project will introduce how to create complex user interfaces that are built by combining simple Widgets and basic styling.   Following the steps in this guide, you will build a web application showing both geographic and table based information.   We will teach you how to create a professional user interface that effectively conveys information to users.     You'll learn how to   Organize UI elements in a Mashup layout Use the Repeater widget effectively Use Styles to customize UI elements within a Mashup   NOTE: This guide's content aligns with ThingWorx 9.3. The estimated time to complete ALL parts of this guide is 60 minutes     Step 1: Top Level Layout   A Mashup like this does take some time to assemble, but is built by layering simple Widgets. In this guide, we will break down how this Mashup was created to give you a behind-the-scenes look and provide tips to use when developing your IoT application.     This professional-looking Mashup was created using only these Widgets:   Layout with both left and right sidebars and a footer Tabs - Responsive Repeater Navigation Image Property Display Gauge Google Map   The first Widget placed on this Mashup canvas was a Layout widget with both a Left and a Right Sidebar defined. The center portion of the layout has only one GoogleMap widget. The tractor icons displayed on the map were created by uploading a .png to create a Media entity then specifying the image as a custom MarkerStyle in the GoogleMap widget. In the following steps you will duplicate this Mashup.         Step 2: Import Data   In this step we will download and them import both a Thing Template and the sample data that are used throughout the exercise.   Download and save ConnectedTractors.xml which contains the Thing Template and example Things. In the lower left of Composer, click Import/Export, then Import.     In the Import From File pop-up, keep the defaults and click Browse.     Navigate to the ConnectedTractors.xml file you previously downloaded. Select the Entities file, then click Open. Click Import in the bottom right of the pop up, then click Close after file is successfully imported.     Step 3: Map Mashup   Follow the steps in this part of the lesson to create a Mashup with an organized, structured layout.   Create Mashup   Navigate to Browse > Visualization > Mashups.   Click + New.   Keep the defaults and click OK.   In the Name field, type TractorDemoMashup. If Project is not already set, click the + in the Project text box and select the PTCDefaultProject.   Click Save Click the Design tab in the Mashup Information panel Click the Layout tab, then click Add Left . Scroll down to Container Size, click Fixed Size then enter200 in the Width text box and press Tab to record your entry.   Click on the right side of your Mashup to select the larger container. Click Add Right before again scrolling down to Container Size, click Fixed Size then enter200 in the Width text box and press Tab to record your entry.        NOTE: The next step uses the Google Map Widget which may need to be downloaded and imported from IQNOX.com. A Step-by-step guide for using Google Maps with ThingWorx is available.   12. Click the Widgets tab on the top left of the Widget panel, then enter map in the search box of the Widget panel. 13. Click and drag the Google Map Widget onto the center area of the canvas. 14. Click Save   15. In the Data panel on the right click the + to add a data source for the Mashup. 16. Enter the name of the Template used to create the Things that will be shown on the Mashup. Click on the Template ConnectedTractor to use the sample data 17. Click the arrow to the right of GetImplementingThingsWithData, then click the Execute on Load check box before clicking Done.     Setup Map Data   In the Data panel on the right, if neccesary, expand the GetImplementingThingsWithData data source and then drag the All Data row onto the map widget.   Click Data in the Select Binding Target pop-up to connect the data source to the Data property of the Google Maps widget. In the Properties panel in the lower left, scroll to the LocationField property then select TractorLatLng   NOTE: The imported sample data provided for this lesson has a property named TractorLatLng that contains location information. Fields in the bound data with a type Location will be available in the drop down. 4. Click Save at the top of your Mashup. Click View Mashup to see the live map. NOTE: The map uses the standard markers, click on one of the markers to see that the marker changes to indicate that it is selected.     Customize Map Markers   In this part of the lesson we will show how to use a custom image for the map markers. Right-click on each of the images below to download and save them to use in the next step.       We will upload these images to create new Media entities and apply them to the Google Map widget. Click Browse > Visualization > Media.   Click + New. In the Name field, type TractorSelected.   If Project is not already set, click the + in the Project text box and select the PTCDefaultProject. Under Image, click Change. Navigate to and select the TractorSelected.png file you just downloaded. On the navigation pop-up, click Open to close the pop-up and confirm the image selection. At the top of Foundation, click Save.    Repeat steps 1 through 8 for TracktorUnselected. Open your Mashup and click on the Google Map widget. Click on Style Properties tab in the lower left and scroll to the MarkerStyle Property and click on the Default map marker image, then click edit.   Click Style Information in the left panel, then clear the default image by clicking the X next to Image.   Click the + to select a new image then scroll to the Media entity you just created. In this case, the TractorUnselected media. Click Save. NOTE: The Google Map widget is packaged with default style entities. By editing these styles we will change the markers for all Mashups running on this ThingWorx server. In later steps we show how to create one time use Styles instead of modifying the default Styles.   14. Repeat steps 1 through 8 to create and assign the TractorSelected image for the SelectedMarkerStyle Property. 15. Click Save for the Mashup, then View Mashup to see the custom map icons.       Step 4: Navigation Panel   The left sidebar defines the green background color in its style and contains just one Collection widget with custom embedded Mashups specified for both the Selected and the Unselected items. The logo at the bottom is an image defined in the Footer style.   The Collection widget works by duplicating an embedded panel Mashup that controls the display of data from each entity in collection of entities.   Add Footer   Select the left side container of your Mashup, then click the Layout tab Click Add Bottom and scroll down to Container Size, click Fixed Size then enter 60 in the Height text box and press Tab to record your entry.   Click Save.   Style Sidebar   Next, we are going to add a custom background color and image to the sidebar footer.   Click the Explorer tab in the widget panel then select the top container for the left sidebar.   Click the Style Properties tab in the lower left properties panel, then click to expand Base and flexcontainer. In the background tex box, enter #39736C for a dark green color, then press Tab.   Click the top left container, then, in the Style Properties tab, click to expand Base and flexcontainer. Click X in background property   Click the lower left container, and also click X to remove the background property.   Right-click on the image below to download and save it for use when we add a footer in the next step.   Create a Media entity as we did for the map markers by clicking the Browse folder icon, then click Media in the Visualization section. Click the + New to create a new Media entity. Enter twxpwr in the Name field for the footer image. If Project is not already set, click the + in the Project text box and select the PTCDefaultProject. Click Change in the Image section, then browse to the image you saved. Click Open, then Save.   Click in the lower-left footer container on your mashup, then click the Properties tab. Scroll to see the SourceURL property in the properties panel, then click the + to open the media selection window. Scroll to browse for the Media you just created.   Click the footer Media and then slick Save in Mashup Builder before continuing to the next step.     Click here to view Part 2 of this guide.

  Utilize the Menu Widget to navigate between multiple Mashups.   Guide Concept   Frequently, your application needs to display more information than can comfortably fit on a single page, but manually linking to multiple Mashups can be tedious.   Instead, you can utilize a Menu Entity, Menu Widget, and a Master Mashup to provide consistent navigation between all the pages of your application.      You'll learn how to   Create a Mashup to be used as a "Home" page Create more Mashups as subpages Create a Menu Entity to track Mashups Create a Master Mashup as a Header Utilize a Menu Widget for navigation   NOTE: This guide's content aligns with ThingWorx 9.3. The estimated time to complete this guide is 30 minutes     Step 1: Scenario   In this guide, we'll assume a scenario where you're an application designer for LightCo, a company that designs and sells smart, connected street, interior, and other lighting products.    In particular, LightCo is interested in using ThingWorx Foundation to operate and control lighting for industrial and city applications.    There's a tentative deal in the works with a city park replacing all their path lighting with high-efficiency models. There's also an outdoor amphitheater in the park that could be added to the deal if the functionality to properly control it is present.     LightCo's intention is to use Foundation to provide a level of control for this application that otherwise wouldn't be possible, as a differentiator versus the competition bidding on the same project.   Since control of both the park-lighting and amphitheater lighting needs to be separate, putting both controls on the same Mashup page would not only be counterintuitive but could possibly lead to errors.    So, in this guide, we'll setup our base page layout for this lighting application. We'll create both a homepage (where we could add login or other elements), as well as separate pages for the park vs the amphitheater. We'll then create a Master Mashup with a Menu for easy navigation between these three initial pages.       Step 2: Create Home Page   First, we want to create a Mashup to represent our homepage.    There doesn't have to be much to it, as we could come back later to develop it further. We just need it to be pre-created to later include it in our Menu.    In Foundation, click Browse > Visualization > Mashups.   At the top-left, click +New.   Leave the defaults and click OK.   In the Name field, type MNWM_Homepage_Mashup. If Project is not already set, search for and select PTCDefaultProject.   At the top, click Save.   At the top, click Design.     Homepage Layout   As mentioned, we don't really want to design our final Homepage right now. Instead, we're simply getting it started to leave ourselves a relatively blank canvas that we can utilize later.    Still, we need to add something. If nothing else, we need something that we can see so that we know we're on the correct page when we click through our Menu options.   We know we'll want our company's name, i.e. LightCo, and probably an image, login, or something else below. So let's subdivide the Mashup into a smaller top part for the name and a bigger bottom section for future functionality.   In the top-left, ensure that the Layout tab is active.   Click Add Top.   Scroll down in the Layout tab to reveal Container Size.   With the top-section of the Canvas selected, click Fixed Size.   In the Height field, type 100 and hit your keyboard's Tab key to apply the change.   Click Save.   Add Company Name   In the top section, we'll add a Label Widget for our company's name.   At the top-left, click the Widgets tab.   Drag-and-drop a Label Widget onto the top section of the Canvas.   With the Label Widget selected, in the bottom-left Properties tab, change LabelText to LightCo and hit your keyboard's Tab key to apply it.   With the Label Widget still selected, in the bottom-left, click the Style Properties tab.   Under Style Properties, expand Base > Label.   Change font-size to 48px.   Click Save.     Step 3: Create Subpage One   Now that we have a basic LightCo homepage in-place, we need subpages to separately control the park-lighting vs the amphitheater-lighting.    But, yet again, we're not designing the actual pages yet. We're just creating them so we can reference them in a Menu.    An easy way to create additional Mashups that have similar layouts is with the Duplicate action. We'll do so now.    Return to Browse > Mashups.   To the left of MNWM_Homepage_Mashup, click the checkbox.   At the top, click Duplicate.   In the Name field, type MNWM_ParkLighting_Mashup. If Project is not already set, search for and select PTCDefaultProject.   At the top, click Save. At the top, click Design.   Change Label Title   Since we used Duplicate to clone the homepage, we see the same header/page Layout which we previously designed. That Layout can be useful for separating page-titles from functionality, so let's keep it.   But we also see the LightCo LabelText we previously created. Since this is the Park Lighting Control page, we need to change it.   In the top section of the Canvas, click the Label Widget to select it.   In the bottom-left, return to the Properties tab.   In the LabelText field, replace the current text with Park Lighting Control, and hit your keyboard's Tab key to apply the change.   At the top, click Save.     Step 4: Create Subpage Two   In the same way that we used Duplicate to mirror the homepage into a park-lighting page, we'll now do the same for the amphitheater-lighting page.    Return to Browse > Mashups. To the left of MNWM_Homepage_Mashup, click the checkbox. At the top, click Duplicate. In the Name field, type MNWM_AmphitheaterLighting_Mashup. If Project is not already set, search for and select PTCDefaultProject.   At the top, click Save. At the top, click Design.   Change LabelText   Just as we did with the Park Lighting Control LabelText, we now want to change this duplicate to read Amphitheater Lighting Control.   In the top section of the Canvas, click the Label Widget to select it. In the bottom-left, return to the Properties tab (if you're not already there). In the LabelText field, replace the current text with Amphitheater Lighting Control, and hit your keyboard's Tab key to apply the change.   Click Save.     Step 5: Create Menu   Having created all three of our starting Mashups, we'll now create a Menu Entity which provides links to each of them.   We'll be able to use this Menu Entity later to configure a Menu Widget for navigation.    Navigate to Browse > Visualization > Menus.   Click +New.    In the Name field, type MNWM_Menu. If Project is not already set, search for and select PTCDefaultProject.    At the top, click Save.   Menu Definitions   Now that we have created the Menu Entity, we can add Menu Definitions with links to all the previously-created pages.   At the top, click Menu Definition. Click +Add.   On the right-side slide-out, in the Title field, type Home. In the Link field, search for and select MNWM_Homepage_Mashup.   In the top-right, click the "check with a plus" button for Done and Add.   In the Title field, type Park. In the Link field, search for and select MNWM_ParkLighting_Mashup.   In the top-right, click the "check with a plus" button for Done and Add. In the Title field, type Amphitheater. In the Link field, search for and select MNWM_AmphitheaterLighting_Mashup.   At the top-right, click the "check" button for Done. At the top, click Save.     Click here to view Part 2 of this guide.

  Step 8: Troubleshooting   Issue                                       Resolution CSS does not seem to be applied to the Mashup. Verify your CSS is included in the runtime TWX CSS. Clear Browser cache if your CSS is not merged to the combined TWX CSS. (under debug mode: Hold refresh button->Clear Cache). TWX fails to import the extension. If the extension is already installed, but you made recent changes, you need to bump the Version number in the metadata.xml. Recent CSS changes are ignored. Clear browser cache if your CSS file has changed recently.     Step 9: Next Steps   Congratulations! You've successfully completed the Add Style to Your UI with CSS guide, and learned how to:   Create custom CSS classes using the integrated CSS editor Bind CSS classes to a Mashup and to individual Widgets Use Media queries to dynamically apply styling   Learn More   We recommend the following resources to continue your learning experience:    Capability     Guide Build Application Development Tips & Tricks Experience ThingWorx Application Development Reference   Additional Resources   If you have questions, issues, or need additional information, refer to:  Resource       Link Community Developer Community Forum Support Help Center

Applicable Releases: ThingWorx Platform 7.0 to 8.4   Description:   Concepts and basic Mashup design using an use case as example Following topics are covered: Recap Scenario Requirements and review concept design Introduction to Mashup Builder Design Mashup to visualize data     Related Success Service The session was recorded using the old ThingWorx Composer, but the concepts are still applicable

    Step 5: Collection Widget   A Collection widget is used to display information from a collection of Things. Similar to a Grid Widget, the Collection widget gives you complete control over how data is displayed by binding data to an embedded static Mashup.   In the first part of this step we will create a static Mashup with Parameters bound to its widgets. Next, we will configure a Collection widget to use the static Mashup we create. In the next step we will customize the Collection styling.   Create Static Mashup   Click the Browse tab on the far left of Composer, in the Visualizations section, click Mashups . Click + New to create a Mashup. Select Static Mashup, then click OK.   Name your Mashup TractorListFormat If Project is not already set, click the + in the Project text box and select the PTCDefaultProject. Click Save. Click the Design tab If Project is not already set, click the + in the Project text box and select the PTCDefaultProject. In the Layout tab, under Container > Positioning, Click Static, then scroll to Container Size, and click Fixed Size NOTE: A Static Mashup maintains fixed widget sizes and spacing, as opposed to a Responsive Mashup that will dynamically change widget sizes and spacing to use the available window area. Click the Width property and set it to 200 and the Height property to 60   In the lower left panel, click the Style tab and click the X to remove the default Style. Click the + icon, then select DefaultImageBorderStyle to remove all styling. NOTE: The default Mashup styling is removed so it will not override the sidebar and parent Mashup styling. Scroll to the Width property and set it to 200 and the Height property to 60 Click the Widgets tab and type label in the filter text box. Drag and drop two Label Widgets onto the upper left of your static Mashup.   Add Parameters to Mashup Select the Explorer tab then select the top level Mashup Click Configure Mashup Parameters from the drop-down menu in the upper left of the Mashup canvas.   Click the Add Parameter button. Type firstLine in the Name field and select a Base Type of STRING. Click Add Parameter again and name this parameter secondLine also with a Base Type STRING.   Click Done to return to Mashup Builder.   Bind Parameters to Widgets   Click the drop-down in the upper left of the Mashup canvas, then select Configure Bindings Click firstLine from the Properties list on the left. Clicking the drop-down arrow and click Add Source to display the Mashup entities that can be bound to the Mashup parameter named firstLine.   Select the checkbox next to the top LabelText property.   Click Done to return to the Configure Bindings pop-up. Click secondLine, then Binding Targets, and select the checkbox next to the bottom Label Text property, then click Done Click Done to close Configure Bindings pop-up and return to Mashup builder. NOTE: The Mashup parameters and bindings are displayed in the Connections panel at the bottom. Click Save before continuing to the next step.   Bind Data to Collection   Return to the main Mashup then drag and drop a Collection widget onto the top area of the left side bar. In the Collection Properties panel, set the View property to Table Scroll to the Mashup property, click the wand icon and browse to the name of the static Mashup created above. Drag the All Data source from the data panel on the right onto the Collection widget, then click Data in the Select Binding Target pop-up.   Set UIDField property and SortField to SerialNumber.   Drag the All Data source from the data panel on the right onto the Collection widget, then click Data in the Select Binding Target pop-up.   In the Collection Properties panel, scroll to MashupPropertyBinding and click *Add Enter the text below, then click Done: { "SerialNumber": "firstLine", "ModelNumber": "secondLine" } NOTE: This JSON property binds the SerialNumber and ModelNumber properties in the data source to the the firstLine and secondLine parameters in the embedded mashup   9. Save the Mashup and click View Mashup.   10. Test the Mashup and you will see the navigation panel on the left is showing data and is linked to the Google Map widget in the center.       Step 6: Customize Collection   The Collection uses default styling and no images. In this part of the exercise, we will replace the blue bar that indicates the selected row with a custom icon and modify the default styles so that the left panel's background color is shown.   Right-click on each of the images below to download and save them for use in the next step.     We will upload these images to create new Media entities and apply them to the Repeater widget.   Select the Browse folder icon on the far left of Composer, in the Visualization section click Media Click the + New to create a new Media entity and enter a name for the un-selected tractor image. Click Change in the Image section, then browse to the saved image. Click Open, then Save. Repeat these steps to create a Media entity for a selected tractor Open the static TractorListFormat mashup that controls the Collection widget formating Click and drag an Image widget onto the mashup In the lower left panel, in the SourceURL property, click the wand icon to select the unselected tractor image. Change both the Width and Height properties to 50 pressing Tab after each entry to record them.   Click the Explorer tab in the top left, click the top-most Mashup entity, then click the Style Properties tab Cick the X in the Style property and select DefaultImageBorderStyle to remove all styling, then click Save Click the More drop-down at the top of Composer and click Duplicate   Enter TractorListSelectFormat for the name and click Save then click the Design tab Click on the tractor image, then, the lower left, click the wand icon in the SourceURL property and select the selected tractor image and Click Save   Open your original Mashup and click on the Collection widget in the Mashuo Builder canvas. Scroll to the SelectedMashupName Property and click the + to select TractorListSelecteFormat.   Click Save for the Mashup, then View Mashup to see your Mashup with customized icons.   The default black text on green is a little hard to read. The steps below will change the text colors to make the data more readable. Open the TractorListSelectFormat Mashup then click on the top Label widget to change the color of the text. Click the Style Properties tab and expand Base and Label In color property select yellow and select Bold in the font-weight property before clicking Save. Select the other Label widget and assign a light grey color for the color then save the embedded Mashup. Reload the runtime view of the Mashup to see the results.     Step 7: Detail Panel   The right sidebar has a simple Image of a tractor along with product-specific information shown in Gauges and Value Displays.   The right sidebar contains two tabs in a Tabs - Responsive widget. The tabs are used to selectively hide and display groups of functions and data. The orange button labeled "View Vehicle Specs" is a Navigation widget that opens a pop-up window with other detailed product information. The colored range indications on the right Gauge were created by configuring the gauges ValueFormatter property to use State Formatting.   Add Tab Widget   Open the original, main Mashup and enter tab in the Widget panel search field. Drag and drop a Tabs widget onto the Right Sidebar.   Scroll to the Tab1Name property and enter Tractor Details. NOTE: This guide only covers configuring one of the two tabs added to the Mashup. Using the skills you've practiced thus far, feel free to add additional information to the tabs on your Mashup. Uncheck the RoundedCorners property. Click the Layout tab and click the radio button under Container > Orientation > Vertical   Add ValueDisplay Widgets   Type value in the Widget search box then click and drag a Value Display Widget onto Tab 1. In the Property panel, scroll to the Label property and enter Serial Number In the Data panel, expand Selected Row(s) then drag the SerialNumber property onto the Value Display widget and click Data when the Select Binding Target pop-up is displayed.   Drag another Value Display Widget onto the tab widget below to the first one and enter Name for the Label property. Drag name from the Selected Row(s) onto the second Value Display and then click Data. NOTE: Be sure to select data sources under Selected Row(s) so that data displayed will correspond to the tractor selected from either the map or the left side menu. Save the Mashup then click View Mashup to see all three panels working together to show data.   Add Gauges   Enter gauge in the Widget search box then click and drag a Gauge Widget onto Tab 1. In the Properties panel, enter 3000 for the MaxValue property and RPM in the Legend property. In the Data panel, expand Selected Row(s) then drag CurrentRPM onto the Gauge widget and click Data when the Select Binding Target pop-up is displayed. Drag another Gauge widget onto the canvas next to the first one and enter MPH for the Legend property. Drag CurrentSpeed from the Selected Row(s) onto the second Gauge, then click Data.   Click here to view Part 3 of this guide.

    Step 6: Create Master   Now that we have created our Menu Entity, we can create a Master Mashup to hold a Menu Widget. We'll use the Menu Entity to configure the Menu Widget.     Navigate to Browse > Visualization > Masters.    Click +New.    Leave the defaults and click OK.    In the Name field, type MNWM_Master. If Project is not already set, search for and select PTCDefaultProject.    At the top, click Save.    At the top, click Design.     Add Header   Now that we've created the Master Entity, we need to add space for the Menu Widget.   At the top-left, click the Layout tab.    Click Add Top.   With the new top-section still selected, scroll down in the Layout tab, and select Container Size > Fixed Size.   In the new Height field, type 50, then hit your keyboard's Tab key to apply the change.    At the top, click Save.   Add Menu Widget Now that we have somewhere to put it, we can finally add the Menu Widget and then configure it.   In the top-left, click the Widgets tab.   Drag-and-drop a Menu Widget onto the top Canvas section.   Ensure the Menu Widget is still selected, as well as the Properties tab in the bottom-left.   In the Filter field, type menu.   For the Menu Property, search for and select MNWM_Menu.    At the top, click Save.     Step 7: Menu Navigation   We now have all the elements created to navigate using a Menu. The only thing left is to assign the Master to our Homepage and then view our work.     Return to MNWM_Homepage_Mashup.    In the top-left, click the Explorer tab.   Ensure that Mashup is selected. On the bottom-left Properties tab, in the Filter field, type master.   For the Master Property, search for and select MNWM_Master.    At the top, click Save. At the top, click View Mashup. You may need to enable "pop-ups" in your browser.   Click Park.   Click Amphitheater.   Note that you may wish to set MNWM_Master for the other pages of your application, just in case anyone were to navigate directly there via URL. But simply setting it on the homepage is enough for us to see that Menu navigation is functioning correctly.       Step 8: Next Steps   Congratulations! You've successfully completed the Mashup Navigation with Menus guide. In this guide, you learned how to:   Create a Mashup to be used as a "Home" page Create more Mashups as subpages Create a Menu Entity to track Mashups Create a Master Mashup as a Header Utilize a Menu Widget for navigation   Learn More    Capability     Resource Experience Track Issues with Pareto Chart   Additional Resources   If you have questions, issues, or need additional information, refer to:    Resource       Link Community Developer Community Forum Support Foundation Help Center - Menu Entity Support Foundation Help Center - Menu Widget    

  Discover how ThingWorx advance tree grids and grids can be implemented in a compelling Mashup design.   Guide Concept   This project will introduce how to create complex user interfaces that are built by using Mashup grids and JavaScript services.   Following the steps in this guide, you will build a web application with advanced data displays. We will teach you how to create a professional user interface that effectively conveys information to users.   You'll learn how to   Create dynamic tree grids to display hierarchy. Create dynamic grids to display growing data number of data points.   NOTE: This guide's content aligns with ThingWorx 9.3. The estimated time to complete this guide is 30 minutes       Step 1: What Are Dynamic Grids   In the Mashup Builder, we utilize Functions to create added capabilities in our Mashups. Whether we are navigating to another Mashup or triggering events based on some action. Functions are your best friends when creating more advanced Mashups.   Function  Description   Auto Refresh  Refreshes data automatically for widgets in a mashup.  Confirmation  Displays a confirmation dialog box.  Events Router  Routes multiple input sources to one output of the same type.  Expression  Evaluates JavaScript expressions.  Logout  Ends the current user session and redirects to a mashup or a Web page.  Navigation  Navigates from one mashup to another.  Status Message  Displays information, error, or warning messages in a mashup.  Validator  Validates data from input parameters by using JavaScript expressions.   In the next sections, we will cover some of these Functions and showcase how to add them to your Mashups.     Step 2: Create A Dynamic Grid   Let's start things off by creating a simple Expression Function. This Expression will show or hide a label based on whether a checkbox is checked or not. This simple expression can be expanded to your use case.   It is VERY important to note that in an Expression Function (and also found in Services and Validation Functions) the output of the Function will be the result variable. Let's create our Mashup, then go over what is involved in an Expression.   In the ThingWorx Composer, click the + New at the top of the screen.   Select Mashup in the dropdown.   Select the Responsive layout then hit OK.   Set the Name to  MyFunctionsMashup. For the Project, click the + button and select PTCDefaultProject.    Under Project, click the blue Set as project context option. This will stop us from having to set the Project on every Thing we create. It should now match the following.    Click Save. Click on the Design tab at the top. This Mashup will be where we create the Majority of our Functions and capabilities. Let's start adding to our Mashup.   Click the Layout tab. Scroll down and set the Orientation to Horizontal.   Click on the Widgets tab. Type in the Filter text box for Checkbox.   Drag and drop a Checkbox Widget to the Mashup Canvas. This Checkbox will dictate whether what we show for the coming Labels and Textbox. Type in the Filter text box for Button. This Button will dictate the event that triggers our Functions. Drag and drop a Button Widget to the Mashup Canvas.   Type in the Filter text box for Label. Drag and drop TWO (2) Label Widgets to the Mashup Canvas. We will only show one Label at a time and I'll show you how.   Type in the Filter text box for Text Field. Drag and drop a Text Field Widget to the Mashup Canvas.       We have the Widgets we need to show our Expression example. Let's start with connecting the Widgets to Functions.   Click the + button in the Functions section in the bottom right.    In the New Function popup, select Expression. Set the Name of the new Expression to isCheckboxChecked.   Click Next. In the new screen, click Add Parameter. Set the Name to this new parameter as checked. Set the Base Type as BOOLEAN.   Switch the Data Change Type to ALWAYS. Switch Output Base Type to BOOLEAN.   Add the following code to the Expression area.  if(checked) { result = true; } else { result = false; }   11. Click Done.   You've now created your first expression. This expression is an example of how easy it can be done. Let's add three three additional Expressions to have some fun.   Repeat steps 1-11 in the last section for TWO (2) new Expressions. Name these Expressions setFirstLabelVisbility and setSecondLabelVisbility. You should now have three total. Repeat steps 1-8 in the last section for ONE (1) new Expression. Name this Expression setTextFieldText. We should have a Parameter called checked. Click Add Parameter again to add a Parameter named input. This fourth Expression should match the following thus far:     Switch Output Base Type to STRING. Add the following code to the Expression area:  if(checked) {     if(input && input.indexOf("YES") >= 0) {     result = input + ", YES";     } else {         result = "YES";     } } else {     result = "NO";     } 6. Click Done.   This expression will see whether or not the Checkbox is checked, then output a string of YES or a simple NO. Let's setup our connections between Widgets and Expressions.   Ensure Expressions are visible and match the following.   Click on the Checkbox in the Mashup Canvas. Click the dropdown that appears.   Drag and drop the State Property to the checked Parameter of all FOUR (4) of the Expressions.   Your bindings should match the following after you're done with setting all four.   Expand the setFirstLabelVisibility Expression (if not already expanded).   Drag the Output to the first Label and select Visible.   Expand the setSecondLabelVisibility Expression (if not already expanded).   Drag the Output to the second Label and select Visible.   Our labels are configured. Now let's setup our Text Field Widget.    Expand the setTextFieldText Expression (if not already expanded). Drag the Output to the Text Field and select Text.   Select the Button Widget in the Mashup Canvas.  Click the dropdown for the Button Widget. Drag and drop the Clicked Event to all FOUR (4) of the Expressions.   Your Button Widget should look like the following:   Select the Text Field Widget in the Mashup Canvas Click the dropdown for the Text Field Widget. Drag and drop the Text Property to the input Parameter of the setTextFieldText Expression. Click Save. Click View Mashup. Play around and see all the work you've done.   You maybe notice that both Label Widgets show or hide at the same time. To split when they will show or hide, update the code for one of the Label visibility Expressions to the following:    if(checked) {     result = false; } else {     result = true;     }   Click here to view Part 2 of this guide.  

    Step 8: Learn More About Widgets   For more details on how to use and customize Widgets highlighted in this guide, refer to:    Widget            Link to How-To Layout Customizable and Responsive UI Gauge Display Property Values with a Gauge Style Define Your UI Style Navigation Customizable and Responsive UI Google Map Display Geolocation Data in Your UI     Step 9: Next Steps   Congratulations! You've successfully completed the Design an Effective UI guide, and learned best practices for building a complex Mashup that includes maps, menus, and detail sections all working together effectively for an enhanced user experience.   Learn More   We recommend the following resources to continue your learning experience:     Capability    Guide Experience Object-Oriented UI Design Tips   Additional Resources   If you have questions, issues, or need additional information, refer to:     Resource      Link Community Developer Community Forum Support Mashup Builder Support Help Center

  Step 5: Widget Properties   You can configure Properties to change the style of the map as well as specify a custom image to use for map markers. Other Properties allow two linear paths and polynomial regions to also be displayed on the map Widget with optional tooltip data.   Bindable   Name Type  Default Direction  Description Data Infotable None Input Source for the data that is displayed as discrete markers LocationField MenuName None Input Field that contains Location type data to plot markers MarkerField MenuName None Input Field that contains data of type Image used to plot markers ShowMarkerTooltip Boolean True Input Hovering over map markers will display a tooltip when set to true ToolTipField1 thru 4 MenuName None Input Optional field displayed in tooltip when the user hovers over a map marker ToolTipLabel1 thru 4 String None Input Optional label for tooltip data RouteData Infotable None Input Source for the data that is displayed as a connected route RouteLocationField MenuName None Input Field that contains Location type data to plot connected route line ShowRoute Boolean False Input Show route data on map when set to true PlannedRouteData Infotable None Input Source for the data that is displayed as a second connected route PlannedRouteLocationField MenuName None Input Field that contains Location type data to plot a second connected route line ShowPlannedRoute Boolean False Input Show planned route data on map when set to true RegionData Infotable None Input Source for the data that is displayed as a region RegionLocationData Infotable None Input Region location data source RegionLocationsField MenuName None Input Field which will provide location table information for region RegionLayerField MenuName None Input Field that contains Numeric data used for region layer number ShowRegions Boolean False Input Show region data on map when set to true ShowRegionTooltips Boolean True Input Hovering over region will display a tooltip when set to true RegionToolTipField1 thru 4 MenuName None Input Optional field displayed in tooltip when the user hovers over a region RegionToolTipLael1 thru 4 String None Input Optional label for region tooltip data RegionFillOpacity Number 1 Input Opacity of region fill color from 0 being transparent to 1 being opaque SelectedLocation Location None Input/Output The currently selected location CurrentZoom Number 8 Output The currently displayed zoom level ( 1 - 15 ) Zoom Number 8 Input Number used to set the zoom level ( 1 - 15 ) ShowMarkers Boolean True Input Shows map markers if set to true ShowPathMarkers Boolean True Input Shows map markers if set to true ShowTraffic Boolean False Input Shows traffic data color overlay on map if set to true NEBoundary Location None Output The northeast boundary location NWBoundary Location None Output The northwest boundary location SEBoundary Location None Output The southeast boundary location NWBoundary Location None Output The southwest boundary location Visible Boolean True Input Widget is visible if set to true     Static   Name Type  Default Description DisplayName String None Name used for widget in user facing interactions Description String None Description used for widget in user facing interactions MapType Roads/Satellite/Hybrid/Terrain Roads The type of map content displayed MapSkin Normal/Blue/Grey Normal Options for styling maps monochromatically AutoZoomBehavior Data change/Initial Data only Data Change Controls when map will automatically zoom to show all markers ClusterLocations Boolean False Combines multiple location markers that are near one another into a single marker if true MultiSelect Boolean False Enable multiple marker selection   Widget Events   DoubleClicked- Triggered when user double clicks on the Google Map. Changed- Triggered when the data for this widget is modified. BoundsChanged- Triggered when the bounding box of the displayed map changes.     Step 6: Next Steps   If you have questions, issues, or need additional information, refer to:   Resource     Link Community Developer Community Forum Support Google Map Widget Help Center Free Google Maps Widget Extension IQNOX  

    Step 3: Create A Tree Grid   With our MyFunctionsMashup Mashup open, let's add a Validation. A Validation is similar to an Expression, except you have the added capability of triggering Events based on a True or False outcome of your validation. We will use the Validation to check and confirm the Text Field we created only has the values we added in our Functions. Let's also add two Status Message Functions that will show whether or not a user has added any text outside of what we want.   Open the MyFunctionsMashup Mashup to the Design tab. Click the green + button in the Functions area.    In the New Function modal, select Validator.     Set the Name to isDataClean.     Click Next.  Click Add Parameter. Set the Name to text and ensure the Base Type is STRING.     Add the following code to the Expression are: if(text === "NO") { result = true; } else if(text === "YES") { result = true; } else { let array = text.split("YES").join(""); array = array.split(",").join(""); let count = array.trim().length; if(count) { result = false; } else { result = true; } }   9. Click Done.   We have our Validator in place, now we need our two Status Message Functions. Why two? You can setup one Status Message to perform the task, but for this case, we're keeping things simple.   Click the + button in the Functions area. Select Status Message in the dropdown.    Set the Name to GoodInputProvided.   Click Next. Ensure Message Type is Info. In the Message field, enter Text is all good!.   Click Done. Let's create another Status Message Function. Set the Name to BadnputProvided.   Click Next. Change Message Type to Error. In the Message field, enter Text is BAD!.   Click Done.   We now have two Status Message Functions and a Validator to help with checking our text data. Let's connect everything together. This time, let's use the Bind button.   Expand the Validator section in the Functions tab. Click the Bind (arrows) button on the isDataClean Validator. This window will help us configure connections a bit easier.    Click the down arrow by the True Event. Click Add Trigger Service.   Click Functions. Check the checkbox by GoodInputProvided.   Click Next. Click the down arrow by the False Event. Click Add Trigger Service.   Click Functions. Check the checkbox by BadInputProvided.   Click Next. You should currently have the following setup:    Let's add in our connections to the Text Field and when we'll run this Validation.    Click the down arrow by the text Property.   Click Add Source. With the Widgets tab selected, scroll down and select the Text Property of our Text Field.   Click Next. Click the down arrow by Evaluate Service. Select Add Event Trigger.   With the Widgets tab selected, scroll down and select the Clicked Property of our Button.   Click Next. You should currently have the following setup:   Click Done. Click Save and view your updated Mashup.   Your Validator is complete. You now have a way to tell when a user has inputed their own text into the text box. To try things out, add some crazy characters, hit the button, and see what happens. You might notice that you have your Expressions running at the same time as your Validator. Switch up the bindings to get it to run the way you want it to.     Step 4: Next Steps   Congratulations! You've successfully completed the Explore UI Functions guide, and learned best practices for building a complex Mashup that navigations, multiple data inputs, confirmations, and all working together effectively for an enhanced user experience.   Learn More   We recommend the following resources to continue your learning experience:    Capability     Guide Experience Object-Oriented UI Design Tips   Additional Resources   If you have questions, issues, or need additional information, refer to:    Resource       Link Community Developer Community Forum Support Mashup Builder Support Help Center

  Display project burn up/down via a convenient Mashup Widget.   GUIDE CONCEPT   Long term projects need to be managed. As a project is scoped, requirements get defined and delivery-timeframes are estimated. As work is done, requirements are completed.   One way to track this project progress is with a Waterfall Chart.   This guide will show you how to utilize a Waterfall Chart Widget to easily display the project workflow.        YOU'LL LEARN HOW TO   Create a Data Shape Create a Thing Create an Info Table Property Populate an Info Table with appropriate data for a Waterfall Chart Create a Mashup Utilize a Waterfall Chart to display project progress   NOTE: This guide's content aligns with ThingWorx 9.3. The estimated time to complete this guide is 30 minutes     Step 1: Create Data Shape   In this scenario, we'll store the Waterfall Chart's data in a Property type called an Info Table.   An Info Table is a spreadsheet-like Property, but in order to define the columns of the table, we first have to define a Data Shape. We'll do that in this step.   In the left-side navigation, click Browse > Modeling > Data Shapes.   At the top, click + New.   In the Name field, type TPWC_DataShape. If Project is not already set, search for and select PTCDefaultProject .   At the top, click Field Definitions.   At the top-left, click + Add.   On the right-side slide-out, in the Name field, type month. Note that you want to leave "Base Type" as the default of "STRING". Check Is Primary Key.   Click the "check with a plus" button for Done and Add.   In the Name field, type amount. Change Base Type, to NUMBER.   Click the "check" button for Done.   At the top, click Save .     Step 2: Create Thing   Now that we have our Data Shape, we can create a Thing to document the project progress over time.   As already mentioned, we'll use an Info Table Property, formatted by the previously-created Data Shape, to do so.   Click Browse > Modeling > Things.   Click + New.   In the Name field, type TPWC_Thing. If Project is not already set, search for and select PTCDefaultProject. In the Base Thing Template field, search for and select GenericThing. At the top, click Save.   Add Info Table Property Now that we have our Thing instantiated, we want to add an Info Table Property. At the top, click Properties and Alerts.   Click + Add.   On the right-side slide-out, in the Name field, type InfoTable_Property. Change Base Type to INFOTABLE. In the Data Shape field, search for and select TPWC_DataShape. Note that the Data Shape field will not appear until you set Base Type to INFOTABLE. Check Persistent.   At the top-right, click the "check" button for Done. At the top, click Save.   Set Value of Property Now that we have a place in which to store spreadsheet-like values, we'll do so manually for testing.  On the InfoTable_Property row, under the Value column, click the "pencil" icon for Set value of property.   On the pop-up, click + Add.   Enter the following values in each field as per the table below: Field Name Value month January amount 380   Click Add.   Repeat Steps 2-4 multiples times until all of the below values have been entered. Note that amount should be left blank for both Mid-Term and Total. Note that you may enter fewer than all the values listed below if so desired, though your final Waterfall Chart will not match the following screenshots. month amount February 85 March 50 April 1000 May -300 June 0 Mid-Term   July 30 August -655 September -100 October -250 November 350 December -100 Total     On the pop-up, click Save.   At the top, click Save.   Step 3: Create Mashup   Now that we have our data in-place for testing (and could be connected to automated systems after we finish testing), we need to visualize the data.   As mentioned, we'll use a Waterfall Chart Widget, but first, we need to create a Mashup into which we can place the Widget.   Click Browse > Visualization > Mashups.   Click + New.   Leave the defaults and click OK.   In the Name field, type TPWC_Mashup. If Project is not already set, search for and select PTCDefaultProject. At the top, click Save.   At the top, click Design.   At the top-left, click the Widgets tab.   Drag-and-drop a Waterfall Chart Widget onto the central Canvas.   At the top, click Save.     Click here to view Part 2 of this guide.

    Watch a video tutorial on utilizing the Mashup Builder to create a User Interface (UI) for your IoT application.   Guide Concept   This project will introduce the ThingWorx Mashup Builder through the use of an instructional video. Following the steps in this video-guide, you will learn how to use this tool to create a Graphical User Interface (GUI) for your IoT Application. We will teach you how to rapidly create and update a Mashup, which is a custom visualization built to display data from devices according to your application's business and technical requirements.     You'll learn how to   Create new Mashups Choose a Static or Responsive layout Add Widgets to your Mashup Bind data Services to Widgets in your Mashup Create a functional GUI with applied usage of Widgets and Services   NOTE: The estimated time to complete this guide is 30 minutes       Step 1: Video   Click the link below to enjoy the video. You may set the video to full screen by clicking the button in the bottom-right.   If you're following along within your own ThingWorx environment, you may wish to pre-download and extract the attached MBQS_Entities.zip file. It will be used in the later half of the video as a backend data simulator.   Create Your Application UI - Video Guide     Step 2: Next Steps   Congratulations! You've successfully completed the Video Guide - Create Your Application UI, and learned how to:   Create new Mashups Choose a Static or Responsive layout Add Widgets to your Mashup Bind data Services to Widgets in your Mashup Create a functional GUI with applied usage of Widgets and Services   Learn More   We recommend the following resources to continue your learning experience:   Capability Guide Build Data Model Introduction Experience Object-Oriented UI Design Tips   Additional Resources   If you have questions, issues, or need additional information, refer to:   Resource Link Community Developer Community Forum Support Mashup Builder Support Help Center

  Step 4: Add Data   We've added a Waterfall Chart Widget to the Mashup, but we still need to bring in backend data.   Ensure the top-right Data tab is active.   Click the green + button.   In the Entity field, search for and select TPWC_Thing. In the Services field, type getprop. Click the right arrow beside GetProperties. On the right, check Execute on Load.   In the bottom-right of the pop-up, click Done.   Under the Data tab on the right, expand GetProperties.   Drag-and-drop Things_TPWC_Thing > GetProperties > InfoTable_Property onto the Waterfall Chart.   On the Select Binding Target pop-up, click Data.     Widget Properties   With the Waterfall Chart bound to data, we now just need to configure a few of the chart's Properties. With the Waterfall Chart selected in the central Canvas area, ensure the Properties tab is active in the bottom-left.   In the Filter field, type xaxis.   In the XAxisField, search for and select month.   In the Filter field, clear the xaxis search and then start a new filter with usetrend.   Check the UseTrendColors box.   At the top, click Save.     Step 5: View Mashup   Up to this point, we've created a Data Shape to format the columns of an Info Table Property. You then created a Thing, as well as an Info Table Property formatted by the Data Shape. As a test, you added some manually-entered data to the Info Table. After creating a Mashup, you added a Waterfall Chart Widget and tied it to that backend data.   The only thing left to do is to visualize your GUI.    Ensure that you're on the Design tab of the TPWC_Mashup.   At the top, click View Mashup. The end result is a visualization of burn up/down as the project is first defined and then implemented.     Step 6: Next Steps   Congratulations! You've successfully completed the Track Progress with Waterfall Chart guide, and learned how to: Create a Data Shape Create a Thing Create an Info Table Property Populate an Info Table with appropriate data for a Waterfall Chart Create a Mashup Utilize a Waterfall Chart to display project progress  Learn More   We recommend the following resources to continue your learning experience: Capability Guide Manage How to Display Data in Charts Additional Resources   If you have questions, issues, or need additional information, refer to: Resource Link Community Developer Community Forum Support Waterfall Chart Help