A good component layout is extremely important for creating a good user journey. A layout can be the difference between a positive or 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 uses to change the default layout, collapse, or and 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 are 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 any more. Once you have deleted a component, you can’t undo this, because it removes the component permanently. Therefore, you should consider all possible impact 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.
Section is one kind of container in which we can add /insert multiple components. The components are as follows:
Tab:
The Tab component consists of clickable tabs, that are aligned side by side. We are able to add tab only in Tabs and Vertical tabs section.
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.
This component varies from the regular 'tabs' component, with the tabs arranged on the top in a horizontal space.
Vertical Tabs:
The Vertical Tabs component serves as a container to show groups of content, divided into tabs. Each tab label should correspond with a block of related content.
This 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.
Form: