Comment on page
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.
Configurations to modify the Title, API Path, and other settings for the selected Stage and global Project.
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.
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.
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 |
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
Changing the key can cause the impossibility of decryption of stored data.
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 datepageNumber- Current page numbertotalPages- 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.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.
Enable Public Configurations for your project.
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"
}
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.
How to use the public configurations within your form.
These configurations can also be used to configure the parameters for the Form Manager and FormView Pro
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.
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:
Form.io provides multiple ways and 3rd party providers to Authenticate into the Form.io Developer Portal and your applications.
Last modified 6mo ago