> For the complete documentation index, see [llms.txt](https://help.smallbuilder.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.smallbuilder.com/ko/smallbuilder-lists/undefined-1-1/deploy-manage/create-manually.md).

# 리스트 구성기를 직접 생성하기

:small\_orange\_diamond: Component 직접 생성

빌더를 통한 탭 생성 이외에도 Aura Component `<SBLS:ListConfigurator />`를 사용하여 원하는 위치에 리스트 구성기를 추가할 수 있습니다.

```html
<aura:component >
    <SBLS:ListConfigurator configurationId="{빌더 레코드 ID}" />
</aura:component>
```

***

### :small\_orange\_diamond: Aura Component 속성

<table><thead><tr><th width="233">속성</th><th>설명</th></tr></thead><tbody><tr><td><strong>configurationId</strong></td><td>빌더의 레코드 ID입니다.</td></tr><tr><td><strong>height</strong></td><td>구성기의 높이(단위: px)입니다. 기본값은 500px입니다.</td></tr><tr><td><strong>parentFieldApiName</strong></td><td>레코드 페이지의 관련 목록(Related List)으로 추가할 경우, 해당 레코드 페이지 개체와 리스트 구성기 개체 간 참조된 필드의 API명을 설정합니다.</td></tr><tr><td><strong>recordId</strong></td><td>레코드 페이지의 관련 목록으로 추가할 경우, 해당 레코드 페이지 개체의 recordId를 설정합니다.</td></tr><tr><td><strong>hideFilters</strong></td><td>설정한 필터를 숨깁니다.</td></tr><tr><td><a href="#undefined"><strong>filters</strong></a></td><td>리스트에 적용할 <strong>기본 필터 조건을 설정하고 싶을 경우</strong> filters 속성을 사용합니다. 이 속성은 <strong>JSON 배열 형식으로 필터 값을 전달</strong>하며, 리스트가 로드될 때 자동으로 해당 조건이 적용됩니다.</td></tr></tbody></table>

***

### :small\_orange\_diamond: Component 작성 예시

#### **Tab을 위한 Component 생성하기**

조직 또는 프로필에 IP 제한이 설정되어 있는 경우, 빌더의 탭 생성 기능을 사용할 수 없습니다. 이럴 때는 Aura Component를 직접 작성하여 탭을 생성해야 합니다.

<pre class="language-html"><code class="lang-html">&#x3C;aura:component implements="force:appHostable">
<strong>    &#x3C;SBLS:ListConfigurator configurationId="{빌더 레코드 ID}" height="null" />
</strong>&#x3C;/aura:component>
</code></pre>

{% hint style="warning" %}
Component로 **탭을 직접 생성**하려는 경우, **height 속성을 null 값**으로 설정해야 합니다.

이렇게 하면 탭 내에서 리스트 구성기가 자동으로 높이를 조절하여 최적의 크기로 표시됩니다.
{% endhint %}

***

#### **관련 목록을 위한 Component 직접 생성하기**

기회(Opportunity) 레코드 페이지에 기회 제품(OpportunityLineItem)에 대한 리스트 구성기를 직접 Aura Component를 사용하여 삽입하려는 경우, 아래와 같이 작성합니다.

<pre class="language-html"><code class="lang-html">&#x3C;aura:component implements="force:hasRecordId">
    &#x3C;SBLS:ListConfigurator 
        configurationId="{빌더 레코드 ID}"
<strong>        parentFieldApiName="OpportunityId"
</strong><strong>        recordId="{!v.recordId}" />
</strong>&#x3C;/aura:component>
</code></pre>

***

#### **필터 값 전달하기**

예를 들어, **Opportunity Product에 대한 리스트**를 보여주는 `OpportunityProductList.cmp`라는 **Aura Component**가 있다고 가정해 보겠습니다.

{% code title="OpportunityProductList.cmp" %}

```html
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
    <SBLS:ListConfigurator 
        configurationId="{빌더 레코드 ID}"
        parentFieldApiName="OpportunityId"
        recordId="{!v.recordId}" />
</aura:component>
```

{% endcode %}

<figure><img src="/files/N36GTOh3mCPLIaROlZqx" alt=""><figcaption><p>OpportunityProductList.cmp</p></figcaption></figure>

**Opportunity Product 리스트**에는 **제품 코드**(`ProductCode`), **수량**(`Quantity`), **날짜**(`ServiceDate`) 필터가 있습니다. 각 필터들의 기본 값은 다음과 같이 설정합니다:

* **ProductCode**: ‘CLOUD’가 포함 됨
* **Quantity**: 1보다 큼
* **ServiceDate**: 2025-06-01 \~ 2025-12-31

<pre class="language-html"><code class="lang-html">&#x3C;aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
<strong>    &#x3C;aura:attribute name="filters" type="Object" />
</strong><strong>    &#x3C;aura:handler name="init" value="{!this}" action="{!c.doInit}" />
</strong>    &#x3C;SBLS:ListConfigurator 
        configurationId="{빌더 레코드 ID}"
        parentFieldApiName="OpportunityId"
        recordId="{!v.recordId}"
<strong>        filters="{!v.filters}" />
</strong>&#x3C;/aura:component>
</code></pre>

* **`filters`** 속성은 리스트에 기본 필터 조건을 설정할 때 사용되며, **JSON 배열 형식**으로 전달됩니다. 리스트가 처음 로드될 때 자동으로 해당 필터가 적용됩니다.
* **`<aura:handler name="init" />`**&#xB97C; 사용하여 구성요소가 로드 될 때 **`filters`** 값을 할당합니다.

{% code title="OpportunityProductListController.js" %}

```javascript
({
    doInit : function(component, event, helper) {
        component.set("v.filters", [
            {
                fieldApiName: 'ProductCode',
                value: 'CLOUD'
            },
            {
                fieldApiName: 'Quantity',
                value: 1,
                operator: 'greater_than'
            },
            {
                fieldApiName: 'ServiceDate',
                value: {
                    from: '2025-06-01',
                    to: '2025-12-31'
                }
            }
        ]);
    }
})
```

{% endcode %}

리스트에서 구성요소에 설정한 필터 값이 적용한 것을 확인하실 수 있습니다.

<figure><img src="/files/m7Kl3h7vvrnIgnucEVDA" alt=""><figcaption><p>OpportunityProductList.cmp 필터 적용 결과</p></figcaption></figure>

#### filters 속성

<table data-full-width="false"><thead><tr><th width="165.4609375">속성</th><th>값</th></tr></thead><tbody><tr><td><strong>fieldApiName</strong></td><td>필터를 적용할 필드의 API 이름입니다.</td></tr><tr><td><strong>value</strong></td><td>필터 값입니다. 숫자 또는 날짜 범위의 경우 <code>from</code>, <code>to</code> 속성을 포함한 객체 형태로 설정합니다.</td></tr><tr><td><strong>operator</strong></td><td><p>숫자 필터 등에서 비교 연산자를 설정할 때 사용합니다. (옵션)<br>적용할 수 있는 연산자 값은 다음과 같습니다:</p><ul><li><strong><code>equals</code>:</strong> 같음</li><li><strong><code>not_equal_to</code>:</strong> 같지 않음</li><li><strong><code>less_than</code>:</strong> 보다 작음</li><li><strong><code>greater_than</code>:</strong> 보다 큼</li><li><strong><code>less_or_equal</code>:</strong> 작거나 같음</li><li><strong><code>greater_or_equal</code>:</strong> 크거나 같음</li></ul></td></tr></tbody></table>