# Getting Started with Builder

The core feature of SmallBuilder Lists, the List Builder, **provides a powerful and user-friendly interface for creating List Configurators.** The List Builder is designed to be intuitive and efficient, enabling anyone to easily create and configure lists. Once a list configurator is created using the List Builder, it is converted into a tab and integrated into the user interface, allowing users to easily access and utilize the new list functionality in a familiar environment.

{% hint style="info" %}
When creating or editing records in the List Configurator tab, the List Builder is triggered.
{% endhint %}

***

### 🔸 Creating and Configuring a List Configurator

1. Navigate to the List Configurator tab in the SmallBuilder Lists app.
2. Click the New button to open the List Builder interface.
3. Configure all necessary elements in the List Builder. Once the configuration is complete, click the Active button to activate the List Configurator.
4. Click TABS to add and manage the tab for the configurator.

<figure><img src="https://3800415611-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNuSjRiJMvVhtdzNDzWBi%2Fuploads%2FWtVzcfaxsn5zWe8JrO6W%2Fimage.png?alt=media&#x26;token=7708bda9-0fa1-4455-9826-1541c8bb6702" alt=""><figcaption><p>List Configurator tab screen</p></figcaption></figure>

{% hint style="warning" %}
Activating the List Configurator requires completing the following essential configurations:

* Title: The name of the list configurator.
* Object: The Salesforce object associated with the list.
* Datatable Setup: Configurations for the data table to be displayed.
  {% endhint %}

[Learn more about List Configurator Setup >](https://help.smallbuilder.com/smallbuilder-lists/builder-setup-steps)

***

### 🔸 Overview of the List Builder Interface

<figure><img src="https://3800415611-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNuSjRiJMvVhtdzNDzWBi%2Fuploads%2F92xmWcneBEKlehGaBIb0%2FBuilder_Layout.png?alt=media&#x26;token=5679f3bf-d517-452a-b0c8-33bc6d285584" alt=""><figcaption><p>List Builder</p></figcaption></figure>

The List Builder interface is divided into four main sections:

{% tabs %}
{% tab title="Side Panel" %}
The Side Panel is composed of seven key components, allowing users to perform **various configurations**, including **layouts, data import/export, compact views, and mobile settings.**

<figure><img src="https://3800415611-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNuSjRiJMvVhtdzNDzWBi%2Fuploads%2F6WfxoBp4mqFtOvxFqQFv%2Fimage.png?alt=media&#x26;token=f828fefc-919c-4995-892c-f250bebd59b0" alt="" width="225"><figcaption><p>Side Panel</p></figcaption></figure>

* [**default**](https://help.smallbuilder.com/smallbuilder-lists/builder-setup-steps/default-setup)

  This panel is used to configure basic settings for the list, including:

  * Basic information such as name, associated object, and description.
  * Enabling data export to and import from Excel.
* [**table**](https://help.smallbuilder.com/smallbuilder-lists/builder-setup-steps/datatable-setup)

  This panel manages the data table settings, including:

  * Number of records displayed per page.
  * Adding virtual columns.
  * Configuring row-level actions.
* [**import**](https://help.smallbuilder.com/smallbuilder-lists/builder-setup-steps/data-import-setup)

  This panel appears when Allow Import is enabled in the Default settings. It lets you configure fields and actions for importing data from Excel.
* [**action**](https://help.smallbuilder.com/smallbuilder-lists/builder-setup-steps/action-setup)

  This panel is used to add and configure actions (buttons) at the top of the list.
* [**filter**](https://help.smallbuilder.com/smallbuilder-lists/builder-setup-steps/filter-setup)

  This panel allows you to add and configure filters displayed above the data table.
* [**compact**](https://help.smallbuilder.com/smallbuilder-lists/builder-setup-steps/compact-configurator-setup)

  This panel configures a compact version of the configurator for display on the Home page or in the App Builder. The compact list can display up to five columns.
* [**mobile**](https://help.smallbuilder.com/smallbuilder-lists/builder-setup-steps/mobile-setup)

  This panel configures the mobile version of the configurator. Note that only one Action (button) is allowed in the mobile version.
  {% endtab %}

{% tab title="Preview Panel" %}
The Preview Panel allows users to **easily review the configured table structure, various action buttons, and detailed filter conditions.** It provides a comprehensive view of the entire list configuration, helping users quickly understand the overall context and make adjustments as needed.

<figure><img src="https://3800415611-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNuSjRiJMvVhtdzNDzWBi%2Fuploads%2FoRKp5WR2ZmDyPCkZqOT5%2FPreview_Layout.png?alt=media&#x26;token=891ca056-7673-4764-9c6f-d183fa4cc59c" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Header" %}
The header acts as the central control center for the List Configurator. It allows users to view and manage key settings for the List Configurator, **perform essential actions such as saving, activating, previewing, and cloning, and navigate between important functionalities.**

<figure><img src="https://3800415611-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNuSjRiJMvVhtdzNDzWBi%2Fuploads%2FgV9XYLoXVOdu9dbGYFBA%2Fimage.png?alt=media&#x26;token=572d7b8d-a115-4efa-808f-224580fba7c3" alt=""><figcaption><p>Header</p></figcaption></figure>

**Key Elements of the Header**

* [**TABS (Generated Tabs)**](https://help.smallbuilder.com/builder-setup-steps/list-deployment-and-management#create-tabs)\
  Create and manage ListView tabs based on the current List Configurator.
* [**ACTIVE / DEACTIVE**](https://help.smallbuilder.com/builder-setup-steps/list-deployment-and-management#save-and-activate)\
  Only active List Configurators can generate ListViews. If deactivated, the associated ListView will not function.
* **SAVE**\
  Save the current List Configurator.
* **DELETE**\
  Permanently delete the current List Configurator.
* **CLONE**\
  Create a copy of the List Configurator based on the latest saved version. After clicking the clone button, ensure to click SAVE to complete the duplication process.
* **SALESFORCE SETUP**\
  Navigate to Salesforce’s setup screen.
* **HELP**\
  Access the SmallBuilder Lists help documentation.
* **Preview**\
  Preview the ListView based on the most recently saved configuration.
* **Reset**\
  Revert to the last saved configuration during the editing process. Clicking the Reset button will restore the configurator to its previously saved state.
  {% endtab %}

{% tab title="DataSource Configuration" %}

<figure><img src="https://3800415611-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNuSjRiJMvVhtdzNDzWBi%2Fuploads%2F0pIMebFjvDqAHksY5BLf%2Fimage.png?alt=media&#x26;token=d3541922-9c43-4288-9565-52f59ad01932" alt=""><figcaption><p>DataSource Configuration screen</p></figcaption></figure>

The Data Source Setup screen provides powerful functionality to connect and manage various data sources. **Users can seamlessly integrate both internal and external data, enabling real-time data retrieval as needed.** Additionally, the screen allows users to monitor the connection status of data sources and adjust settings to ensure optimal performance.

[Learn more about Data Source Setup >](https://help.smallbuilder.com/smallbuilder-lists/builder-setup-steps/datasource-setup)
{% endtab %}
{% endtabs %}