PTC



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:Create a new thing that uses the Database template and name it AdventureWorks2008Create a new thing that uses the Database template and name it AdventureWorks2008 and press SaveGo to the configuration tab on the AdventureWorks2008 Thing and configure the JDBC settingsPlease reference the post for more details about configuring this tabPress 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.Go to the service tab and now we are going to create 3 servicesCreate a service called RetrieveDepartmentsScript: SELECT * FROM HumanResources.DepartmentBaseType: INFOTABLEScript Type: SQL (Query)Now Save the service and then re-edit the service and press the Test buttonPress the Create DataShape from Result button and the new datashape thing will be created, name it dsDepartmentsNow press the Save button and close the dsDepartments. Press done on the RetrieveDepartments service.Create a service called CreateDepartmentsSelect 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 inputsName: NameDescription: Department NameBase Type: STRINGRequired: trueHas Default value: falseName: Group NameDescription: Department Group NameBase Type: STRINGRequired: trueHas Default value: falseFillFill in the following information for the scriptScript: INSERT INTO HumanResources.Department(Name,GroupName)SELECT [[Name]],[[GroupName]]BaseType: INFOTABLEScript Type: SQL (Command)Now save the serviceCreate a Service called EditDepartmentsSelect 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 inputName: IdDescription: Department IdBase Type: NUMBERRequired: trueHas Default value: falseFill in the following information for the scriptScript: Update HumanResources.DepartmentSET Name = [[Name]],GroupName = [[GroupName]]WHERE DepartmentId = [[Id]]BaseType: INFOTABLEScript Type: SQL (Command)Now save the serviceCreate a new Employee ThingSet the Thing Template to Generic and set the name to Employees and press SaveCreate a service on the Employees Thing called RetrieveDepartmentsScript: var scriptName = "RetrieveDepartments";var resultMessage = undefined;try {// result: INFOTABLE dataShape: dsDepartmentsvar dtDepartments = Things["AdventureWorks2008"].RetrieveDepartments(); }catch (err) { resultMessage = err; logger.error("error while loading " + scriptName + " on " + me.name + ": " + resultMessage);}result = dtDepartments;BaseType: INFOTABLEScript Type: Local (Javascript)DataShape: dsDepartmentsNow save the service and test it to verify you return data.Create a service on the Employees Thing called CreateDepartmentsScript: var scriptName = "CreateDepartments";var resultMessage = undefined;try {var params = {GroupName: GroupName,Name: Name};// result: NUMBERvar result = Things["AdventureWorks2008"].CreateDepartments(params);resultMessage = "success" }catch (err) { resultMessage = err; logger.error("error while loading " + scriptName + " on " + me.name + ": " + resultMessage);}result = resultMessage;BaseType: STRINGScript Type: Local (Javascript)Inputs:GroupName (STRING)Name (STRING)Now save the service.Create a service on the Employees Thing called EditDepartmentsScript: var scriptName = "EditDepartments";var resultMessage = undefined;try {var params = {GroupName: GroupName,Id:Id,Name: Name};// result: NUMBERvar result = Things["AdventureWorks2008"].EditDepartments(params);resultMessage = "success" }catch (err) { resultMessage = err; logger.error("error while loading " + scriptName + " on " + me.name + ": " + resultMessage);}result = resultMessage;BaseType: STRINGScript Type: Local (Javascript)Inputs:GroupName (STRING)Name (STRING)Id (INTEGER)Now save the service.Create a Mashup called DepartmentMaintenance and add a grid and two navigation links to the mashup.Label the navigation buttons Create and EditAdd 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).Link the RetrieveDepartments service to the grid and display DepartmentId, Name, GroupIdCreate a New static mashup that is popup sized called CreateEditDepartmentPopupAdd 2 textboxes and 2 buttons (stacked) on to the CreateEditDepartmentPopupLabel the text boxes DepartmentName: and GroupName: and label the buttons Edit and CreateCreate 5 Mashup Parameters for CreateEditDepartmentPopupGroupName (STRING)DepartmentName (STRING)CreateActive (BOOLEAN)DepartmentId (INTEGER)EditActive (STRING)Link the GroupName Mashup Parameter to the GroupName textboxLink the DepartmentName Mashup Parameter to the DepartmentName textboxLink the CreateActive Mashup Parameter to the Visible parameter on the Create buttonLink the EditActive Mashup Parameter to the Visible parameter on the Edit buttonAdd in two Services from the Departments ThingsEditDepartmentsCreateDepartmentsLink the Textbox Text for GroupName to the GroupName Parameter for EditDepartmentsLink the Textbox Text for GroupName to the GroupName Parameter for CreateDepartmentsLink the Textbox Text for DepartmentName to the Name Parameter for EditDepartmentLink the Textbox Text for DepartmentName to the Name Parameter for CreateDepartmentsLink the Mashup Parameter DepartmentId to Id Parameter for EditDepartmentsLink the Clicked Event from the Create Button to CreateDepartments ServiceLink the Clicked Event from the Edit Button to EditDepartments ServiceLink the CreateDepartments Service’s ServiceInvokeCompleted Action to the CloseIfPopup Mashup ParameterLink the EditDepartments Service’s ServiceInvokeCompleted Action to the CloseIfPopup Mashup ParameterGo back to the DepartmentMaintenance MashupSelect the Create Navigation LinkSet MashupName to CreateEditDepartmentPopupSet TargetWindow to ModalPopupSet ShowClosedButton to CheckedSet PopupScaling to OffSet Alignment to CenterAlignedAfter setting the MashupName you will see that the Mashup Parameters you created above are now available to configure for the Create Navigation LinkSet CreateActive to CheckedLink the PopupClosed for the Create Navigation Link to RetrieveDepartments so that it refreshes the grid after the popup closesSelect the Edit Navigation LinkSet MashupName to CreateEditDepartmentPopupSet TargetWindow to ModalPopupSet ShowClosedButton to CheckedSet PopupScaling to OffSet Alignment to CenterAlignedAfter setting the MashupName you will see that the Mashup Parameters you created above are now available to configure for the Edit Navigation LinkSet EditActive to CheckedLink GroupName to the RetrieveDepartments Selected Row(s) field GroupNameLink DepartementName to the RetrieveDepartments Selected Row(s) field NameLink DepartmentId to the RetrieveDepartments Selected Row(s) field DepartmentIdLink the PopupClosed for the Edit Navigation Link to RetrieveDepartments so that it refreshes the grid after the popup closesNow view the DepartmentMaintenance Mashup in runtimePress the Create button and a popp with empty fields should be displayedSet Department Name and GroupName and press CreateDepartment Name: TestDepartmentGroup Name: TestingThe popup should close and the grid should be refreshed4381505057775Note 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 pressedSelect the record you just created from the grid, for the screenshot above, that is the row that is circledNote that, if required, you could create a service that will disable the button unless a row has been selected from the gridTo 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 displayedChange the Department Name and GroupName and press EditDepartment Name: TestDepartmentNewGroup Name: TestingNewThe popup should close and the grid should be refreshed4286254486275Note 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 pressedHopefully, 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. ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download