FxObjectList Component

Displays data lists for business objects.

Attributes

Parameter	Description	Type	Optional Values	Default Value
apiName	Business object API name (required)	String	—	-
title	List title	String	—	Current object name
listUrl	List page data request URL	String	—	System API
quickFilterFields	Fields exposed for quick filtering	Array	—	-
isShowSearch	Whether to display search input	Boolean	—	-
isShowSceneFilter	Whether to display scene filter	Boolean	—	-
isShowFieldFilter	Whether to display field filter	Boolean	—	-
isShowColumnSetting	Whether to display column settings	Boolean	—	-
isShowMultiBtn	Whether to display multi-select buttons	Boolean	—	-
beforeInitTable	Hook function, triggered before list initialization	Function	—	-
beforeRender	Hook function, triggered before rendering list data	Function	—	-
beforeParse	Hook function, triggered before requesting list data	Function	—	-
isShowObjectDetail	Whether to show detail page when clicking a column	Boolean	—	false
batchBtns	Batch operation buttons	Array	—

batchBtns

Property	Description	Type	Optional Values	Default Value
text	Button text	String	—	-
className	Button CSS class name	String	—	-
attrs	Custom attributes for button	String	—	-

Basic Usage

Get the component via FxUI.component.get('ObjectList').

<template>
    <object-list apiName="AccountObj"></object-list>
</template>
<script>
    export default {
        components: {
            ObjectList: FxUI.component.get('ObjectList')
        }
    }
</script>

Preview:

Component Extension

To meet enterprise customization requirements, we provide developers with extension methods to quickly develop corresponding features.

Hooks

Before rendering the object list page, it goes through a series of processes - such as initializing the table, requesting table configuration data, parsing table configuration data, requesting list data, parsing list data, etc. During this process, hook functions are executed, giving developers opportunities to add their own code at different stages.

<template>
    <object-list v-bind="options"></object-list>
</template>
<script>
    export default {
        components: {
            ObjectList: FxUI.component.get('ObjectList')
        },
        data() {
            return {
                options: {
                    apiName: "AccountObj",
                    /**
                     * @description Called when initializing table
                     * @param {Object} options Parameters required for list instantiation
                     * @return {Object} options Returns an object
                     */
                    beforeInitTable: (options) => {
                        // todo what you want
                        return options;
                    },
                    /**
                     * @description Called when requesting list data
                     * @param {Object} params Request parameters
                     * @return {Object} params Returns an object
                     */
                    beforeFetch: (params) => {
                        // todo what you want
                        return params;
                    },
                    /**
                     * @description Called when rendering list data
                     * @param {Object} rawData Raw data
                     * @param {Object} data Parsed data
                     * @return { data: any[], totalCount: Number } Returns an object containing data and totalCount properties
                     */
                    beforeRender(rawData, data) {
                        // todo what you want
                        return data;
                    }
                }
            }
        }
    }
</script>

Component Slots

Component slots allow developers to insert components into predefined areas of the table.

<template>
    <object-list v-bind="options">
        <div slot="bottomTip">
            Additional information
        </div>
    </object-list>
</template>
<script>
    export default {
        components: {
            ObjectList: FxUI.component.get('ObjectList')
        }
    }
</script>

For detailed information about component slots, please continue reading.

Hooks

beforeInitTable

Parameters:

• options: Object
  • columns: Array: Table column configuration
    • api_name: String: Field API name
    • render: Function: Field render function
    • is_index: Boolean: Whether the field is exposed
  • Other properties will be gradually opened...

Returns:

This method should return parameters required for list instantiation.

Usage:

Called during list page initialization, before calling APIs. Here you can modify the properties when instantiating the list component.

export default {
    beforeInitTable(options) {
        // Process options
        options.columns.push({
            api_name: 'field_abc__c',
            render(data) {
                return 'Custom field display';
            }
        });
        options.columns.push({
            api_name: 'xxx',
            render(data) {
                return 'Custom operation button';
            }
        });
        return options;
    }
}

beforeFetch

Parameters:

Predefined interface request parameters.

Returns:

Should return parameters required for the API request.

Usage:

Called when requesting list data, before calling the API. Here you can modify the request parameters.

This hook is typically used with listUrl to modify the list data source.

export default {
    beforeFetch(params) {
        // Process params
        return params;
    }
}

beforeParse

Parameters:

Response data from the list data API.

Returns:

Returns fixed data structure:

• data: Object:
  • totalCount: Number: Total count of list data
  • data: Array: Data list

Usage:

Called when parsing list data, before data parsing. Here you can modify all returned data, and the result will affect list data rendering.

export default {
    beforeParse(res) {
        // Process res
        return {
            totalCount: 0,
            data: [{
                name: 'FxUI',
                field_1__c: 'FxUI',
                field_2__c: 'FxUI'
            }, ...]
        };
    }
}

Slots

bottomTip

Allows inserting custom content at the bottom of the list.