yamlform

0.0.8 • Public • Published

yamlform

JavaScript library to create forms using YAML.

YAMLForm allows you to create HTML5 forms using simple YAML syntax. The dynamic forms will keep the underlying YAML data in sync with the form contents. YAMLForm will create forms as nested as the underlying YAML data is. It understands lists, objects, list of objects and multi-level nestings.

####Installation instructions

npm install yamlform

####Sample JavaScript client

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>YAMLForm Test Page</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script>
    <script type="module">
      import { YAMLForm } from 'https://unpkg.com/yamlform@version/build/yamlform.js';

      const yaml_form = new YAMLForm('#settings-form', '#result');

      window.onload = function() {
            let yaml_data = `form:
      id: 3
      formula: "{Security.Ticker}.b"
      life: 1000`;

            let yaml_def = `form:
      id: textbox
      formula: textbox{"required":true}
      life: spinner{"min":20}`;

            let yaml_style = `form:
      id: background-color:gray
      formula: background-color:green
      life: background-color:red`;

            yaml_form.updateData(yaml_data);
            yaml_form.updateDefinition(yaml_def);
            yaml_form.updateStyle(yaml_style);
            yaml_form.render();
      }

      $('#settings-form').submit(function(event){
        event.preventDefault();
        console.log(yaml_form.getResultYamlData());
      });

      yaml_form.on('post_update', function(json_data) {
          console.log(json_data);
      });
    </script>
</head>
<body>
    <form action="" id="settings-form">
        <div id="result"></div>
        <input type="submit" value="Update" id="btn-update">
    </form>
</body>
</html>

/yamlform/

    Package Sidebar

    Install

    npm i yamlform

    Weekly Downloads

    34

    Version

    0.0.8

    License

    SEE LICENSE IN LICENSE

    Unpacked Size

    106 kB

    Total Files

    5

    Last publish

    Collaborators

    • tamboli