LogoLogo
Getting StartedDevelopersDeployment GuideGet Help
  • Quick Links
  • Welcome to Form.io
    • Getting Started With Form.io
    • Launch a Form
    • Overview of Form.io
  • Developer Tool Ecosystem
    • PDF Solution
    • Enterprise Form Builder
    • Form View Pro
    • The Security Module
    • Accessibility Compliance Module
    • Developer License
    • SQL Connector - Deprecated
    • Integration Libraries
    • Form.io CLI Tool
  • User Guide
    • Introduction
    • Form.io Developer Portal
    • Teams
    • Projects
      • Project UI
      • Project Settings
      • Stages
      • Multi-Tenancy
    • Resources
      • ResourceJS
    • Forms
      • Form Creation
      • Form Types
      • PDF Forms
      • Embedding a Form
      • Form Revisions
      • Form Settings
    • Form Building
      • Form Builder UI
      • Form Components
        • Component Settings
        • Basic Components
          • Resource as Select Component Data Source
        • Advanced Components
        • Layout Components
        • Data Components
        • Premium Components
          • Nested Forms
        • Custom Components
      • Logic & Conditions
      • Existing Resource Fields
      • Actions
    • Submissions
      • Accessing Submissions
      • Importing Submissions
    • Form.io eSignature - Coming Soon
    • Form.io Reporting Module
    • PDF Template Designer
    • Form View Pro
    • Form Manager
    • Enterprise Form Builder Module
      • Installation
      • User Guide
  • Developer Guide
    • Introduction
      • Application Development
      • API Documentation
    • Form Development
      • Form Renderer
      • Form Builder
      • Form Embedding
      • Form Evaluations
      • Form Templates
      • Custom Components
      • Translations
    • JavaScript Development
      • JavaScript SDK
      • JavaScript Frameworks
      • JavaScript Utilities
    • Authentication and Authorization
      • SAML
      • OAuth
      • LDAP
      • Resource Based Authentication
      • Email Authentication
      • Two-Factor Authentication
    • Roles and Permissions
      • Field Match-Based Access
      • Field-Based Resource Access
      • Group Permissions
    • Integrations
      • Email Integrations
      • File Storage
      • Google Developer Console
      • eSign Integrations
      • Relational Databases
    • Modules
    • Fetch Plugin API
    • CSS Frameworks
    • Offline Mode
    • Audit Logging
  • Deployments
    • Self-Hosted Deployment
      • Local Deployment
        • Local File Storage
      • Kubernetes
      • Cloud Deployment
        • AWS Deployment
          • AWS Lambda
          • Form.io/AWS Elastic Beanstalk End-To-End Encrypted Deployment
        • Azure Deployment
          • Azure App Service
            • Azure MSSQL Connector - Deprecated
          • Azure Virtual Machine
          • Azure Kubernetes Service
          • Set up the DB
        • GCP Deployment
          • GCP Cloud Run
      • On-Premise Deployment
      • Enterprise Server
      • PDF Server
    • Deployment Configurations
      • DNS Configuration
      • Load Balancer Configuration
    • Licenses
      • License Management
      • Library Licenses
    • Portal Base Project
      • Portal SSO
      • Portal Translations
    • Maintenance and Migration
      • Changes to Premium Libraries
  • FAQ
    • FAQ
    • Tutorials & Workflows
      • Password Reset
      • Dynamic Select Filtering
      • Approval Workflow
      • SSO Email Token
      • Embedding A Video
      • Data Source Validation
      • Select Data Source Options
      • Nested Form Workflows
        • Nested Wizard Forms
      • Save as Draft
      • Role-Based Conditions
      • Custom Component
      • Dynamic Radio and Select Box Values
      • Override CKEDITOR
    • Errors
    • Examples
    • License Utilization Checks
  • Contact Us
Powered by GitBook
On this page

Was this helpful?

  1. FAQ
  2. Tutorials & Workflows

Save as Draft

PreviousNested Wizard FormsNextRole-Based Conditions

Last updated 3 months ago

Was this helpful?

Within the Form.io renderer, you can enable a Save as Draft feature which will save a submission in “draft” mode either periodically (every 5 seconds), or manually, as the user is filling out the form. This system will also “restore” a draft submission if the user leaves the page, and then comes back in a later session. A common term used to describe this process is “save and return” capability.

This feature works along with our authentication system to attach a “draft” submission to a user who has been authenticated, to periodically store the draft of that submission as that user is using the form.

The Save as Draft feature requires authenticated users in order to relay the user back to the previous form state. This feature will not work with Anonymous users.

Setup

In order to enable this feature, you simply need to use the saveDraft parameter when you are rendering the form.

Formio.icons = 'fontawesome';
Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example', {
  saveDraft: true
});

This will then trigger the drafts to start periodically every 5 seconds once a user is established through the use of common Form.io authentication modules, such as the .

Timing configuration

You can also configure how regularly the “save draft” is triggered using the saveDraftThrottle parameter. This defaults to 5 seconds and is defined in milliseconds.

Formio.icons = 'fontawesome';

// Save a draft every 10 seconds.
Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example', {
  saveDraft: true,
  saveDraftThrottle: 10000
});

Manual Draft Submissions

You can also enable draft submissions to occur manually through the use of our Button component, configured with the Action of “Save State” and the “State” option configured as “draft”. Then when this button is pressed, it will save the submission in “draft” mode.

// Create a manual form with a Draft button, and submit the data to a specific API.
Formio.createForm(document.getElementById('formio'), {
  components: [
    {
      type: 'textfield',
      key: 'firstName',
      label: 'First Name',
      input: true
    },
    {
      type: 'textfield',
      key: 'lastName',
      label: 'Last Name',
      input: true
    },
    {
      type: 'button',
      action: 'submit',
      key: 'submit',
      label: 'Save Submission'
    },
    {
      type: 'button',
      action: 'saveState',
      state: 'draft',
      key: 'saveDraft',
      label: 'Save as Draft'
    }
  ]
}).then(function(form) {
  // Set the url so that it knows where to submit the data to.
  form.url = 'https://examples.form.io/example';
  form.nosubmit = false;
});
one provided within Angular