How to create a control

The following example describes how to create a simple control for use on a Trainee tab. To create a new control:

  1. Go to the Tools tab on the toolbar and click New/Load on the Screens panel.

  2. The window that appears lists different tab/control types on the left. These are the various areas of the system where tabs can be displayed. For example, a Personnel tab would only appear when viewing a Personnel account. For this example, select Trainee.
  3. Any existing trainee tabs and controls will be displayed in the lower-right section of the window. The icon indicates tabs and the icon indicates controls. The upper-right section allows you to create a new tab or control. Double-click *(New User Control).

  4. The screen designer will be displayed.

    The main parts of the designer are as follows:

    • The Design ribbon at the top. This allows you to save, format and control the view of screens.
    • The left panel. This has three sections (at the bottom): Overview, which lets you set a variety of miscellaneous screen features; Controls, which lets you add controls to the screen; and Fields, which lets you add fields to the screen.
    • The right panel. This displays and lets you edit the properties of the selected control.
    • The design area. This is the centre of the designer, where the screen is constructed. There are two views for this: Preview, which gives a visual representation of the screen, and Layout, which shows a hierarchical structure of the screen.
  5. First, enter a name for the control on the Overview section of the left panel. In this example we will call it Example Learner Details.
  6. Click Save on the ribbon.
  7. Go to the Fields section on the left panel and expand the Trainee field list.
  8. Drag the LASTNAME field onto the design area, near the top. The top of the area should turn grey when the field is held over it, and the field will snap into position when you let go of the mouse button.

  9. Drag the FIRSTNAME field underneath the Last Name field. Again, this will snap into position.

  10. Next we will add a second column to the control. To do this, go to the Layout view by clicking the Layout button at the bottom of the design area.
  11. Click the arrow next to Screen, then click the arrows next to *(New Section) and *(New Sub-section) to expand the structure. This is a hierarchical structure of the screen, with sections at the top, then sub-sections, then columns, and finally controls.

  12. Add a second column by selecting *(New Sub-section), right-clicking it, then left-clicking Column.

    The icon indicates that you can add an item, and the icon indicates that you can remove an item.

  13. Return to the Preview view. The two fields added earlier should now only take up half the width of the design area, as they are part of the first column.
  14. On the Fields section, drag the DOB and TELEPHONE fields onto the second column.
  15. Click the Date of birth field on the design area to select it. The field’s properties will be shown on the right panel. Try changing the width property (if it is set to Fill, select Custom instead) by altering the Min width and Max width values. Note how the width of the field changes dynamically as the values are altered. The Fill option will simply use the full column width.

  16. On the Overview tab (choose this from the bottom left of the screen), tick the Published checkbox. This will make the control available.

    At this point we will save and close the control. Remember to save changes regularly.

  17. Once saved, click the red X next to the title on the tab to close it.

Next we will create a second control:

  1. Create a new Trainee control as before and call it Example Learner Address.
  2. Drag the ADDRESS1, ADDRESS2, ADDRESS3, POSTTOWN and POSTCODE fields onto the design area and save the control.

The How to Create a Tab tutorial follows on from this tutorial.