0.0.6 • Published 5 months ago
yamlform v0.0.6
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>