--- title: Create the Layout slug: user-guide-10x/create-the-layout docTags: createdAt: 2025-06-18T11:01:36.082Z --- Now that you have defined your application's foundation, you build out the format of the application. You organize your application in sections, tabs, by integration, or with HTML. The layout of your application consists of fields and layout objects. Drag and drop the fields and layout objects to the Form Layout area of Application Builder. Any of the layout objects can be resized to a percentage of the page. **Available Layout Objects** | Layout Object | Description | | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Tab** | Groups multiple sections in the same area. Each tab can have it's own layout, which can contain additional sections and tab elements. | | **Section** | Groups multiple fields and layout elements into a single area. Sections can contain additional sections and tab elements and can be collapsed or expanded in the record. | | **HTML** | Displays HTML in the record. | | **Integration** | Adds a button to the record form that allows you to run an integration from the records page. You must have already defined the task that will run in order to set up an integration from a record. | ## Creating Tab Layouts To create tab layouts: 1. From the Layout section of the Application Builder page, select **Tabs,** and then drag and drop it into the Form Layout. ::Image[]{src="https://api.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/jdwvi-uhaOUb5i8wjjbv5_tab-in-form-layout.png" size="36" width="544" height="192" position="center" showCaption="false"} 2. Select the pencil icon to edit the tab settings, or double click the default tab title text. ::Image[]{src="https://api.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/SkKpy_NbLYFnbzjoEvsEp_edit-tab-set.png" size="10" width="144" height="98" position="center" showCaption="false"} 3. To create additional tabs on your tab layout, click the plus icon. ::Image[]{src="https://api.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/tHeHuzMPs8H24zV_enhoi_add-tab.png" size="10" width="114" height="98" position="center" showCaption="false"} Another tab is added. Name the tab and add additional tabs as needed. 4. Add sections and fields, as needed, to the tab layouts, and click **Save.** ::Image[]{src="https://api.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/DkKUGe1EKH8ZmCapncIXV_three-tabs.png" size="64" width="1240" height="259" position="center" showCaption="false"} ## Creating Section Layouts To create a section: 1. Select **Section,** then drag and drop it to the Application Builder Form Layout area. ::Image[]{src="https://api.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/VEANp0rLvb8w8oVjkL7Ph_section-layout.png" size="48" width="1726" height="914" position="center" showCaption="false"} 2. On the Field Properties tab, enter a name and description (optional) for the section. You can also resize the section on the Field Properties tab. 3. On **Help Text,** specify whether you want optional help text to appear for the record. Select either *Above* or *Below* to indicate where you want the help text to display on the section. ::Image[]{src="https://api.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/zDwjoHsGwThnvbjtNXVia_field-property-helptext.png" size="28" width="373" height="446" position="center" showCaption="false"} Once you select the location for the help text, enter the text for the record UI on **Help Text Context.** When creating a record, the help text displays as seen in the following screenshot: ::Image[]{src="https://api.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/8XcuPI9byxbgGQ0I0SGwS_new-record-with-help.png" size="38" width="910" height="206" position="center" showCaption="false"} 4. You can also specify two additional section-specific behaviors. You can specify whether a section will display collapsed as a default when a record is created or whether the border of the section should be hidden when viewed in a record. To specify these things, select from either **Collapse by default** or **Hide section border**. 5. In the screen below, the first section has the border hidden, and the second section is collapsed by default: 6. ::Image[]{src="https://api.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/pbhmmn7_x5WFTdLLXXak8_hide-collapse.png" size="48" width="1220" height="526" position="center" showCaption="false"} 7. Next, to start filling in the fields, drag and drop a field type, such as **Selection, Text,** or **Comments** into the section. Fields in Application Builder have multiple sub-types. For example, you can select a Text field type, and further identify it by sub-type such as *Single-Line, Multi-Line, Email, Telephone, or URL,* for example. In addition, the field type you select can have various Field Properties assigned. See [Select Fields and Assign Field Properties](docId\:GYErPMJWZ7tV75_bymvVA) for detail about fields. 8. Continue to add fields and layout objects until you have your application configured the way that you need it, then click **Save.** ## Creating HTML Layouts You can use HTML to further customize the layout of your application. For example, you can include code for a button that, when clicked, opens internal documentation for reference. :::hint{type="info"} Any JavaScript code in the HTML Content field will be executed by the browser when the record is viewed. ::: To create HTML layouts: 1. Select **HTML,** then drag and drop it to the Application Builder Form Layout area. 2. Double-click the title of the HTML layout object to rename it. ::Image[]{src="https://api.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/d3mfoUYk4H1q5RWq_9M0n_html-rename.png" size="30" width="295" height="52" position="center" showCaption="false"} 3. On Field Properties, enter your code in **HTML Content** and then click **Save.** ::Image[]{src="https://api.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/wx-NoI5-hYsRxqTKlRoXh_html-content.png" size="26" width="379" height="425" position="center" showCaption="false"} ## Creating Integration Layouts Including an Integration layout object in your applet or application allows you to press a button and run an integration from within a record. :::hint{type="danger"} You can include an integration that consists of a common task in applets. Other integrations can be included, but must be further configured once the applet has been added to an application. The integration configuration can span both the application and it's workflow. ::: To create integration layouts: 1. Select **Integration,** then drag and drop it to the Application Builder Form Layout area. 2. Double-click the title of the Integration layout object to rename it, or rename it on the Field Properties tab. ::Image[]{src="https://api.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/cH3Oe7x7XCEf4GWNPqglN_integration-object.png" size="34" width="522" height="50" position="center" showCaption="false"} 3. To assign a task to run, on the Field Properties tab click **Task** and select a task. To create a new task, select **Create a Task**. ::Image[]{src="https://api.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/gH6iIwWROg0oInem5LGXI_integration-tasks-properties.png" size="20" width="359" height="387" position="center" showCaption="false"} 4. Under Integration ROI Calculation Metrics fill out the **Manual Time Expenditure** and **Personnel Costs** fields so that the value of the automation is calculated in Usage Metrics. ::Image[]{src="https://api.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/wRfvh46SpbOJuTE4HmCo5_roi-metrics.png" size="28" width="385" height="329" position="center" showCaption="false"} 5. Click **Apply Metrics**, and then click **Save**.