# Creating a List Configurator Manually ### 🔸 Creating the Component Directly In addition to creating a tab through the builder, you can add the list configurator anywhere using the Aura Component ``. ```html ``` *** ### :small\_orange\_diamond: Aura Component Attributes

Attribute	Description
configurationId	The record ID of the builder.
height	The height of the configurator (unit: px). The default value is 500px.
parentFieldApiName	When adding the configurator as a related list on a record page, specify the API name of the field that references the list configurator object from the record page object.
recordId	When adding the configurator as a related list on a record page, set this to the record ID of the record page object.
hideFilters	Hides the configured filters.
filters	Use the filters attribute to set default filter conditions for the list. This attribute accepts filter values in a JSON array format, and the specified conditions will be automatically applied when the list is loaded.

*** ### :small\_orange\_diamond: Example: Creating a Component #### Creating a Component for a Tab If your organization or profile has IP restrictions, you may not be able to use the builder’s tab creation feature. In such cases, you need to create a tab manually by writing an Aura Component.

<aura:component implements="force:appHostable">
    <SBLS:ListConfigurator configurationid="{BUILDER_RECORD_ID}" height="null" />
</aura:component>

{% hint style="warning" %} When manually creating a tab with a component, set the height attribute to null. This allows the list configurator to automatically adjust its height within the tab for optimal display. {% endhint %} #### Manually Creating a Component for a Related List If you want to embed a list configurator for Opportunity Products (OpportunityLineItem) on an Opportunity (Opportunity) record page, you can create an Aura Component as follows:

<aura:component implements="force:hasRecordId">
    <SBLS:ListConfigurator 
        configurationid="{BUILDER_RECORD_ID}"
        parentFieldApiName="OpportunityId"
        recordId="{!v.recordId}" />
</aura:component>

#### Passing Filter Values Let’s say you have an Aura Component named `OpportunityProductList.cmp` that displays **a list of** **Opportunity Products**: {% code title="OpportunityProductList.cmp" %} ```html ``` {% endcode %}

Assume the Opportunity Product list has the following filters: * **ProductCode**: contains ‘CLOUD’ * **Quantity**: greater than 1 * **ServiceDate**: between 2025-06-01 and 2025-12-31 To apply these default values, modify the component like this:

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
    <aura:attribute name="filters" type="Object" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <SBLS:ListConfigurator 
        configurationId="{Builder_Record_ID}"
        parentFieldApiName="OpportunityId"
        recordId="{!v.recordId}"
        filters="{!v.filters}" />
</aura:component>

* The **`filters`** attribute is used to set default filter conditions for the list. * It accepts a **JSON array** and the specified filters will be automatically applied when the list loads. * The **``** tag is used to initialize the filter values when the component loads. Controller example (OpportunityProductListController.js): {% 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 %} You will see that the list is loaded with the filter values you specified in the component.

#### filters Attribute The filters attribute is used to apply default filter conditions to the list. It accepts an array of filter objects, each with the following properties:

Attribute Value

fieldApiName The API name of the field to apply the filter to.

value The value to filter by. For number or date ranges, use an object with from and to properties.

Attribute	Value
fieldApiName	The API name of the field to apply the filter to.
value	The value to filter by. For number or date ranges, use an object with `from` and `to` properties.
operator	Used to define comparison logic for number or date filters. Supported operator values: `equals`: Equal to `not_equal_to`: Not equal to `less_than`: Less than `greater_than`: Greater than `less_or_equal`: Less than or equal to `greater_or_equal`: Greater than or equal to

operator

Used to define comparison logic for number or date filters.

Supported operator values:

equals: Equal to
not_equal_to: Not equal to
less_than: Less than
greater_than: Greater than
less_or_equal: Less than or equal to
greater_or_equal: Greater than or equal to