You are here: Configuration > Pages, Configuration Flows, and Search Flows > Configuration Layout Editor

Configuration Layout Editor

OVERVIEW

You can create easily create standard Configuration layouts.

At the core of this functionality, the Configuration Layout Editor provides a graphical drag & drop feature for creating and managing the display of the model Configuration page(s). You have the ability to create multiple grids (formerly known as groups) and tabs, greater flexibility in laying out UI elements and more, from a single page.

Once you have created your Configuration Flow, you can open the Configuration Layout Editor and begin to layout the user-side Configuration page. You can access the Layout Editor two ways:

ClosedUser-Side Example


ClosedConfiguration Layout Page Example


ADMINISTRATION

You can customize and brand the user-side Configuration UI in an easy and intuitive way thanks to drag & drop functionality, previews, grouping and more. The Layout Editor allows you to customize the look and feel of your Configuration UI by using Tabs, Grids, Flow and Attribute Properties and a Configuration Stylesheet.

ClosedVisual Editing Area

The Visual Editing Area is a fixed-width page that is divided into the following areas:


ClosedAction Toolbar

The Configuration Layout Editor contains a strip of administrative action buttons.


ClosedIcons Legend


ClosedAdding Layout Elements

The Configuration Layout Editor allows the FullAccess user to add elements to the page and nest some page elements within each other to achieve a pleasing user experience. Some layout elements are color-coded for faster identification.

ClosedSetting up Tabs

ClosedAdding Grids and Grid Elements

ClosedAdding Spacers


ClosedAdding Attributes

  1. Click Add in the actions toolbar.
  2. Choose Attributes from the drop-down. Drag and drop one ore more attributes into the editor using SHIFT + click to select more than one attribute from the Attributes Menu.
  3. Drag and drop the selected attribute(s) into a cell. The red dotted line represents where the attribute will be placed. The green check-mark indicates that it can be dropped in that space.

  4. Edit any attribute in the layout by clicking the Gear icon on the far right side of the attribute to open the Attribute Properties window.

      From here, you can edit only the current attribute’s properties and behaviors. Follow the steps to edit attribute properties, starting from the Attribute Properties window.
  5. Choose and edit properties for the Display Label, on the Layout Tab, in order to show the attribute label name. De-selecting this will hide the attribute label to the user. It will also not allow you to set additional related properties.

  6. Enter the properties for the attribute value fields.
  7. Select the Help Icon checkbox if you’d like to show a help icon. If selected, an option will appear allowing you to choose where to display the icon, to the left of the label or to the right of the attribute value.

  8. Select additional options: 
  9. Select Message options: 

  10. Click on the Behavior Properties tab.

      On this tab, you can manage the different display settings of the attribute. You can also override the display type, set type and default value properties that were defined when you created the attribute.

    1. The options available in the Layout column vary according to the data type of the current attribute. For instance, this string text field’s Display Type single select menu contains the options: Text and Text Area. However, if this were a single select attribute, the Display Type options would be Single Select Menu, Radio Button Horizontal, and Radio Button Vertical. Similarly, the Default Value options for a single select attribute would appear as a single select menu of the options that are available for the current attribute.
      The help icon allows the user to observe rich text help that is defined on that specific attribute’s administration page. If an FullAccess user has not defined help text for an attribute, the end user will observe no result when they attempt to access the help icon.

ClosedManaging Attribute Properties

Attribute Properties can be accessed from multiple locations on the Configuration page. You can do so by clicking the All Attributes button in the Administration Action Bar or you can click one of the List icons at the grid or column level.

In the Attribute Properties modal window, there are three tabs available to make changes to attributes: Core Elements, Supporting Elements and Behavior Properties. The purpose of this section is to allow you to make mass changes to attributes within the entire Configuration layout, a grid or a column.

ClosedCore Elements

ClosedSupporting Elements

ClosedBehavior Properties


ClosedDrag & Drop Elements between Desktop Configuration Layout Editor Tabs

Admins can drag & drop Elements between Desktop Configuration Layout Editor tabs.

  1. Navigate from: Admin > Product Families > Configuration Flows- List.

  2. Click the Desktop Configuration Layout Editor link.

  3. Select the Element from the current Tab that you wish to move to another Tab.
  4. Drag the Element and hover over the desired Tab. This allows the Tab to open and the Element to be dropped onto the Layout.
  5. Drop the Element onto the Layout of the desired Tab.
  6. If desired, click the Mobile link on the Configuration Flow Rules List or Mobile Layout button on the Configuration Layout Editor to edit the Mobile version of the Configuration Layout Editor.
    1. Previously, when admins desired to move an Element, they were required to remove the Element from the previous tab and re-add it to the desired tab.
      Desktop and Mobile Layouts are considered separate Flows. If a change is made to one Flow, it will not automatically be reflected in the other. Make changes in both the Desktop and Mobile Layout.

      For more information on the Mobile Layout, please see Mobile Configuration.

ClosedNotes on Arrays within Layouts

ClosedArray Widths

ClosedArray Messages

ClosedMiscellaneous

ClosedAJAX Rules

ClosedEnhanced Look and Feel


TROUBLESHOOTING

ClosedConversion of Pre-12 Layouts

Pre-12 standard Configuration layouts was composed of tab layouts and group layout. On upgrade, these layouts will be automatically converted to the latest Configuration layout functionality.

ClosedConverting * and pixel values

ClosedAttributes in the layout


ClosedCommon layout issues after upgrade

ClosedFields are cut off

ClosedStyles not rendering properly

ClosedAdvanced Templates

ClosedJavaScript customization does not work:


NOTES

RELATED TOPICS

Related Topics Link IconSee Also