Used to display detailed data of a business object.

Attributes

Parameter	Description	Type	Optional Values	Default
apiName	Business object apiName (required)	String	—	-
dataId	Business object data ID (required)	String	—	-
dataIds	All IDs in the data list, used for pagination	Array	—	-
isSlide	Whether sliding mode is enabled	Boolean	—	-
modal	Whether a mask is needed (effective in slide mode)	Boolean	—	-
zIndex	z-index (effective in slide mode)	Number	—	-
fullScreen	Whether full-screen mode is enabled (effective in slide mode)	Boolean	—	-

Simple Usage

The component is obtained through 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>

Display effect:

Component Extension

To meet enterprise customization needs, the component provides several extension methods that allow developers to quickly build corresponding functions.

Hooks

Before object details are rendered, they go through a series of steps, such as fetching the detail layout and data, parsing data, and so on. During this process, some functions called hooks are also executed, giving developers opportunities to add their own 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 a component or a certain type of component with one they build themselves, thereby changing the interaction form of the field.

<template>
    <object-detail apiName="AccountObj" type="add">
		<!-- Replace the detail information 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 slots, continue reading below.

Hooks

beforeFetch

Called when the detail page invokes the API, before the API call happens. You can modify the parameters passed to the API here.

The hook accepts one parameter:

• data: Object
  • url: String: API for fetching the detail layout and data
  • postData: Object: Request parameters
    • objectDataId: String: Data ID
    • objectDescribeApiName: String: Business object apiName

After overriding it, make sure to return a data object.

beforeFetchAsync

Asynchronous version of beforeFetch.

The hook accepts two parameters:

• data: Object: same as the data parameter of beforeFetch
• next: Function: this method must be called to resolve the hook

beforeParse

Called when the detail page parses data, before parsing begins. You can modify all data returned by the API here.

The hook accepts one parameter:

• data: Object:
  • data: Object: Detail data
  • describe: Object: Describe information of the business object
  • layout: Object: Layout information of the detail page
    • components: Array: Describe information of all components in the detail page
    • layout_structure: Object: Layout structure of the detail page

After overriding it, make sure to return a data object.

beforeParseAsync

Asynchronous version of beforeParse.

The hook accepts two parameters:

• data: Object: same as the data parameter of beforeParse
• next: Function: this method must be called to resolve the hook

beforeInitData

Called when the detail page renders, before rendering starts. You can modify all parsed data here.

The hook accepts one parameter:

• data: Object:
  • components: Object: Parsed describe information of components, where the key is the component apiName
  • data: Object: Parsed detail data
  • describe: Object: Parsed describe information of the business object
  • layout: Array: Parsed layout information of the detail page

After overriding it, make sure to return a data object.

beforeInitDataAsync

Asynchronous version of beforeInitData.

The hook accepts two parameters:

• data: Object: same as the data parameter of beforeInitData
• next: Function: this method must be called to resolve the hook