You are here: Mobile > Mobile Layout - Configuration

Mobile Layouts for Configuration


Layouts are automatically configured to recognize if a user is on a mobile device. Optimized layouts exist for both Configuration and Commerce activities.

Mobile Configuration includes:

User Interface

ClosedUser-side Interface


ClosedAdmin-side Interface

Array Control Attributes must be located on the same tab as the Array Set they control.

For information about desktop layouts, see Layout Editor Overview.

ClosedCustom JavaScript revisions

Sites using custom JavaScript must review where custom JavaScript has been implemented for mobile layouts to appear as expected.

Custom JavaScript is usually implemented in the following areas:

ClosedCreating a Mobile Configuration Flow

  1. Navigate from Admin Home Page > Products > Catalog Definition > All Product Families > List > Select Product Family > Configuration Flow
  2. Click Add to create a new flow rule.
  3. Enter the Name, Variable Name, and Description of your rule.

  4. Select the Status of the rule.
    • Active: The rule must fire if the condition is satisfied.
    • Inactive: The rule does not fire, even if the condition evaluates to true.
    • Internal: Only fires if the FullAccess user is the user and the condition evaluates to true.
  5. If applicable, click Edit Start/End Dates to select the time period for which the rule is valid.

    If no Start/End dates are selected, then it is assumed that the status is valid until the FullAccess user changes it.

  6. Choose your Condition Type.
  7. Specify the Wizard Node Type:
    • Start Node: Where the config flow will begin. You can have more than one start node, so if you plan on having multiple, this will be what you set your beginning nodes to.
    • End Node: Final node of the flow. This is where you'll see your action buttons like Add to Quote, as well as any recommended line items. As with start nodes, you can have multiple end nodes. The proper end node is set by attributes in the condition.
    • Start and End Node: Start and End Nodes are combined.
    • Transition Node: Transitions user from one node to another based on attribute selections.
    • Primary Start Node: When there is more than one start flow, this lets the application know to start here first.
    • Primary Start and End Node: Primary Start and End nodes are combined.
  8. Click Add.

    The buttons shown below appear below the newly created Configuration Flow Rule:

  9. Click Layout and select Create Mobile.

    The Confirm dialog box appears.

    For more information on Configuration Flows and/or creating a Desktop Configuration Flow Rules, see Configuration Flows.

  10. Edit Configurable, Regular, Account, and User Attributes on the Mobile Configuration Layout Editor.

    This editor functions like the Email Template Editor; for more information, see Email Templates Overview.

  11. Select the Desktop tab to make changes to the Desktop Configuration Flow. This will direct you to the following page:

  12. Click Layout Properties.

    The Layout Properties dialog box appears.

  13. Specify the Processing Event:
    • Action: The condition for the flow is evaluated when an action occurs (the user clicks a button) on the Model Configuration page.
    • Value Change: The condition for the flow is evaluated when the users change a value for a configurable attribute.
    • Tab Change: The condition for the flow is evaluated when the users move from one tab to another on the Model Configuration page.
  14. Select a Stylesheet from the drop-down. Click the pencil icon to make changes to the stylesheet.
  15. Select Tab Loading Behavior
    • Load all tabs on page load: Loads all data across tabs.
    • Load only active tab on page load: Loads data on only the active tab in configuration.

    Users might see a loading page appear when the switch tabs, as the next set of data is being loaded. Select this option improves performance and rendering speed on larger configuration flows.

  16. Select a Template. Click to preview the template.
  17. Click Ok; .the Layout Properties dialog box closes.
  18. Click Save.
  19. Click Add to begin setting up the user-side layout.

Desktop and Mobile Layouts are considered separate Flows. If a change is made to one Flow, it will not automatically be updated in the other Flow.

You must make changes in both the Desktop and the Mobile Layout

For more information on the Desktop Layout, see Configuration Layout Editor.

ClosedDrag & Drop Elements between Mobile Configuration Layout Editor Tabs



Related Topics Link IconSee Also