Screen Entity Example - Basic Drag Drop Screen

Using the screen template created earlier, we will create a Basic Drag Drop type screen for assigning sales representatives to customers.

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

  2. Click on the Screen bullet.

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

  4. In the Entity Name property, type CUSTOMER_REP as the entity name.

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

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

  7. Set the Default Mode property set to Edit View.  We will only have one mode for this screen.

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

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

  10. Our first block is going to act as a heading block for the Basic Drag Drop that we are creating, listing the sales representative names.

  11. In the Block Name property, enter SLSMAN 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 SLSMASTER_UVW.

  16. Set the Create Heading checkbox to off as we do not want a heading for this block.

  17. In the Mode Selection section, leave the Edit flag set to on.

  18. In the Scheme Selection section, set the Form bullet to on.

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

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

  21. Set the Key Required flag to off as we are just using this block to display the information from the database and will not be manipulating it on this screen.

  22. Set the Field flag to on for the SLSMAN and SLS_NAME columns.  Make sure that the Label flag is set to off for these columns as we only want the database column.
  23. In the Filters property, you could enter code to restrict the data returned from the table.  We need to restrict the sales representatives returned to those that will be displayed in the Basic Drag Drop block.  Enter the following in this property.

    where slsman in (select slsman from cust_rep_uvw) and org_unit_id = $$ORG_UNIT_ID$$

  24. 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 sales representatives to be listed in alphabetical order by sales representative ID, so the following should be entered:

    order by slsman

  25. Click on the Next button at 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:
    SLSMAN
    SLSNAME

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

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

  29. Click on the CUSTOMER_REP entity to select it.

  30. Click on the Add Block button to continue.

  31. In the Block Name property, enter CUST_REP as the name of the block.

  32. In the Block Type property, select Basic Drag Drop.

  33. Set the Query Type property to Simple Query.

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

  35. In the Table property, select CUST_REP_UVW.

  36. In the Number of Containers property, enter 8.  This is the total number of containers that will be displayed in the drag drop block, between which the records can be moved.

  37. In the Container ID Column property, select S_CTR.  This is the column from the view that determines in which container the record will be placed when the block is loaded.

  38. In the X Column property, select S_X.  This is the column from the view that stores the location of the record in pixels on the X axis (horizontal) of the container.

  39. In the Y Column property, select Y_X.  This is the column from the view that stores the location of the record in pixels on the Y axis (vertical) of the container.

  40. Leave the Collapsible property set to on to indicate that the detail block can be either collapsed and hidden or expanded and displayed at runtime, by the user.

  41. Leave the Initial State property set to Collapsed to indicate the when the records are loaded, the detail block will be collapsed and hidden for each record.

  42. In the Mode Selection section, leave the Edit checkbox set to on.  

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

  44. Set the Key flag to on for the SLSMAN and CUST_NO fields.

  45. Set the Header flag to on for the CUST_NAME, CUST_NO, and SLSMAN field.  Columns with this flag selected will be displayed in the header section of each record.

  46. Set the Detail flag to on for the following fields.  Columns with this flag selected will be displayed in the detail section of each record.
    STATE
    SLS_LOCATION
    SLS_TERRITORY
    CITY
    SLS_NAME
    SLS_REGION

  47. Set the Label flag to on for the following fields:
    STATE
    SLS_LOCATION
    SLS_TERRITORY
    CITY
    SLS_NAME
    SLS_REGION

  48. In the Filters property, you could enter code to restrict the data returned from the table.  We do not need to restrict the data returned from the view, so leave this property empty.

  49. 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 records to be listed in order by customer name, so the following should be entered:

    order by cust_name

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

  51. 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:
    CUST_NO
    CUST_NAME
    SLSMAN
    CITY
    STATE
    SLS_LOCATION
    SLS_NAME
    SLS_TERRITORY
    SLS_REGION

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

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

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

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

  56. Now we need to make sure that the correct links are showing up on this screen.

  57. In the Explorer Tree, click on the LEFT_MENU block to select it, and double click to display the Property Sheet.  Since we only have one mode for this screen, we need to modify this block so it is only displayed in that mode.

  58. Set the On QBE, On New, and On List properties to false.

  59. Expand the LEFT_MENU block in the Explorer Tree.

  60. Hold down the Ctrl key on the keyboard, and left click on the following fields to select them as a group.
    QUERY
    LIST
    NEW
    EXECUTE_SEARCH
    DELETE
    CREATE

  61. Double click on the CREATE field to display the Multi-Select Property Sheet.  Set the On Edit property to false.

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

  63. In the Explorer Tree, left click on the CUST_REP_CONTAINER field to select it.  Double click to display the Property Sheet.

  64. Verify that the Number of Containers property is set to 8.

  65. There are additional properties here that can be modified for the display and edit of the Basic Drag Drop block.

  66. Leave the Read Only Containers property blank.  None of our containers are read only.

    Records in read only containers cannot be dragged from the container and dropped into another container.  In addition, records from other containers cannot be dropped into a read only container.

  67. Leave the Content Constraint List property blank.  None of our containers have a limit on the number of records that it can contain.

  68. Leave the Container Widths property blank.  All of our containers are the same width relative to one another.

    The container widths are relative to the values that you enter here and the width defined for the block.  The values entered are added up and the width of the block is divided by that value, then the appropriate width is applied to each container.  If no values are entered here, all columns are assumed to be the same width.

  69. The Top Margin (in Pixels) property indicates the number of pixels in the margin between the top of the container and the top of the first record in the container.

  70. The Left Margin (in Pixels) property indicates the number of pixels in the margin between the left side of the container and the left side of the record in the container.

  71. The Horizontal Padding (in Pixels) property indicates the number of pixels in between records horizontally within a container.

  72. The Vertical Padding (in Pixels) property indicates the number of pixels in between records vertically within a container.

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

  74. In the Explorer Tree, right click on the CUSTOMER_REP entity and select Designer Frame from the menu.

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

  76. When the Designer Tool is displayed, expand it so that you can see the entire entity.

  77. We only want the SLS_NAME displayed in the SLSMAN_HEADER block, and we want it repeated horizontally so that it will top the containers below it.

  78. Left click on the SLSMAN field and double click to display the property sheet.

  79. Set the Visible property to false.

  80. In the Designer Tool, left click on the SLS_NAME field and drag it up and to the left to line it up with the top and left side of its block.

  81. Left click to the right of the SLS_NAME field to select its block and double click to display the Property Sheet.

  82. In the Wrap at Column property, enter 8, which is the same as the number of containers in the view.

  83. In the Width field, enter 255.

  84. In the Height field, enter 21.

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

  86. The Basic Drag Drop block needs to stretch from the left side of the screen to the right side of the screen, so we need to move the LEFT_MENU block so that it stretches across the top of the screen, with the SLSMAN block below it, and the Basic Drag Drop block below that.  Move around the fields and blocks in the Designer Tool until they look like this:

  87. Now we need to modify the Basic Drag Drop block and its fields.

  88. In the Designer Tool, change the View pop-list to CUST_REP_CONTAINER.  Basic Drag Drop blocks have a separate Designer Tool view.

  89. Size the Designer Tool so that you can see the entire block.

  90. First, we need to hide the SLSMAN field for the block.  Double click on the SLSMAN field in the header to display the property sheet.

  91. Set the Visible property to false.

  92. Now we need to resize the top block.  Left click below the CUST_NAME field to select the block. Hold your mouse over the bottom side of the block until it turns into a double headed arrow.  Hold down the left mouse button and drag the side of the block up until it lines up with the bottom side of the CUST_NAME field.

  93. Hold down your Ctrl key on the keyboard, and left click on the following fields.  Double click to display the Multi-Select Property Sheet.
    City
    State
    Sls Location
    Sls Name
    Sls Territory
    Sls Region

  94. In the Width property, enter 60.

  95. Hold down your Ctrl key on the keyboard, and left click on the following fields.  Holding down your left mouse button drag the fields up until they are lined up to the right of the label fields.
    CITY
    STATE
    SLS_LOCATION
    SLS_NAME
    SLS_TERRITORY
    SLS_REGION

  96. The SLS_NAME field needs to be shrunken a little.  Double click on it to display the Property Sheet.

  97. In the Width property, enter 140.

  98. Now we need to shrink the block.  Left click on the lower block to select it.  Hold your mouse over the right side of the block until it turns into a double headed arrow.  Hold down the left mouse button and drag the side of the block to the left until it lines up with the right side of the SLS_NAME field.  Notice that the header block is also resized in this way.

  99. The CUST_NAME and CITY fields ended up being a little too long.  Click on each one to select it.  Then, click on the right edge of the field and drag it to fit within the block.
      

  100. Now shrink the bottom of the lower block until it ends right below the Sls Region field.

  101. Hold down your Ctrl key and select the CUST_NO and CUST_NAME fields in the header.  We do not want these fields to be modified on this screen.  Display the Multi-Select property sheet.

  102. Set the Display As property to Label.

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

  104. Some final changes are necessary to clean up the screen so that it looks nice.

  105. Left click on the CUSTOMER_REP entity and double click to display the property sheet.

  106. In the Title field, enter Customer Sales Representative Management.

  107. Right now, if you tried to run the screen, all of the columns would be bunched up, not able to fit within the space allotted.  We need to make more space so that the fields can all be viewed.

  108. In the Width field, enter 2000.  

  109. Left click on the CUSTOMER_REP_CONTAINER block and display the Property Sheet.

  110. In the Width field, enter 2000.

  111. Now, left click on the SLSMAN block and display the Property Sheet.

  112. Set the Display Only property to true.

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

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

  115. The Preparing to Run screen is displayed.  Since a global variable was defined in the Filtering property, you must define the value before the screen is run.  Enter 100 in the value field and press the Run button.

  116. The screen will be run in the browser.

Xephr is a registered trademark of NDS Systems, LC.

Copyright © 2007 NDS Systems LC.