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
  • 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
  • Settings
  • Stage Settings
  • Project Settings
  • Form Defaults
  • Global Form Settings
  • PDF Settings
  • DOMPurify Config
  • API Settings
  • API Keys
  • CORS
  • Content Security Policy
  • Security
  • Public Configuration
  • Adding Public Configuration to Form Schema
  • Custom JS & CSS
  • Form Module
  • Integration Settings
  • Authentication Settings

Was this helpful?

  1. User Guide
  2. Projects

Project Settings

PreviousProject UINextStages

Last updated 7 months ago

Was this helpful?

The Settings section of your project allows you to configure Integrations, Authentication, Stages and Deployments, and also general settings within your project and stage. The following sections can be configured by clicking the Settings button found at the bottom of the left-hand navigation bar. Once the Settings tab is open, users can navigate between different tabs to modify and configure different Project and Stage settings. Aside from the global Project settings, all Stage settings will be applied specifically to the Stage currently selected within the Project.

The project settings carry special "property" that can ONLY be viewed and updated by either the Project owner, a User with Administrative permissions, or someone on a who has Project Admin access. This property is separated from other user roles since it can contain sensitive information. Project settings are also stored as an encrypted value to offer further security protection around this information.

Settings

Configurations to modify the Title, API Path, and other settings for the selected Stage and global Project.

Stage Settings

Stage Title: The title of the Stage which will appear in the project.

Stage Framework: Change the Framework type for the selected Stage. The framework does not inherently change anything about your stage other than the documentation for embedding your Forms and Resources based on the selected Framework.

Stage Path: The live endpoint for the selected Stage.

Use caution when modifying the Stage Path, any static references to this endpoint inside your app can break the application's connection to the Stage.

Protected Mode: Checking this setting will prevent project users from modifying Forms, Resources, Roles, and Project Access. In addition, the Project definition can only be deployed by a tag number. The Stage will display a shield icon next to its name when Protected Mode is active.

It's recommended to always enable Protected Mode for any stage connected to your Live application.

Default Stage: Select the stage that will be active upon opening the Project. The live stage will be selected by default. Users must ensure they are in the Live stage context when choosing a Default stage. To restore the Live stage as the default, remove the chosen stage by clicking the "x" button within the option value, then save the settings.

Project Settings

General settings for the Global project.

Project Title: The name of the project that will be used to identify the Project within the Portal

Project Description: The description is simply used to provide a brief summary of the Project which will display below the Project Title when viewing the Portal page.

Form Revisions: When active, enable Revisions for any Form or Resources created after the setting has been activated. Revisions will need to be manually activated for any Form or Resource that was created prior to enabling Global Form Revisions.

Delete Project: Soft deletion of the Project which will be removed from the platform's UI.

Form Defaults

Configure default settings that will automatically be set when a new Form or Resource is created. Settings will not retroactively affect Forms currently existing in the project. The following default settings can be applied to your forms:

Global Form Settings

Global Form Settings are the default form settings that can be defined on a global level and are used at runtime of the form when embedded into an application. Global Form Settings do not override any specific settings defined on a per-form basis. These settings are added at runtime using the Form Embedding System, but are not saved as part of the Form JSON.

PDF Settings

Apply global templates to the Header and Footer of PDF forms.

Header & Footer Template

Inject HTML as a header/footer for every page of the generated PDF using the Header or Footer Template. The template must be valid HTML.

The following classes may be used to inject printing values into the header or footer:

  • date - The formatted print date, when the PDF was generated.

  • pageNumber - Current page number in the PDF.

  • totalPages - Total number of pages in the PDF.

  • title - The document title.

  • url - The document location.

Use {{ formatDate( dateFormat, timezone ) }} with the moment-supported date format and timezone to customize the date displaying. Use Base64 for images.

DOMPurify Config

The following attributes and properties can be added or allowed:

  • Tags

  • Attributes

  • URIs

API Settings

The API Settings is where you can configure the API behavior of your Project. This includes configurations like setting up your CORS domains, creating Content Policies, generating API keys for project permissions, and more.

API Keys

API Keys are designed for server-to-server communication to allow a backend server to talk directly to Form.io and have full access to all of the data, forms, resources, and other settings in a project. They provide full Ownership access, so use caution when generating API keys.

API Keys should never be used in a browser.

To use an API Key provide the key within the x-token header of a request.

key
value

x-token

23234lkj234lklkj234lkj2lkj34

CORS

Cross-origin resource sharing occurs whenever a browser detects a data request being made to a domain other than the one loading the page. The pre-flight request sometimes called an OPTIONS request, will ask the server if the domain has permission to perform the requested operation. By setting CORS domains you can limit which domains can access form definitions and form submissions.

CORS is enforced in the browser so API requests will still function as normal.

List all domains that will embed your forms separated by a space or a comma. For example:

https://mysecuredomain.com,
http://test-mysecuredomain.com

For more information on how CORS works, we recommend reading the following article

Use * for all domains. The CORS setting defaults to this when creating a new project,

Content Security Policy

A policy is described using a series of policy directives, each of which describes the policy for a certain resource type or policy area. Your policy should include a default-src policy directive, which is a fallback for other resource types when they don't have policies of their own. There are specific directives for a wide variety of types of items so that each type can have its own policy, including

  • connect-src - for data loaded by URL

  • style-src - for style

  • font-src - for fonts

  • img-src - for images

  • media-src - for audio and video

  • script-src - for scripts

  • frame-src - for frames

  • worker-src - for workers

The policy is a string containing the policy directives describing your Content Security Policy. For example:

default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com// Some code

Security

Changing the key can cause the impossibility of decryption of stored data.

Public Configuration

Settings here provide a way to create public configurations for a connected application you are developing. These configurations are then represented under the following API endpoint.

https://yourproject.form.io/config.json

This can be used by your application to provide stage-specific configs that can be used for any purpose. In order to use these configurations, they must first be enabled by ticking the Enable Public Configurations checkbox.

Next, you can provide some key-value pairs of configuration names and the values of those configurations.

For example, the above configuration will be represented by the following JSON at the /config.json endpoint.

{
   "logo": "https://s3.amazonaws.com/app....",
   "logoHeight": "40px",
   "title": "Forms",
   "baseUrl": "https://humanresources.form.io"
}

Adding Public Configuration to Form Schema

There are many times where you would like to have "global" values that can be represented on a per-stage basis within your forms. A good example of this is when you need to provide different URLs to your forms based on the stage in which the forms reside. In this situation, you can use the "Add Public Configuration to Form Schema" setting to enable the ability to expose these configurations to the evaluation contexts of your forms.

Once this is checked, all of these configuration variables will be added to each Form JSON schema under the "config" property of that form. To do this, you simply refer to this configuration using the following.

{{ config.baseUrl }}

This can be used as follows within any component.

Custom JS & CSS

These settings enable you to add your own custom CSS and Javascript that will be used within the Form.io Project. You must also include the CSS or Javascript within your app to see the same functionality. Some common use cases for these settings are enabling the form preview to have the same styling as your application or to include custom components into the form builder.

Form Module

A form module is a way to extend the basic functionality of the Form.io Renderer by allowing custom logic to be introduced into the runtime evaluation of a rendered form.

Integration Settings

Multiple third-party services can be integrated with Form.io. These integrations cover everything from Form Actions to Data Storage options to Email Transports. Please see below further Integration Options:

Authentication Settings

Form.io provides multiple ways and 3rd party providers to Authenticate into the Form.io Developer Portal and your applications.

The first group of configurations is general settings for the selected within the project.

for more information on the different Revision options

and

and

The classes available in the header/footer are limited to these fields as supported in , the JavaScript library used to support PDF generation. To incorporate form data into a generated PDF, use the .

Form.io uses DOMPurify to sanitize HTML. Sanitizing HTML and stripping any malicious HTML acts as a safegaurd to prevent XSS and other attacks. Form.io applies the default DOMPurify configuration that allows all safe HTML elements and attributes but does not allow SVG or MathML. Here the sanitize configuration can be modified to meet specific requirements. For more information, please refer to the on Github.

Secret used to encrypt data for fields with the setting enabled.

These configurations can also be used to configure the parameters for the and

for documentation and examples.

Stage
Form Settings
Puppeteer
Form.io PDF Template Designer
DOMPurify documentation
CORS Information
More info
Encrypted
Click Here
Email Integrations
File Storage
Google Developer Console
SQL Connector - Deprecated
SAML
OAuth
LDAP
Form Revisions
FormView Pro
Team
Submission Revisions
Click Here
Action Logs
Form Manager
Form Access
Submission Access
Enable Public Configurations for your project.
How to use the public configurations within your form.
Form Controller
PDF Settings