Mobile Layouts for Commerce

After a mobile Commerce layout has been created, users on a mobile device will see the following structure when within Commerce:

• Tabs appear in the top panel. Only the content of the selected tab is loaded; each tab loads as it is opened.

• If there are multiple tabs displayed, tap the Overflow button to see the other tabs.

  

• A button at the bottom of each tab allows users to navigate to the next tab. You may have to scroll down before you see the button.

  

• A footer bar, always visible at the bottom of the screen, contains applicable Quote page actions.

• Error messages for Constraint rules, required attributes, and invalid values, display directly below the attribute in error.

Additional information about the error appears on the left side of the footer bar.

• The Line Item Grid is in the collapsible sidebar on the right-hand side of the screen.

• When the Line Item Grid sidebar is expanded, Quote page actions are hidden and Line Item Grid page actions appear in the footer bar.

• When a Remove action is added to the Line Item Grid page actions, line items can be selected and deleted.

• When a Copy Line Items action is added to the Line Item Grid page action, line items can be selected and copied.
• When the number of line items on the Line Item Grid exceeds the maximum number defined in the layout property, the grid splits into multiple pages. Navigate the pages using a horizontal row of buttons beneath the line items.

To create a mobile Commerce layout based on the existing desktop layout:

1. Click Admin to go to the Admin Home Page.

2. Click Process Definition under Commerce and Documents.

   The Processes page opens.

3. Confirm that Documents is selected in the Navigation column for the Commerce Process where you want to create a mobile layout, and click List.
4. Select Create Mobile Layout from the Navigation drop-down for the Quote level.
5. Click List.

6. A confirmation pop-up appears. Click Create.

   The mobile Commerce Layout Editor opens. The mobile layout has been created and automatically saved. The Commerce Process must be deployed in order for users on mobile devices to see the mobile layout.

The mobile Commerce layout is generated based on the existing desktop layout.

• Panels on the desktop layout become tabs on the mobile layout.
• Tabs on the desktop layout become groups on the mobile layout.
• Column layouts do not translate to mobile.
• Attributes that were organized by columns on the desktop layout will be stacked vertically (leftmost attributes on top, rightmost attributes on the bottom) on the mobile layout.
• The Commerce sticky action bar is shown at the bottom of the mobile Commerce layout.
• The Line Item Grid will be placed in the Line Item Grid sidebar on mobile, regardless of what panel it is contained in on the desktop layout.

After a mobile Commerce layout has been created, access the mobile Commerce Layout Editor using one of the following navigation paths:

Standard Navigation Path

1. Click Admin to go to the Admin Home Page.

2. Click Process Definition under Commerce and Documents.

   The Processes page opens.

3. Click List for the Commerce Process with the mobile layout you want to modify.
4. Select Mobile Layout from the Navigation drop-down for the Quote level.
5. Click List.

Quick Links Navigation Path

1. Click Admin to go to the Admin Home Page.

2. Click the Quick Links icon next to Process Definition in the Commerce and Documents section

   The Processes Quick Links window appears.

3. Select the Commerce Process with the mobile layout you want to modify from the Process drop-down.
4. Click the + icon next to Quote to expand the Quote-level.
5. Click Mobile Layout.

The mobile Commerce Layout Editor includes a sidebar and a main editing area.

• The sidebar contains quote-level attributes and actions, as well as line-level attributes that can be added to the layout.

• The main editing area contains sections where attributes and actions can be added or removed from the Quote page and the Line Item Grid.
  • The Quote-level Container relates to the Quote page.
  • The Line Item Grid Container relates to the Line Item Grid.
  • Use the Quote Action Strip on the left to add quote-level actions to the Quote page main actions. Use the Quote Action Strip on the right to add quote-level actions to the Line Item Grid page main actions.
  • Use the Quote Menu Attribute Strip to add a quote-level menu attribute to the Line Item Grid page. Once added, this attribute can be used in the condition of Commerce access rules in order to hide/show Line Item Grid columns.

Drag and drop Quote-level attributes from the sidebar to the Quote-level container or the Quote-menu attribute strip.

Quote-Menu Attribute Strip Use Case

Add a menu attribute for different Line Item Grid views (for example, discounting view, part info view, and so on). Then use access rules to show/hide Line Item Grid columns based on what view the user selects.

Key Difference From Mobile Configuration

In Mobile Commerce, quote and line-level attributes do not need to be on the desktop layout in order for them to be placed on the mobile layout. All Commerce attributes, regardless of whether or not they exist on the Commerce desktop layout, can be added to the mobile Commerce layout.

Drag and drop Line-level attributes from the sidebar to the Line Item Grid.

• Each line-level attribute that is added to the layout becomes a column of the Line Item Grid.
• Users can not access the line-level layout on mobile, so there is no mobile layout for the line-level.

Drag and drop Quote-level actions from the sidebar to the sticky action bar, the Quote-level action strip or the Quote-level container.

• An action strip is automatically created when an action is added to the Quote-level container.
• Line-level actions cannot be added to the layout.

Only some attribute properties can be overridden on the mobile Commerce layout:

Group Properties (i.e. Desktop Tabs)

• Name (Show/Hide)
• Icon (Browse, Show/Hide)
• Description (Show/Hide)
• Initial State (Collapsed/Expanded)

Quote-Level Attributes

• Label (Show/Hide)
• Help icon (Show/Hide)
• Display Type (Combo Box/Radio Group)*
• Display Type (Checkbox Group/Multi Select)*

Line Item Grid Properties

• Label (Show/Hide)
• Pagination (Max 20)

Line-Level Attributes

• Label (Text field)
• Mapping Type (Attribute/Product)
• Attribute (drop-down)
• Editable (Yes/No)
• Display Sum (Show/Hide)*
• Copy Line Popup (Show/Hide)

*May or may not be shown based on the attribute data type

After a mobile Commerce layout has been created, the desktop and mobile layouts are not synced. Therefore, changes to the desktop layout will not affect the mobile layout, and vice-versa.

If changes are made to the desktop Commerce layout, and the admin wants these changes to be reflected on the mobile Commerce layout, the admin can do one of the following two things:

• Manually Make the Changes to the Mobile Layout
  • Advantage: All mobile layout customization will remain.
  • Disadvantage: Adding all new attributes and layout elements to the mobile layout could be very time consuming.
• Delete the Mobile Layout and Create a New One
  • Advantage: The new mobile layout will include all desktop attributes and layout elements.
  • Disadvantage: Mobile customization will be lost and will have to be recreated.

To delete a mobile Commerce layout:

1. Click Admin to go to the Admin Home Page.

2. Click Process Definition under Commerce and Documents.

   The Processes page opens.

3. Click List for the Commerce Process with the mobile layout you want to delete.
4. Select Mobile Layout from the Navigation drop-down for the Quote level.
5. Click List.

6. Click Remove.

   A Confirmation pop-up appears.

7. Click Remove.

By default the Transaction Total attribute is located in the top right-corner of mobile Commerce header bar. This attribute cannot be moved on the mobile layout, but it can be hidden:

Admin > Commerce Settings > Enable Transaction Total for Mobile Layouts > Yes/No

For Transaction Total to display a value other than $0.00:

1. Create a Formula to calculate the correct total (Formula will vary between implementations).
2. Set the attribute’s default value to use the Formula.

3. Select Trigger Auto Update within the attribute.

   

• Mobile functionality must be enabled on a site in order to create mobile layouts. If your site does not already have mobile enabled, create a Service Request in My Oracle Support.
• If you have Mobile Configuration enabled, Mobile Commerce is enabled as well, but a Mobile Commerce Layout must still be defined.
• Commerce rules execute on mobile as they do on desktop.
• Similar to desktop functionality, fields modified on the current page by auto update functionality are highlighted yellow.
• The mobile Navigation button, which appears in the left corner of the topmost header bar, contains links from the Commerce and Subheader navigation menus. Links will dynamically hide/show for each user, depending on the permissions set for their user type. Admins can set permissions under Admin Home Page > Navigation Menus > List Links > Customize Menus.
• Print actions that have a setting for Save Document to File Attachment Attribute when the end user prints, can perform differently on mobile applications than on desktop applications.

• Rich Text templates cannot be edited from a mobile layout.

  • If a Rich Text attribute’s Document View is set as Read/Write for a particular Step and Participant Profile, the user sees a single-select menu to select from templates that an admin has predefined.

    A Preview button is visible. The user can preview the selected template; however, the contents cannot be edited on a mobile device.

    The template single-select menu, when present, will always contain the options Currently Saved and None, in addition to any predefined templates.

    • Currently Saved: Allows the contents to remain as what is currently saved. This option should remain selected if customizations were made to a transaction’s Rich Text Editor while editing the transaction on desktop.

    • None: Clears the contents of the Rich Text Editor.

      When you change the template selection (including None ) and then save, Currently Saved becomes the selected option in the RTE menu and the content of Currently Saved has been updated to reflect the saved changes.
    • If a Rich Text attribute’s Document View is set as Read-Only for a particular Step and Participant Profile, the end user cannot change the template selection and only the Preview button is visible.

Documents on Mobile Devices