Used to display business object information.

Attributes

Parameter	Description	Type	Optional Values	Default
apiName	Business object apiName (required)	String	—	-
dataId	Business object data ID (required)	String	—	-
compInfo	Describe information of the detail information component	Object	—	-

compInfo

Parameter	Description	Type	Optional Values	Default
is_hide_all_btn	Whether to show the Show All Information button	Boolean	—	-
is_hide_auto_btn	Whether to show the Auto Fit button	Boolean	—	-
field_section	All displayed fields	Array	—	-
fields	Describe information of the fields to display	Objects	—	-
data	Data corresponding to the fields	Array	—	-

Usage

Basic Usage

Note the required parameters in the example below.

<template>
    <object-detail-form :compInfo="dCompInfo" :apiName="dApiName" :dataId="dDataId"></object-detail-form>
</template>
<script>
    export default {
        components: {
            ObjectDetailForm: FxUI.component.get('ObjectDetailForm')
        },
        data() {
            return {
                dApiName: 'object_o9frN__c',
                dDataId: '5f5b26573c10140001c5fe25',
                dCompInfo: {
                    field_section: [{
                        column: 2,
                        header: 'Group 1',
                        form_fields: [{
                            field_name: "name",
                            is_readonly: false,
                            is_required: true,
                            render_type: "text"
                        }]
                    }],
                    fields: {
                        name: {
                            type: 'text',
                            api_name: "name",
                            label: "Created Time"
                        }
                    },
                    data: {
                        name: '23333'
                    }
                }
            }
        }
    }
</script>

Component Extension

Extensions here are mainly changes in the template. The script part is omitted.

<object-detail-form :compInfo="dCompInfo" :apiName="dApiName" :dataId="dDataId">
    <div slot="field_api_name">A field corresponding to a certain apiname</div>
    <div slot="text">A field of a certain type</div>
</object-detail-form>

Extension When Used in the Detail Page

<template>
    <object-detail apiName="AccountObj" dataId="5ea686c2fa887500018d6e98">
        <template v-slot:HeadInfo="slotProps">
            <object-detail-form :compInfo="slotProps.compInfo" :apiName="slotProps.apiName" :dataId="slotProps.dataId">
                <div slot="field_api_name">A field corresponding to a specific apiname</div>
                <template v-slot:high_seas_id="slotProps">
                    <div>{{slotProps.data.high_seas_id__r}}</div>
                </template>
            </object-detail-form>
        </template>
    </object-detail>
</template>
<script>
    export default {
        components: {
            ObjectDetail: FxUI.component.get('ObjectDetail'),
            ObjectDetailForm: FxUI.component.get('ObjectDetailForm')
        }
    }
</script>