JavaScript powered Forms with JSON Form Builder
- Plain JavaScript implementation using ES6 and Modern practices (no jQuery, Angular, React, or any other framework dependency)
- Renders a JSON schema as a webform and hooks up that form to the Form.io API's
- Complete Form Builder which creates the JSON schema used to render the forms.
- Nested components, layouts, Date/Time, Select, Input Masks, and many more included features
- Full JavaScript API SDK library on top of Form.io
``
npm install --save formiojs
Form Building
This library has a very powerful JSON form builder, and can be used like the following.
`html`
This will create a robust Form builder embedded right within your own application. See Our Demo Page for an example.
`html`
This will render the following form within your application.
You can also render JSON directly instead of referencing the embed URL from Form.io.
`js`
Formio.createForm(document.getElementById('formio'), {
components: [
{
type: 'textfield',
key: 'firstName',
label: 'First Name',
placeholder: 'Enter your first name.',
input: true
},
{
type: 'textfield',
key: 'lastName',
label: 'Last Name',
placeholder: 'Enter your last name',
input: true
},
{
type: 'button',
action: 'submit',
label: 'Submit',
theme: 'primary'
}
]
});
This will render the JSON schema of the form within your application.
http://jsfiddle.net/travistidwell/v38du9y1/
wizard`.`html
`Form Embedding
You can also use this library as a JavaScript embedding of the form using a single line of code. For example, to embed the https://examples.form.io/example form within your application you can simply use the following embed code.html
`For an example of how this looks and works, check out the following Form.io Form Embedding CodePen
Form Embedding Documentation
For a more complete documentation of how to embed forms, go to the Form Embedding Documentation.JavaScript SDK
In addition to having a Form Renderer within this application, you can also use this library as a JavaScript SDK in your application. For example, to load a Form, and then submit that form you could do the following within your JavaScript.html
`You can also use this within an ES6 application as follows.
js
import Formio from 'formiojs';
let formio = new Formio('https://examples.form.io/example');
formio.loadForm((form) => {
console.log(form);
formio.saveSubmission({data: {
firstName: 'Joe',
lastName: 'Smith',
email: 'joe@example.com'
}}).then((submission) => {
console.log(submission);
});
});
`Componente Customizado
O processo de criação de um componente personalizado envolve estender uma classe Base do componente que está "mais próximo" da implementação desejada e, em seguida, substituir métodos ou introduzir novos métodos que implementarão sua lógica personalizada.
Os componentes base estão no caminho ./src/components/_classes/
js
class PhoneComp extends FieldComponent {
constructor(component, options, data) {
super(component, options, data);
this.checks = [];
} /**
* Este é o esquema padrão do seu componente personalizado. Ele vai "derivar"
* da classe base "schema" e estenda-o com seu esquema JSON padrão
* propriedades. Os mais importantes são "type" que será seu componente
*
*
* @param extend - Isso permite que classes derivadas deste componente
* substituir o esquema da classe substituída.
*/
static schema() {
return FieldComponent.schema({
type: 'phonecomp',
});
}
/**
* Estas são as informações do Form Builder sobre como este componente deve ser exibido
* dentro do construtor de formulários. O "title" é o rótulo que será dado
* ao botão para arrastar e soltar no construtor.
* O "icon" ícone que aparecerá ao lado dele, o "group" é o grupo de componentes onde
* este componente aparecerá (basic, advanced ...), e o "wight" é a posição dentro daquele
* grupo onde será exibido. O campo "schema" é usado como padrão
* Esquema JSON do componente quando ele é arrastado para o formulário.
*/
static builderInfo = {
title: "Número Telefone",
group: "basic",
icon: "phone-square",
weight: 70,
documentation: "http://help.form.io/userguide/#table",
schema: PhoneComp.schema()
};
/**
* Este método é usado para renderizar um componente como uma string HTML. Este método usa
* o sistema de modelo (consulte a documentação de Modelos de formulário) para obter um modelo
* e, em seguida, renderize isso como uma string HTML.
*
* @param content - Importante para componentes aninhados que recebem o "conteúdo"
* de seus filhos como uma string HTML que deve ser injetada
* no token {{ content }} do modelo.
*
* @return - Uma string HTML deste componente.
*/
render(children) {
return super.render('');
}
/**
* Retorna o valor dos dados da "visualização" para este componente.
*
* @return - O valor para todo este componente.
*/
getValue() {
return super.getValue();
}
/**
* Define o valor dos dados e da visualização do componente (como definir o
* valor para o valor correto dos dados. Isso é mais comumente usado
* externamente para definir o valor e também ver esse valor aparecer na visualização do
* componente. Se você deseja definir apenas os dados do componente, como quando você está
* respondendo a um evento de entrada HMTL, então updateValue deve ser usado, pois
* apenas define o valor dos dados do componente e não da visualização.
*
* @param value - O valor que está sendo definido para os dados e a visualização deste componente.
* @param flags - Altera os sinalizadores de propagação que estão sendo usados para controlar o comportamento do
*
*
* @return - Booleano indicando se setValue alterou ou não o valor.
*/
setValue(value) {
const input = document.querySelector("#telInput");
const iti = intlTelInput(input, {
initialCountry: "br",
preferredCountries: ["br", "us"],
utilsScript:
"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/utils.js"
});
const num = iti.getNumber();
input.addEventListener('blur', () => {
console.log(num);
});
return super.setValue(num);
}
}
``