Content Comparison

A good component layout is extremely important for creating a good user journey. A layout can be the difference between a positive and a negative user experience, so it’s crucial to choose the most appropriate component layout for each of your forms.

Section component that allows you to break up a long page with many fields into logical sections. A Section has a section header and an optional explanatory text, plus it may have additional features, which allow users to change the default layout, collapse, or expand it.

Add components to a form to capture the data that is required to implement a Customer Experience. The term component is the general name for anything that can be dragged from the available components displayed in Palette into a form. Components can be anything from an image to a single data entry field, to a large complex reusable block. Components come in a variety of control types with different properties and behaviors.

The insertion bar will appear either as a vertical or horizontal bar. A horizontal insertion bar will insert the component vertically between two other components, and a vertical bar will insert a component horizontally between two components.

You can remove a specific component or a component version from a form if it is not required anymore. Once you have deleted a component, you can’t undo this, because it removes the component permanently. Therefore, you should consider all possible impacts of deleting a component because it can affect many or even all forms using this component.

The ways to add a component to a form:

Drag a component from the Palette to the Form:

Choose a component from the Palette and drag it onto the form near where you want it to appear, observing the shape and orientation of the insertion bar. Drop the component when the insertion bar indicates the desired location.

Click a Component:

Select the component or container in the form where you want a component to be inserted. Click a component in the Palette. The component is inserted directly below the selected component or at the bottom of the selected container.

The section is one kind of container in which we can add /insert multiple components. The components are as follows:

Tab:

A window tab is a user interface element that allows you to navigate between multiple documents in a single window. Clicking one of the tabs will display the contents of the corresponding document. We are able to add a tab in Tabs and Vertical tabs section.

Check the link https://appbuilder.atlassian.net/wiki/pages/resumedraft.action?draftId=1690402819 for more details.

Tabs:

Tabs are user interface components that render and display subsections to users; they arrange content into categories for easy access and make your apps look cleaner by saving space. Instead of a single title bar, a tabbed window may include multiple tabs along the top.

Check the link abx-tabs for more details.

Vertical Tabs:

The vertical tabs component varies from the regular 'tabs' component, with the tabs arranged on the left in a vertical space, instead of on the top in a horizontal space.

The common custom tab settings are right-aligned and left-aligned.

Check the link abx-vertical Tabs for more details.

Form:

Form Layout allows you to build responsive forms with multiple columns, and to position input labels above or to the side of, the input.

Check the link https://appbuilder.atlassian.net/wiki/pages/resumedraft.action?draftId=1689845761 for more details.

Vertical Navigation:

Button:

The Button component allows users to perform actions. It comes in several different style variants and supports icons in addition to text labels.

Check the link abx-button for more details.

Badge:

Badges are colored text elements containing small bits of information. They are used for labeling content, displaying metadata, and/or highlighting information.

Repeater;

Icon:

List View:

List View is a base component used to render Lists of items, as well as a featured first item with a unique layout. We can create custom list views to do our jobs more effectively. List views are ways of displaying the small sizes of data that are instantly accessible for different objects.

Check the link abx-listview for more details.

Page Header:

Counter:

Calendar:

Rating:

Carousel:

Progress Bar:

Blank:

Field:

Report:

...

Overview

• The Section is a container with a header that is used to group related content

• You can collapse the Section by clicking on the header or on the drop-down arrow

• You can add actions to the Section header

Attributes

...

1. Header

• The header is a short description to define the Section

• It is displayed at the top left of the Section

• e.g. in the below screenshot client details is used to specify the header of the Section

2. No Header

• If the No Header checkbox is checked then the header will not be visible on the Section

...

3. Is Collapsible

• You can make the Section collapsible by checking the Is Collapsible checkbox

• Is Collapsible is used in the Section for a better User Experience

• On clicking the down arrow or on the Section header the Section will collapse or expand

  Image Added

4. Actions

• You can add multiple actions and each action is displayed as a button

• Only two actions will be displayed on the Section header and the rest of the actions will be displayed in a dropdown

• By clicking on the button it performs a particular action e.g. invoking a specific action or workflow

• Refer Actions

  Image Added

5. Overflow After

• Overflow After attribute is used to display the actions in list format after reaching its entered limit

• By Default the value is 3 which means the three actions will displayed on a section header

• If you added the new action despite having 3 actions then the new action will appear in the drop down list section

  Image Added