---
title: "Customize sections and fields in tabs"
slug: "customize-sections-and-fields-in-tabs"
updated: 2026-05-06T08:43:42Z
published: 2026-05-08T10:00:29Z
canonical: "docs.zilliant.com/customize-sections-and-fields-in-tabs"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zilliant.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize sections and fields in tabs

Tabs in an object detail screen organize different types of information. You can customize sections and fields on most tabs, including all [custom tabs](/main/docs/customize-tabs-on-the-object-detail-screen#add-a-custom-tab) and some standard tabs that don’t include tables, for example, the **Overview** tab. In these tabs, you can add new sections, add fields, and adjust their layout to match your business needs.

In this topic, learn how to:

- [Add a section to the tab](/main/docs/customize-sections-and-fields-in-tabs#add-a-section-to-the-tab)
- [Manage section visibility](/main/docs/customize-sections-and-fields-in-tabs#manage-section-visibility)
- [Rearrange sections](/main/docs/customize-sections-and-fields-in-tabs#rearrange-sections)
- [Add localized section labels](/main/docs/customize-sections-and-fields-in-tabs#add-localized-section-labels)
- [Restrict section visibility by UI profile](/main/docs/customize-sections-and-fields-in-tabs#restrict-section-visibility-by-ui-profile)
- [Make the section read-only by UI profile](/main/docs/customize-sections-and-fields-in-tabs#make-the-section-readonly-by-ui-profile)
- [Apply mass restrictions to sections](/main/docs/customize-sections-and-fields-in-tabs#apply-mass-restrictions-to-sections)
- [Add fields to a section](/main/docs/customize-sections-and-fields-in-tabs#add-fields-to-a-section)
- [Adjust field layout in a section](/main/docs/customize-sections-and-fields-in-tabs#adjust-the-field-layout-in-a-section)

---

## Prerequisites

To configure sections and fields:

- [Enable the new UI](/main/docs/work-with-the-new-ui#enable-the-new-ui)
- Verify that you have the UI EXTENSIBILITY PERMISSION. For details on assigning permissions, read [Role management](/main/docs/role-management#define-permissions-for-a-role).

## Add a section to the tab

1. Open the customization dialog:
  - [From the object’s detailed information tab](/main/docs/access-ui-customization-dialogs#from-the-objects-detailed-information-tab)
  - [From a custom tab](/main/docs/access-ui-customization-dialogs#from-a-custom-tab)
  - [From the Overview tab in the line item details panel](/main/docs/access-ui-customization-dialogs#from-the-overview-tab-in-the-line-item-details-panel)
2. In the **Customize Sections** dialog, select **+ Add New Section**.
3. Enter a name for the section, then select OK.
4. Select **Publish**.

## Manage section visibility

1. Open the customization dialog:
  - [From the object’s detailed information tab](/main/docs/access-ui-customization-dialogs#from-the-objects-detailed-information-tab)
  - [From a custom tab](/main/docs/access-ui-customization-dialogs#from-a-custom-tab)
  - [From the Overview tab in the line item details panel](/main/docs/access-ui-customization-dialogs#from-the-overview-tab-in-the-line-item-details-panel)
2. In the **Customize Sections** dialog, turn on or off the switch next to the section name to control its visibility.
3. Select **Publish**.

## Rearrange sections

1. Open the customization dialog:
  - [From the object’s detailed information tab](/main/docs/access-ui-customization-dialogs#from-the-objects-detailed-information-tab)
  - [From a custom tab](/main/docs/access-ui-customization-dialogs#from-a-custom-tab)
  - [From the Overview tab in the line item details panel](/main/docs/access-ui-customization-dialogs#from-the-overview-tab-in-the-line-item-details-panel)
2. In the **Customize Sections** dialog, drag the section to the desired position to define where it appears in the tab.
3. Select **Publish**.

## Add localized section labels

1. Open the customization dialog:
  - [From the object’s detailed information tab](/main/docs/access-ui-customization-dialogs#from-the-objects-detailed-information-tab)
  - [From a custom tab](/main/docs/access-ui-customization-dialogs#from-a-custom-tab)
  - [From the Overview tab in the line item details panel](/main/docs/access-ui-customization-dialogs#from-the-overview-tab-in-the-line-item-details-panel)
2. In the **Customize Sections** dialog, select Edit next to the section name, then go to the **Localization** tab.
3. Select **+ Add Localized Label**.
4. From the **Language** dropdown field, select a language.
5. In the **Label** field, enter a button label.
6. Repeat Steps 3–5 for each language you need.
7. Select **Save**.
8. At the top of the dialog, next to the section name, select Back to go back to the section list.
9. Select **Publish**.

> [!NOTE]
> Tip
> 
> To display the new labels in the UI, sign out and then sign back in to CPQ.

## Restrict section visibility by UI profile

1. Open the customization dialog:
  - [From the object’s detailed information tab](/main/docs/access-ui-customization-dialogs#from-the-objects-detailed-information-tab)
  - [From a custom tab](/main/docs/access-ui-customization-dialogs#from-a-custom-tab)
  - [From the Overview tab in the line item details panel](/main/docs/access-ui-customization-dialogs#from-the-overview-tab-in-the-line-item-details-panel)
2. In the **Customize Sections** dialog, select Edit next to the section name, then go to the **Visibility** tab.
3. Select **+ Add Profile to Hide Section From**.
4. Select the [UI profiles](/main/docs/ui-profile), then select **Add Profile**.
5. Select **Save**.
6. At the top of the dialog, next to the section name, select Back to go back to the section list.
7. Select **Publish**.

## Make the section read-only by UI profile

1. Open the customization dialog:
  - [From the object’s detailed information tab](/main/docs/access-ui-customization-dialogs#from-the-objects-detailed-information-tab)
  - [From a custom tab](/main/docs/access-ui-customization-dialogs#from-a-custom-tab)
  - [From the Overview tab in the line item details panel](/main/docs/access-ui-customization-dialogs#from-the-overview-tab-in-the-line-item-details-panel)
2. In the **Customize Sections** dialog, select Edit next to the section name, then go to the **Read-Only** tab.
3. Select **+ Add Profile to Disable Section From**.
4. Select the [UI profiles](/main/docs/ui-profile), then select **Add Profile**.
5. Select **Save**.
6. At the top of the dialog, next to the section name, select Back to go back to the section list.
7. Select **Publish**.

## Apply mass restrictions to sections

You can hide or make several sections read-only at once for multiple [UI profiles](/main/docs/ui-profile). This helps you quickly control what each profile can see or edit.

To apply mass restrictions:

1. Open the customization dialog:
  - [From the object’s detailed information tab](/main/docs/access-ui-customization-dialogs#from-the-objects-detailed-information-tab)
  - [From a custom tab](/main/docs/access-ui-customization-dialogs#from-a-custom-tab)
  - [From the Overview tab in the line item details panel](/main/docs/access-ui-customization-dialogs#from-the-overview-tab-in-the-line-item-details-panel)
2. In the **Customize Sections** dialog, select **Mass Restrictions**, then select **+ Add Profiles for Mass Restrictions**.
3. Select one or multiple UI profiles, then select **Add Profile**.
4. Select **Next**.
5. In the **Hide** tab, select **+ Add**, then select the sections to hide for the selected UI profiles. Select **Add**.
6. In the **Read-Only** tab, select **+ Add**, then select the sections to make read-only for the selected UI profiles. Select **Add**.
7. Select **Save**, then select **Publish**.

## Add fields to a section

After you locate an existing section or create a section, you can add and customize fields. For details about adding and customizing fields, read [Customize fields](/main/docs/customize-fields).

## Adjust field layout in a section

Control the arrangement of fields inside a section. This helps you make better use of space and present information in a way that fits your page design.

A section can display fields in a responsive layout or in a fixed number of columns. You can also control how to align fields inside those columns.

To adjust the field layout:

1. Open the customization dialog:
  - [From the object’s detailed information tab](/main/docs/access-ui-customization-dialogs#from-the-objects-detailed-information-tab)
  - [From a custom tab](/main/docs/access-ui-customization-dialogs#from-a-custom-tab)
  - [From the Overview tab in the line item details panel](/main/docs/access-ui-customization-dialogs#from-the-overview-tab-in-the-line-item-details-panel)
2. In the **Customize Sections** dialog, select Edit next to the section name, then go to the **Settings** tab.
3. Under **Number of Columns**, select an option:
  - **Default**—Number of fields per row is responsive. Columns adjust automatically based on the screen width.
  - **Fixed**—Display the specified number of columns. The column count does not change with the screen size. If the configured columns do not fit the available width, a horizontal scrollbar appears.
4. If you selected **Fixed**:
  - In the **Columns** field, enter the number of columns to display in the section.
  - (Optional.) Turn on the **Compact Layout (No Scroll)** switch to automatically adjust the column width to the screen size and avoid the horizontal scrollbar.
  - Select the field alignment:
    - ![icon Format align center.svg](https://cdn.document360.io/24f960e8-3c1c-4c18-a2c6-83b6ae4aab84/Images/Documentation/icon%20Format%20align%20center.svg?sv=2026-02-06&spr=https&st=2026-11-11T12%3A20%3A56Z&se=2026-11-11T13%3A20%3A56Z&sr=c&sp=r&sig=wl%2Fvec0Y10ErzT0H9cN8L8M7zP6Jw3RJNf6T3hVfMs8%3D)—Centers fields within each column.
    - ![icon Format align justify.svg](https://cdn.document360.io/24f960e8-3c1c-4c18-a2c6-83b6ae4aab84/Images/Documentation/icon%20Format%20align%20justify.svg?sv=2026-02-06&spr=https&st=2026-11-11T12%3A20%3A56Z&se=2026-11-11T13%3A20%3A56Z&sr=c&sp=r&sig=wl%2Fvec0Y10ErzT0H9cN8L8M7zP6Jw3RJNf6T3hVfMs8%3D)—Expands each field so that it uses the full width of the column.
    - ![icon Format align left.svg](https://cdn.document360.io/24f960e8-3c1c-4c18-a2c6-83b6ae4aab84/Images/Documentation/icon%20Format%20align%20left.svg?sv=2026-02-06&spr=https&st=2026-11-11T12%3A20%3A56Z&se=2026-11-11T13%3A20%3A56Z&sr=c&sp=r&sig=wl%2Fvec0Y10ErzT0H9cN8L8M7zP6Jw3RJNf6T3hVfMs8%3D)—Aligns all columns and fields to the left side of the screen.
5. Select **Publish**.

Watch the following video to see how the field layout adjustments work:

[Adjust field layout in a section.mp4](https://cdn.document360.io/24f960e8-3c1c-4c18-a2c6-83b6ae4aab84/Images/Documentation/Adjust%20field%20layout%20in%20a%20section.mp4?sv=2026-02-06&spr=https&st=2026-11-11T12%3A20%3A56Z&se=2026-11-11T13%3A20%3A56Z&sr=c&sp=r&sig=wl%2Fvec0Y10ErzT0H9cN8L8M7zP6Jw3RJNf6T3hVfMs8%3D)

A full-page view of an individual object record, such as a quote or an agreement. The object detail screen contains the object's key information and allows you to view or edit details through multiple tabs, such as **Overview** or **Line Items**.

![Icon OK](https://cdn.document360.io/24f960e8-3c1c-4c18-a2c6-83b6ae4aab84/Images/Documentation/icon%20OK.svg?sv=2026-02-06&spr=https&st=2026-11-11T12%3A20%3A56Z&se=2026-11-11T13%3A20%3A56Z&sr=c&sp=r&sig=wl%2Fvec0Y10ErzT0H9cN8L8M7zP6Jw3RJNf6T3hVfMs8%3D)

OK

![Icon Edit](https://cdn.document360.io/24f960e8-3c1c-4c18-a2c6-83b6ae4aab84/Images/Documentation/icon%20Edit.png?sv=2026-02-06&spr=https&st=2026-11-11T12%3A20%3A56Z&se=2026-11-11T13%3A20%3A56Z&sr=c&sp=r&sig=wl%2Fvec0Y10ErzT0H9cN8L8M7zP6Jw3RJNf6T3hVfMs8%3D) Edit

![Icon Back](https://cdn.document360.io/24f960e8-3c1c-4c18-a2c6-83b6ae4aab84/Images/Documentation/icon%20Back.png?sv=2026-02-06&spr=https&st=2026-11-11T12%3A20%3A56Z&se=2026-11-11T13%3A20%3A56Z&sr=c&sp=r&sig=wl%2Fvec0Y10ErzT0H9cN8L8M7zP6Jw3RJNf6T3hVfMs8%3D)

Back