npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@open-formulieren/formiojs

v4.13.14

Published

Common js library for client side interaction with <form.io>

Downloads

350

Readme

JavaScript powered forms and SDK for Form.io

This library is a plain JavaScript form renderer and SDK for Form.io. This allows you to render the JSON schema forms produced by Form.io and render those within your application using plain JavaScript, as well as provides an interface SDK to communicate to the Form.io API's. The benefits of this library include.

  • 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

Form.io is Hiring!

If you like what you see, and would like to come and work for a cutting edge, Open Source core company, then please apply online @ https://form-talent.freshteam.com/jobs!

Examples and Demonstration

To find out more about this library as well as see a demonstration of what you can do with this library, go to the Examples and Demo site @ https://formio.github.io/formio.js

Installation

To install this SDK into your project, you can use the following command within your terminal.

npm install --save formiojs

Form Building

This library has a very powerful JSON form builder, and can be used like the following.

<html>
  <head>
    <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css'>
    <link rel='stylesheet' href='https://cdn.form.io/formiojs/formio.full.min.css'>
    <script src='https://cdn.form.io/formiojs/formio.full.min.js'></script>
    <script type='text/javascript'>
      window.onload = function() {
        Formio.builder(document.getElementById('builder'), {}, {});
      };
    </script>
  </head>
  <body>
    <div id='builder'></div>
  </body>
</html>

This will create a robust Form builder embedded right within your own application. See Our Demo Page for an example.

Form Rendering

The following is a simple example on how to render a form within your HTML application.

<html>
  <head>
    <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css'>
    <link rel='stylesheet' href='https://cdn.form.io/formiojs/formio.full.min.css'>
    <script src='https://cdn.form.io/formiojs/formio.full.min.js'></script>
    <script type='text/javascript'>
      window.onload = function() {
        Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');
      };
    </script>
  </head>
  <body>
    <div id='formio'></div>
  </body>
</html>

This will render the following form within your application.

Alt text

You can also render JSON directly instead of referencing the embed URL from Form.io.

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.

JSFiddle

A great way to play around with this renderer is to use JSFiddle, which serves as a good sandbox environment. Here is an example that you can fork and make your own!

http://jsfiddle.net/travistidwell/v38du9y1/

Wizard Rendering

This library can also be used to render a form wizard within your application using the same method as rendering a form. The determiniation on whether it should render as a wizard or not is based on the display property of the form schema being set to wizard.

<html>
  <head>
    <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css'>
    <link rel='stylesheet' href='https://cdn.form.io/formiojs/formio.full.min.css'>
    <script src='https://cdn.form.io/formiojs/formio.full.min.js'></script>
    <script type='text/javascript'>
      window.onload = function() {
        Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/wizard');
      };
    </script>
  </head>
  <body>
    <div id='formio'></div>
  </body>
</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.

<script src="https://cdn.form.io/formiojs/formio.embed.min.js?src=https://examples.form.io/example"></script>

For an example of how this looks and works, check out the following Form.io Form Embedding CodePen

Full Form Renderer Documentation

For a more complete documentation of how to utilize this library within your application go to the Form Renderer documentation within the Wiki

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>
  <head>
    <script src='https://cdn.form.io/formiojs/formio.full.min.js'></script>
    <script type='text/javascript'>
      var formio = new Formio('https://examples.form.io/example');
      formio.loadForm().then(function(form) {
      
        // Log the form schema.
        console.log(form);
        
        formio.saveSubmission({data: {
          firstName: 'Joe',
          lastName: 'Smith',
          email: '[email protected]'
        }}).then(function(submission) {
        
          // Log the full submission object.
          console.log(submission);
        });
      });
    </script>
  </head>
</html>

You can also use this within an ES6 application as follows.

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: '[email protected]'
  }}).then((submission) => {
    console.log(submission);
  });
});

JavaScript SDK Documentation.

For more complete documentation over the JavaScript SDK, please take a look at the JavaScript SDK within the wiki.

Full Developer API Documentation

To view the full SDK Documentation, go to Developer SDK Documentation