FxObjectDetailForm Component

Displays business object information.

Attributes

Parameter	Description	Type	Options	Default
apiName	Business object API name (required)	String	—	-
dataId	Business object data ID (required)	String	—	-
compInfo	Detail component description	Object	—	-

compInfo

Parameter	Description	Type	Options	Default
is_hide_all_btn	Whether to show "Show All Info" button	Boolean	—	-
is_hide_auto_btn	Whether to show "Auto Fit" button	Boolean	—	-
field_section	All fields to display	Array	—	-
fields	Field description information	Objects	—	-
data	Field corresponding data	Array	—	-

Usage

Basic Usage

Note the required parameters in the example.

<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: "Creation Time"
                        }
                    },
                    data: {
                        name: '23333'
                    }
                }
            }
        }
    }
</script>

Component Extension

Extensions mainly involve template modifications (script section omitted here).

<object-detail-form :compInfo="dCompInfo" :apiName="dApiName" :dataId="dDataId">
    <div slot="field_api_name">Field corresponding to specific API name</div>
    <div slot="text">Field of specific type</div>
</object-detail-form>

Extension in 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">Field corresponding to specific API name</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>