Screen Generator

You can access the CUOnline - Screen Generator tool when adding or editing custom forms through the Custom Forms Configuration or Supplemental Screen Configuration workflows.

1. Click the Add button in the Custom Screens area to start a new screen.
   
   To work on an existing screen, click on the correct custom form in the list, and then do one of the following:
   • Click the Edit button beside the list.
   • Double click the screen name.
2. Click the Detail button.

3. In the Screen Generator window, use the menubar to assist with formatting:

6. • Menubar

     • File

     • • New
       • Open
       • Close
       • Save
       • Delete
       • Exit

     • Edit

     • • Undo
       • Redo
       • Cut
       • Copy
       • Paste
       • Delete

     • Format

     • • Align: Click and drag over the items to want to align, or click each item while pressing [Shift].

       • • Left
         • Center
         • Right
         • Tops
         • Middle
         • Bottom

     • Options

     • • Screen Info
       • Tab Order

     • Help

     • • About Company Utilities

Parts of the Screen

The screen generator is comprised of the following areas:

• Treeview: Screens that are available to be edited display in the treeview

• The Canvas: This is the main area of the screen. It is where information is moved, added to the invoice, etc.
• Controls: Non-data items can be dragged from this area to the canvas.
• Properties: Properties of the selected item display. Use this area to specify alignment, location, field size, tab order, dropdown options, etc.

Adding Controls to the Screen

To add a control to the screen, do one of the following:

• Double click on the desired control. Move the item to the desired part of the canvas.

• Drag the desired control to the appropriate area on the canvas.

The following controls are available:

• Logo

  Use this control to add a logo to the screen.

  The following property options are available for logos.

  

  • LogoName

  • • LogoName: Click in the field to activate the ellipsis button. Click the ellipsis button to select a logo.
      
      To add a new logo to the list, click the Add link label at the top of the window, browse to the correct graphic file, and click Open or press [Enter].
      
      Optionally click the Image View or List View radio button to change the way the logos appear on this screen.
      
      Click on the desired logo and then click OK, or double click on the logo.

  • Behavior

  • • TabOrder: Enter the appropriate number in this box. Pressing the [Tab] key on this screen will move the cursor in the order specified here.

    • Tag Name: Label the logo in this box.

  • Layout

  • • Location: Gives the X and Y axis location of the selected item. Change these numbers to move the item, or drag the item on the screen manually.

    • • X: This is the X axis location of the selected item. Change this number to move the item left or right, or drag the item on the screen manually.

      • Y: This is the Y axis location of the selected item. Change this number to move the item up or down, or drag the item on the screen manually.

  • Size: Gives the length and width in pixels of the selected item. Change these numbers to resize the item, or drag the handles on the item on the screen to resize it manually.

  • • Width: This is the width of the selected item. Change this number to change the item's width, or drag the handles on the item on the screen to resize it manually.

    • Height: This is the height of the selected item. Change this number to change the item's width, or drag the handles on the item on the screen to resize it manually.

• Label

  Use this control to label items or add text.

  The following property options are available for labels.

  

  • Appearance

  • • Style: Click in the field to activate the down arrow, and then choose from the following:

    • • Normal

      • Subtitle

      • Title

      • DataPlaceHolder

    • Text: Type the desired text in this box.

    • TextAlign: Click in the field to activate the down arrow, and then choose from the following:

    • • TopLeft

      • TopCenter

      • TopRight

      • MiddleLeft

      • MiddleCenter

      • MiddleRight

      • BottomLeft

      • BottomCenter

      • BottomRight

  • Behavior

  • • LinkTo: If you want the label to be a link, enter the URL in this field.

    • TabOrder: Enter the appropriate number in this box. Pressing the [Tab] key on this screen will move the cursor in the order specified here.

  • Layout

  • • Location: Gives the X and Y axis location of the selected item. Change these numbers to move the item, or drag the item on the screen manually.

    • • X: This is the X axis location of the selected item. Change this number to move the item left or right, or drag the item on the screen manually.

      • Y: This is the Y axis location of the selected item. Change this number to move the item up or down, or drag the item on the screen manually.

  • Size: Gives the length and width in pixels of the selected item. Change these numbers to resize the item, or drag the handles on the item on the screen to resize it manually.

  • • Width: This is the width of the selected item. Change this number to change the item's width, or drag the handles on the item on the screen to resize it manually.

    • Height: This is the height of the selected item. Change this number to change the item's width, or drag the handles on the item on the screen to resize it manually.

• Group Box

  Use this control to place a labeled box around related control items.

  The following property options are available for group boxes.

  

  • Appearance

  • • Text: Type the desired text in this box. This is the text that appears at the top of the box to identify the group.

  • Behavior

  • • TabOrder: Enter the appropriate number in this box. Pressing the [Tab] key on this screen will move the cursor in the order specified here.

  • Layout

  • • Location: Gives the X and Y axis location of the selected item. Change these numbers to move the item, or drag the item on the screen manually.

    • • X: This is the X axis location of the selected item. Change this number to move the item left or right, or drag the item on the screen manually.

      • Y: This is the Y axis location of the selected item. Change this number to move the item up or down, or drag the item on the screen manually.

  • Size: Gives the length and width in pixels of the selected item. Change these numbers to resize the item, or drag the handles on the item on the screen to resize it manually.

  • • Width: This is the width of the selected item. Change this number to change the item's width, or drag the handles on the item on the screen to resize it manually.

    • Height: This is the height of the selected item. Change this number to change the item's width, or drag the handles on the item on the screen to resize it manually.

• Text Box

  Use this control to add a text box that a user can type into to enter information on the screen.

  The following property options are available for text boxes.

  

  • Appearance

  • • PromptText: This lets the user know what should be entered in the field.

    • TextAlign: Click in the field to activate the down arrow, and then choose from the following:

    • • Left

      • Right

      • Center

  • Behavior

  • • DataType: Select the type of data that can be entered in this box. Click in the field to activate the down arrow, and then choose from the following:

    • • Alphanumeric

      • Currency

      • Date

      • Fractional

      • Integer

      • Numeric

      • Text

      • Lienholder Code

      • Lienholder Attention

      • Lienholder City

      • Lienholder Name

      • Lienholder Street

      • Lienholder Province

      • Lienholder Postal Code

    • Decimals: Enter the number of decimals allowed in this box.

    • DefaultText: If default text should display in the text box, type it into this field.

    • MaxLength: Enter the maximum number of characters allowed in this text box.

    • Multiline: Dictate whether or not the text box can have multiple lines of text. Click in the field to activate the down arrow, and then choose from the following:

    • • True

      • False

    • TabOrder: Enter the appropriate number in this box. Pressing the [Tab] key on this screen will move the cursor in the order specified here.

    • TagName: This is the name of the field.

  • Layout

  • • Location: Gives the X and Y axis location of the selected item. Change these numbers to move the item, or drag the item on the screen manually.

    • • X: This is the X axis location of the selected item. Change this number to move the item left or right, or drag the item on the screen manually.

      • Y: This is the Y axis location of the selected item. Change this number to move the item up or down, or drag the item on the screen manually.

  • Size: Gives the length and width in pixels of the selected item. Change these numbers to resize the item, or drag the handles on the item on the screen to resize it manually.

  • • Width: This is the width of the selected item. Change this number to change the item's width, or drag the handles on the item on the screen to resize it manually.

    • Height: This is the height of the selected item. Change this number to change the item's width, or drag the handles on the item on the screen to resize it manually.

• Combo Box

  Use this control to add a combo box where a user can select an item from a list.

  The following property options are available for combo boxes.

  

  • Appearance

  • • PromptText: This lets the user know what type of information can be selected in the field.

  • Behavior

  • • DataType: Select the type of data that can be entered in this box. Click in the field to activate the down arrow, and then choose from the following:

    • • Alphanumeric

      • Numeric

      • Text

      • Lienholder Province

    • Decimals: Enter the number of decimals allowed in this box.

    • MaxLength: Enter the maximum number of characters allowed in this combo box.

    • TabOrder: Enter the appropriate number in this box. Pressing the [Tab] key on this screen will move the cursor in the order specified here.

    • TagName: This is the name of the combo box.

  • Data

  • • Content: Click in the field to activate the ellipsis button. Click the ellipsis button to select a table type.
      
      Select the appropriate radio button:

    • • Use a standard table

        1. Select a Sort Order:
           • Ascending by Code
           • Ascending by Description
           • Descending by Code
           • Descending by Description
           • As Entered
        2. Click the Yes or No radio button to indicate whether or not blank table spaces are valid.
        3. Click on the desired version in the Versions list.
        4. Click on the desired table in the Tables list.
        5. Click Finish.

      • Use an existing user defined table

        1. Click on the desired category in the Categories list.
        2. Click on the desired table in the Tables list.
        3. Click the checkbox for the default selection if applicable.
        4. Click Next.
        5. Optionally amend the Description.
        6. Select a Sort Order:
           • Ascending by Code
           • Ascending by Description
           • Descending by Code
           • Descending by Description
           • As Entered
        7. Click the Yes or No radio button to indicate whether or not blank table spaces are valid.
        8. Add or delete table entries as necessary.
           
           To add an entry, click the Add link label. Enter a Code (a shortened version of the option) and Description (the text the user will see in the combo box) and click OK.
           
           To delete an entry, click on the appropriate entry in the list and click the Delete link label. You are prompted: "Are you sure you want to delete the following table entry?" Click Yes.
        9. Click Finish.

      • Create a new user defined table with no defaulting

        1. Enter a table Description.
        2. Select a Category:
           • Stand Alone Forms
           • Global
        3. Select a Sort Order:
           • Ascending by Code
           • Ascending by Description
           • Descending by Code
           • Descending by Description
           • As Entered
        4. Click the Yes or No radio button to indicate whether or not blank table spaces are valid.
        5. Add or delete table entries as necessary.
           
           To add an entry, click the Add link label. Enter a Code (a shortened version of the option) and Description (the text the user will see in the combo box) and click OK.
           
           To delete an entry, click on the appropriate entry in the list and click the Delete link label. You are prompted: "Are you sure you want to delete the following table entry?" Click Yes.
        6. Click Finish.

      • Create a new user defined table from a standard table

        1. Enter a table Description.
        2. Select a Category:
           • Stand Alone Forms
           • Global
        3. Select a Sort Order:
           • Ascending by Code
           • Ascending by Description
           • Descending by Code
           • Descending by Description
           • As Entered
        4. Click the Yes or No radio button to indicate whether or not blank table spaces are valid.
        5. Click on the desired version in the Versions list.
        6. Click on the desired table in the Tables list.
        7. Click Next.
        8. Add or delete table entries as necessary.
           
           To add an entry, click the Add link label. Enter a Code (a shortened version of the option) and Description (the text the user will see in the combo box) and click OK.
           
           To delete an entry, click on the appropriate entry in the list and click the Delete link label. You are prompted: "Are you sure you want to delete the following table entry?" Click Yes.
        9. Click Finish.

      • Create a new user defined table defaulting from an existing user defined table

        1. Enter a table Description.
        2. Select a Category:
           • Stand Alone Forms
           • Global
        3. Select a Sort Order:
           • Ascending by Code
           • Ascending by Description
           • Descending by Code
           • Descending by Description
           • As Entered
        4. Click the Yes or No radio button to indicate whether or not blank table spaces are valid.
        5. Click on the desired category in the Categories list.
        6. Click on the desired table in the Tables list.
        7. Click the checkbox for the default selection if applicable.
        8. Click Next.
        9. Add or delete table entries as necessary.
           
           To add an entry, click the Add link label. Enter a Code (a shortened version of the option) and Description (the text the user will see in the combo box) and click OK.
           
           To delete an entry, click on the appropriate entry in the list and click the Delete link label. You are prompted: "Are you sure you want to delete the following table entry?" Click Yes.
        10. Click Finish.

  • Layout

  • • Location: Gives the X and Y axis location of the selected item. Change these numbers to move the item, or drag the item on the screen manually.

    • • X: This is the X axis location of the selected item. Change this number to move the item left or right, or drag the item on the screen manually.

      • Y: This is the Y axis location of the selected item. Change this number to move the item up or down, or drag the item on the screen manually.

  • Size: Gives the length and width in pixels of the selected item. Change these numbers to resize the item, or drag the handles on the item on the screen to resize it manually.

  • • Width: This is the width of the selected item. Change this number to change the item's width, or drag the handles on the item on the screen to resize it manually.

    • Height: This is the height of the selected item. Change this number to change the item's width, or drag the handles on the item on the screen to resize it manually.

To resize an item, click on it and drag the edges of the box surrounding it, or click on the on-screen item and use the Size, Width, and Height fields in the properties area.

Options

• Add a Label to an Item
  1. Drag Label to the desired area on the canvas.
  2. Double click in the Text field in the Properties area.

  

  4. Enter the new text.
  5. To choose a new font style, click the down arrow to the right of the Style field and make a selection:
     • Normal
     • Subtitle
     • Title
• Add a Combo Box
  1. Drag ComboBox to the desired area on the canvas.
  2. In the Properties area, click in the Content field to activate the ellipsis button.

  

  3. Click the ellipsis button.
  4. Make a selection in the Select Table Type pop-up window:
     • Use a standard table
       1. Choose a Sort Order.
       2. Click a radio button to specify whether or not blanks will be valid.
       3. Click to highlight the desired Version, Table, and Code/Description.
       4. Click Finish.
     • Use an existing user defined table
       1. Click to highlight the desired Category and Table.
       2. Select the checkbox for the selection that should default in if applicable.
       3. Click Next.
       4. Enter a Description for the combo box list.
       5. Choose a Sort Order.
       6. Click a radio button to specify whether or not blanks will be valid.
       7. To add an item to the dropdown list, click Add, enter a Code and Description, and click OK.
          
          To remove an item from the dropdown list, click on the item and then click Delete. Click Yes to confirm that you wish to delete the selected item.
       8. Click Finish.
     • Create a new user defined table with no defaulting
       1. Enter a Description for the combo box list.
       2. Select a Category.
       3. Choose a Sort Order.
       4. Click a radio button to specify whether or not blanks will be valid.
       5. To add an item to the dropdown list, click Add, enter a Code and Description, and click OK.
          
          To remove an item from the dropdown list, click on the item and then click Delete. Click Yes to confirm that you wish to delete the selected item.
       6. Click Finish.
     • Create a new user defined table defaulting from a standard table
       1. Enter a Description.
       2. Select a Category.
       3. Choose a Sort Order.
       4. Click a radio button to specify whether or not blanks will be valid.
       5. Click to highlight the desired Version, Table, and Code/Description.
       6. Click Finish.
     • Create a new user defined table defaulting from an existing user defined table
       1. Enter a Description.
       2. Select a Category.
       3. Choose a Sort Order.
       4. Click a radio button to specify whether or not blanks will be valid.
       5. Click to highlight the desired Version, Table, and Code/Description.
       6. Select the checkbox beside the item that should default into the combo box.
       7. Click Next.
       8. Enter a Description for the combo box list.
       9. Select a Category.
       10. Choose a Sort Order.
       11. Click a radio button to specify whether or not blanks will be valid.
       12. To add an item to the dropdown list, click Add, enter a Code and Description, and click OK.
           
           To remove an item from the dropdown list, click on the item and then click Delete. Click Yes to confirm that you wish to delete the selected item.
       13. Click Finish.
• Add a Text Box
  1. Drag Label to the desired area on the canvas.
  2. Double click in the PromptText field in the Properties area. Type a brief description of the information that should be entered in the field.

  

  3. Click in the DataType field. Click the down arrow and make the appropriate selection in the dropdown list.
  4. Double click in the MaxLength field in the Properties area. Enter the maximum number of characters allowed in the field.
• Change the Font Alignment Within a Field on the Canvas
  1. Click on the item in question on the canvas.
  2. Click in the HorizontalAlignment field of the Properties area and click the Down arrow button.

  

  3. Select the desired alignment:
     • Left
     • Center
     • Right
• Place a Box Around Related Control Items
  1. Drag Logo to the desired area on the canvas.
  2. Resize the box manually using the handles around the image, or enter the correct Width and Height in the Properties area.
• Place an Item on the Canvas

  There are two options:

  • Drag the desired item to the correct part of the canvas.
  •  Set the X and Y coordinates of the item.

    Note: X and Y Coordinates are specified for the upper left corner of the selected item.

    1. 1. Click the plus sign next to Location in the Properties area.
       2. Double click in the X field and enter the desired location.
       3. Double click in the Height field and enter the desired location.
• Remove an Item from the Canvas
  1. Right click on the item you want to remove.
  2. Select Delete.
• Resize an Item
  1. Click on the item you would like to resize on the canvas.
  2. There are two options:
     • Resize the object manually.
       1. The selected item is surrounded by small squares. Click on a square and drag it to change the highlighted object's size.
     • Specify the height and width in pixels.
       1. Click the plus sign next to Size in the Properties area.
       2. Double click in the Width field and enter the desired width in pixels.
       3. Double click in the Height field and enter the desired height in pixels.
• Set Column Headings for Schedule Screens

  Click the item on the screen that identifies the data to populate under a column heading, and then enter the appropriate text in the Column Heading box of the Schedule Item area. This specifies the column heading that will display, with the data populated to this field listed below it.

  Enter the appropriate Column Number in the next box. Columns display in numerical order from left to right in the schedule.

• Set the Tab Order for the Screen

  For each field on the screen, enter the appropriate number in the TabOrder box of the Properties area. Pressing the [Tab] key on this screen will move the cursor in the order specified here.

  OR do the following:

  1. Click Options, Tab Order, Set.
  2. Click on the fields on the canvas in the correct tab order.
  3. Click Options, Tab Order, Exit.
• Set the Window Size
  1. Click on any blank area on the canvas. Page properties display in the Properties area.

  

  2. Enter the correct Width and Height in the Properties area.

To exit the Screen Generator, click File, Exit or click the "X" in the upper right corner of the window. Click File, Exit a second time to save changes for the Screen Generator session.

Back at the Custom Form screen, click Finish to ensure that the changes are updated for the custom form, or click Cancel to undo any changes made during the editing session for the selected custom form.

Copying, Cutting, and Pasting

To copy or cut an item on the screen, right click on the control and select Copy or Cut.

To paste an item from the screen, right click on the part of the screen where the object should be pasted and select Paste.

Moving an Object

Click on the object to highlight it. Do one of the following:

• Click the edge of the object, hold the mouse button down, and drag the object to the desired area.
• Right click the object and select Move. Hold the mouse button down, and drag the object to the desired area.