Screen Entity Example - Screen with Tabs

Using the screen template created earlier, we will create a item master inquiry screen with the item information as the main block, and pricing and cost as the subsidiary blocks on tabs.

You will need to have completed creation of the TAB_SELECT and TAB_UNSELECT styles in the Additional Styles Required for Examples section before beginning this section.

1. Select the Group Information object.  Expand it, and select the group to which you wish to add the new screen entity.

2. Right click on the group and select Create->Entity.
   

3. Click on the Screen bullet.
   

4. Click on the Next button at the bottom right of the screen.

5. In the Entity Name property, type ITEM_MASTER_INQUIRY as the entity name.

6. Leave the Datasource property set to (use default), since there is only one datasource for the Xephr® install.

7. In the Based On property, select SCREEN_TEMPLATE, which is the template that we created earlier.

8. Leave the Default Mode property set to QBE View.   

9. Leave the Body Style, Editable Field Style, Non-Editable Field Style, Lov Style and Link Style properties set to (from parent), as these styles will be taken from the SCREEN_TEMPLATE for this screen.
   

10. Click on the Next button at the bottom right of the screen.

11. In the Block Name property, enter ITEMS as the name of the block.

12. In the Block Type property, select Standard Block.

13. Set the Query Type property to Simple Query.

14. Leave the Datasource property set to (use parent).

15. In the Table property, select the name of the table or view from which the data will be obtained.  Since our datasource is set to use the Oracle 9i database for NDS Applications, we will select the view ITEM_MASTER_UVW.

16. Set the Create Heading checkbox to on to indicate that a heading should be created for each mode for this block.

17. In the Mode Selection section, set the QBE and List checkboxes to on.  We will be creating 3 different blocks for this screen, one for each mode.  
    
    The first block is the Query block, which allows users to query items and is displayed on both during both QBE and List mode.
    The second block is the List block, which displays a list of items based on the entries on the query block.
    The third block is the Edit block, which displays a single item selected from the list block, and that item's associated information.

18. In the Scheme Selection section, leave the Form bullet set to on, since this is the main block, and we will be viewing one record at a time.
    

19. Click on the Next button at the bottom right of the screen.

20. The Adding Fields screen is displayed.  Select the columns that you wish to include on the screen.

21. Click on the name of the column to select both the Field and Label checkboxes for that column.  Do this for the following columns
    DESCRIPTION
    ITEM_NO
    STOCK_UM
    STOCK_UM_DESC

22. A key must be selected to continue.  Set the Key checkbox to on for the ITEM_NO field as it is the key to this view.

23. Since this block is not returning data from the database, we do not need to make entries in the Filters or Ordering and Grouping fields for this block.
    

24. Click on the Next button at the bottom right of the screen.

25. The Ordering Fields screen is displayed next.  The columns are initially ordered as they were listed on the previous screen.  To move a field up or down, highlight the desired field by selecting it, and click on the Move Up or Move Down buttons on the right of the screen.  Move the fields until they are in the following order:
    ITEM_NO
    DESCRIPTION
    STOCK_UM
    STOCK_UM_DESC
    

26. Click on the Next button when you have finished moving the fields.

27. The Option to Add More screen is displayed.  We need to create the List block next.  Set the Add Block or Labels checkbox to on.  The entity in its current form will be displayed.  
    

28. Since we are adding the next block to the main screen entity, select the ITEM_MASTER_INQUIRY entity.
    

29. Click on the Add Block button at the bottom right of the screen.

30. The Adding Block screen will be displayed.

31. The List block should be named the same as the query block, because the ExecuteQbe() javascript command that takes us from query mode to list mode and restricts the data displayed in the list mode to that which meets the criteria on the query screen requires it.

32. In the Block Name property, enter ITEMS as the name of the block.

33. In the Block Type property, select Standard Block.

34. Set the Query Type property to Simple Query.

35. Leave the Datasource property set to (use parent).

36. In the Table property, select the name of the table or view from which the data will be obtained.  Since our datasource is set to use the Oracle 9i database for NDS Applications, we will select the view ITEM_MASTER_UVW.

37. Set the Create Heading checkbox to on to indicate that a heading should be created for each mode for this block.

38. In the Mode Selection section, set the QBE checkbox to off and the List checkbox to on, as we are creating the block to list the data returned from the database.

39. In the Scheme Selection section, set the List bullet to on, since multiple records are being returned to this screen and we wish to have the labels displayed at the top of the screen and the fields displayed below them.
    

40. Click on the Next button at the bottom right of the screen.

41. The Adding Fields screen is displayed.  Select the columns that you wish to include on the screen.

42. Click on the name of the column to select both the Field and Label checkboxes for that column.  Do this for the following columns
    DESCRIPTION
    ITEM_NO
    STOCK_UM
    STOCK_UM_DESC

43. A key must be selected to continue.  Set the Key checkbox to on for the ITEM_NO field as it is the key to this view.

44. In the Filters property, you could enter code to restrict the data returned from the table.  We want to include all active items, so enter the following filter:
    
    where status_flag = 'A'

45. In the Ordering and Grouping property, you can enter code to determine the order in which the data is displayed in the screen.  We want the items to be listed in order by item number, so the following should be entered:
    
    order by item_no
    

46. Click on the Next button at the bottom right of the screen.

47. The Ordering Fields screen is displayed next.  The columns are initially ordered as they were listed on the previous screen.  For blocks using the list scheme, this determines the left to right order of the fields in the list.  The first field is placed on the far left, and each field after is placed to the immediate right of the previous field.  When there is no more room left on the block, the fields are moved down to the next row and placement starts over at the far left..
    To move a field up or down, highlight the desired field by selecting it, and click on the Move Up or Move Down buttons on the right of the screen.  Move the fields until they are in the following order:
    ITEM_NO
    DESCRIPTION
    STOCK_UM
    STOCK_UM_DESC
    

48. Click on the Next button when you have finished moving the fields.

49. The Option to Add More screen is displayed.  We need to create the Edit block next.  Set the Add Block or Labels checkbox to on.  The entity in its current form will be displayed.  
    

50. Since we are adding the next block to the main screen entity, select the ITEM_MASTER_INQUIRY entity.
    

51. Click on the Add Block button at the bottom right of the screen.

52. There will be four blocks on the screen in Edit mode.  The first block is the parent block, and it will contain the item information, and should look just like the query block.  The second block is the tab block, which will contain the final two blocks.  The third block will display the item pricing information, and the fourth block will display the item cost information..

53. Set the Create block similar to pop-list to the ITEMS (qbe,list) block, which is the query block that we created earlier.

54. In the Block Name property, enter ITEMS as the name of the block.  Although it is not necessary to name the edit block the same as the query and list block, it gives consistency to the page.

55. Leave the Block Type property set to Standard Block.

56. Leave the Query Type property set to Simple Query.

57. Leave the Datasource property set to (use parent).

58. Leave the Table property set to ITEM_MASTER_UVW.

59. Set the Create Heading checkbox to on to indicate that a heading should be created for each mode for this block.

60. In the Mode Selection section, set the QBE and List checkboxes to off and the Edit checkbox to on, as we are creating the block to display a single record from the database that will be selected from the List block.

61. In the Scheme Selection section, leave the Form bullet to on, since a single record will be displayed on this screen, and the labels and fields will be contained within the same block.
    

59. Click on the Next button at the bottom right of the screen.

60. The Adding Fields screen is displayed.  You'll notice that there are fields already selected.  These are the fields selected earlier on the qbe/list screen.  We don't need to select any additional columns for the edit screen.

61. Verify that the following columns are selected:
    DESCRIPTION
    ITEM_NO
    STOCK_UM
    STOCK_UM_DESC

62. Verify that the Key checkbox is set to on for the ITEM_NO field as it is the key to this view.

63. Since this block is accessed through the list screen, and is passed restrictions through that link, we do not need to make entries in the Filters or Ordering and Grouping fields for this block.
    

64. Click on the Next button at the bottom right of the screen.

65. The Ordering Fields screen is displayed next.  The columns are initially ordered as they were ordered on the qbe/list screen from which this block definition was copied.  To move a field up or down, highlight the desired field by selecting it, and click on the Move Up or Move Down buttons on the right of the screen.  Verify that the fields are in the following order:
    ITEM_NO
    DESCRIPTION
    STOCK_UM
    STOCK_UM_DESC
    

66. Click on the Next button when you have finished moving the fields.

67. The Option to Add More screen is displayed.  We need to add the tab block next.  Set the Add Block or Labels checkbox to on.  The entity in its current form will be displayed.  
    

68. Expand the ITEM_MASTER_INQUIRY entity and select the ITEMS (edit) block, as we are only adding the tab block to the edit screen.
    

69. Click on the Add Block button at the bottom right of the screen.

70. In the Block Name property, enter TAB_BLOCK as the name of the block.

71. In the Block Type property, select Tab Block.

72. In the Mode Selection section, set the Edit bullet to on as we only want the tabs to be displayed on the edit screen.
    

73. Click on the Next button at the bottom of the screen.

74. The Option to Add More screen is displayed.  We need to add the price block to the tab block next.  Set the Add Block or Labels checkbox to on.  The entity in its current form will be displayed.  
    

75. Expand the ITEM_MASTER_INQUIRY screen, and then expand the ITEMS (edit) block.  Left click on the TAB_BLOCK to select it.
    

76. Click on the Add Block button at the bottom of the screen.

77. In the Block Name property, enter ITEM_PRICING as the name of the block.

78. In the Block Type property, select Standard Block.

79. Set the Query Type property to Simple Query.

80. Leave the Datasource property set to (use parent).

81. In the Table property, select the name of the table or view from which the data will be obtained.  Since our datasource is set to use the Oracle 9i database for NDS Applications, we will select the view ITEM_PRICE_UVW.

82. Set the Create Heading checkbox to on to indicate that a heading should be created this block.

83. In the Scheme Selection section, set the List bullet set to on, since this is the secondary block, and multiple pricing records will exist for each item record.
    

84. Click on the Next button at the bottom right of the screen.

85. The Adding Fields screen is displayed.  Select the columns that you wish to include in the block.

86. Click on the name of the column to select both the Field and Label checkboxes for that column.  Do this for the following columns
    BASE_LIST_PRICE
    PLANT_CODE
    PLANT_DESC
    PRICE_UM
    PRIMARY_UM
    SALES_UM

87. A key must be selected to continue.  Set the Key checkbox to on for the ITEM_NO, PLANT_CODE, and SALES_UM fields.  

88. In the Filters property, you could enter code to restrict the data returned from the table.  We do not want to restrict by anything for this block, so do not enter any filters.

89. In the Ordering and Grouping property, you can enter code to determine the order in which the data is displayed in the screen.  We want the pricing records to be displayed in order by plant and sales unit of measure, so enter the following
    
    order by plant_code, sales_um
    

90. Click on the Next button at the bottom right of the screen.

91. The Ordering Fields screen is displayed next.  The columns are initially ordered as they were listed on the previous screen.  To move a field up or down, highlight the desired field by selecting it, and click on the Move Up or Move Down buttons on the right of the screen.  Move the fields until they are in the following order:
    ITEM_NO
    PLANT_CODE
    PLANT_DESC
    SALES_UM
    PRICE_UM
    BASE_LIST_PRICE
    PRIMARY_UM
    

92. Click on the Next button when you have finished moving the fields.

93. The Create Join screen is displayed next.  If you need to create a join between a field in the master block and a field in the detail block that were named differently, this is where you would do it.  Since the join is on the ITEM_NO field, and they are named the same in both the master and the detail blocks, you do not need to create a join here.  
    

94. Click on the Next button when you have finished moving the fields.

95. The Option to Add More screen is displayed.  We need to add the cost block to the tab block next.  Set the Add Block or Labels checkbox to on.  The entity in its current form will be displayed.  
    

96. Expand the ITEM_MASTER_INQUIRY screen, and then expand the ITEMS (edit) block.  Left click on the TAB_BLOCK to select it.
    

97. Click on the Add Block button at the bottom of the screen.

98. In the Block Name property, enter ITEM_COST as the name of the block.

99. In the Block Type property, select Standard Block.

100. Set the Query Type property to Simple Query.

101. Leave the Datasource property set to (use parent).

102. In the Table property, select the name of the table or view from which the data will be obtained.  Since our datasource is set to use the Oracle 9i database for NDS Applications, we will select the view COST_ITEM_UVW.

103. Set the Create Heading checkbox to on to indicate that a heading should be created this block.

104. In the Scheme Selection section, set the List bullet set to on, since this is the secondary block, and multiple cost records will exist for each item record.
     

105. Click on the Next button at the bottom right of the screen.

106. The Adding Fields screen is displayed.  Select the columns that you wish to include in the block.

107. Click on the name of the column to select both the Field and Label checkboxes for that column.  Do this for the following columns
     COST_TYPE
     COST_TYPE_DESC
     PLANT_CODE
     UNIT_COST

108. A key must be selected to continue.  Set the Key checkbox to on for the COST_TYPE, ITEM_NO, and PLANT_CODE fields.  

109. In the Filters property, you could enter code to restrict the data returned from the table.  We do not want to restrict by anything for this block, so do not enter any filters.

110. In the Ordering and Grouping property, you can enter code to determine the order in which the data is displayed in the screen.  We want the pricing records to be displayed in order by plant and sales unit of measure, so enter the following
     
     order by plant_code, cost_type
     

111. Click on the Next button at the bottom right of the screen.

112. The Ordering Fields screen is displayed next.  The columns are initially ordered as they were listed on the previous screen.  To move a field up or down, highlight the desired field by selecting it, and click on the Move Up or Move Down buttons on the right of the screen.  Move the fields until they are in the following order:
     ITEM_NO
     PLANT_CODE
     COST_TYPE
     COST_TYPE_DESC
     UNIT_COST
     

113. Click on the Next button when you have finished moving the fields.

114. The Create Join screen is displayed next.  If you need to create a join between a field in the master block and a field in the detail block that were named differently, this is where you would do it.  Since the join is on the ITEM_NO field, and they are named the same in both the master and the detail blocks, you do not need to create a join here.  
     

115. Click on the Next button when you have finished moving the fields.

116. The Option to Add More screen is displayed.  We have no more blocks to add, so click on the Finish button.
     

117. The new entity is added to the initially selected group.  In the Explorer Tree, the new entity will be displayed, expanded with all blocks shown.
     

118. Click on the Save button in the main toolbar to save the new screen entity.

119. Right click on the ITEM_MASTER_INQUIRY entity in the Explorer Tree and select Designer Frame from the menu.
     

120. Within the Designer Tool, you can move, align, and resize the objects.  For specific instructions on the Designer Tool and its functionality, see the Designer Tool section.

121. When the Designer Tool is displayed, expand it so that you can see the entire entity.  The Designer Tool displays the default mode of the entity selected.  The pop-list in the upper right of the Designer Tool indicates that we are viewing the lay out of the QBE View.
     

122. Left click on the field that contains the word ITEMS.  This is the heading for this block in QBE Mode.  Double click to display the property sheet.

123. In the Contents property, enter the text: Search Items.
     

124. Some of these fields need to be restricted to upper case, because the data contained in the database is upper case only.

125. Hold down the Shift key, and in the Designer Tool, select the ITEM_NO and STOCK_UM fields by left clicking on them.

126. Double click on the STOCK_UM field to display the property sheet that allows you to modify both fields at the same time.

127. Set the Text Case property to Uppercase.
     

128. Click on the Save button in the main toolbar to save the changes.

129. You have complete the change for this screen in QBE Mode.  Now we will move onto List Mode.

130. In the pop-list in the upper right corner of the Designer Tool, select List View.
     
     

131. First, we need to move the list block so that it is below the query block. In the Designer Tool, click to the right of the STOCK_UM_DESC field to select the block.

132. Then click on the Select Parent button in the toolbar at the top of the Designer Tool.  This selects the top level container.
     

133. Now we need to make the parent block just a little bigger, so that we can move it around in the Designer Tool.  Hover your cursor over the bottom edge of the block until it turns into a double headed arrow.  Hold down your left mouse button and drag the edge of the block down.
     

134. Now left click in the space that was created.  Hold down the mouse button, and drag the block down so that it's below the query block.
     

135. The list screen should be Display Only, so first, we will mark the database block display only.

136. In the Designer Tool, left click in the blank area to the right of the STOCK_UM_DESC field to select the ITEMS block.  Double click to display the properties sheet.
     

137. Find the Display Only property and change it to true.
     

138. In the Designer Tool, left click on the field that reads ITEMS_HEADER, which is the heading for the block.  Double click to display the property sheet.

139. For the Contents property, enter the text List of Items.
     

140. Using the Designer Tool, move the objects around until they look like this:
     

141. The Stock Um Desc label field and the STOCK_UM_DESC field need to be made smaller so that they fit on the screen.

142. Left click on the Stock Um Desc label field to select it.  Then, move your mouse pointer over the left side of the field until it turns into a double headed arrow.
     

143. Left click and hold down the mouse button.  Then drag the mouse to the right until the field is small enough.
     

144. Repeat these steps for the STOCK_UM_DESC field.
     
     

145. We also need to modify the text in the Stock Um label so that it fits in the label.

146. Left click on the Stock Um label in the list header block and display the property sheet.

147. In the Contents property, change the text to read Um.
     

148. Now we need to make the header and database block a little shorter.  Using the skills that we've already covered, modify the blocks until they look like this:
     

149. Click on the Save button in the main toolbar to save the changes.

150. You have completed the change for this screen in List Mode.  Now we will move onto Edit Mode.

151. In the pop-list in the upper right corner of the Designer Tool, select Edit View.
     

152. Some of the left menu links are inappropriate for Edit mode.  Hold Shift down, and select the following links on the left menu:  New, Save, Delete.
     New link because we did not create a new block for this screen, so we do not want users to have access to the screen in New mode.
     Save link because we are only querying and viewing this information, not modifying it.
     Delete link because we only want the user to be able to view the items, but not delete them from the database.
     

153. Double click on the Delete link to display a property sheet that allows you to modify all three links at once.  

154. Set the On Edit, On QBE, and On List properties to false.
     

155. The left menu will now look like this:
     

156. Left click on the field that contains the word ITEMS.  This is the heading for this block in Edit Mode.  Double click to display the property sheet.

157. In the Contents property, enter the text: View Item Information.
     

158. Click on the Save button in the main toolbar to save the changes.

159. In the header block, some of these fields need to be restricted to upper case, because the data contained in the database is upper case only.

160. Hold down the Shift key, and in the Designer Tool, select the ITEM_NO and STOCK_UM fields by left clicking on them.

161. Double click on the STOCK_UM field to display the property sheet that allows you to modify both fields at the same time.

162. Set the Text Case property to Uppercase.
     

163. The header block needs to be set as Display Only.  Left click to the right of the View Item Information field and double click to display the property sheet.

164. Set the Display Only property to true.
     

165. The tab block needs to be modified to display the correct text in the tabs.  Close the Designer Tool.  In the Explorer Tree, expand the TAB_BLOCK.

166. Select the ITEM_PRICING_CONTAINER block.  Display the property sheet.

167. In the Tab Title property, enter Pricing.
     

168. In the Explorer Tree, select the ITEM_COST_CONTAINER block and display the property sheet.

169. In the Tab Title property, enter Cost.
     

170. Right click on the ITEM_COST_CONTAINER block and select Designer Frame from the menu.

171. Some modifications needs to be made to each block.

172. Left click on the ITEM_COST_HEADER field and double click to display the property sheet.

173. In the Contents property, enter Item Cost by Plant.
     

174. Click on the word Pricing.  This displays the fields on the Pricing Tab.

175. Left click on the ITEM_PRICING_HEADER field and double click to display the property sheet.

176. In the Contents property, enter Item Price by Plant.
     

177. Arrange the fields so that they match the following image.  You'll have to shorten the Base List Price label and field to fit the Primary UM field.
     

178. Click on the Save button in the main toolbar to save the changes.

179. We also want to fix the label text so that it fits in its allotted space, we want to shorten the blocks a little so that there is less space between records, and we want to lengthen a couple of the fields to fit the text.  Make the following changes to the Contents property for the labels.

     Label	Contents Property
     L_PLANT_CODE	PL
     L_PLANT_DESC	Description
     L_SALES_UM	Sls UM
     L_PRICE_UM	Prc UM
     L_BASE_LIST_PRICE	List Price
     L_PRIMARY_UM	Primary

180. Shorten the PLANT_DESC and L_PLANT_DESC fields a little, to make room to lengthen some other fields.
     

181. Move the L_SALES_UM and SALES_UM fields to the left until they are only a couple of pixels away from the edge of the PLANT_DESC and L_PLANT_DESC fields.
     

182. Lengthen the L_SALES_UM and SALES_UM fields by dragging the right edge out until you can read the entire label text.
     

183. Lengthen the L_PRICE_UM and PRICE_UM fields by dragging the left edge out until you can read the entire label text.
     

184. Now we want to shorten the blocks on the Pricing tab a little so that there is less space between records.  Shrink the header block until it looks like this:
     

185. Shrink the database block until it looks like this:
     

186. Now drag the database block up until it is right below the header block.
     

187. Click on the Save button in the main toolbar to save the changes.

188. The tab block needs to be a little longer.

189. In the Explorer Tree, select the ITEMS (edit) block and display the property sheet.

190. In the Height property, enter 400.
     

191. Select the TAB_BLOCK.

192. In the Height property, enter 290.
     

193. We should also correct the labels for the cost type and plant labels for the ITEM_COST_HEADER block.

194. Expand the TAB_BLOCK, then the ITEM_COST_CONTAINER block, and then the ITEM_COST_HEADER block.

195. Select the L_PLANT_CODE field and display the property sheet.

196. In the Contents field, enter PL.
     

197. Select the L_COST_TYPE field and display the property sheet.

198. In the Contents field, enter Typ.
     

199. Click on the Save button in the main toolbar to save the changes.

200. To test the new screen entity, highlight it by selecting it, and click on the Run button in the main toolbar.

201. The Preparing to Run pop-up is displayed.  Click on the Run button.
     

202. The screen will be run in the browser.
     

Xephr is a registered trademark of NDS Systems, LC.

Copyright © 2007 NDS Systems LC.