Screen Entity Example - Simple Edit Screen

Using the screen template created earlier, we will create a contact maintenance screen that allows the query, list, edit, and creation of customer contacts.

Your user must be assigned the global variable ORG_UNIT_ID with the value 100 for this screen to run.  Otherwise, the CUST_NO list of values will be displayed as blank.  See the Modifying an Existing User Example for how to do this.

  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 CONTACTS 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 of the screen.

  11. In the Block Name property, enter CUST_CONTACT 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 CONTACT_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 checkbox to on and the List checkbox to on..  We will be creating 4 different blocks for this screen.

    The first block is the QBE/List query block, which allows you to query the database and return records that fit specific parameters.
    The second block is the List block, which lists the records returned by the query.
    The third block is the Edit block, which allows maintenance of a single record, selected from the list block.
    The fourth block is the New block, which allows the entry of a new record.

  18. In the Scheme Selection section, leave the Form bullet set to on, since we are entering query information in this block.

  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:
    CONTACT
    CUST_NO
    DATE_CREATED
    E_MAIL
    PRIMARY
    USER_TEXT

  22. The DATE_CREATED field needs a format mask.  Set the Format pop-list to MM-dd-yyyy for this field.

  23. Since this is the query block and records will not be updated or deleted from this screen, we do not need to define a key.  Set the Key Required flag at the top of the screen to off.

  24. 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.

  25. Click on the Next button at to the bottom of the screen.

  26. 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:
    CONTACT
    E_MAIL
    CUST_NO
    PRIMARY
    DATE_CREATED
    USER_TEXT

  27. Click on the Next button at the bottom of the screen to continue.

  28. 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.  

  29. Since we are adding the next block to the main screen entity, select the CONTACTS entity.

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

  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 CUST_CONTACT 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 CONTACT_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:
    CONTACT
    CUST_NO
    DATE_CREATED
    E_MAIL
    PRIMARY

  43. A key must be selected as the list block returns data from the database and the key is used to create a link from the list mode to the edit mode.  Set the Key checkbox to on for the CONTACT_ID field as it is the key to this view.

  44. The DATE_CREATED field needs a format mask.  Set the Format pop-list to MM-dd-yyyy for this field.

  45. In the Filters property, you could enter code to restrict the data returned from the table.  We want to include all contacts for a customer, but not for prospects or vendors, so enter the following filter.

    where cust_contact = 'Y'

  46. 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 contacts to be listed in alphabetical order by contact name, so the following should be entered:

    order by contact

  47. Click on the Next button at to the bottom of the screen.

  48. 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:
    CONTACT
    E_MAIL
    CUST_NO
    PRIMARY
    DATE_CREATED
    CONTACT_ID

  49. Click on the Next button at the bottom of the screen to continue.

  50. 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.  

  51. Since we are adding the next block to the main screen entity, select the CONTACTS entity.

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

  53. Set the Create block similar to pop-list to CUST_CONTACT (qbe,list).  This will set up the block to be the same as the earlier created qbe/list block.  Then, we can just modify the properties for the Edit block.

  54. Name the Edit block the same as the other blocks for the sake of consistency.

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

  56. In the Mode Selection section, set the QBE checkbox to on and the List checkbox to off..  Set the Edit checkbox to on.

  57. In the Scheme Selection section, leave the Form bullet set to on, since we will be displaying one record at a time on this block, and we want the labels placed to the left of the fields to which they belong.

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

  59. 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 need to add to this information for the edit screen.

  60. A key must be selected because from the Edit screen, we can do updates and deletes.  The key must be defined in order to accomplish these updates and deletes.  Set the Key checkbox to on for the CONTACT_ID field as it is the key to this view.

  61. The DATE_CREATED field needs a format mask.  Set the Format pop-list to MM-dd-yyyy for this field.

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

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

  64. 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:
    CONTACT
    E_MAIL
    CUST_NO
    PRIMARY
    DATE_CREATED
    USER_TEXT
    CONTACT_ID

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

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

  67. Since we are adding the next block to the main screen entity, select the CONTACTS entity.

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

  69. Name the New block the same as the other blocks for the sake of consistency.

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

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

  72. Set the Query Type property to Simple Query.

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

  74. 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 CONTACT_MASTER_UVW.

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

  76. In the Mode Selection section, set the QBE checkbox to off and set the New checkbox to on.

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

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

  79. The Adding Fields screen is displayed.  Select the columns that you wish to include on the screen.  Only those fields required for contact creation need to be included.

  80. Click on the name of the column to select both the Field and Label checkboxes for that column.  Do this for the following columns:
    CONTACT
    CUST_CONTACT
    CUST_NO

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

  82. In the Filters property, you could enter code to restrict the data returned from the table.  Since we are inserting into the view with this block, no filters need to be entered.

  83. In the Ordering and Grouping property, you can enter code to determine the order in which the data is displayed in the screen.  Since we are inserting into the view with this block, no order by or group by needs to be entered.

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

  85. 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:
    CONTACT
    CUST_NO
    CUST_CONTACT
    CONTACT_ID

  86. Click on the Next button at to the bottom of the screen.

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

  88. 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.

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

  90. Now we need to make sure that the correct links are showing up on each mode for this screen.

  91. Right click on the CONTACTS entity in the Explorer Tree and select Designer Frame from the menu.

  92. 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.

  93. 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.

  94. Left click on the field that contains the word CUST_CONTACT.  This is the heading for this block in QBE and List Modes.  Double click to display the property sheet.

  95. In the Contents property, enter the text: Customer Contacts

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

  97. We want to be able to query contacts by multiple customers, so we want to make the customer number field into a multi-select option list.

  98. In the Designer Tool, left click on the CUST_NO field and double click to display the property sheet.

  99. Set the Display As property to Option List.

  100. In the Option List Values field, select the CUST_NO list of values that was created earlier.

  101. Scroll down in the property sheet.

  102. Set the Width property to 200.

  103. Set the Height property to 84.

  104. Set the Enable Multi-Select pop-list to true.

  105. Set the No of Rows Exposed property to 4.

  106. We need to change the layout a little to accommodate the length of the text and number of rows exposed in the CUST_NO field.

  107. Click on the background of the block to select it.  Then, 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 until there is enough space for all of the fields.



  108. Now we need to move down the fields that are being overlapped by the CUST_NO field.

  109. Hold down the Shift key on your keyboard.  Left click on the Primary, PRIMARY, Date Created, DATE_CRE..., User Text, and USER_TEXT fields to select them.

  110. Once all are selected, left click on one of the selected fields, hold down your left mouse button, and drag down the fields until they are below the CUST_NO field.

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

  112. The PRIMARY field is a Y/N value field, so we can make it into a checkbox field.

  113. Select the PRIMARY field by left clicking on it.  Double click on it to display the property sheet.

  114. Change the Display As property to Checkbox.

  115. In the YES Value property, enter Y.

  116. In the NO Value property, enter N.

  117. The USER_TEXT field is a text area, so we need to change its type and size.

  118. Select the USER_TEXT field by left clicking on it.  Double click on it to display the property sheet.

  119. Change the Display As property to Text Area.

  120. Change the Width property to 300.

  121. Change the Height to 63.

  122. The block needs to be a little larger to accommodate the larger USER_TEXT field.  Click on the background of the block to select it.  Then, 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 until there is enough space for all of the fields.

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

  124. You have completed the changes for this screen in QBE Mode.  Now we will move onto List Mode.

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

  126. The list block is too far down on the screen, beneath the query block that is also included on the list screen.

  127. Left click on the header block to select it, and then click on the Select Parent button in the toolbar at the top of the Designer Tool.  This selects the top level container.

  128. Now we need to make the parent block just a little bigger, so that we can move it around in the Designer Tool.  Click on the background of the block to select it.  Then, 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.

  129. Now left click in the space that was created.  Hold down the mouse button, and drag the block up so that it's closer to the query block.

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

  131. In the Designer Tool, left click in the blank area to the right of the DATE_CREATED field to select the CUST_CONTACT block.  Double click to display the properties sheet.

  132. Set the Display Only property to true.

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

  134. For the Contents property, enter the text List of Contacts.

  135. All of the fields that are on this screen do not fit.  We are going to modify the layout and size of the fields so that they fit on one line.

  136. Hold down your Shift key on the keyboard, and select the Contact and CONTACT fields.  Display the property sheet.  In the Width property, enter 175.

  137. Select the E Mail field, then hold down your Shift key on the keyboard, and select E_MAIL field.  Display the property sheet.  In the Width property, enter 250.

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

  139. We can shrink the Primary and PRIMARY field to better fit the CUST_NO field.

  140. Click on the Primary field to select it, hover over the left edge until your cursor turns into a double headed arrow.  Then hold your left mouse button down and drag the cursor to the right.

  141. Repeat for the PRIMARY field.

  142. Then move the CUST_NO field to the right.

  143. Now we need to make the space between the database records a little smaller.  Click on the background of the block to select it.  Then, 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 up.

  144. Repeat for the header block, and then move the database block up to the edge of the header block.  When you are finished, it should look like this:

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

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

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

  148. We need to make similar changes to the ones we made on the qbe screen.

  149. The CUST_NO field should be an option list, but not multi-select this time.

  150. Left click on the CUST_NO field and display the property sheet.

  151. Set the Display As pop-list to Option List

  152. Set the Option List Values pop-list to the previously created CUST_NO list of values.

  153. Set the Width property to 200.

  154. The PRIMARY field needs to be a checkbox.

  155. Left click on the PRIMARY field and display the property sheet.

  156. Set the Display As property to true.

  157. Set the YES Value property to Y.

  158. Set the NO Value property to N.

  159. The USER_TEXT field needs to be a text area.

  160. Set the Display As property to Text Area.

  161. Set the Height property to 63.

  162. The block needs to be a little bit larger to accommodate the USER_TEXT field.  Click on the background of the block to select it.  Then, 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.

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

  164. Now we need to modify the New screen.  In the pop-list in the upper right corner of the Designer Tool, select New View.

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

  166. For the Contents property, enter the text Create Contacts.

  167. The CUST_NO field should be an option list, but not multi-select this time.

  168. Left click on the CUST_NO field and display the property sheet.

  169. Set the Display As pop-list to Option List

  170. Set the Option List Values pop-list to the previously created CUST_NO list of values.

  171. Set the Width property to 200.

  172. This field is also Required for a new contact to be created.  Set the Required property to true.

  173. The CONTACT field is also required for the entry of a new contact.  Left click on the field in the Designer Tool and double click to display the property sheet.

  174. Set the Required property to true.

  175. The CUST_CONTACT field is required to be Y for new entries.  However, we don't need the user to enter this.  We can default the value for new records.

  176. Left click on the CUST_CONTACT field in the Designer Tool and double click to display the property sheet.  

  177. In the Default Value property, enter Y.

  178. Set the Visible property to false.

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

  180. Delete the Cust Contact label field.  Left click on the Cust Contact field.

  181. Click on the Delete Current button in the main toolbar.

  182. The Delete Confirm pop-up is displayed.  Click on Yes.

  183. The Delete Results pop-up is displayed.  Click on Ok.

  184. Select the field labeled Create in the Left Menu.  We will be modifying this field to be a button that will insert the new contact record.  Double click to display the property sheet.

  185. In the Hyperlink To property, the javascript code that will create the contact record is displayed: Insert();
     

  186. We also want the screen to open the Edit screen once the contact record has been inserted, provided that no errors were returned.  Double click in the Hyperlink To property to display the an edit box.  

    After the Insert(); text, enter the following text:  

    if (lastResult)
    {ShowEdit('CUST_CONTACT.CUST_NO', $$CUST_CONTACT.CUST_NO.first$$, 'CUST_CONTACT.CONTACT', $$CUST_CONTACT.CONTACT.first$$);}

    The 'if (lastResult)' part indicates that the next part of the code should only be performed if no errors are returned on the New screen when the button is pressed.  The remainder of the code opens the edit screen, passing the customer number and contact values, so that only the new record will be displayed.

  187. Press the Ok button to return the new value to the Hyperlink To property.

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

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

  190. The Preparing to Run screen is displayed.

  191. The file will be run in the browser.

Xephr is a registered trademark of NDS Systems, LC.

Copyright © 2007 NDS Systems LC.