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 components are as follows:
The section is one kind of container in which we can add /insert multiple components.
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:
The form component serves as a container for other components. In the form, users can add standard, custom as well as audit fields. The form allows you to build responsive forms with multiple columns in a systematic way.
Check the link https://appbuilder.atlassian.net/wiki/pages/resumedraft.action?draftId=1689845761 for more details.
Vertical Navigation:
The vertical navigation component is used to create custom navigation items in a vertical format. Navigation items appear as a list, in a straight line up to down. These items allow end-users to navigate apps, and go to different web pages.
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 Button for more details.
Badge:
Badges are colored text elements containing small bits of information. They are used to label content, display metadata, and/or highlight information.
Check the link Badge for more details.
Repeater:
A generic design template for displaying data in a repeated form layout. With a Repeater, you can display several rows of data down the page, with just a few components.
The repeater field allows you to create a set of sub-fields that can be repeated again and again while editing content.
Check the link abx-repeater for more details.
Icon:
An icon is a small graphical representation of a program or file. Icons provide visual context and enhance usability. An icon has a visible label that describes what the icon represents.
Icons are an essential part of many user interfaces, visually expressing objects, actions, and ideas.
Check the link abx-icon for more details.
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 listview for more details.
Page Header:
A header is a text that is placed at the top of a page. It is a text that is separated from the body text and appears at the top of a page.
Typically these areas are used for inserting document information, such as the name of the document, the chapter heading, page numbers, and creation date.
Check the link abx-page-header for more details.
Counter:
A counter is a device that stores the number of times a particular event or process has occurred, often in relationship to a clock signal. Counters are used in digital electronics for counting purposes, they can count specific events happening in the circuit. The counter allows a user to increase or decrease a numerical value.
Calendar:
The calendar form field type provides a text box for the entry of a date. An icon next to the text box provides a link to a pop-up calendar, which can also be used to enter the date value. If the field has a saved value this is shown in the text box. Otherwise, the default value, if any, is displayed.
Check the link abx-calendar for more details.
Rating:
The rating field element is used to rate something between a set minimum and a maximum number of stars. The rating is the easiest way to ask for feedback on how good your service or product is.
A rating can gather information about a service or product from the target audience for the purpose of comparison and analysis.
Check the link Rating for more details.
Carousel:
A carousel slider is a slideshow of photos. A carousel allows multiple pieces of featured content to occupy an allocated amount of space.
An image carousel is a container (slideshow) of images or info that users can select by clicking a button that directs them forward or backward in the slideshow. An image carousel makes a website more interactive by enhancing the user experience.
Check the link abx-carousel for more details.
Progress Bar:
A progress bar is a graphical control element used to visualize the progression of an extended computer operation, such as a download, file transfer, or installation.
Check the link Progress Bar for more details.
Blank:
The blank is something not written upon. The blank component is disabled to create and customize any other components.
Field:
Field components represent individual fields/columns in datasets. You can use field components to control the display and editing of data in your applications. Field components are always associated with a dataset.
Check the link Fields for more details.
Report:
Include components in a report setup file to specify report behavior and insert content, such as tables, lists, and figures, into a report. Use the report export to add components to a report and to specify their behavior.
The output format that you select for a report determines most aspects of the generated report formatting. The format should be Excel .xls; comma Delimited .csv; or PDF format .pdf.
Navigation Node:
The navigation node is the navigational structure of the views presented to the end-user and is mapped to tabs and to view selection dropdowns. Supports linking to existing elements like entries, categories, and products, as well as custom URLs.