Mobile Layouts for Configuration

• Mobile layouts are created within the Flow Properties page.
  • Mobile layouts are initially generated to contain the contents of the Desktop layout.
    • Edit Mobile layouts to contain fewer attributes than that of the Desktop layout. However, the Mobile layout cannot contain attributes not on the Desktop layout.
  • To regenerate the Mobile layout, delete the Mobile layout and restart the “Create Mobile Layout” process.
• Array sets can be dragged-and-dropped from the sidebar into groups.
  • Array sets contain a Delete button, but no Edit button.
  • Attributes within the sets contain Edit buttons, but no Delete buttons.
  • Array sets are ordered according to the associated set order.

• The admin Mobile layout will be auto-generated from the Desktop layout the first time it is created.
  • Once a Mobile layout is created it becomes a separate layout that must be updated independently in order for user side changes to take effect.
  • When an attribute exists on Desktop, but not on Mobile, the attribute is still present, just hidden, on the mobile layout.
    • Any rules which are related to that attribute will still fire when users access the Mobile layout.
    • If a required field is not added to the mobile layout and it lacks a default value, the user will be unable to create a quote.
• “Mobile Device Enabled” system attribute is now available as a rule input for Recommendations, Constraint, and Hiding rules.
  • Attribute will return “True” if the following conditions have been satisfied:
    • User is on Mobile device.
    • Admin has enabled Mobile access for user.
    • Admin has defined Mobile layout.

  • System attribute returns “False” if one or more of the above conditions have not been met.

  Attributes can be moved, edited, and deleted on the Mobile layout.

  An alternate stylesheet can be uploaded for Mobile. All mobile users use one alternate stylesheet.

  Action bar at bottom of tablet contains the following buttons: Remove, Properties, and Back.

  Multiple column layouts on Desktop will be converted into a single column on Mobile.

  Layout Properties has been moved from the Config Flow Editor page to the Desktop and Mobile Layout page.

  For information about desktop layouts, see the topic Layout Editor Overview.

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:

• Headers
• Footers
• JavaScript files uploaded to the File Manager through Configuration or Commerce HTML Attributes

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.

   The Variable Name field populates automatically. Variable names can only contain alpha-numeric characters and underscores. The entry can be changed before saving, but after saving the value is read-only.

   

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 the topic 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 the topic 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 configuration 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.