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

: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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.smallbuilder.com/ko/smallbuilder-lists/undefined-1-1/deploy-manage/create-manually.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.