Smart Client UI Designer

Configuration

UI Designer Procedures

These procedures are ordered from easiest, most common tasks to more difficult and less‐common tasks. A simplified version of the UI Designer workspace is used for clarity. A large green arrow appears in some illustrations to identify significant elements.

Only the buttons required for the task are explained. You can hover over each button to view its purpose.

When you make a change to a screen customization, you must refresh the cache to activate your changes.

Delete Screen Elements

Delete a field

  1. Click a field in the column you want to delete. Frames and tool buttons appear.
    In this example, the field Label A is deleted, and the fields Label D and Label G move up.
  2. Click the delete button associated with the tab, which is on the left side of the tab. The tab is deleted and the remaining tabs move left.
    In this example, the first tab is deleted.
  3. Click Add.
  4. When you are done linking, click OK.

Delete a panel on a tab

  1. Click a field in the panel you want to delete. Frames and tool buttons appear.
    In this example, the Label M field is selected.
  2. Click the delete button associated with the panel, which is on the left side of the panel. The panel is deleted and the remaining information moves up.
    In this example, the listview panel is deleted.
  3. Click Add.
  4. When you are done linking, click OK.

Delete a button

  1. Click a field in the panel you want to delete. Frames and tool buttons appear.
    In this example, the Delete button is selected.
  2. Click the delete button button associated with the button, which is below the button. The button is deleted and the remaining buttons move left.
    In this example, the Delete button is deleted.
  3. Click Add.
  4. When you are done linking, click OK.

Move Screen Elements

Move a column within a panel

  1. Click a field in the column you want to move. Frames and tool buttons appear.
    In this example, the Label A field is selected.
  2. Click the delete button button associated with the button, which is below the button. The button is deleted and the remaining buttons move left.
    In this example, the Delete button is deleted.
  3. Do one of the following:
    • Click the column left button to move the column left.
    • Click the column right button to move the column right.
    The column you selected moves and the adjacent column takes its place. In this example, the first column was moved to the right.
  4. When you are done linking, click OK.

Move a field within a column

  1. Click a field in the column you want to move. Frames and tool buttons appear.
    In this example, the Label A field is selected.
  2. Do one of the following:
    • Click the field up button to move the field up.
    • Click the field down button to move the field down.
    The field you selected moves and the adjacent field takes its place.
    In this example, the field Label A moves down.
  3. Do one of the following:
    • Click the column left button to move the column left.
    • Click the column right button to move the column right.
    The column you selected moves and the adjacent column takes its place. In this example, the first column was moved to the right.
  4. When you are done linking, click OK.

Move a field to another column

  1. Click the field you want to move. Framesand tool buttons appear.
    In this example, the Label A field is selected
  2. Click and hold the field you want to move and drag it to where you want it to appear.
    In this example, the field label appears grey where you plan to drop the field, between fields Label B and Label H
  3. Release the mouse button. The field relocates to its new location

Move a button

  1. Click the button you want to move. Frames and tool buttons appear. In this example, the Delete button is selected.
    In this example, the Label A field is selected
  2. Click the arrow for the button you want to move.
    In this example, the Delete button is moved to the right.
  3. Release the mouse button. The field relocates to its new location

Add Screen Elements

Add custom metadata to a user-defined field

Usually you use the provided user‐defined fields for your own purposes. This procedure also applies to columns on custom tables. As you update custom metadata for your own purposes, refer often to the FSM Metadata screen.

  1. Access the Custom Metadata screen.
  2. Perform a search for your primary table. If no custom metadata appears, do the following:
    • Click the link to create a new record.
    • In the Table field, enter the appropriate table name. For example, the primary table for fields you add to the header, or a child table name for fields you add to a listview.
  3. For each column (field) to which you want to apply custom metadata, do the following:
    • Verify the Column Def tab is selected.
    • In the Columns area, click New.
    • In the Column Name field, enter the name of the column (field).
    • If you want a default value to appear in the field when a new record is created, in the Default Value field, enter that value.
    • If you want to require an entry into the field, select the Is Required  option.
    • If you want the field to always be read only (cannot be entered or changed by the user) on every screen, select the Is Read Only option.
    • If you want to assign a different field label or description for this field, enter the appropriate message IDs in the Description Message ID and Label Message ID fields.
      For more information about creating custom messages, see “Messages” in the IFS Field Service Maintenance Reference Guide.

Add a lookup, or validation, to a user-defined field

  1. In the Columns area, select the column to which you want to add a lookup.
  2. In the Lookups area, click New.
  3. In the Sequence field, enter a sequence number.
  4. In the Lookup Tab Name field, enter the name of the table that contains the data you want to look up.
  5. In the Lookup Col Name field, enter the name of the column that contains the data you want to look up.
  6. If you want to validate entered data with another table or tables, do the following:
    • In the Validate Col Name field, enter the column on the table that you want to validate.
    • If you want only certain values to be validated, in the In the Validate Constant field, enter the valid value.
      Multiple lines can be entered to validate multiple columns at once or to validate with a code table.

Add user-defined fields to the screen

  1. In the toolbar, click Add Screen Fields.This button appears grey until you hover over it. The Add Screen Fields window appears.
  2. On the unlabeled list, select the table whose fields you want to add to the screen. Only tables appear for which you have defined relationships.
  3. Select a field you want to add to the screen. Drag it from the Add Screen Fields window to the appropriate location on the screen. You can add fields to the search pane, results pane, workspace header, or one of the tabs.
    In this example, the field label appears grey where you plan to drop the field, between fields Label B and Label H.
  4. Release the mouse button. The field relocates to its new location.
  5. Click Save ..

Add an expander to a listview

  1. Click a field in the listview you want to add the expander to. Frames and tool buttons appear.
    In this example, the Label M field is selected.
  2. Click Add Listview Expander

Add buttons to a screen

  1. Click any button to select the button frame.
  2. Click Add New Button
  3. On the menu that appears, select the type of button to add. The new button appears to the right of existing buttons.
  4. In the properties pane, enter the appropriate values for label or label message ID.
  5. If you added a blank button, right‐click the button, select Assign Button as, and then select the appropriate value.
  6. To move the button, click the appropriate arrows.

Create a Screen

Create a table alias

If you want to reference the primary table on the header and on one or more tabs, do the following.

  1. Access the Custom Metadata screen of Studio.
  2. Click New.
  3. In the Table Name field, enter the name of your table alias.
  4. In the Alias of Table Name field, enter the name of the table you are aliasing.
  5. Fill the rest of the fields in the header as appropriate.
  6. Click Save.

Create a table alias

  1. Access the User Interface screen of Studio.
  2. In the toolbar, click Add Screen .This button appears grey until you hover over it..
  3. On the Create New Screen window, do the following:
    • On the Choose Primary Table list, select the primary table for your screen.
    • On the Choose Screen Pattern list, select the screen pattern for your screen.
    • In the Choose Screen Name field, enter the name of your screen. This name is used to identify your screen within Studio. It is not used as the screen title nor menu item.
    • Click Next .
  4. On the toolbar, click Save . Your screen is saved.
  5. On the Screen Explorer, click the purple multi‐mode button until Custom Screen List appears and select the screen you just saved.

Create child table relationships and a new tab

If you want to add a tab and reference an existing table, skip to step 8. You enter new information on the plus line.

  1. Click Edit Child Relations . This button appears grey until you hover over it.
  2. In the Relation Defs area, do the following for each relationship:
    •  On the Parent Table list, select the parent of the relationship.
    •  On the Related Table list, select the child of the relationship.
    •  If you want to link another child to the table specified in the Related Table field, on the Linked Table list, select the “grandchild” of the relationship.
  3. In the Relation Maps area, do the following for each relationship:
    • Select a relationship in the Relation Defs area.
    • For the table defaulted in the Primary Table field, on the Primary Column list, select the column you want to use to link the tables.
    • For the table defaulted in the Related Table field, on the Related Column list, select the column you want to use to link the tables.
  4. If you want to constrain the relationship, in the Relation Constraints area, do the following:
    • Select a relationship in the Relation Defs area.
    • Select a relationship map in the Relation Maps area.
    • In the Related Field Name field, enter the column you want to constrain.
    • On the Operator list, select the appropriate operator.
    • In the Value field, enter the constraint value.
  5. If you want a child table sorted by a value other than key values, do the following:
    • Select a relationship in the Relation Defs area.
    • Select a relationship map in the Relation Maps area.
    • In the Order Bys area, on the Order By list, select whether you want to sort ascending or descending.
    • In the Name field, enter the full name in table. Column format.
  6. In the search pane, select the appropriate number of columns. We recommend you select one column.
  7. In the workspace header, select the appropriate number of columns. For up to ten fields, we recommend two columns; for more than ten fields, we recommend three columns.
  8. In the tab area, do one of the following:
    • If you want to add a list of child table records organized in columns, click Listview.
    • If you want to add more fields from the primary table, click Item Panel.
    • If you want to add sub‐tabs, click TabControl.

Add a screen to a menu

  1. Access the Menu Definitions screen of Studio.
  2. Do one of the following:
    • Search for an override for the menu you want to add the screen to.
    • Click New to create a new menu override and, in the Menu ID field, enter the name of the menu you want to add the screen to.
  3. In the header, enter any overrides you want to apply to the menu as a whole.
  4. On the Menu Functions Def tab, click New.
  5. On the Function ID list, select the function ID that corresponds to your new screen.
  6. In the Sequence field, enter the sequence in which you want the screen to appear on the menu. If you specify the same sequence as another menu item, they appear alphabetically.
  7. Do one of the following:
    • In the Label Message ID field, enter the message ID for the screen label.
    • In the Label field, enter the screen label.
  8. Do one of the following:
    • In the Description Message ID field, enter the message ID for the screen description.
    • In the Description field, enter the screen description.
  9. If you want your screen disabled by default and only enabled by role, select Disabled.

Link Events to Client Scripts

Link to screen events

  1. In the toolbar, click View Screen Events. The screen events window appears. This window is separated into types of events that can be linked.
  2. For the type of event you want to add, select the Event Name and Client Script ID values you want to associate with each other.
  3. Click Add.
  4. When you are done linking, click OK.

Link to other events

  1. Select the item to which you want to link events and scripts:
    • Listview
    • Field
    • Button
  2. Right‐click the item and select Custom Code.
  3. On the Event list, select the event you want to link.
  4. On the Client Script ID list, select the script you want to link.
  5. Click Add.
  6. When you are done linking, click OK.