Skip to main content

Implement Form Data Staging

In daily form development scenarios, when returning from other pages, form field values can retain the previous editing state, especially for multi-field forms. Implementing form data staging can significantly save time in filling out forms and enhance user experience.

Implementation Approach​

Development Scenarios and Client​

  1. Client: Applicable to WEB and Mini Programs
  2. Page switching scenarios:
    • Return to the previous page via a custom event within the page
    • Return to the previous page via the navigation back button in PC or mobile browsers

Implementation Steps​

Scenario 1: Returning to the Previous Page via a Custom Event​

Implement form data caching for scenarios where returning to the previous page is triggered by a custom event within the page

  1. Create a data model with the field structure as shown in the figure below alt text
  2. Use the form container component in the editor to generate a form scenario. alt text
  3. Add a "Return to the Previous Page" button and bind the "Return to the Previous Page" event alt text
  4. Create a custom object variable formSubMsg to store form values and enable the Cache option alt text
  5. Go to the "Return to the Previous Page" button, edit the "Return to the Previous Page" event, and add a variable assignment method in the success branch to assign the form frontend input value $w.form1.value to the variable formSubMs alt text
  6. Bind form input values to variables. Taking the "Name" field as an example, the input value binding expression is: $w.page.dataset.state.formSubMsg.xm?$w.page.dataset.state.formSubMsg.xm:''alt text
  7. Configure a page navigation event from other pages to navigate to the aforementioned page alt text
  8. On the form page, fill in the form information. After completing the form, click the "Return to the Previous Page" button. alt text
  9. Returned to the previous page successfully alt text
  10. Navigate to the form page again to see the form automatically populated with the last submitted values, where you can view the runtime value status of the formSubMs variable alt text

Scenario 2: Listening for Browser Back Navigation​

Implement form data caching for scenarios where returning to the previous page is triggered by the navigation back button in PC or mobile browsers

  1. The steps are the same as Steps 1 and 2 in the above scenario
  2. Create a global variable form_data to store form values and enable the Cache option alt text
  3. Go to the code editor alt text
  4. Add the relevant code in the onPageUnload lifecycle of the form page
async onPageUnload() {
    // Assign form values to the cache
    await $w.utils.setStorage({ key: 'form_cache', data: $w.form1.value });
    // Retrieve the cached value and reassign it to the global variable form_data
    $w.app.dataset.state.form_data = (await $w.utils.getStorage({ key: 'form_cache' })).data
    console.log('form_data',JSON.stringify($w.app.dataset.state.form_data))
  },

alt text

  1. Bind form input values to variables. Taking the "Name" field as an example, the input value binding expression is: $w.app.dataset.state.form_data.xm?$w.app.dataset.state.form_data.xm:''alt text
  2. This step is the same as Step 7 in Scenario 1
  3. Listen for browser back navigation in preview mode alt text
  4. Navigate to the form page again from other pages to see the form automatically populated with the last edited values alt text