formio / help.form.io

The help site for Form.io

This repository is now considered legacy and no longer supported. It has been replaced by our Gitbook deployment @ https://help.form.io

Please take a look at our recent repositories and help documentation at the following links.

• https://help.form.io
• https://github.com/formio/formio.js
• https://github.com/formio/formio
• https://github.com/formio/react
• https://github.com/formio/angular
• https://github.com/formio/vue

https://help.form.io documentation for form.io.

This repository is used to generate the documentation section of the form.io website. It is generated using jekyll. Feel free to update and change it using pull requests.

Testing locally

You will need jekyll installed and running to generate a local copy for testing.

• ruby --version Ensure that you have at least version 2.0.0
• gem install bundler Install bundler if you don't already have it.
• bundle install Install this project's dependencies.

Running Jekyll

To run jekyll server locally, use the following commands.

• bundle exec jekyll serve --config _config.dev.yml,_config.yml to run the server.
• Open your browser and go to http://localhost:4000.

Editing Books

Books are the top level organization of content on the site. You can edit the name, summary and weight of a book by editing the file in the _books folder.

Editing Chapters

Chapters are the second level organization of content on the site. Chapters can have html at the top of them and a title. Chapters are in the _chapters folder and are grouped in folders based on the book name. These sub folders are only for organizing the content for ease of editing. Which book they are in depends on the Front Matter Variable "book".

Editing Paragraphs

Paragraphs are the third level organization of content on the site. Paragraphs can have html at the top of them and a title. Paragraphs are in the _paragraphs folder and are grouped by sub folders by book and chapter.

help.form.io's Issues

How can i add a style(css) to a component dynamically based on the value

[HELP] calling loadRole and loadAction

Environment

Please provide as many details as you can:

• Hosting type
  • Form.io
  • Local deployment
    • Version:
• Formio.js version: 4.14.8

When I load a form, I can't load anything else that might be connected with it without creating a new Formio or setting static variables
ie.

const formio = new Formio(`${baseUrl}/form/${form}`);
// these works
await formio.loadForm()
await formio.loadRoles()
await formio.loadActions()
await formio.actionInfo(name);

// but these dont
await formio.loadRole();
await formio.loadAction();

// unless I
formio.actionId = "blah doesn't matter, just has to be true"; 
formio.actionUrl = `${baseUrl}/form/${formId}/action/${actionId}`;
await formio.loadAction();
// or create a new Formio with the url set to actionUrl or roleUrl

Expected behavior

// To reuse Formio object without doing
formio.actionId = "blah doesn't matter, just has to be true"; 
formio.actionUrl = `${baseUrl}/form/${formId}/action/${actionId}`;
// but instead
formio.loadAction(actionId);

Observed behavior

Its not working as I expect so I'm assuming I'm doing something wrong. Any advice to optimize my use of this great library?

Example

If possible, please provide a screenshot, live example (via JSFiddle or similar), and/or example code to help demonstrate the issue.

For code or form JSON, please enclose in a code block:

// your code here

Updated Userguide Images

[BUG] Dynamically generate the data grid content

I have a Data grid with default value as below. Products drop is getting populated from URL data source. If drop down has 5 values 5 rows in the Data grid should get generated and drop down in each row should get defaulted to each drop down value.
How this can be achieved.

[UNDOCUMENTED? or NOT-SUPPORTED?] setting the form default value

Environment

• Hosting type

  • [] Form.io
  • Local deployment

• Formio.js version: - Version: 4.9.26

• Frontend framework: Angular 8+

• Browser: Chrome

• Browser version: Version 83.0.4103.116 (Official Build) (64-bit)

Steps to Reproduce

Expected behavior

to support group (collective) setting defaultValue for the form values .
as there is for the individual form component defaultValue setting`

Observed behavior

neither `this.tempFormContent.defaultValue =  formSavedData`

nor this.tempFormContent.defaultValues = formSavedData works

Is this not documented or not supported?

Example

<mat-formio [form]="projectFormContent" (submit)="onSubmit($event)"></mat-formio>

Individual setting to default value WORKS FINE:

protected tempFormContent:any = {
    "components": [
      {
        "label": "How do YOU define 1",
        "spellcheck": true,
        "tableView": true,
        "validate": {
            "unique": false,
            "multiple": false
        },
        "key": "key1",
        "type": "textarea",
        "input": true,
        "defaultValue": defValuekey1Saved,
        description: "...."
      },
      {
        "label": "How do YOU define 2",
        "spellcheck": true,
        "tableView": true,
        "validate": {
            "unique": false,
            "multiple": false
        },
        "key": "key2",
        "type": "textarea",
        "input": true,
        "defaultValue": defValuekey2Saved,
        description: "...."
      },
      {
        "type": "button",
        "label": "Save and Next",
        "key": "submit",
        "disableOnInvalid": true,
        "input": true,
        "tableView": false,
        "validate": {
            "unique": false,
            "multiple": false
        }
      }
    ]
  };

//returning the value used in the HTML template
public get projectFormContent():any {
    return this.tempFormContent;

BUT is there some group default setting, I've tried this, but NOT working:

protected tempFormContent:any = {
    "components": [
      {
        "label": "How do YOU define 1",
        "spellcheck": true,
        "tableView": true,
        "validate": {
            "unique": false,
            "multiple": false
        },
        "key": "key1",
        "type": "textarea",
        "input": true,
        // "defaultValue": defValuekey1Saved,
        description: "...."
      },
      {
        "label": "How do YOU define 2",
        "spellcheck": true,
        "tableView": true,
        "validate": {
            "unique": false,
            "multiple": false
        },
        "key": "key2",
        "type": "textarea",
        "input": true,
        // "defaultValue": defValuekey2Saved,
        description: "...."
      },
      {
        "type": "button",
        "label": "Save and Next",
        "key": "submit",
        "disableOnInvalid": true,
        "input": true,
        "tableView": false,
        "validate": {
            "unique": false,
            "multiple": false
        }
      }
    ]
  };

//returning the value used in the HTML template
public get projectFormContent():any {
    this.tempFormContent.defaultValue =  {'defValuekey1':defValuekey1Saved, 'defValuekey2':defValuekey2Saved};
   // this neither works:
   // this.tempFormContent.defaultValues =  {'defValuekey1':defValuekey1Saved, 'defValuekey2':defValuekey2Saved};
    return this.tempFormContent;

[BUG] mobile looks nasty and unreadable in places

Environment

Please provide as many details as you can:

• Browser
  Android chrome
• Browser version:
  79.0.3945

Steps to Reproduce

1. Navigate to help.form.io via mobile browser.
2. Any page from the main page but screenshots show introduction and how it works sections.

Observed behavior

How to set the time zone for CSV data export?

[Apologies if this is the wrong place for this kind of question, but I wasn't sure where else to ask.]

I have a form on form.io with two datetime picker components. You can see the form here:

https://formview.io/#/bjwhsbxofdwhpqg/elysiumferrysignup?header=1

The datetime is displayed as follows in the table displayed online:

2019-07-19 06:00 PM

However, when I export the csv file, the time is converted to this format:

2019-07-20T01:00:00.000Z

If I edit the component, I see a checkbox that says "Use Locale Settings". However, when I check the box, I get another box that says "Custom CSS fields" I've not been able to find a place to set the locale settings for a project yet.

How do I configure form.io to export the data in the first format, not the second?
How do I set the time zone?

Thanks!

Select Boxes configuration to use max and min selection

While using select boxes in form builder How to use max selection property as if I'm putting max value as 1 it still allows me to select the 2 option

Versioning - Increment vid on change of something other than components?

Hi

I am wondering if we can increment vid under form revisions on change of something other than components as well.

Use Case:
We are using formio enterprise.
We have "properties" key in the form definition.
We make any change in "property" object.

We want to increment the revision for this change.

[BUG]

Environment

Please provide as many details as you can:

• Hosting type
  • [] Form.io
  • [X ] Local deployment
    • Version: 6.7.8
• Formio.js version: (Portal Viewer)
• Frontend framework: Angular (Portal Viewer)
• Browser: IE, Chrome, Firefox
• Browser version:

Steps to Reproduce

We have our On Premise Formio portal to integrate with Minio standalone server (https://formsminio.k8sdev.xxx:443) with bucket name dev
After creating a test form I was able to upload a file. However within the portal when we review the Data, the link to the file was
https://formsminio.k8sdev.xxx:443/testfilename.png
This is not correct because the actual URL to the file on the Minio server is:
https://formsminio.k8sdev.xxx:443/dev/testfilename.png

Because of this, when a user goes in to the Data report and click on the file they would be redirected to the Minio portal which requires the access key + secret, then having to navigate again to the file.

EditGrid paging and post only change

Hi, can you help me about editgrid ?

How can I make paging and post only changed row in EditGrid ?

Thnx

cannot pull formio/formio-files-core

as a part of the installation guide i was able to run docker pull formio/formio-enterprise.
when i tried to run the next command :
docker pull formio/formio-files-core
i recived error :
"repository does not exist or may require 'docker login': denied: requested access to the resource is denied"

[BUG] Not able to find any documentation for the "Logic" tab

I am looking for the documentation on the "Logic" tab as seen in the attached screen-shot and I am unable to find it. It seems me to me that it hasn't been documented so far.

Need to rename the "Okta Authentication Integration"

We need to rename the Okta Authentication integration to be a more generic OpenID Connect integration documentation but use Okta as the example platform to perform the walkthrough.

Image is not displayed in the label section for general settings under form components.

Observations:

1. Go to https://help.form.io/userguide/form-components/#generalsettings
2. Scroll down to the label section.
3. label1.png and label2.png are not displayed in the UI. Instead the code to display the same is seen verbatim.

Tried the below steps:

1. Go to _paragraphs/userguide/form-components/generalsettings.md
2. Go to ##Label
3. Remove the divs that encapsulate the 2 images.

By doing so, one can see the images in the UI. But they are displayed one below the other instead of side by side.

How can we create Label component?

I need label component for Data Grid. Now, there is no any option for create label component.
Can you please, guide me, how can I do it?

Roles/Permission Images

IMG 2

IMG 3

IMG 4

IMG 5

IMG 6

LOGO

Updated Userguide Images

Is it possible to run all of the form.io projects in docker...?

Is it possible to run all of the form.io projects on github in docker? If so, what do we lose by creating the docker containers ourselves opposed to hosting in the cloud, or even purchasing the Docker model plan?

how to create custom component in angular5. It is not working.

how to create custom component in angular5. It is not working.

i added the CustomComponent in declarations in <app_name>.module.ts
but getting the following error:

**ERROR Error: Uncaught (in promise): Error: Can't resolve all parameters for CustomComponent: (?, ?, ?).
Error: Can't resolve all parameters for CustomComponent: (?, ?, ?).**

import { BaseComponent } from 'formiojs/build/components/base/Base';
import { Formio } from 'formiojs/full';
import { Component, OnInit } from "@angular/core";

@component({
selector : 'my-component',
template: <p>My Component</p>,
styles: [``]
})
export class CustomComponent extends BaseComponent {
constructor(component, options, data) {
super(component, options, data);

}
elementInfo() {
let info = super.elementInfo();
info.type = 'input';
info.changeEvent = 'input';
return info;
}
}
Formio.registerComponent('custom', CustomComponent);

load values to select component dynamically using javascript

Hi,

I have a form.io embedded in my react app. I have a picker and from that datetimepicker in react app, I want to set the week days to my form.io select component using javascript. Can you please help me in the same.

Can a xaml request be created from form.io?

Can a xaml request be created from form.io?
Any help will be appreciated. Thank you.

[BUG] Documentation for tabs component is missing under Layout Components section

Environment

Please provide as many details as you can:

• Hosting type
  • Form.io
  • Local deployment
    • Version:
• Formio.js version:
• Frontend framework:
• Browser:
• Browser version:

Steps to Reproduce

1. Go to https://help.form.io/userguide/layout-components/
2. Look for the Tabs component. You will not find it.
3. Go to https://formio.github.io/formio.js/app/builder -> Layout. You will see that the Formio supports the Tabs component.

Expected behavior

The functionality of the Tabs component should be documented under Layout Components Section.

Observed behavior

The functionality of the Tabs component is not documented under Layout Components Section.

Example

If possible, please provide a screenshot, live example (via JSFiddle or similar), and/or example code to help demonstrate the issue.

For code or form JSON, please enclose in a code block:

// your code here

[HELP] Textfield phone validation on focusout with calculated value possible?

Environment

Please provide as many details as you can:

• Hosting type
  • Form.io
  • Local deployment
    • Version:
• Formio.js version: 4.13.3
• Frontend framework: React
• Browser: Firefox
• Browser version:

Steps to Reproduce

1. Create Textfield called Phone
2. Insert validation js and calculated value js
3. Type 49234383838
4. Input will validated and auto-formatted to: [phone]
5. try to change the first digits

Expected behavior

1. Expected user can change digits
2. Expected number will be revalidated after focus lost

Observed behavior

1. User can only change single values in the beginning
2. Cursor jumps to right befor finishing change

I only see the possible options of On Change and On Blur.
Is it possible to make it like on focusout with Form Io? Like: https://javascript.info/focus-blur
The Form Io Documentations says: Validation action
This action is in development. It will trigger custom validation on the field.
I also posted on Stackoverflow, but may here is the best way:
https://stackoverflow.com/questions/74053416/form-io-phone-custom-validation-on-focusout-with-custom-calculated-value

Calculated value:

value = value.replace(/^0+/, "");

value = value
    .replaceAll(" ", "")
    .replaceAll("(", "")
    .replaceAll(")", "")
    .replaceAll("/", "")
    .replaceAll("-", "")
    .replaceAll(".", "")
    .replaceAll(",", "")
    .replaceAll("?", "")
    .replaceAll("*", "");

  var vorwahlen = [1,7,20,27,30,31,32,33,34,36,39,40,41,43,44,45,46,47,48,49,51,52,53,54,55,56,57,58,60,61,62,63,64,65,66,81,82,84,86,90,91,92,93,94,95,98,211,212,213,216,218,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,248,249,250,251,252,253,254,255,256,257,258,260,261,263,264,265,266,267,268,269,291,351,352,353,354,355,356,357,358,359,370,371,372,373,374,375,376,377,378,379,380,381,382,383,385,386,387,389,420,421,423,501,502,503,504,505,506,507,509,591,592,593,595,597,598,670,673,674,675,676,677,678,679,680,682,683,685,686,688,691,692,850,855,856,880,960,961,962,963,964,965,966,967,968,971,972,973,974,975,976,977,992,993,994,995,996,998,1242,1246,1268,1473,1758,1767,1784,1809,1829,1849,1868,1869,1876,3906];

let lastCodeDigit = 0;
if(value.length > 0) {
    if(value.charAt(0)=='+') {

        value = '+' + (value.substring(1, value.length)).replace(/[^0-9]/g, '');
        for(let i = 2; i < 6; i++){
            for (let j = vorwahlen.length-1; j >= 0; j--) {
                if(value.substring(1,i) == vorwahlen[j]){
                   lastCodeDigit = i; 
                    
                }
            }
        }
        value = value.substring(0, lastCodeDigit) +
            ' ' +
            value.substring(lastCodeDigit, lastCodeDigit+3) +
            ' ' +
            value.substring(lastCodeDigit+3, value.length);
    } else {
        value = value.replace(/[^0-9]/g, '');
        if(value.charAt(0)== '0'){
            if(value.charAt(1)=='0'){
                value = '+' + value.substring(2, value.length);
                value = value.substring(0, 3) +
                    ' ' +
                    value.substring(3, 6) +
                    ' ' +
                    value.substring(6, value.length);
            }
        } else{
            value = '+' + value;
        }
    }
}

Custom validation:

if (input === "") {
  valid = "Geben Sie Ihre Telefonnummer an";
} else {

  // regular expressions needed for validation
  const tooShortRegEx = /^.{0,3}$/;
  const tooLongRegEx = /^.{0,18}$/;
  const countryCode = /^0/;
  const laenderCode = /^[+]/;
  //const validRegEx = /^(?:([+][0-9]{1,2})+[.-]*)?([(]{1}[0-9]{1,6}[)])?([0-9 .-/]{3,20})((x|ext|extention)[]?[0-9]{1,4})?$/;

  var vorwahlen = [1,7,20,27,30,31,32,33,34,36,39,40,41,43,44,45,46,47,48,49,51,52,53,54,55,56,57,58,60,61,62,63,64,65,66,81,82,84,86,90,91,92,93,94,95,98,211,212,213,216,218,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,248,249,250,251,252,253,254,255,256,257,258,260,261,263,264,265,266,267,268,269,291,351,352,353,354,355,356,357,358,359,370,371,372,373,374,375,376,377,378,379,380,381,382,383,385,386,387,389,420,421,423,501,502,503,504,505,506,507,509,591,592,593,595,597,598,670,673,674,675,676,677,678,679,680,682,683,685,686,688,691,692,850,855,856,880,960,961,962,963,964,965,966,967,968,971,972,973,974,975,976,977,992,993,994,995,996,998,1242,1246,1268,1473,1758,1767,1784,1809,1829,1849,1868,1869,1876,3906];

  var codeContained = false;

  for(let i = 2; i < 6; i++){
    for (let j = vorwahlen.length-1; j >= 0; j--) {
      help = input.replaceAll(" ","");
      if(help.substring(1,i) == vorwahlen[j]){
      codeContained = true;
      }
    }
  }

  if (input.match(countryCode) || !input.match(laenderCode)) {
  valid = "Bitte beginnen Sie ihre Telefonnumer mit ihrer Ländervorwahl (z.B. +49 für Deutschland).";

  } else if(!codeContained){
  valid = "Die angegebene Ländervorwahl existiert nicht.";

  } else if (input.match(tooShortRegEx)) {  
  valid = "Die angegebene Telefonnummer ist zu kurz.";

  } else if (!input.match(tooLongRegEx)) {
    valid = "Die angegebene Telefonnummer ist zu lang.";

  } else {
    valid = true;
  }
}

[BUG] Documentation for tree component is missing under Data Components section

Steps to Reproduce

1. Go to https://help.form.io/userguide/data-components/
2. Look for the Tree component. You will not find it.
3. Go to https://formio.github.io/formio.js/app/builder -> Data. You will see that the Formio supports the Tree component.

Expected behavior

The functionality of the Tree component should be documented under Data Components Section.

Observed behavior

The functionality of the Tree component is not documented under Data Components Section.

Component Interchange, Custom name to component Groups

How do I interchange the components from basic to custom and custom to basic? Also I am not able to give custom names to groups. eg: Basic component to Basic & custom component to custom. I could change name of only one group but not both.

What is the licensing to use this repository?

Hi,
We are planning to use this repository for our internal by pulling this repository. So we just want to know what is the licensing to use this repository?

Can you please update the same in readme.

Thanks.

Create a component and set its size

hello, I am new to form.io and using the web IDE to create my form. However, it seems that there are no way to set a component property such as height or width. Am I doing something wrong or missed? Please help, thank you.

Complex Authorization system

Hi,
I am trying to design a complex autorization subsystem on top of the basic autentication system that the system offers.
The main idea is to authorize a single form to multiple types (roles) of users.
I have schools and different type of schools that belongs to different geographic areas.
I want to admit form access only to a specific type of schools (second grade) of one region.
So the basic role authorization system is not applicable to do this.
Does anybody solved the same problem and what are the possible solutions?
Is it possible to integrate an external authentication/authorization system that solves the problem?
Any suggestion will be appreciated!

Possible to add custom css for Select item

Hi Formio team,

I just have a requirement to add styling to items in the select dropdown component. But I had difficulty to that. So, I just raise the question whether it is possible to add custom css to select dropdown items.

Thank you

Webhook Json format

Hello form io

Can you tell me what JSON structure is received when using a webhook? And can we customize this?

Please advise.

Kind regards,
Mario

[BUG] Documentation on button element is out of date

Currently, the documentation on buttons states "Currently there are two actions that can be performed, submit and reset"

However, button components actually have seven available actions:

Is there documentation somewhere on how to utilize the other actions?

Field validations in a datagrid - wizard mode - errored fields not highlighted.

The fields within a data grid do not get highlighted when a infield validation error occurs. A error message gets displayed on top of the page "Please fix the following errors before proceeding". This is true only when the form is in wizard mode. The errored fields are highlighted and associated error messages displayed when the form is not in wizard mode. So while in wizard mode, the validations are getting executed but there is no way to determine which field errored.

on click of submit button show a thankyou message with ok and cancel button

In form.io, on click of submit button which is by default present on the form, I want to show a thankyou message with ok and cancel button. Any help in this case will be appreciated. Thank you.