cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Need to create HTML like form using thingworx.

Highlighted
Amethyst

Need to create HTML like form using thingworx.

Hi,

 

I have created the MENU which has 5 mashups in it.  In this one of the mashup is like HTML form as shown in snapshot below.

 first.JPG

 

On the press of "Next" button , it should load the "Review Details" mashup as below.

second.JPG

I am not able to load another mashup on "Next" button clicked event.

Please let me know if anyone know how to load mashup on button clicked event. Also how to get the data entered in the Form.

9 REPLIES 9

Re: Need to create HTML like form using thingworx.

Hello cgoma,

 

I believe the functionality you are looking for with respect to the Next button can be found via the Navigation Widget. This is similar in appearance to a Button Widget but has navigational functionality.

 

More information on this widget can be found here.

Re: Need to create HTML like form using thingworx.

@tmisner 

 

Thanks for your reply.

I am able to navigate to mashup using "Navigation" widget.

As you can see the snapshot which I had attached earlier had input text box for "Name" and "Age" field.

Actually I wanted to show "Name" and "Age" entered in first mashup into the mashup which is loaded after clicking navigation button.

Re: Need to create HTML like form using thingworx.

What you are asking for can be accomplished with the use of Mashup Parameters. Essentially on the second Mashup that will load after a user presses Next you create two Mashup Parameters, one for Name and one for Age. You then bind these to a Label Widget or however you want these to be displayed on the second screen. Back on the first Mashup where the user enters these values you can then bind the input text from the Text Field Widgets for Name and Age to the respective Mashup Parameters on the Navigation Widget. After choosing which Mashup the Navigation Widget links to you will see the Mashup Parameters you created as properties of the Navigation at which point you can bind the Text Fields.

 

I've gone ahead and created a quick example that I've attached here. You can proceed to import this into your system and confirm this matches the functionality you are discussing. The two Mashups are FirstScreenSample and SecondScreenSample. My Mashup Parameters are called entered_name and entered_age.

 

Let me know if you have any questions.

Re: Need to create HTML like form using thingworx.

@tmisner 

 

I was able to use mashup parameter for the creating the mashups.

But in my actual mashups I have DropDown widget a well. 

For dropdown widget I was unable to use mashup parameter.

Since dropdown widget doesnot have text field associated which I can bind to "Navigation" widget similar to "Text Area" widget.

Re: Need to create HTML like form using thingworx.

I would like to clarify what we are looking at here.

 

On the first screen someone enters some text and then on the second screen you are hoping to have that text selectable from a Dropbown Widget? Do I have that correct?

 

Dropdowns take the selectable fields directly from an Infotable so this explains why you are unable to bind the String data type based mashup parameter directly to the Data field.

Re: Need to create HTML like form using thingworx.

It is just opposite of what you said (i.e.I am having dropdown widget on first screen and user selects the one of item from the dropdown list. I wanted to show the item selected from dropdown to second screen. So for dropdown widget on first screen I did not find any text field which I can bind to navigation widget.)

Re: Need to create HTML like form using thingworx.

Thanks for clarifying this helps a lot.

 

The way you will want to bind this is with Selected Row(s) data binding for the parameter which is set as the ValueField for your DropDown Widget.

 

In the attached example I used QueryImplementingThings service on the GenericThing Thing Template. I used the name parameter specifically for binding. As can be seen I've bound All Data from this service to the DropDown Widget and set both DisplayField and ValueField to name. From here I bound the Selected Row(s) for the name parameter to the entered_name Mashup Parameter associated with the Navigation Widget. This is the same Mashup Parameter we used previously with the Text Box Widget.

 

Please import the example and have a look at how this can be accomplished.

Re: Need to create HTML like form using thingworx.

Hi @tmisner 

Thanks for your reply.

The changes you suggested for Dropdown widget worked for me.

But if suppose I wanted to store the data which entered in textbox and selected in dropdown widget. Then populate the second screen using that stored data (i.e. from first screen). I guess with mashup parameter these values does not get stored. 

Please let me know what approach should I follow for the same.

Re: Need to create HTML like form using thingworx.

Depending on how you would like these to be stored will determine our next steps here:

  • If these selections need to be persisted we can utilize User Extensions
  • If these selections do not need to be persisted we can utilize Session Variables

Of the two I believe User Extensions to be the best option since it is persisted and not tied to a specific browser session.

 

Essentially in either case you will want to bind the Selected Text of the dropbown to the applicable User Extension or Session Variable just as we did with the Mashup Parameter. The same goes for the text within the Text Box. You will want to bind the value of the Text Box to the Session Variable or the User Extension that represents the Text Box value. Session Variables are available on the right-hand side of the Mashup Builder under Session and User Extensions are available under User.

 

On the second screen you simply need to bind the Session Variable or User Extension to the applicable label as the display value.

 

For more information on the configurations of each see the following:

Announcements

Thingworx Navigate content has a new home! Click here to access the new Thingworx Navigate forum! ______________________________