QBE Column Selector Example

In this example, we will be adding a column selector to the QBE mode for the previously created CONTACTS screen.

See Also

QBE Column Selector

Creating the QBE Column Selector

  1. In the Explorer Tree, expand the Group Information object.

  2. Expand the SCREENS group and then expand the CONTACTS screen to display all of the blocks.

  3. Right click on the CUST_CONTACT (qbe,list) block.

  4. On the menu, select Create -> Label.

  5. The Adding Labels screen is displayed.

  6. Press the Add button four times.

  7. In the fields, enter the following text:
    COLUMN_SELECTOR
    AVAILABLE
    SELECTED
    TITLE

  8. Click on the Add Fields button at the bottom of the screen.

  9. The fields are added to the block.  Press the Save button to save the new fields.

  10. Expand the CUST_CONTACT (qbe,list) block.  Left click on the COLUMN_SELECTOR field and display the property sheet for the label.

  11. In the Display As property, select QBE Column Selector.

  12. Right click on the block and select Designer Frame to display the Designer Tool.

  13. Expand the Designer Tool until you can see the entire block.  We need to lengthen the block and then move the fields around until they are where we want them.

  14. 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 it looks like this:

  15. Now, move the four fields around in the block until they are laid out like this:

  16. The column selector fields starts out the same size as any other field, but it needs to be larger to accommodate the functionality.

  17. In the Designer Tool, click on the COLUMN_SELECTOR block to select it.  Then, hover your cursor over the right 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 to the right until it lines up with the right side of the SELECTED field.

  18. 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 it touches the bottom of the block.

  19. We need to change the text in the TITLE, AVAILABLE, and SELECTED fields.

  20. Select the TITLE field and double click to display the property sheet.

  21. In the Contents property, enter Column Selector.

  22. Select the AVAILABLE field and double click to display the property sheet.

  23. In the Contents property, enter Available.

  24. Select the SELECTED field and double click to display the property sheet.

  25. In the Contents property, enter Selected.

  26. Press the Save button to save the changes.

  27. Some changes are also needed for the list block.

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

  29. Since we enlarged the QBE block, the list block is now too far up on the screen.  We need to make the screen larger, and move the block down.

  30. In the Explorer Tree, select the CONTACT entity and display the property sheet.

  31. In the Height property, enter 800.

  32. Now, left click on the CUST_CONTACT_CONTAINER (list) block and display the property sheet.

  33. In the Y property, enter 540.

  34. Expand the CUST_CONTACT_CONTAINER (list) block.  Then expand the CUST_CONTACT block.

  35. For each field on the CUST_CONTACT block, we need to modify the Tool Top property to contain the text to be displayed for that field in the column selector.

    Column

    ToolTip

    CONTACT

    Contact

    E_MAIL

    Email

    CUST_NO

    Customer Number

    PRIMARY

    Primary Flag

    DATE_CREATED

    Date Created

  36. Press the Save button to save the changes.

  37. We want contact, email, and date created to be automatically selected, and we want cust_no, and primary to be available for selection, but not selected.  The Visible property for the field and its label determines whether or not the field is automatically selected.

  38. In the CUST_CONTACT block, the Visible property should be set as follows for these fields.

    Column

    Visible

    CONTACT

    true

    E_MAIL

    true

    CUST_NO

    false

    PRIMARY

    false

    DATE_CREATED

    true

  39. In the CUST_CONTACT_HEADER block, the Visible property should be set as follows for these fields.

    Column

    Visible

    L_CONTACT

    true

    L_E_MAIL

    true

    L_CUST_NO

    false

    L_PRIMARY

    false

    L_DATE_CREATED

    true

  40. For List blocks that are using the QBE Column Selector, the number of fields in the header and the database block needs to be the same.  The HEADING field is an extra field, so we will delete it.

  41. Left click on the HEADING field and click on the Delete Current button in the header.

  42. The Confirm Delete pop-up is displayed.  Click Yes.

  43. The Delete Results pop-up is displayed.  Click Ok.

  44. We also need a label field for the CONTACT_ID field, and the labels in the header need to have the same Z orders as their corresponding fields in the database block.

  45. Right click on the L_DATE_CREATED field in the Explorer Tree and select Copy from the menu.

  46. Right click on the CUST_CONTACT_HEADER block in the Explorer Tree and select Paste from the menu.

  47. Display the property sheet for the pasted field.

  48. In the Name field, enter L_CONTACT_ID

  49. In the Contents field, enter Contact ID.

  50. Set the Visible flag to false since we do not want this field displayed on the list screen.

  51. For each of the label fields in the CUST_CONTACT_HEADER block, set the Z Order property to the following values:

    Column

    Z Order

    L_CONTACT

    1

    L_E_MAIL

    2

    L_CUST_NO

    3

    L_PRIMARY

    4

    L_DATE_CREATED

    5

  52. Press the Save button to save the changes.

  53. We need the CONTACT_ID field included on the list block, but we don't want it to be displayed in the QBE Column Selector.  Left click on this field and display the property sheet.

  54. Set the Suppress on CSO property to true.  

  55. Press the Save button to save the changes.

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

  57. The Preparing to Run screen is displayed.  Press the Run button.

  58. The entity is run in the browser.