Data Management

The API provides data management functions that help developers interact with external data sources, manage external data in forms, and ensure that form components can dynamically update based on this data.

Remote Request

The fetch method initiates remote requests to obtain external data or send data to the server. It's deeply integrated with form components and can dynamically update form options or data based on request results.

type fetch = (opt: FetchOption) => Promise<any>;

fApi.fetch({
    action: '/api/get-options',
    method: 'GET',
    to: 'props.options',
    onSuccess(data) {
        console.log('Fetched data:', data);
    },
    onError(error) {
        console.error('Request failed:', error);
    }
});

Set External Data

The setData method mounts external data into the form, making it available for use by components. This data can be static or dynamically obtained from external data sources.

type setData = (id: string, value?: any)=> void;

fApi.setData('categories', [
    { label: 'Electronics', value: 'electronics' },
    { label: 'Clothing', value: 'clothing' },
    { label: 'Home & Garden', value: 'home_garden' },
]);
console.log('External data set:', fApi.getData('categories'));

Get External Data

The getData method returns external data previously set through the setData method. If the specified data is not set, the method returns defaultValue.

type getData = (id: string, defaultValue?: any) => any;

const categories = fApi.getData('categories', []);
console.log('Fetched category data:', categories);

Refresh Components Related to External Data

The refreshData method manually refreshes the rendering of components related to specified external data. When external data changes, call this method to ensure that form components correctly reflect the latest data state.

type refreshData = (id: string) => void;

fApi.setData('categories', [
  { label: 'Books', value: 'books' },
  { label: 'Music', value: 'music' },
]);
fApi.refreshData('categories');
console.log('Components related to category data have been refreshed');

Examples

Dynamically Get and Set City Data Based on User Input

In an address form, after the user selects a province, the system automatically fetches the corresponding city list from the server and dynamically updates the city options in the form.

fApi.fetch({
    action: '/api/get-cities',
    method: 'GET',
    data: { province: fApi.getValue('province') }
}).then((response) => {
    // Set fetched city data into the form
    fApi.setData('cities', response.data);
    // Refresh city field to ensure UI displays latest city options
    fApi.refreshData('cities');
}).catch((error) => {
    console.error('Failed to fetch city data:', error);
});

Initialize Form Based on External Data

In a user edit form, you need to fetch detailed user information from the server and pre-fill the form with this data.

fApi.fetch({
    action: '/api/get-user-info',
    method: 'GET',
    data: { userId: fApi.getValue('user_id') }
}).then((response) => {
    // Set user information into the form
    fApi.setData('userInfo', response.data);
    // Update related fields in the form
    fApi.setValue({
        name: response.data.name,
        email: response.data.email,
        phone: response.data.phone
    });
    fApi.refreshData('userInfo'); // Ensure form synchronizes updates
}).catch((error) => {
    console.error('Failed to fetch user information:', error);
});