Form Widgets
<script>
Katrid.init();
let formStructure = {
record: {
stringField: 'String field content',
decimalField: 99.99,
one2Many: [
{name: 'Product 1', price: 10},
{name: 'Product 2', price: 0.99},
{name: 'Product 3', price: 0.10},
{name: 'Product 4', price: 1000},
]
},
fields: {
stringField: {caption: 'String Field'},
intField: {caption: 'Integer Field', type: 'IntegerField'},
decimalField: {caption: 'Decimal Field', type: 'DecimalField'},
dateField: {caption: 'Date Field', type: 'DateField'},
dateTimeField: {caption: 'Date Time Field', type: 'DateTimeField'},
timeField: {caption: 'Time Field', type: 'TimeField'},
foreignKey: {
caption: 'Foreign Key', type: 'ForeignKey', choices: [
{id: 1, text: 'Item 1'},
{id: 2, text: 'Item 2'},
{id: 3, text: 'Item 3'},
{id: 4, text: 'Item 4'},
]
},
choiceField: {
caption: 'Choice Field', choices: {'1': 'Item 1', '2': 'Item 2', '3': 'Item 3', '4': 'Item 4'},
},
boolField: {
caption: 'Boolean Field',
type: 'BooleanField',
helpText: 'Boolean field has two possible values: true/yes or false/no'
},
textField: {caption: 'Text Field', type: 'TextField'},
radioField: {
caption: 'Radio Field',
type: 'RadioField',
choices: {'1': 'Item 1', '2': 'Item 2', '3': 'Item 3', '4': 'Item 4'}
},
one2Many: {
caption: 'One to Many Field',
type: 'OneToManyField',
views: {
list: {
fields: {
name: {caption: 'Name'},
price: {caption: 'Price', type: 'DecimalField'}
}
}
}
}
},
template: `<form>
<fieldset class="col-12">
<legend>Widgets</legend>
<div class="row">
<field name="stringField"></field>
<field name="intField"></field>
<field name="decimalField"></field>
<field name="dateField"></field>
<field name="dateTimeField"></field>
<field name="timeField"></field>
<field name="foreignKey"></field>
<field name="choiceField"></field>
<field name="boolField"></field>
<field name="textField"></field>
<field name="radioField"></field>
<field name="one2Many"></field>
</div>
<legend>Required Widgets</legend>
<div class="row">
<field name="stringField" required></field>
<field name="intField" required></field>
<field name="decimalField" required></field>
<field name="dateField" required></field>
<field name="dateTimeField" required></field>
<field name="timeField" required></field>
<field name="foreignKey" required></field>
<field name="choiceField" required></field>
<field name="boolField" required></field>
<field name="textField" required></field>
<field name="radioField" required></field>
</div>
<legend>Readonly Widgets</legend>
<div class="row">
<field name="stringField" readonly="readonly"></field>
<field name="intField" readonly></field>
<field name="decimalField" readonly></field>
<field name="dateField" readonly></field>
<field name="dateTimeField" readonly></field>
<field name="timeField" readonly></field>
<field name="foreignKey" readonly></field>
<field name="choiceField" readonly></field>
<field name="boolField" readonly></field>
<field name="textField" readonly></field>
<field name="radioField" readonly></field>
</fieldset>
</form>`,
}
let form = new Katrid.Forms.FormView(formStructure);
form.renderTo(document.getElementById('example1'));
</script>
Form Dialog
<script>
document.getElementById('showDialog').addEventListener('click', () => {
let dialog = new Katrid.Forms.FormView(formStructure);
dialog.showDialog();
});
document.getElementById('editDialog').addEventListener('click', () => {
let dialog = new Katrid.Forms.FormView(formStructure);
dialog.showDialog({state: Katrid.Forms.DataFormState.editing});
});
document.getElementById('newDialog').addEventListener('click', () => {
let dialog = new Katrid.Forms.FormView(formStructure);
dialog.showDialog({state: Katrid.Forms.DataFormState.inserting});
});
</script>