Solution Designer has been deprecated in favor of Opus Solution Environment (OSE).

Design experiences

Solutions can supply an application's user experience, which is made up of tasks, screens, and components. Companies can customize the user experience for an app to change the data that displays in a table or chart, modify the display labels on forms, add or remove form fields, or make various other modifications to the component display and behavior.

See the Anthem Design Guide for information on designing experiences with TraceLink's anthem design system.

Select tasks for the solution

Tasks are one of the assets that solutions use, which means that they are added independently of a solution and can be reused across many solutions. Select tasks for the solution to determine which tasks the solution uses.

Tasks—with their associated screens and components—can be shared across solutions at the environment level, even if the solutions are for different apps. For example, Task X can be used by both Solution A and Solution B, even if Solution A and Solution B are for different apps.

  1. Select Customize in the side menu.
  2. Select Solutions.
  3. Select the Application with the solutions to view.
  4. Select the Action icon for the solution on the Installed Solutions tab.
  5. Select Edit.
  6. Select Experience.

    Select Show Studios if the Experience tab does not display.

    • Task Name – The name for the task.
    • Task Route – The relative URL for the task (e.g. '/solution_name/task_name').
    • Task Display Label – The label for the task that displays in the side menu.
    • Task Description – The description of the task.
    • No. of screens – The number of screens connected to the task.

  7. Select the Add Task icon.

  8. Fill in the following fields: 

    1. Task Name field – Required. The name for the task, which must be unique across all tasks for the app in the environment.

    2. Task Label field – Required. The label for the task that displays in the side menu.

    3. Description field – The description for the task.

    4. Navigation Category drop-down – Required. The category in the side menu that the task label displays under:

      • DO

      • SHARE 

      • LEARN 

      • OPERATE 

      • CUSTOMIZE 

      • ADMINISTRATION

    5. Visibility Condition field – The visibility condition that determines when the task displays.

    6. Help Link field – The URL that launches when users select the Help icon in the task.

  9. Select Add.

    The new task is added and includes a blank screen set as the home screen by default.

  10. Add UI components to the task screen or add new screens to the task (optional).

  1. Select Customize in the side menu.
  2. Select Solutions.
  3. Select the Application with the solutions to view.
  4. Select the Action icon for the solution on the Installed Solutions tab.
  5. Select Edit.
  6. Select Experience.

    Select Show Studios if the Experience tab does not display.

    • Task Name – The name for the task.
    • Task Route – The relative URL for the task (e.g. '/solution_name/task_name').
    • Task Display Label – The label for the task that displays in the side menu.
    • Task Description – The description of the task.
    • No. of screens – The number of screens connected to the task.
  7. Select the Connect Task icon to view all tasks available for the app in the environment, except for the tasks that the solution is currently using.
    The Connect Task icon displays only if there are available tasks.
  8. Select the tasks to use in the solution.
  9. Select Connect.

    The solution uses the selected tasks.

    When the solution is applied to an app, the tasks become visible to users in the side menu.

Tips: 

  1. Select Customize in the side menu.
  2. Select Solutions.
  3. Select the Application with the solutions to view.
  4. Select the Action icon for the solution on the Installed Solutions tab.
  5. Select Edit.
  6. Select Experience.

    Select Show Studios if the Experience tab does not display.

    • Task Name – The name for the task.
    • Task Route – The relative URL for the task (e.g. '/solution_name/task_name').
    • Task Display Label – The label for the task that displays in the side menu.
    • Task Description – The description of the task.
    • No. of screens – The number of screens connected to the task.
  7. Select the Action icon for the task to copy.
  8. Select Copy.

  9. Fill in the following fields in the Copy Task panel: 

    1. Task Name field – Required. The name for the task, which must be unique across all tasks for the app in the environment.

    2. Task Label field – Required. The label for the task that displays in the side menu.

    3. Description field – The description for the task.

    4. Navigation Category drop-down – Required. The category in the side menu that the task label displays under:

      • DO

      • SHARE 

      • LEARN 

      • OPERATE 

      • CUSTOMIZE 

      • ADMINISTRATION

    5. Visibility Condition field – The visibility condition that determines when the task displays.

    6. Help Link field – The URL that launches when users select the Help icon in the task.

  10. Select Add.
    The new task is added and includes a blank screen set as the home screen by default.
  11. If necessary, design the layout of the blank screen and add new screens to the task.
  1. Select Customize in the side menu.
  2. Select Solutions.
  3. Select the Application with the solutions to view.
  4. Select the Action icon for the solution on the Installed Solutions tab.
  5. Select Edit.
  6. Select Experience.

    Select Show Studios if the Experience tab does not display.

    • Task Name – The name for the task.
    • Task Route – The relative URL for the task (e.g. '/solution_name/task_name').
    • Task Display Label – The label for the task that displays in the side menu.
    • Task Description – The description of the task.
    • No. of screens – The number of screens connected to the task.
  7. Select the Action icon for the task to disconnect.

  8. Select Modify Task Properties.

  9. Fill in the following fields in the Modify Task Properties panel: 

    1. Task Name field – Required. The name for the task, which must be unique across all tasks for the app in the environment.

    2. Task Label field – Required. The label for the task that displays in the side menu.

    3. Description field – The description for the task.

    4. Navigation Category drop-down – Required. The category in the side menu that the task label displays under:

      • DO

      • SHARE 

      • LEARN 

      • OPERATE 

      • CUSTOMIZE 

      • ADMINISTRATION

    5. Visibility Condition field – The visibility condition that determines when the task displays.

    6. Help Link field – The URL that launches when users select the Help icon in the task.

  10. Select Save.
  1. Select Customize in the side menu.
  2. Select Solutions.
  3. Select the Application with the solutions to view.
  4. Select the Action icon for the solution on the Installed Solutions tab.
  5. Select Edit.
  6. Select Experience.

    Select Show Studios if the Experience tab does not display.

    • Task Name – The name for the task.
    • Task Route – The relative URL for the task (e.g. '/solution_name/task_name').
    • Task Display Label – The label for the task that displays in the side menu.
    • Task Description – The description of the task.
    • No. of screens – The number of screens connected to the task.
  7. Select the Action icon for the task to disconnect from the solution.

  8. Select Disconnect From Solution.

  9. Select Disconnect in the confirmation dialog.

    The task is disconnected from the solution but can be re-connected to use in the solution.

Remove a task when it is no longer needed.

Once removed, the task (including its screens and all configured components linked to the screens) is no longer available and cannot be recovered.
  1. Select Customize in the side menu.
  2. Select Solutions.
  3. Select the Application with the solutions to view.
  4. Select the Action icon for the solution on the Installed Solutions tab.
  5. Select Edit.
  6. Select Experience.

    Select Show Studios if the Experience tab does not display.

    • Task Name – The name for the task.
    • Task Route – The relative URL for the task (e.g. '/solution_name/task_name').
    • Task Display Label – The label for the task that displays in the side menu.
    • Task Description – The description of the task.
    • No. of screens – The number of screens connected to the task.
  7. Select the Action icon for the task to remove.

  8. Select Remove.

  9. Select Remove in the confirmation dialog.
    The task and all of its screens are removed completely and cannot be recovered.

Select screens for the task

  1. Select Customize in the side menu.
  2. Select Solutions.
  3. Select the Application with the solutions to view.
  4. Select the Action icon for the solution on the Installed Solutions tab.
  5. Select Edit.
  6. Select Experience.

    Select Show Studios if the Experience tab does not display.

    • Task Name – The name for the task.
    • Task Route – The relative URL for the task (e.g. '/solution_name/task_name').
    • Task Display Label – The label for the task that displays in the side menu.
    • Task Description – The description of the task.
    • No. of screens – The number of screens connected to the task.
  7. Select the Action icon for the task that contains the screen.
  8. Select Edit.
  9. Select the Add Screen icon.
  10. Fill in the following fields:
    1. Screen Name field – Required. The name of the new screen. The name cannot already exist in the environment.
    2. Screen Route field – Required. The relative URL for the new screen (e.g. '/solution_name/parent_screen/your_new_screen'). The route cannot already exist in the environment.
    3. Description field – The description of the new screen.
    4. Screen Type drop-down – Required. The screen type for the new screen: 
      • Standard – The new screen is a standard screen. Standard screens fill the entire content area.
      • Overlay Panel – The new screen is an overlay panel. Panels display on top of a standard screen and are located on the right.
      • Overlay Dialog – The new screen is an overlay dialog. Dialogs display on top of a standard screen and are located in the center.
      For more information on how to choose a screen type, see Screen layouts in the Anthem Design Guide.
    5. Width field – Displays only if the Screen Type is Overlay Panel or Overlay Dialog. The custom width of the new overlay panel or dialog.
    6. Height field – Displays only if the Screen Type is Overlay Panel or Overlay Dialog. The custom height of the new overlay panel or dialog.
    7. Background Color field – The custom background color for the new screen.
    8. Screen Title field – Displays only if the Screen Type is Overlay Dialog. The title for the new overlay dialog. This title displays at the top of the dialog screen.
  11. Select Add.

    The new screen is added to the task.

  1. Select Customize in the side menu.
  2. Select Solutions.
  3. Select the Application with the solutions to view.
  4. Select the Action icon for the solution on the Installed Solutions tab.
  5. Select Edit.
  6. Select Experience.

    Select Show Studios if the Experience tab does not display.

    • Task Name – The name for the task.
    • Task Route – The relative URL for the task (e.g. '/solution_name/task_name').
    • Task Display Label – The label for the task that displays in the side menu.
    • Task Description – The description of the task.
    • No. of screens – The number of screens connected to the task.
  7. Select the Action icon for the task that contains the screen.
  8. Select Edit.
  9. Select the Action icon for the screen.
  10. Select Copy.
  11. Fill in the following fields in the Copy Screen panel:
    1. Screen Name field – Required. The name of the new screen. The name cannot already exist in the environment.
    2. Screen Route field – Required. The relative URL for the new screen (e.g. '/solution_name/parent_screen/your_new_screen'). The route cannot already exist in the environment.
    3. Description field – The description of the new screen.
    4. Screen Type drop-down – Required. The screen type for the new screen: 
      • Standard – The new screen is a standard screen. Standard screens fill the entire content area.
      • Overlay Panel – The new screen is an overlay panel. Panels display on top of a standard screen and are located on the right.
      • Overlay Dialog – The new screen is an overlay dialog. Dialogs display on top of a standard screen and are located in the center.
      For more information on how to choose a screen type, see Screen layouts in the Anthem Design Guide.
    5. Width field – Displays only if the Screen Type is Overlay Panel or Overlay Dialog. The custom width of the new overlay panel or dialog.
    6. Height field – Displays only if the Screen Type is Overlay Panel or Overlay Dialog. The custom height of the new overlay panel or dialog.
    7. Background Color field – The custom background color for the new screen.
    8. Screen Title field – Displays only if the Screen Type is Overlay Dialog. The title for the new overlay dialog. This title displays at the top of the dialog screen.
  12. Select Add.

    The new screen is added to the task and contains copies of the components from the original screen.

  1. Select Customize in the side menu.
  2. Select Solutions.
  3. Select the Application with the solutions to view.
  4. Select the Action icon for the solution on the Installed Solutions tab.
  5. Select Edit.
  6. Select Experience.

    Select Show Studios if the Experience tab does not display.

    • Task Name – The name for the task.
    • Task Route – The relative URL for the task (e.g. '/solution_name/task_name').
    • Task Display Label – The label for the task that displays in the side menu.
    • Task Description – The description of the task.
    • No. of screens – The number of screens connected to the task.
  7. Select the Action icon for the task that contains the screen.
  8. Select Edit.
  9. Select the Action icon for the screen.
  10. Select Modify Screen Properties.
  11. Fill out the following fields:
    1. Screen Name field – Required. The name of the screen. The name cannot already exist in the environment.
    2. Screen Route field – Required. The relative URL for the screen (e.g. '/solution_name/parent_screen/your_new_screen'). The route cannot already exist in the environment.
    3. Description field – The description of the screen.
    4. Screen Type drop-down – Required. The screen type for the screen: 
      • Standard – The screen is a standard screen. Standard screens fill the entire content area.
      • Overlay Panel – The screen is an overlay panel. Panels display on top of a standard screen and are located on the right.
      • Overlay Dialog – The screen is an overlay dialog. Dialogs display on top of a standard screen and are located in the center.
      For more information on how to choose a screen type, see Screen layouts in the Anthem Design Guide.
    5. Width field – Displays only if the Screen Type is Overlay Panel or Overlay Dialog. The custom width of the overlay panel or dialog.
    6. Height field – Displays only if the Screen Type is Overlay Panel or Overlay Dialog. The custom height of the overlay panel or dialog.
    7. Background Color field – The custom background color for the screen.
    8. Screen Title field – Displays only if the Screen Type is Overlay Dialog. The title for the overlay dialog. This title displays at the top of the dialog screen.

  12. Select Save.

Every task has a home screen, which acts as the landing page when a user selects the task. There can only be one screen designated as the home screen.

  1. Select Customize in the side menu.
  2. Select Solutions.
  3. Select the Application with the solutions to view.
  4. Select the Action icon for the solution on the Installed Solutions tab.
  5. Select Edit.
  6. Select Experience.

    Select Show Studios if the Experience tab does not display.

  7. Select the Action icon for the task that contains the screen.
  8. Select Edit.
    The Home Screen icon displays in the Home Screen column to indicate which screen is currently set as the home screen for the task.

  9. Select the Action icon for the screen to set as the new home screen.

  10. Select Set as Home Screen.

    The Home Screen column updates to indicate the new screen is set as the home screen for the task.

  1. Select Customize in the side menu.
  2. Select Solutions.
  3. Select the Application with the solutions to view.
  4. Select the Action icon for the solution on the Installed Solutions tab.
  5. Select Edit.
  6. Select Experience.

    Select Show Studios if the Experience tab does not display.

  7. Select the Action icon for the task that contains the screen.
  8. Select Edit.
  9. Select the Action icon for the screen.
  10. Select Remove.
  11. Select Remove in the confirmation dialog.
    The screen is removed from the task completely and cannot be recovered.

Design screens with components

Screens contain components, which render objects in the UI (e.g. tables and charts). Solution Developers use the What You See Is What You Get (WYSIWYG) Editor to view and modify the layout of components on the screen and to customize the behavior of a component by configuring its properties and events.

See the Anthem Design Guide for the customizations available for each component.
  1. Select Customize in the side menu.
  2. Select Solutions.
  3. Select the Application with the solutions to view.
  4. Select the Action icon for the solution on the Installed Solutions tab.
  5. Select Edit.
  6. Select Experience.

    Select Show Studios if the Experience tab does not display.

  7. Select the Action icon for the task that contains the screen.
  8. Select Edit.
  9. Select the Action icon for the screen that contains the UI components.
  10. Select Edit.
  11. The screen layout displays. Components display as cards on the screen.

Tips:

  1. Select Customize in the side menu.
  2. Select Solutions.
  3. Select the Application with the solutions to view.
  4. Select the Action icon for the solution on the Installed Solutions tab.
  5. Select Edit.
  6. Select Experience.

    Select Show Studios if the Experience tab does not display.

  7. Select the Action icon for the task that contains the screen.
  8. Select Edit.
  9. Select the Action icon for the screen that contains the UI components.
  10. Select Edit.
  11. Select the Add Component icon.
  12. Select the component to add to the screen in the Add Component panel.

    Enter a Keyword to search for a specific component.

  13. Select Add.
    The selected component is added to the bottom of the screen (i.e. the next available empty row on the screen below any other existing components).

Tips: 

  1. Select Customize in the side menu.
  2. Select Solutions.
  3. Select the Application with the solutions to view.
  4. Select the Action icon for the solution on the Installed Solutions tab.
  5. Select Edit.
  6. Select Experience.

    Select Show Studios if the Experience tab does not display.

  7. Select the Action icon for the task that contains the screen.
  8. Select Edit.
  9. Select the Action icon for the screen that contains the UI components.
  10. Select Edit.
  11. Select the component in the screen layout to modify.
  12. Select the Edit Layout icon.
  13. Update the Position field with the new position by specifying the row and the starting and ending column numbers (for example, 'r.0.c.0:12' positions the component at row 0 and spans columns 0-12).

    See the Grid in the Anthem Design Guide for more information on using the grid row and columns when designing a screen.

  14. Select Save.
    The component is repositioned on the screen.
  1. Select Customize in the side menu.
  2. Select Solutions.
  3. Select the Application with the solutions to view.
  4. Select the Action icon for the solution on the Installed Solutions tab.
  5. Select Edit.
  6. Select Experience.

    Select Show Studios if the Experience tab does not display.

  7. Select the Action icon for the task that contains the screen.
  8. Select Edit.
  9. Select the Action icon for the screen that contains the UI components.
  10. Select Edit.
  11. Select the component in the screen layout to copy.
  12. Select the Copy icon.
  13. Click Copy in the confirmation dialog.
    The new component is added to the bottom of the screen (i.e. the next available empty row on the screen below any other existing components) and has the same configured properties as the original.

Tips:

Modify the component's properties.

  1. Select Customize in the side menu.
  2. Select Solutions.
  3. Select the Application with the solutions to view.
  4. Select the Action icon for the solution on the Installed Solutions tab.
  5. Select Edit.
  6. Select Experience.

    Select Show Studios if the Experience tab does not display.

  7. Select the Action icon for the task that contains the screen.
  8. Select Edit.
  9. Select the Action icon for the screen that contains the UI components.
  10. Select Edit.
  11. Select the component in the screen layout to configure.
  12. Select the Configure icon.
  13. Configure the component's specific Properties, which determine data that the component displays, how that data displays, which actions users can take within the component, the visual aspects of the component, and the behavior of the component. See Components in the Anthem Design Guide for the properties specific to each component.
  14. Fill in the following fields to configure the component's Published Events, which allow the component to prompt functions in other components on the screen or within the component itself:
    • Event Name field – The name, created by the Solution Developer, of the individual sent event.
    • Emitted Event – Each component has a pre-defined set of emitted events, which are actions taken by a user or another component. These emitted events prompt additional actions in the component or another component configured to listen for that event. See Components in the Anthem Design Guide for the emitted events specific to each component.
    • Function drop-down – The function available within the component that the event calls, if needed. See Components in the Anthem Design Guide for the functions specific to each component.
    • Custom Script field – Conditionally required if a Function is not specified. The JavaScript code that determines the resulting action when the Emitted Event occurs, which can build on the Function specified to achieve more complex functionality.
    Tips:
    • Select Add Item to add another row with the Event Name, Emitted Event, Function, and Custom Script fields.
    • Use the arrow icons to rearrange the order of the events.
  15. Fill in the following fields to configure the component's Subscribed Events, which allow the component to receive events that prompt functions in other components on the screen or within the component itself:
    • Event Name field – The name of the individual received event created by the Solution Developer, which must match the corresponding sent event in the component that prompts the actions specified in the Function or Custom Script.
    • Function drop-down – The function available within the component that the event to calls, which must match the corresponding sent event (required if a Function is specified in the corresponding sent event). See Components in the Anthem Design Guide for the functions specific to each component.
    • Custom Script field – Conditionally required if a Function is not specified. The JavaScript code that determines the resulting action when the component receives the event, which can build on the Function specified to achieve more complex functionality.
  16. Select Save.

    The component configuration is saved.

  1. Select Customize in the side menu.
  2. Select Solutions.
  3. Select the Application with the solutions to view.
  4. Select the Action icon for the solution on the Installed Solutions tab.
  5. Select Edit.
  6. Select Experience.

    Select Show Studios if the Experience tab does not display.

  7. Select the Action icon for the task that contains the screen.
  8. Select Edit.
  9. Select the Action icon for the screen that contains the UI components.
  10. Select Edit.
  11. Select the component in the screen layout to remove.
  12. Select the Remove icon.
  13. Click Remove in the confirmation dialog.
    The component is removed from the screen.