Screen Example - Dashboard 101

Using the screen template created earlier, we will create a Dashboard type screen.  Dashboard type screens are used to show at a glance the information that you need to know.  Our Dashboard screen will include two charts and a list of reports to print.

  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 DASHBOARD 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. The first block to be added is a pie chart displaying the current year sales by sales rep.

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

  12. In the Block Type property, select Chart 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 SLSM_HIST_SUMMARY_VW.

  16. In the Chart Type pop-list, select Pie Chart.

  17. In the Chart Title property, enter Current Year Sales By Sales Rep.

  18. Leave the Create Heading property set to off as we do not need a separate heading for this block.

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

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

  21. The Adding Fields screen is displayed, including the columns defined in the complex query.  Select the columns that you wish to include in the chart.

  22. For charts, to include a column in the chart, set the Key checkbox to on.  Do this for the following columns:
    SLSMAN
    SLS_REV_THIS_YR

  23. For each column, in the Used As property, you must define how the column will be used when generating the chart.
    For the SLSMAN column, select Datapoint Label.  This is the column that is the key to the chart, for which the values are measured.  The values in this column are used to label each bar.
    For the SLS_REV_THIS_YR column, select Datapoint Value.   This is the measured value that determines the height of the bars.

  24. In the Filters property, to have only revenue for the user's logged in enterprise, enter the following:

    where org_unit_id = $$ORG_UNIT_ID$$

  25. In the Ordering and Grouping property, to list the sales revenue by sales representative ID in alphabetical order, enter

    order by slsman

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

  27. The Option to Add More screen is displayed.  Next we will add a block displaying the current year sales by customer.  Set the Add Block or Labels flag to on.

  28. The entity in its current form is displayed.

  29. We want to add the new block to the DASHBOARD entity.  Left click on the DASHBOARD entity to select it.

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

  31. The Adding New Block screen is displayed next.

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

  33. In the Block Type property, select Chart 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 CUST_HIST_SUMMARY_VW.

  37. Leave the Chart Type pop-list set to Area Chart.

  38. In the Chart Title property, enter Current Year Sales By Customer.

  39. Leave the Create Heading property set to off as we do not need a separate heading for this block.

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

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

  42. The Adding Fields screen is displayed, including the columns defined in the complex query.  Select the columns that you wish to include in the chart.

  43. For charts, to include a column in the chart, set the Key checkbox to on.  Do this for the following columns:
    CUST_NO
    SLS_REV_THIS_YR

  44. For each column, in the Used As property, you must define how the column will be used when generating the chart.
    For the CUST_NO column, select Datapoint Label.  This is the column that is the key to the chart, for which the values are measured.  The values in this column are used to label each bar.
    For the SLS_REV_THIS_YR column, select Datapoint Value.   This is the measured value that determines the height of the bars.

  45. In the Filters property, to have only revenue for the user's logged in enterprise, enter the following:

    where org_unit_id = $$ORG_UNIT_ID$$

  46. In the Ordering and Grouping property, to list the sales revenue by sales representative ID in alphabetical order, enter

    order by cust_no

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

  48. The Option to Add More screen is displayed.  Next we will add a block to display links to run the reports we created earlier.  Set the Add Block or Labels flag to on.

  49. The entity in its current form is displayed.

  50. We want to add the new block to the DASHBOARD entity.  Left click on the DASHBOARD entity to select it.

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

  52. The Adding New Block screen is displayed next.

  53. In the Block Name property, enter REPORTS as the name of the block.

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

  55. Leave the Query Type property set to Not From Query.

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

  57. Set the Create Heading checkbox to on so that the new block will have a heading field.

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

  59. In the Scheme Selection section, leave the Form bullet set to on.  The labels that we add on the next screen will be listed on top of the other when the block is created, which is how we want it to look.

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

  61. The Adding Labels screen is displayed next.  

  62. Click on the Add button three times to create three labels.

  63. Enter the following in the fields:
    LIST_REPORT
    TOTALS_REPORT
    MASTER_DETAIL_REPORT

  64. Press the Enter key on your keyboard when you have finished entering the last field.

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

  66. The Option to Add More screen is displayed.  No more blocks need to be added, so click on the Finish button at the bottom of the screen.

  67. The new entity is added to the initially selected group.  

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

  69. Since the screen will not allow data modifications and we only have one mode (Edit), we need to modify the left menu to only display the necessary links.  

  70. Expand the LEFT_MENU block.  Hold down the Shift key and left click on the following links to select them.  Then double click on one to display the Multi-Select property sheet.
    QUERY
    LIST
    NEW
    EXECUTE_SEARCH
    SAVE
    DELETE
    CREATE

  71. Set the On Edit property to false.

  72. Left click on the LEFT_MENU block and display the property sheet.

  73. Set the On QBE, On List, and On New properties to false, since we only have one mode on this screen.

  74. Left click on the DASHBOARD entity and display the property sheet.

  75. In the Title property, enter Dashboard.

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

  77. Right click on the DASHBOARD entity and select Designer Frame from the menu.

  78. The screen is displayed in its default Edit mode.  Expand the Designer Tool to display the entire entity.

  79. The blocks need to be shrunk some and laid out differently.  

  80. Click on the YEAR_SALES_BY_REP block, which is the block at the top of the screen.  This block needs to be shrunk some.  Hold your cursor over the left edge of the block until it turns into a double-headed arrow.  

  81. Left click and hold down the mouse button.  Drag the cursor to the right until it looks like this:

  82. Click on the YEAR_SALES_BY_CUST block, which is the second block on the screen.  This block needs to be shrunk some.  Hold your cursor over the right edge of the block until it turns into a double-headed arrow.

  83. Left click and hold down the mouse button.  Drag the cursor to the left until it looks like this:

  84. Now move the YEAR_SALES_BY_CUST block up to be to the left of the YEAR_SALES_BY_REP block.

  85. Using the drag method described above, modify the sizes of the two blocks and arrange them until the each take up about half of the space above the REPORTS list block.

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

  87. Select the field with the text REPORTS and double click to display the property sheet.  This is the HEADING field.

  88. In the Contents property, enter the text: Available Reports.

  89. Select the field with the text LIST_REPORT and double click to display the property sheet.

  90. We are going to modify this label to be a link to run the OPEN_SALES_ORDERS report that we made previously in a new window.

  91. In the Hyperlink To property, enter ShowInWindow('OPEN_SALES_ORDERS', 'show', '600', '800', '0', '0');

  92. Set the Hyperlink Scripted property to true to indicate that the text entered in the Hyperlink To property is a script and not a URL.

  93. In the Contents property, enter Open Sales Order by Customer.

  94. The label is a little short for the entered text, so we are going to change the width.  In the Width field, enter 200.

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

  96. Select the field with the text TOTALS_REPORT and double click to display the property sheet.

  97. We are going to modify this label to be a link to run the OPEN_INVOICE_TOTALS report that we made previously in a new window.

  98. In the Hyperlink To property, enter ShowInWindow('OPEN_INVOICE_TOTALS', 'show', '600', '800', '0', '0');

  99. Set the Hyperlink Scripted property to true to indicate that the text entered in the Hyperlink To property is a script and not a URL.

  100. In the Contents property, enter Open Invoices with Totals.

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

  102. Select the field with the text MASTER_DETAIL_RE... and double click to display the property sheet.

  103. We are going to modify this label to be a link to run the OPEN_INVOICES report that we made previously in a new window.

  104. In the Hyperlink To property, enter ShowInWindow('OPEN_INVOICES', 'show', '600', '800', '0', '0');

  105. Set the Hyperlink Scripted property to true to indicate that the text entered in the Hyperlink To property is a script and not a URL.

  106. In the Contents property, enter Open Invoices by Customer.

  107. The label is a little short for the entered text, so we are going to change the width.  In the Width field, enter 200.

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

  109. We want the list of available reports to be more in the middle of the screen.

  110. Click on the REPORTS block, which is the block at the bottom of the screen.  This block needs to be shrunk some.  Hold your cursor over the left edge of the block until it turns into a double-headed arrow.  

  111. Left click and hold down the mouse button.  Drag the cursor to the right until it looks like this:

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

  113. To test the new screen entity, click on the Run button in the main toolbar.

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

  115. The screen will be run in the browser.

Xephr is a registered trademark of NDS Systems, LC.

Copyright © 2007 NDS Systems LC.