You are here: Commerce Process > Commerce Documents > Layout Editor Overview

Layout Editor Overview

OVERVIEW

You can customize and brand the user-side commerce UI in an easy and intuitive way thanks to drag & drop functionality, previews, grouping, and more. All of this is managed through the Layout Editor, which can be accessed from Quick Links, the Document List or by navigating to any main or sub-document attribute or action. The Layout Editor allows you to customize the look and feel of your commerce UI by using Outer Panels, Tabs, columns, Layouts, Line Item Grids, and the Commerce Stylesheet.

For information about mobile layouts, see Mobile Layouts for Configuration and Mobile Layouts for Commerce.

End-User Features:

ClosedLine Item Icon Actions

These actions are available to the user when they are active in the applicable Participant Profile.


ClosedLayout Editor

At the core of this new functionality is the new Layout Editor, which provides a graphical drag & drop feature for creating and managing document layouts. Users can have multiple columns and tabs, greater flexibility in laying out UI elements, and help text for attributes. The Layout Editor is a fixed-width page that is divided into the following areas:


ClosedLayout Editor Elements


ClosedAdministration Actions


ClosedInput Elements

  1. Attributes
  2. Action Strip
  3. Spacer

An Input defines a variety of field-level input objects. Each input has editable properties that are specific to their input type.


ADMINISTRATION

ClosedAction Strips

User-Side Action Strip:

Action Strip in Layout Editor:

  1. Action Strip Icon
  2. Action Strip Label
  3. List of Commerce Actions that belong to this Strip
  4. Cog Icon to open Edit Properties Window
  5. Delete Icon to remove the attribute from the column

ClosedAdding an Action Strip

ClosedEditing an Action Strip


ClosedColumn Layouts

Column Layouts are represented as multi-column structures where each column contains Input Columns. A commerce tab is the only object that can contain columns layouts. Each layout has an independent column structure compared to neighboring layouts. There is no relationship between column layouts.

User-Side: 3 Different Input Columns inside a Commerce Tab

User-Side: Multiple Stacked Column Layouts

In order to mimic a Data Table within a tab, you will need to use multiple column layouts, and stack them. The image below is an example of this. On the first line, you will see five different columns highlighted in a different color. Each column is placed within a column layout and they have been stacked on top of one another. All the elements in groups 2-6 have each been placed in separate column layouts. Example: this layout is created with 6 column layouts and 5 columns within each layout.

ClosedIcons

ClosedAdding a Column Layout

ClosedDrag & Drop a Column Layout

Horizontal scrolls are not provided by default. If the column width is bigger than the page width, then some fields may appear cut off on the transaction page. The admin can enable the horizontal scroll in the alternate stylesheet:

.panel{width: 800px}

.panel { min-width:800px; /* IE doesn't understand min-width */ }

*html.panel{/*IE considers this legal whereas other browsers do not. Additionally, IE treats width as other browsers treat min-width*/ width:900px}


ClosedCommerce Tabs

Commerce Tabs are displayed inside of an Outer Panel. There can be multiple tabs in a panel. Tabs can be mapped to hide parts, models or special product families. Tabs can also contain multiple column layouts within them.

User-Side Commerce Tab:

ClosedAdding a Commerce Tab

ClosedEditing a Commerce Tab

ClosedMoving a Commerce Tab


ClosedInput Attributes

In the Visual Editor Area of the Layout Editor, an Attribute should be displayed with the following:

  1. Attribute Name
  2. Attribute Icon
  3. Cog Icon to open Edit Properties Window
  4. Delete Icon to remove the attribute from the column. When you delete an Input Attribute:

ClosedAdding an Attribute

ClosedEditing an Attribute

Currency Attribute Hover Tooltip: Enhanced decimal precision includes a hover tooltip that will appear if the stored precision value is different than the displayed precision and the numbers are not equivalent. This functionality is available only on currency attributes.


ClosedInput Columns

Input Columns are the columns that make up a Column Layout. They contain the commerce attributes, actions and the line items group.

User-Side Example: 3 Different Input Columns inside a Commerce Tab

In the Visual Editing Area of the Layout Editor, an Input Column should be displayed with a:

  1. Static Label displaying the column width.
  2. Click the icon to open the Panel dialog box.

ClosedAdding an Input Column

ClosedEditing an Input Column


ClosedInput Spacers

An Input Spacer is just a blank space with a defined height that is displayed vertically between other inputs. Spacers are displayed with a height that is defined by the FullAccess user. In the Visual Editing Area of the Layout Editor, a Spacer should be displayed with the following:

  1. Static Label: Spacer
  2. A read-only display of the spacer's height value.
  3. icon to open Edit Properties Window
  4. Delete Icon to remove the attribute from the column.

ClosedAdding a Spacer

ClosedEditing a Spacer Property


ClosedLine Item Grid

The Line Item Grid is a type of Input which represents the line item table in a commerce document.

User-Side Line Item Grid

In the Visual Editor Area of the Layout Editor, a Line Item Grid should be displayed with the following:

  1. Static Label: Line Item Grid
  2. Line Item Grid Icon
  3. Cog Icon to open Edit Properties Window
  4. Delete Icon to remove the attribute from the column.

ClosedAdding a Line Item Grid

ClosedEditing a Line Item Grid


ClosedOuter Panels

Outer Panels are primarily used to group commerce tabs together. They provide the collapsing/expanding icon for the tabs as well as display a label that describes the tabs they contain. Layouts can have multiple panels. The FullAccess user can choose to show or hide the label and whether to make the outer panel collapsible by default.

User-Side Outer Panels:

In the Visual Layout Editor, an Outer Panel should be displayed with:

  1. Outer Panel Label
  2. Cog Icon to open the Panel dialog box.
  3. Delete Icon to remove the panel from the column.
  4. Collapse/Expand Icon - To collapse a panel to make it easier to view the panels the user is working on.

ClosedAdding an Outer Panel


ClosedSticky Actions

Sticky Actions are commerce actions that will always stay in the user's browser viewport, regardless of where the user scrolls on the page.

Sticky Action User-Side UI:

On the Layout Editor page, Sticky Actions are represented as an Action Strip to the right of the Administration Actions. The Sticky Action Strip should always be visible.

  1. Click the icon in the Sticky Action Strip.

  2. Use scroll-bar in the Content section of the Action Strip Editor to view and select actions to order or remove.
  3. After selecting an action, click the Up and Down arrows to re-order the actions and the X to delete the action.

  4. Click OK to Save and close the Action Strip Editor box or Cancel to return to the Layout Editor without saving your changes.

NOTES

RELATED TOPICS

Related Topics Link IconSee Also