When an external business system is integrated into Fxiaoke, common requirements include:

• Passing parameters when opening a third-party H5 page from a Fxiaoke mini program
• Returning the selected result from the third-party H5 page back to the mini program

Typical scenario:

When creating a record, the user clicks a lookup field, opens a third-party H5 system to select data, and then displays the selected result back in the current lookup field.

Applicable Scenario

This solution is suitable for scenarios where a mini program form needs to call a third-party page to complete value selection and then write the result back to the current form.

Solution

Technical Architecture

webviewOpen

webviewOpen is a built-in Fxiaoke API used to open third-party H5 pages.

sendNotification

sendNotification is a JSAPI used to send messages back to a Fxiaoke mini program.

Implementation Flow

1. The user clicks a custom field in the form.
2. The mini program opens a third-party H5 page through fsapi.jsapi.webviewOpen.
3. The H5 page completes its selection logic.
4. The H5 page returns the result to the mini program.
5. The mini program receives the callback and updates the form field through context.setData.

Core Implementation

Plugin Main File

// plugins/formplugin.js
export default function (context) {
    return {
        // Custom field component configuration
        customFieldCom({field}) {
            let comInfo = null;
            if (field && field.api_name === 'field_testplugin__c') {
                comInfo = {
                    name: "cusField", // Corresponds to the component key in config.json
                    prop: {test: 1}
                }
            }
            return Promise.resolve(comInfo)
        }
    }
}

Field Component

// components/customField/index.js
import fsapi from 'fs-hera-api';
Component({
    ...,
    methods: {
        ...
        openWebview() {
            fsapi.jsapi.webviewOpen({
                url: `https://a9.fspage.com/FSR/uipaas/test/thirdH5Page.html?_v=${+new Date()}`,
                title: 'Custom Third-Party Page Title',
                inputData: {
                    ...
                }, // Parameters that can be passed to the H5 page
                onSuccess: (rst) => {
                    console.log('Received success callback~~', rst)
                    this.setFromData(rst) // Process data returned from H5
                }
            })
        },
        setFromData(data) {
            // Write the data returned from H5 back to the form fields
            this.data.context.setData({
                "field_pwcname__c": data.name,
                "field_pwxtel__c": data.tel,
                "field_pwcregnumber__c": data.regNumber,
                "field_pwcregisteredCapital__c": data.registeredCapital
            });
        }
    }
})

Base Field Behavior

// fieldbehavior.js
export default Behavior({
    properties:{
        context: { type: Object },    // Form context
        field: { type: Object },      // Field information
        value: { type: null },        // Field value
        is_required: { type: Boolean }, // Whether the field is required
        is_readonly: { type: Boolean }, // Whether the field is read-only
        customProp: { type: null }    // Custom property
    },
})

Configuration File Description

Plugin Configuration

{
    "components": {
        "cusField": "components/customField/index"
    },
    "main": "plugins/formplugin.js"
}

Mini Program Configuration

{
    "pages": [],
    "testpages": [
        "components/customField/index"
    ],
    "sitemapLocation": "sitemap.json"
}

Key Points

customFieldCom

Used to return the custom field component configuration based on field information:

• Return the corresponding component configuration when the target field matches
• Return an empty value or a default value when it does not match

fsapi.jsapi.webviewOpen

Used to open an H5 page and handle the returned data:

• url: The H5 page URL
• title: The page title
• inputData: Parameters passed to the H5 page
• onSuccess: Callback for receiving data returned from H5

context.setData

Used to write the data returned from H5 back to the current form field:

context.setData({
  "field_api_name": value
})

Usage Flow

1. Field trigger: The user clicks the custom field.
2. Open H5: Call fsapi.jsapi.webviewOpen.
3. Complete selection: The user selects data on the H5 page.
4. Return result: The H5 page sends the result back to the mini program.
5. Write back field value: The mini program receives the data and updates the form field.

FAQ

Q: Why does the code not take effect?

A: Check the following items:

1. Field API name: Make sure the field api_name matches the plugin configuration.
2. Data format: Make sure the data returned from H5 matches the target field type.
3. H5 page callback: Confirm that the H5 page has implemented the callback logic.
4. JSAPI initialization: Confirm that the related JSAPI has been initialized successfully.

Q: When is this solution a good fit?

It is suitable in the following cases:

• The mini program form itself is not suitable for handling complex value selection directly
• The third-party system already has a mature selection page
• Lightweight parameter passing and result write-back are needed across systems

With this solution, you can implement cross-platform data interaction in the flow of "mini program opens third-party H5 -> H5 completes selection -> result is written back to the current form".