Charts as Screens Example

Using the screen template created earlier, we are creating a screen containing a chart.

See Also

Chart Blocks

Creating a Screen with a Chart

  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 SCREEN_WITH_CHART 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. Set the Default Mode property set to Edit View.  We will only have one mode for this screen.

  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 CUST_HIST as the name of the block.

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

  13. Set the Query Type property to Complex Query.

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

  15. In the Chart Type pop-list, select Bar Chart.

  16. In the Chart Title property, enter Sales vs Cost.

  17. Leave the Create Heading checkbox set to off.

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

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

  20. The Setting Complex Query properties screen is displayed.

  21. When the Query Type is Complex Query for any block, you must enter the select statement, filters, and ordering and grouping information manually, defining the columns to be selected and the table from which the columns will be selected.  

  22. In the Select Statement property, enter

    select year_month, sum(sls_cost) sls_cost, sum(sls_rev) sls_rev from cust_hist_mo_dtl

  23. In the Filters property, to have only periods from 2003 displayed, enter

    where year_month like '2003%'

  24. In the Ordering and Grouping property, enter

    group by year_month
    order by year_month

  25. Click on the Next button on the bottom right of the screen to continue.

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

  27. For charts, to include a column in the chart, set the Key checkbox to on.  Do this for all columns displayed.

  28. For each column, in the Used As property, you must define how the column will be used when generating the chart.
    For the YEAR_MONTH 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_COST and SLS_REV columns, select Datapoint Value.   These are the measured values that determine the height of the bars.

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

  30. The Option to Add More screen is displayed.  We do not need to add any additional blocks. so click on the Finish button.

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

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

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

  34. In the Explorer Tree, left click on the LEFT_MENU block and display the property sheet.

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

  36. Expand the LEFT_MENU block in the Explorer Tree.

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

  38. Set the Visible property to false.

  39. Left click on the SCREEN_WITH_CHART entity and display the property sheet.

  40. In the Title property, enter Sales vs Cost by Period.

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

  42. Right click on the SCREEN_WITH_CHART entity and select Designer Frame from the menu.

  43. The screen is displayed in its default Edit mode.  Expand the Designer Tool so that you can see the whole entity.

  44. The CUST_HIST block needs to be expanded a little so that it will display the chart properly.  Left click on the block to select it.  Hold your cursor over the bottom edge of the chart until it turns into a double-headed arrow.  Left click, hold down the mouse button, and drag the edge down until it looks like it's big enough.

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

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

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

  48. The screen will be run in the browser.

Xephr is a registered trademark of NDS Systems, LC.

Copyright © 2007 NDS Systems LC.