Project Settings

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.

Settings

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

Stage Settings

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

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.

Click Here for more information on the different Revision options

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:

Form Settings Form Revisions and Submission Revisions Action Logs Form Access and Submission Access Form Controller PDF Settings

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.

Header Example

key	value
x-token	23234lkj234lklkj234lkj2lkj34

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

CORS Information

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

More info

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: Secret used to encrypt data for fields with the Encrypted setting enabled.

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

PDF Settings

Here you can set the Global Header and Footer templates for all of your generated PDFs within the Stage.

Header / Footer Template: HTML to inject as a header for every page of the generated PDF. Should be valid HTML markup with following classes used to inject printing values into them:

date - Formatted print date
pageNumber - Current page number
totalPages - Total amount of pages

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

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.

These configurations can also be used to configure the parameters for the Form Manager and FormView Pro

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.

Click Here for documentation and examples.

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: