How To: Display related SmartObject values in a view

You can use a rule on a view to load related values in the same SmartObject based on the value of a selected field. For example, suppose you have a SmartObject that stores Employee Name, Surname and Department. You can create a view that automatically displays the surname and department values of the selected employee, based on the value selected for Name.

Selecting a name loads the other controls with related associated data from the SmartObject.

Try it yourself!

Scenario

For your Human Resources application you need to select an employee's name, surname, and department. This information is already in a SmartObject. Using an item view with drop down list controls you configure a rule to load the surname and department values for the name selected in the Name drop down list.

Steps

First, create a SmartObject to store your employee name, surname, and department information. Generate an editable list view of the SmartObject and use the view to add data to the SmartObject. Create an item view of the SmartObject and change the text box controls to drop down lists. Add a rule to load the associated surname and department data when a name is selected.

Setup Steps

The following steps set up the scenario from start to finish. If you want to skip the setup steps and view the topic step, go to Design a view that loads associated data when a name is selected.

1. In K2 Designer create a SmartBox SmartObject named Employees with Name, Surname, and Department properties. If you are not familiar with creating a SmartBox SmartObject, see How To: Create A SmartBox SmartObject.
   1. In K2 Designer click the create SmartObject option.
      
   2. Specify Employees as the SmartObject name.
   3. Specify a Description and select a Category. In this scenario the category is Denallix.
   4. Leave the default Type as SmartObject and click Create.
      
   5. Add Name, Surname, and Department properties, using the following image as a guide:
      
   6. Click Finish.
2. Generate an editable list view of the Employees SmartObject. If you are not familiar with creating views, see How To: Create an Item View and a List View.
   1. On the Employees SmartObject page click Generate View.
      
   2. Select the Editable List check box, and specify Employees Editable List as the name.
   3. Click OK.
3. Add information to the Employees SmartObject using the Employees Editable List.
   1. On the Employees Editable List page click Run.
      
   2. Click Add and specify an ID, Name, Surname, and Department. Use the following image as a guide to adding sample data:
   3. Click Save.

Design a view that loads associated data when a name is selected.

Create a view with drop downs configured with a rule to load data associated with the selected name.

4. Create an item view named Employees - View.
   1. On the Employees SmartObject page click Design a new View.
      
   2. Specify Employees - View as the Name.
   3. Specify a Description, and select a Category. In this scenario the category is Denallix.
      
   4. Click Create.
   5. Click Create Labels and Controls.
      
   6. Select to include Name, Surname, and Department field names.
      
   7. Click OK.
5. Change the text box controls to drop down controls.
   1. Select the Name text box control.
   2. Click the Change Control icon.
      
   3. Select Drop-Down List.
      
   4. Click OK.
   5. Repeat the steps above to change the Surname and Department text box controls to drop down list controls.
      
6. Configure the Data Sources of each drop down list.
   1. Select the Name drop down list control.
   2. Click the ellipses (...) of the Data Source Type property.
      
   3. Navigate to and select your Employees SmartObject for the SmartObject data source.
      
   4. Click OK.
   5. Confirm that the SmartObject data source is configured to the Get List method with the ID value, and that the Name field is selected for the Display value.
      
   6. Click OK.
   7. Select the Surname drop down list control.
   8. Click the ellipses (...) of the Data Source Type property.
   9. Navigate to and select your Employees SmartObject for the SmartObject data source.
   10. Click OK.
   11. Click the ellipses (...) of the Display drop down.
   12. In the Configure Item Display page delete Name, then drag and drop the Surname property from the Employees SmartObject.
       
   13. Click OK.
   14. Select the Department drop down list control.
   15. Click the ellipses (...) of the Data Source Type property.
   16. Navigate to and select your Employees SmartObject for the SmartObject data source.
   17. Click OK.
   18. Click the ellipses (...) of the Display drop down.
   19. In the Configure Item Display page delete Name, then drag and drop the Department property from the Employees SmartObject.
       
7. Add a rule to populate the data of the Surname and Department drop down lists using the selected Name. This loads the surname and department values of the selected employee name.
   1. Click on an empty area of the view to deselect all controls.
   2. Select the Rules tab.
   3. Click Add Rule.
      
   4. On the rule Events tab navigate to Control Events and click When a control on the View raises an event.
      
   5. Click select control and select Name Drop-Down List.
      
   6. Click select event and select Changed.
      
   7. Select the rule Actions tab and navigate to Data Transfer.
   8. Click Transfer data.
      
   9. Click configure.
      
   10. In the Context Browser, expand to Controls > Name Drop-Down List > Employees SmartObject.
   11. Drag and drop the ID property of the SmartObject to the Surname Drop-Down List and to the Department Drop-Down List controls. This creates the mapping to load the data associated with the selected name, using ID as the common property.
       
   12. Click OK.
   13. Click Finish.
8. Run the view and select a name to test the loading of data associated with the selected name.
   1. On the Employees - View page click Run.
      
   2. Select a name from the Name drop down list. The related Surname and Department values of the name that you select displays in those drop down lists. Select a different Name and the values for Surname and Department should change to the related values for the selected name.
      

Review

First you created a SmartObject to store your employee name, surname, and department information. You generated an editable list view of the SmartObject and used the view to add data. You then created an item view of the SmartObject and changed the text box controls to drop down lists. You added a rule to load the associated surname and department data when a name is selected. Finally, you tested the view.