Pattern 5: Master-detail on separate search and edit pages

Previous Next

This design pattern build on the result of Pattern 3: Master-Detail Form on a Single Page.

As in Pattern 3, a first page offers facilities for searching and selecting a master-detail combination. This time, no data can be manipulated (edited) here. A second page is dedicated to editing the selected data. The second page is completely single-record, making it an attractive page for displaying images and videos related to that single record.

Work in two stages:

•Build the basic structure.

•Finish the solution.

Building the basic structure

To spread a master-detail form across a Search-and-Select and an Edit page:

1.In the Web Designer catalog, identify the (default) info page corresponding with the master (= parent) table, for example, the Tours page.
2.Create a new subclass of this info page and name it, eg., "Tours-Schedtours Search-and-Select". Open this class.
3.In the Web Designer catalog, identify the (default) related page corresponding with the detail (= child) table, for example, the "Related Scheduled Tours for this Tour" page.
4.Create a new subclass of this related page and name it, eg., "Tours-Schedtours Edit". Open this class.
5.In the "Tours-Schedtours Search-and-Select" page class, perform all the steps described in Pattern 3: Master-Detail Form on a Single Page.
6.In the "Tours-Schedtours Search-and-Select" page class, replace the Action for the onclick event of the "Go >>" button by a callClientScript action with script:

$.udb.navigateToRelated( 'Tours-Schedtours Edit' )

 

7.In the "Tours-Schedtours Edit" page class, identify the child data source object in the object tree. The object node should be labeled something like "SCHEDTOUR(Related TOUR IS SCHEDULED AS SCHEDTOUR)". Open the Property Inspector for this node.
8.Set the Synchronization Datasource property for this object to:

../<child data source name in Tours-Schedtours Search-and-Select>

 

for example, if the detail (= child) data source in "Tours-Schedtours Search-and-Edit" is called "Related TOUR IS SCHEDULED AS SCHEDTOUR1", then the Synchronization Datasource value to be set in this step is:

../Related TOUR IS SCHEDULED AS SCHEDTOUR1

 

9.Save work and (re-)publish both page classes.

Test by selecting a Tour and a Scheduled Tour record in the first page, then making sure that after pressing "Go >>" you navigate to the second page and after you have landed there, the selected data in the parent and the child blocks are correctly selected.

 

Finishing the solution

To finish this solution:

1.On the first page, make sure all the controls are non-editable:

•You can make grid columns non-editable by setting the Read Only property of the Grid control to Yes.

•You can make single-record fields non-editable by setting the Task Mode property of the TextColumnControl objects (etc.) to Search (instead of Edit).

•Alternatively, you can set the Insertable, Updatable, Deletable properties to No at data source level.

•Remove buttons associated with editing (Save, Rollback, Check, New, Delete).

2.On the first page, remove the "Select a related page" dropdown list. Under the "Go >>" button, script a user-friendly error message for cases where the user has not selected a child record but still presses "Go >>".
3.On the second page, present all the data in single-record fields instead of grid columns. Please refer to Pattern 1: Search-and-Results on Single Page for more details on how to do this.

 

See Also

Page and Data Source Constructs