FxObjectDetail Component

Displays detailed data of business objects.

Attributes

Parameter	Description	Type	Optional Values	Default
apiName	Business object API name (required)	String	—	-
dataId	Business object data ID (required)	String	—	-
dataIds	All IDs of data list (required for pagination)	Array	—	-
isSlide	Whether to slide	Boolean	—	-
modal	Whether to show overlay (effective when sliding)	Boolean	—	-
zIndex	Z-index (effective when sliding)	Number	—	-
fullScreen	Whether to enable fullscreen (effective when sliding)	Boolean	—	-

Basic Usage

The component can be obtained via FxUI.component.get('ObjectDetail').

Code example:

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

Preview:

Component Extension

To meet enterprise customization requirements, we provide developers with extension methods for rapid feature development.

Hooks

Before rendering object details, a series of processes are executed - such as fetching detail layout/data, parsing data, etc. During this process, hook functions are called, allowing developers to inject custom code at different stages.

<template>
    <object-form apiName="AccountObj" dataId="dlkj2laksjdflj2lkajsd" :beforeInitDataAsync="beforeInitDataAsync" :beforeFetch="beforeFetch"></object-form>
</template>
<script>
    export default {
        components: {
            ObjectDetail: FxUI.component.get('ObjectDetail')
        },
        data() {
            return {
                beforeInitDataAsync(data, next) {
                    //todo what you want
                    next(data);
                },
                beforeFetch(param) {
                    //todo what you want
                    return param;
                }
            }
        }
    }
</script>

Component Slots

The slot mechanism allows developers to replace certain components or component types with custom-developed components, thereby modifying field interaction patterns.

<template>
    <object-detail apiName="AccountObj" type="add">
        <!-- Replace detail component -->
        <template v-slot:Form="slotProps">
            <cus-form :compInfo="slotProps.compInfo" :apiName="slotProps.apiName" :dataId="slotProps.dataId"></cus-form>
        </template> 
    </object-detail>
</template>
<script>
    export default {
        components: {
            ObjectDetail: FxUI.component.get('ObjectDetail'),
            CusComp: {
                render: h => h('div', 'Custom Component')
            }
        }
    }
</script>

For detailed information about component slots, please continue reading.

Hooks

beforeFetch

Called when the detail page invokes an API, before the actual call. Allows modifying API call parameters.

Accepts one parameter:

• data: Object
  • url: String: API endpoint for fetching detail layout/data
  • postData: Object: Request parameters
    • objectDataId: String: Data ID
    • objectDescribeApiName: String: Business object API name

After overriding, ensure to return a data object.

beforeFetchAsync

Asynchronous version of beforeFetch.

Accepts two parameters:

• data: Object: Same as the data parameter in beforeFetch
• `next: Function**: Must call this method to resolve the hook.

beforeParse

Called when the detail page parses data, before actual parsing. Allows modifying all returned data.

Accepts one parameter:

• data: Object:
  • data: Object: Detailed data
  • describe: Object: Business object description
  • layout: Object: Detail page layout information
    • components: Array: Description of all components in detail
    • layout_structure: Object: Detail layout structure

After overriding, ensure to return a data object.

beforeParseAsync

Asynchronous version of beforeParse.

Accepts two parameters:

• data: Object: Same as the data parameter in beforeParse
• `next: Function**: Must call this method to resolve the hook.

beforeInitData

Called when the detail page renders, before actual rendering. Allows modifying all parsed data.

Accepts one parameter:

• data: Object:
  • components: Object: Parsed component descriptions (key is component API name)
  • data: Object: Parsed detailed data
  • describe: Object: Parsed business object description
  • layout: Array: Parsed detail layout information

After overriding, ensure to return a data object.

beforeInitDataAsync

Asynchronous version of beforeInitData.

Accepts two parameters:

• data: Object: Same as the data parameter in beforeInitData
• `next: Function**: Must call this method to resolve the hook.