Using External Data

This guide explains how to obtain and manage external data in form-create using the setData and getData methods. You'll learn how to define, pass, monitor, and use external data in components, as well as methods for passing data in events.

Data Structure

setData

Mount custom data to make it available in forms, facilitating data sharing between components.

• Type:

type SetData = (name:string,value:any) => void;

• Example:

 formCreate.setData('options',[
        {label:'Easy to use',value:0},
        {label:'Fast',value:1},
        {label:'Efficient',value:2},
        {label:'All-in-one',value:3},
 ]);

setDataDriver

Import custom data retrieval functions, allowing you to retrieve data from external data sources based on specific logic.

• Type:

type SetDataDriver = (id: string, callback: (key: string) => any) => void;

• Example:

formCreate.setDataDriver('$user', function(key) {
    return $store.state.user[key];
});

The setDataDriver method allows you to specify a data driver function for forms, enabling form components to dynamically retrieve data. For example, you can retrieve user data from Vuex state management and display it in forms.

getData

Retrieve custom data previously mounted using setData.

• Type:

type GetData = (name: string) => any;

• Example:

const options = formCreate.getData('options');
console.log(options);

removeData

Remove custom data previously mounted using the setData method.

• Type:

type RemoveData = (name:string) => void;

• Example:

formCreate.removeData('options');

refreshData

Manually refresh form rendering related to specific data, ensuring that form component display and data stay synchronized.

• Type:

type RefreshData = (name:string) => void;

• Example:

formCreate.refreshData('options');

The following is the data structure and brief explanation related to Api external data management:

interface Api {
  // Set external data, supporting the use of external data sources in forms
  setData(id: string, value?: any): void;
  // Get external data, returns the previously set data object
  getData(id: string, defaultValue?: any): any;
  // Refresh components related to external data, ensuring UI updates synchronously after data changes
  refreshData(id: string): void;
}

External Data Passing

In form components, we usually need to communicate between components and external data.

Wrapping data with ref makes it convenient to monitor data changes. setData supports passing data of any type.

1. Define and add data in components

In the component's mounted lifecycle, you can define and add external data:

import {formCreate} from '@form-create/designer';
import { ref, watch } from 'vue';


export default {
    name: 'app',
    mounted() {
        // Define data object and wrap it with ref to monitor changes
        const data = ref({
            id: 'ref_Fnfglyptoxuhb6c'
        });
        // Monitor data changes for debugging or performing specific operations
        watch(data, () => {
            console.log('data changed');
        }, { deep: true });
        // Use formCreate's setData method to add external data
        formCreate.setData('data', data);
        // Set an external callback function, for example, to handle logic when submitting forms
        formCreate.setData('callback', (formData) => {
            // You can add form submission logic here
        });
    },
    unmounted() {
        // Clear added external data when component is unmounted to avoid memory leaks
        formCreate.removeData('data');
        formCreate.removeData('callback');
    }
};

2. Get and modify data in component events

In component events, you can get and modify external data using getData, for example, modifying data when a button is clicked:

function handleClick($inject) {
    // First, get the reference to external data
    const data = $inject.api.getData('data');
    // Modify data, for example, update the form item's ID
    data.value.id = $inject.rule._fc_id;
    // Execute external callback function, for example, to submit the form
    $inject.api.getData('callback')();
}

Pass Data in Events

In some cases, you may need to pass data between component events. For example, save the current form item's ID when clicking a button to open a dialog, then use that ID when submitting the dialog.

1. Configure button click event

function click($inject) {
    // Get the current form item's ID and save it to external data
    $inject.api.setData('id', $inject.api.getValue('id'));
    // Set the callback function for when the dialog closes
    $inject.api.setData('onClose', () => {
        // Clear the saved ID
        $inject.api.removeData('id');
    });
    // Open the specified dialog
    $inject.api.open('ref_F2vulxvqc841dac');
}

2. Configure dialog submit event

function submit($inject) {
    // Get form data and externally saved ID
    const formData = $inject.args[0];
    const id = $inject.api.getData('id');
    // Submit form data while passing the saved ID
    $inject.api.fetch({
        action: 'xxxx?id=' + id,
        method: 'post',
        data: formData
    }).then(res => {
        // After successful submission, execute the callback function to close the dialog
        $inject.api.getData('onClose')();
    });
}

Dynamic Updates of External Data

Suppose we need to update external data in real-time based on user operations and make the form respond to these changes. For example, dynamically adjust visible fields in the form based on different options the user selects.

import formCreate from '@form-create/element-ui';
import { ref, watch } from 'vue';


export default {
    name: 'app',
    setup() {
        // Define a reactive state to control the display and hide of form items
        const visibility = ref(true);
        // Monitor state changes and automatically update external data
        watch(visibility, (newValue) => {
            formCreate.setData('visibility', newValue);
        });
        // Return state for binding in template
        return {
            visibility
        };
    },
    mounted() {
        // Initialize external data
        formCreate.setData('visibility', true);
    }
};

In form components, use the getData method to control the display or hiding of fields:

function updateFormVisibility($inject) {
    // Get external data
    const isVisible = $inject.api.getData('visibility');
    // Adjust form item visibility based on external data
    $inject.api.updateRule($inject.rule.id, {
        props: {
            display: isVisible
        }
    });
}

Dynamic Setting of Callback Functions

Besides data, callback functions can also be set dynamically. For example, users can set different submission logic based on specific conditions.

function setDynamicCallback($inject, condition) {
    // Set different callback functions based on conditions
    if (condition) {
        $inject.api.setData('callback', (formData) => {
            console.log('Condition is true, submit data:', formData);
            // Execute specific submission logic
        });
    } else {
        $inject.api.setData('callback', (formData) => {
            console.log('Condition is false, perform other operations');
            // Execute different operations
        });
    }
}

Execute the callback in events:

function onSubmit($inject) {
    // Get and execute the dynamically set callback function
    $inject.api.getData('callback')($inject.args[0]);
}

Using Asynchronous Data Sources

In real applications, external data sometimes comes from asynchronous data sources, such as API requests or WebSocket messages. In this case, form-create can be easily integrated with these asynchronous data sources.

1. Load and process asynchronous data

Suppose we need to load data from a remote server when the component is mounted and inject it into the form.

import formCreate from '@form-create/element-ui';
import { ref, onMounted } from 'vue';
import axios from 'axios';


export default {
    name: 'app',
    setup() {
        const data = ref(null);
        onMounted(async () => {
            // Get data from the API
            const response = await axios.get('/api/data');
            data.value = response.data;
            // Set the retrieved data as external data
            formCreate.setData('asyncData', data.value);
        });
        return {
            data
        };
    }
};

2. Dynamically update form items

When asynchronous data loading is complete, you can dynamically update form items to reflect the latest data state.

function updateFormWithAsyncData($inject) {
    // Get asynchronously loaded external data
    const asyncData = $inject.api.getData('asyncData');
    // Update form item content, for example, populate the select box in the form
    $inject.api.updateRule($inject.rule.id, {
        props: {
            options: asyncData.options  // Use asynchronous data to populate options
        }
    });
}

Using these methods, you can flexibly pass and manage external data in form-create, ensuring smooth data flow between components.