When I started to learn ThingWorx and deep dived into mashup development, I wondered how to create popups from base mashups and exchange information between the main mashup and its corresponding popup.  I scoured the ThingWorx site and couldn’t easily determine how to do this, so I figured others would find a post about this topic helpful.

We are going review the creation and usage of popups by stepping through the creation of a common use case scenario which is creating and editing grid records.  Keep in mind though that this can be extended to be used for things such as prompting users to act before completing a task and providing warning messages that critical actions are not reversible and other interactive popups.

For this example, we are going to use the sql  server AdventureWorks database to add and edit records within the HumanResources.Deparment table please refer to Microsoft site for instructions on how to download and install this database.

So let’s get started:

 

1. Create a new thing that uses the Database template and name it AdventureWorks2008

Image1.png

2. Create a new thing that uses the Database template and name it AdventureWorks2008 and press Save

3. Go to the configuration tab on the AdventureWorks2008 Thing and configure the JDBC settings

a. Please reference the post https://community.thingworx.com/message/4170#4170 for more details about configuring this tab

image2.png

4. Press Save and go to the properties page and press the refresh arrow on the value column.  Is Connected’s value should be set to true.

image3.png

5. Go to the service tab and now we are going to create 3 services

6. Create a service called RetrieveDepartments

 

Script:  SELECT * FROM HumanResources.Department

BaseType: INFOTABLE

Script Type: SQL (Query)

image4.png

Now Save the service and then re-edit the service and press the Test button

image5.png

 

Press the Create DataShape from Result button and the new datashape thing will be created, name it dsDepartments

image6.png

Now press the Save button and close the dsDepartments.  Press done on the RetrieveDepartments service.

 

7. Create a service called CreateDepartments

Select the RetrieveDepartments service and press the Duplicate button and change the name from RetrieveDepartmentsDuplicate to CreateDepartments.

 

Change the Script Type to SQL (Command) from SQL (Query)

 

Go to the Inputs/Outputs tab and create 2 inputs

Name: Name

Description: Department Name

Base Type: STRING

Required: true

Has Default value: false

 

Name: Group Name

Description: Department Group Name

Base Type: STRING

Required: true

Has Default value: false

 

image7.png

Fill in the following information for the script

Script:  INSERT INTO HumanResources.Department(Name,GroupName)

SELECT [[Name]],[[GroupName]]

BaseType: INFOTABLE

Script Type: SQL (Command)

image8.png

Now save the service

 

8. Create a Service called EditDepartments

Select the CreateDepartments service and press the Duplicate button and change the name from CreateDepartmentsDuplicate to EditDepartments.

 

Go to the Inputs/Outputs tab and create and add a new input

Name: Id

Description: Department Id

Base Type: NUMBER

Required: true

Has Default value: false

image9.png

Fill in the following information for the script

Script:  Update HumanResources.Department

SET Name = [[Name]],GroupName = [[GroupName]]

WHERE DepartmentId = [[Id]]

BaseType: INFOTABLE

Script Type: SQL (Command)

image10.png

 

Now save the service

 

9. Create a new Employee Thing

Set the Thing Template to Generic and set the name to Employees and press Save

10. Create a service on the Employees Thing called RetrieveDepartments

Script: 

var scriptName = "RetrieveDepartments";

var resultMessage = undefined;

 

try

{

// result: INFOTABLE dataShape: dsDepartments

var dtDepartments = Things["AdventureWorks2008"].RetrieveDepartments();

}

 

catch (err)

{

    resultMessage = err;

    logger.error("error while loading " + scriptName + " on " + me.name + ": " + resultMessage);

}

 

result = dtDepartments;

 

 

BaseType: INFOTABLE

Script Type: Local (Javascript)

DataShape: dsDepartments

image11.png

Now save the service and test it to verify you return data.

 

 

11. Create a service on the Employees Thing called CreateDepartments

Script: 

var scriptName = "CreateDepartments";

var resultMessage = undefined;

 

try

{

var params = {

  GroupName: GroupName,

  Name: Name

};

 

// result: NUMBER

var result = Things["AdventureWorks2008"].CreateDepartments(params);

 

resultMessage = "success"

}

catch (err)

{

    resultMessage = err;

    logger.error("error while loading " + scriptName + " on " + me.name + ": " + resultMessage);

}

 

result = resultMessage;

 

 

BaseType: STRING

Script Type: Local (Javascript)

Inputs:

  GroupName (STRING)

  Name (STRING)

image12.png

Now save the service.

 

12. Create a service on the Employees Thing called EditDepartments

Script: 

var scriptName = "EditDepartments";

var resultMessage = undefined;

 

try

{

var params = {

  GroupName: GroupName,

  Id:Id,

  Name: Name

};

 

// result: NUMBER

var result = Things["AdventureWorks2008"].EditDepartments(params);

 

resultMessage = "success"

}

catch (err)

{

    resultMessage = err;

    logger.error("error while loading " + scriptName + " on " + me.name + ": " + resultMessage);

}

 

result = resultMessage;

 

BaseType: STRING

Script Type: Local (Javascript)

Inputs:

  GroupName (STRING)

  Name (STRING)

  Id (INTEGER)

image13.png

 

Now save the service.

 

 

13. Create a Mashup called DepartmentMaintenance and add a grid and two navigation links to the mashup.

image14.png

14. Label the navigation buttons Create and Edit

 

15. Add in the Data from the RetrieveDepartments services that we just created and check the Mashup Loaded? Box for the service (will load this data when the screen loads).

image15.png

 

 

16. Link the RetrieveDepartments service to the grid and display DepartmentId, Name, GroupId

image16.png

17. Create a New static mashup that is popup sized called CreateEditDepartmentPopup

 

18. Add 2 textboxes and 2 buttons (stacked) on to the CreateEditDepartmentPopup

image17.png

19. Label the text boxes DepartmentName: and GroupName: and label the buttons Edit and Create

 

20. Create 5 Mashup Parameters for CreateEditDepartmentPopup

a. GroupName (STRING)

b. DepartmentName (STRING)

c. CreateActive (BOOLEAN)

d. DepartmentId (INTEGER)

e. EditActive (STRING)

 

image18.png

21. Link the GroupName Mashup Parameter to the GroupName textbox

 

22. Link the DepartmentName Mashup Parameter to the DepartmentName textbox

 

23. Link the CreateActive Mashup Parameter to the Visible parameter on the Create button

 

24. Link the EditActive Mashup Parameter to the Visible parameter on the Edit button

 

25. Add in two Services from the Departments Things

a. EditDepartments

b. CreateDepartments

image19.png

26. Link the Textbox Text for GroupName to the GroupName Parameter for EditDepartments

 

27. Link the Textbox Text for GroupName to the GroupName Parameter for CreateDepartments

 

28. Link the Textbox Text for DepartmentName to the Name Parameter for EditDepartment

 

29. Link the Textbox Text for DepartmentName to the Name Parameter for CreateDepartments

 

30. Link the Mashup Parameter DepartmentId to Id Parameter for EditDepartments

 

31. Link the Clicked Event from the Create Button to CreateDepartments Service

 

32. Link the Clicked Event from the Edit Button to EditDepartments Service

 

33. Link the CreateDepartments Service’s ServiceInvokeCompleted Action to the CloseIfPopup Mashup Parameter

image20.png

 

34. Link the EditDepartments Service’s ServiceInvokeCompleted Action to the CloseIfPopup Mashup Parameter

image21.png

35. Go back to the DepartmentMaintenance Mashup

 

36. Select the Create Navigation Link

a. Set MashupName to CreateEditDepartmentPopup

b. Set TargetWindow to ModalPopup

c. Set ShowClosedButton to Checked

d. Set PopupScaling to Off

e. Set Alignment to CenterAligned

 

37. After setting the MashupName you will see that the Mashup Parameters you created above are now available to configure for the Create Navigation Link

a. Set CreateActive to Checked

image22.png

image23.png

38. Link the PopupClosed for the Create Navigation Link to RetrieveDepartments so that it refreshes the grid after the popup closes

 

39. Select the Edit Navigation Link

a. Set MashupName to CreateEditDepartmentPopup

b. Set TargetWindow to ModalPopup

c. Set ShowClosedButton to Checked

d. Set PopupScaling to Off

e. Set Alignment to CenterAligned

 

40. After setting the MashupName you will see that the Mashup Parameters you created above are now available to configure for the Edit Navigation Link

a. Set EditActive to Checked

b. Link GroupName to the RetrieveDepartments Selected  Row(s) field GroupName

c. Link DepartementName to the RetrieveDepartments Selected  Row(s) field Name

d. Link DepartmentId to the RetrieveDepartments Selected  Row(s) field DepartmentId

image24.png

image25.png

41. Link the PopupClosed for the Edit Navigation Link to RetrieveDepartments so that it refreshes the grid after the popup closes

 

42. Now view the DepartmentMaintenance Mashup in runtime

image26.png

43. Press the Create button and a popp with empty fields should be displayed

image27.png

44. Set Department Name and GroupName and press Create

a. Department Name: TestDepartment

b. Group Name: Testing

 

45. The popup should close and the grid should be refreshed

image28.JPG

46. Note that if required, you could add logic to disable the button if values are not filled in for DepartmentName & GroupName, or do validation when the create button on the popup is pressed

 

47. Select the record you just created from the grid, for the screenshot above, that is the row that is circled

a. Note that, if required, you could create a service that will disable the button unless a row has been selected from the grid

 

48. To test the edit function, with the row selected from the previous step, press the edit button and a popup with the selected Department Name and Group Name should be displayed

image29.png

49. Change the Department Name and GroupName and press Edit

a. Department Name: TestDepartmentNew

b. Group Name: TestingNew

 

50. The popup should close and the grid should be refreshed

image30.png

51. Note that, similar to the other functions, you could add logic to disable the Edit button if values are not filled in for DepartmentName & GroupName, or do validation when the Edit button on the popup is pressed

 

Hopefully, this exercise in creating popups from base mashups and exchanging information between the main mashup and its corresponding popup was easy to follow and gave you a few extra tools to enable the creation of useful applications.