# SmallBuilder Lists 시작하기

SmallBuilder Lists의 핵심 기능인 **List Builder는 사용자 친화적인 인터페이스를 통해 강력한 리스트 구성기(List Configurator)를 생성합니다.** List Builder는 직관적이고 효율적으로 설계되어 있어, 누구나 쉽게 리스트 구성기를 생성할 수 있습니다. List Builder를 통해 만들어진 리스트 구성기는 탭 형태로 변환되어 사용자 인터페이스에 통합됩니다. 이를 통해 사용자들은 익숙한 환경에서 새로운 리스트 기능을 쉽게 활용할 수 있습니다.

{% hint style="info" %}
리스트 구성기(List Configurator)탭에서 레코드를 생성 또는 편집 시에 List Builder가 실행됩니다.
{% endhint %}

***

### :small\_orange\_diamond: 리스트 구성기 생성 및 설정

1. SmallBuilder Lists 앱의 리스트 구성기(List Configurator) 탭으로 이동합니다.

<figure><img src="https://3985481653-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA2fSsDo5KsIVkUoDIV1b%2Fuploads%2F9IobhCjiZWxjeORVuGQi%2Fimage.png?alt=media&#x26;token=068bb2d4-3c75-4e34-8a3c-a2c2346ad762" alt=""><figcaption><p>리스트 구성기 탭 화면</p></figcaption></figure>

1. 새로  만들기(New) 버튼을 클릭하여 List Builder 화면으로 이동합니다.&#x20;
2. List Builder에서 리스트를 구성하기 위하여 필요한 요소들을 모두 설정한 후 활성화(Active) 버튼을 클릭하여 리스트 구성기를 활성화하고, TABS(생성된 탭)를 눌러 탭 추가 및 관리를 완료합니다.

{% hint style="warning" %}
**리스트 구성기의 활성화**는 의 필수 요소들을 모두 설정해야  가능합니다.

* Title(타이틀)
* Object(개체)
* Datatable Setup(데이터 테이블 설정)
  {% endhint %}

[<mark style="color:blue;">리스트 구성기 설정 ></mark> ](https://help.smallbuilder.com/ko/smallbuilder-lists/undefined-1-1)

***

### :small\_orange\_diamond: List Builder 화면 구성

<figure><img src="https://3985481653-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA2fSsDo5KsIVkUoDIV1b%2Fuploads%2FCPmZRto3oKRIH0CIGKIB%2Fimage.png?alt=media&#x26;token=0b259a33-6570-4d5b-9c5d-e8539cb62ba7" alt=""><figcaption><p>List Builder 화면</p></figcaption></figure>

List Builder 화면은 크게 **사이드 패널**, **미리 보기 패널**, **헤더**, **데이터 소스 설정**으로 구성되어 있습니다.

{% tabs %}
{% tab title="사이드 패널" %}

<figure><img src="https://3985481653-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA2fSsDo5KsIVkUoDIV1b%2Fuploads%2FUbWNzoN9rYucY72DSycq%2Fimage.png?alt=media&#x26;token=3cf38ebb-e835-4473-b797-9a5109af3d47" alt="" width="225"><figcaption><p>사이드 패널</p></figcaption></figure>

사이드 패널의 설정 패널은 총 7가지 요소로 구성되어 있으며, 이를 통해 사용자는 **리스트를 구성하는 네 가지 레이아웃을 비롯해 데이터 가져오기, 축소형 리스트, 모바일 작업 등의 다양한 설정**을 수행할 수 있습니다.

* [<mark style="color:blue;">**기본 설정(default)**</mark>](https://help.smallbuilder.com/ko/smallbuilder-lists/undefined-1-1/default-setup) : 리스트의 기본 설정을 하는 패널입니다. 리스트 구성기의 기본 정보(이름, 개체, 설명 등)을 설정하고 Excel 데이터 내보내기, 가져오기 등을 설정할 수 있습니다.
* [<mark style="color:blue;">**테이블(table)**</mark> ](https://help.smallbuilder.com/ko/smallbuilder-lists/undefined-1-1/datatable-setup): 리스트에서 노출될 데이터 테이블을 설정하고 관리하는 패널입니다. 페이지별 레코드 수, 가상 열 추가, 행 작업 추가 등을 설정할 수 있습니다.
* [<mark style="color:blue;">**가져오기(import)**</mark>](https://help.smallbuilder.com/ko/smallbuilder-lists/undefined-1-1/undefined) : 기본 설정에서 데이터 가져오기(Allow import)를 활성화하면 해당 패널이 나타나며, Excel로 데이터를 가져올 필드와 작업을 설정할 수 있습니다.
* [<mark style="color:blue;">**작업(action)**</mark>](https://help.smallbuilder.com/ko/smallbuilder-lists/undefined-1-1/action-setup-optional) : 리스트 상단에 작업(버튼)을 추가하고 설정하는 패널입니다.
* [<mark style="color:blue;">**필터(filter)**</mark>](https://help.smallbuilder.com/ko/smallbuilder-lists/undefined-1-1/filter-setup-optional) : 데이터 테이블 위의 필터를 추가하고 설정하는 패널입니다.
* [<mark style="color:blue;">**축소형(compact)**</mark>](https://help.smallbuilder.com/ko/smallbuilder-lists/undefined-1-1/compact-configurator-setup) : 홈 화면 또는 앱 빌더에 표시할 Configurator의 축소형 버전을 설정합니다. 축소형 리스트에서 표시 가능한 컬럼은 최대 5개입니다.
* [<mark style="color:blue;">**모바일(mobile)**</mark>](https://help.smallbuilder.com/ko/smallbuilder-lists/undefined-1-1/mobile-setup) : 모바일 버전에서 Action(작업)은 1개만 허용됩니다. 모바일 버전에서 사용할 Configurator의 작업을 설정할 수 있습니다.
  {% endtab %}

{% tab title="미리 보기 패널" %}

<figure><img src="https://3985481653-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA2fSsDo5KsIVkUoDIV1b%2Fuploads%2FsNQUXLgLyXef9EzpLInA%2Fimage.png?alt=media&#x26;token=12616afa-6f5a-4740-a185-e4733b189c26" alt=""><figcaption><p>미리 보기 패널</p></figcaption></figure>

미리 보기 패널에서는 **사용자가 설정한 테이블 구조, 다양한 작업 버튼, 세부적인 필터 조건 등을 쉽게 확인**할 수 있습니다. 미리 보기 패널은 사용자가 리스트 구성의 전체 맥락을 쉽게 파악하고, 필요에 따라 신속하게 조정할 수 있도록 도와줍니다.
{% endtab %}

{% tab title="헤더" %}
헤더는 리스트 구성기의 중앙 제어 센터 역할을 합니다. 헤더에서 해당 리스트 구성기의 주요 설정을 확인하고 관리할 수 있습니다. **리스트 구성기 저장 및 활성화, 미리 보기, 복제 등 핵심적인 작업들을 수행**할 수 있습니다.

<figure><img src="https://3985481653-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA2fSsDo5KsIVkUoDIV1b%2Fuploads%2FfaBqn8AdPOEPlHriQP3Y%2Fimage.png?alt=media&#x26;token=b717006b-8d50-4532-b25c-44d93cdf86a9" alt=""><figcaption><p>헤더</p></figcaption></figure>

* 좌측 상단 헤더에서 해당 리스트 구성기의 **활성화 여부**를 확인할 수 있습니다.
* [<mark style="color:blue;">**TABS(생성된 탭)**</mark>](https://help.smallbuilder.com/ko/undefined-1-1/deploy-manage#undefined-1) **:**  해당 리스트 구성기를 기반으로 ListView 탭을 생성하고 관리할 수 있습니다.
* [<mark style="color:blue;">**ACTIVE (활성화) / DEACTIVE(비활성화)**</mark>](https://help.smallbuilder.com/ko/undefined-1-1/deploy-manage#undefined) **:** 활성화된 리스트 구성기만 ListView를 구성할 수 있습니다. 비활성화인 경우 해당 ListView는 실행되지 않습니다.
* **SAVE(저장) :** 해당 리스트 구성기를 저장합니다.
* **DELETE(삭제) :** 해당 리스트 구성기를 완전히 삭제합니다.
* **CLONE(복제) :** 최종 저장된 리스트 구성기를 기반으로 복제합니다. 복제 버튼을 누른 후 '저장' 버튼을 눌러야 복제가 완료됩니다.
* **SALESFORCE SETUP(세일즈포스 설정) :** Salesforce의 설정 화면으로 이동합니다.
* **HELP(도움말) :** SmallBuilder Lists의 헬프 문서로 이동합니다.
* **Preview(미리 보기) :** 최종 저장된 리스트 구성기를 기반으로 리스트를 미리 볼 수 있습니다.
* **Reset(초기화) :** 편집 과정에서 가장 최근의 저장 상태로 초기화하고 싶은 경우, Reset 버튼을 누르면 최종적으로 저장된 설정으로 초기화됩니다.
  {% endtab %}

{% tab title="데이터 소스 설정" %}

<figure><img src="https://3985481653-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA2fSsDo5KsIVkUoDIV1b%2Fuploads%2Fy6FPX9ccuf0ZsL3TFIJT%2Fimage.png?alt=media&#x26;token=44414628-0543-4eef-939a-38057fe31d59" alt=""><figcaption><p>데이터 소스 설정 화면</p></figcaption></figure>

데이터 소스 설정 화면에서는 다양한 데이터 소스를 연결하고 관리할 수 있는 기능을 제공합니다. **사용자는 내부 및 외부 데이터 손쉽게 통합하여, 필요한 데이터를 실시간으로 가져올 수 있습니다.** 또한, 데이터 소스의 연결 상태를 모니터링하고, 필요한 경우 설정을 조정하여 최적의 성능을 유지할 수 있습니다.

[<mark style="color:blue;">데이터 소스 설정 ></mark>](https://help.smallbuilder.com/ko/smallbuilder-lists/undefined-1-1/datasource-setup)
{% endtab %}
{% endtabs %}