CT Layouts Editor: Customize Tabs

The CT Layouts Editor opens when the administrator clicks the Builder button on the desired Layout Settings record and is used to set up tabs on the screen for the specified object.

In this article, take a look at the layout editor and the available settings for tabs:

Tab and Path Modes

The record screen may be presented in the Tab or Path mode.

Tab Mode

The Tab mode is suitable for a more advanced presentation of information separated and distributed to individual tabs.

  • The mobile user navigates through the tabs on the record screen in any order to review data and fill in the required information.

  • The administrator cannot customize the color and icon of the tab header, set statuses for each tab, or use global tab actions.

Path Mode

The Path mode is suitable for running scenarios.

  • The mobile user sequentially navigates through tabs on the record screen and works with the presented records.

  • The administrator can set the color and icon of the tab header, add buttons with a set of actions, and set statuses that will change during the scenario.

  • The administrator can allow users to switch between tabs outside the specified sequence. So, the user can navigate among tabs and return to the current one in the scenario by tapping the Return button without changing the visited tab status.

Editor Overview: Tabs

The first step is to select the Tab or Path mode, specify the required number of tabs, and set up general settings for each tab.

Main Screen

  • In the header, the Name of the current object record type is displayed, for example, Visit Steps.

    • Click the Settings button to set the Tab or Path mode and specify additional high-level options for the selected mode.

    • Click the Navigation button to set the actions of the buttons for each tab in Path mode.

      Available when the Path mode is selected.

    • Click Save to save the setup.

      • All settings will be validated. In case of errors, the alert with the error will be shown.

      • All made settings or changes will be saved for the current Layout Settings record.

    • Click Cancel to exit from the Editor without saving the settings.

  • Click the New Tab header to display the grid.

  • On the right side:

    • Tab Mode

    • Path Mode

    • Specify the name for the first tab in the Label field.

    • Click Add Step to add a new tab.

    • Drag-and-drop the tab header to change the tab order.

    • Click Delete Tab when the required tab is open to remove it.

    • Specify the name for the first tab in the Label field.

    • Select the Status option.

    • If enabled in the Settings button:

    • Click Add Step to add a new tab.

    • Drag-and-drop the tab header to change the tab order.

    • Click Delete Tab when the required tab is open to remove it.

  • On the left side:

    • Click the 25 button to add the desired section to the grid.

      • Tab Mode

      • Path Mode

      Editor Overview Tab Mode
      Editor Overview Path Mode

The Settings Button

  • Tab Mode

  • Path Mode

The Tab mode is set by default. If needed, click the Settings button to activate the Allow close the steps in Progress checkbox to allow mobile users to close the modal window when the step still has In Progress status.

  • Click Done to save the setup.

  • Click Cancel to return to the Editor page without saving the settings if they were edited.

Tab Mode Type of Steps

Click the Settings button and select the Path type. Every tab in the Path mode should have its own status.

  • In the Status field, select the field of the Object specified in the current Layout Settings record that is responsible for the status, for example, CTPHARMA__Type__c, Status__c.

  • Allocate the values of the selected picklist to the following status groups:

    • New

      By default, all values are added to this field.

    • In Progress

    • Completed

      The statuses of neighboring tabs can be placed only in the following sequence: New → In Progress (several tabs with this status may be specified) → Completed.

  • Under the corresponding status, specify user permission on the tab with this status:

    • readOnly — all tabs are read-only

    • currentTab — only the current tab can be edited

    • currentStatus — only tabs with the current status can be edited

    • groupStatuses — only tabs in the same group can be edited

    • allStatuses — only tabs in the same status group can be edited

  • If needed:

    • Enable the Custom Color Scheme checkbox to set up a color scheme.

    • Enable the Add icons for steps checkbox to specify icons for each tab.

    • Allow the ability to change the displayed tab.

      The current tab is the tab that is opened by default or the last tab opened using the navigation buttons. The current tab is not changed if it was opened by tapping on the tab name. So, the displayed and the current tab may differ.

    • Activate the Allow close the steps in Progress checkbox to allow mobile users to close the modal window when the step still has In Progress status.

  • Click Done to save the setup.

  • Click Cancel to return to the Editor page without saving the settings if they were edited.
Path Mode Type of Steps

The Navigation Button

Available when the Path mode is selected.

Click the Navigation button to set up the actions button for Path mode. By default, such buttons are available:

  • Previous — go to the previous tab.

  • Next — go to the next tab.

  • Return — return to the current tab from the displayed tab that the mobile user previously opened by tapping its header.

  • Start — start the action.

  • Finish — finish the action.

  • Cancel — cancel the action.

  • Create Record — to create a record for a certain object.

  • Generate CG Cloud tasks — generate assessment tasks and visit KPIs.

    We recommend adding the condition to hide the button if related assessment tasks were already created. This will prevent the creation of duplicates.

Click the button for setup, perform customization and then click Save to apply the settings.

General

For each button on the General tab:

  • The Name field is filled out and cannot be changed.

  • The Label is set but the administrator can specify another one.

  • The Icon name field is predefined but the administrator can specify another icon name.

    The list of available icons and the icon names are available here.

  • Specify the Icon position:

    • Leading (by default) — display the icon on the left side of the button.

    • Trailing — display the icon on the right side of the button.

Navigation Button General

Actions

Not available for the Return button.

For each button on the Actions tab, set the scope of the actions triggered when the mobile user taps the button.

  • There is a set of predefined actions. Click the 25 icon to delete the action.

  • Click New action to add an action.

    For more information, refer to the Click Action table and Action Type Field Reference.

    1. Select the action.

    2. Specify action details.

  • If needed, select the Confirmation Required checkbox and add the text to display to a mobile user when he taps the button.

Navigation Button Actions

Conditions

Not available for the Return button.

Specify conditions to hide or display the selected button.

For more information, refer to the Action Condition tables.

  • If both Hiding and Displaying conditions are set, the Hiding condition will be applied.

    When a mobile user jumps to another tab by tapping its header (if enabled), only the Return button will be available on the opened tab. So, a mobile user can browse tabs but cannot violate the preconfigured tab navigation.

  • The administrator can create a group of conditions using the OR or AND operators. In addition, the group may have a child group, and the child groups may also include child groups.

    • To select the operator, click the OR or AND under the condition name.

    • To add a new condition, click the 25 button.

    • To add a group, click the Add Group button under a condition or another group.

    • To remove the condition, click the 25 button.

    • To remove the group, click the Remove Group button under a condition or another group.

    • Click the 25 button to disable validation for the format of the input data.

      For example, if you want to specify a non-specific date, click the button opposite the calendar field to make it a text field and specify in it the API name of the Date/Time field type, from where the system will get the date.

Navigation Button Conditions
``