Skip to content
GitLab
Commit 861a1f7c authored by Rafael Ostertag's avatar Rafael Ostertag
Browse files

Added QfqForm.applyElementConfiguration().

parent 8296f78f
Show whitespace changes
Inline Side-by-side
javascript/src/QfqForm.js
View file @ 861a1f7c
......@@ -400,11 +400,18 @@ if (!QfqNS) {
$formGroup.removeClass("has-success");
};
n.QfqForm.prototype.clearAllValidationStates = function () {
$('.has-warning,.has-error,.has-success').removeClass("has-warning has-error has-success");
$('[data-qfq=validation-message]').remove();
};
/**
*
* @todo Move this function to Element.FormGroup
* @param formControlName
* @param text
*/
n.QfqForm.prototype.setHelpBlockValidationMessage = function (formControlName, text) {
var $formGroup = this.getFormGroupByControlName(formControlName);
if (!$formGroup) {
......@@ -427,4 +434,32 @@ if (!QfqNS) {
);
};
n.QfqForm.prototype.applyElementConfiguration = function (configuration) {
// key is the name attribute of the Form control.
for (var key in configuration) {
if (!configuration.hasOwnProperty(key)) continue;
try {
var element = n.Element.getElement(key);
var formControlConfig = configuration[key];
if (formControlConfig.value !== undefined) {
element.setValue(formControlConfig.value);
}
if (formControlConfig.readonly !== undefined) {
element.setReadOnly(formControlConfig.readonly);
}
if (formControlConfig.disabled !== undefined) {
element.setEnabled(!formControlConfig.disabled);
}
} catch (e) {
QfqNS.Log.error(e.message);
}
}
};
})(QfqNS);
\ No newline at end of file
mockup/elementconfiguration.html 0 → 100644
View file @ 861a1f7c
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../css/jqx.base.css">
<link rel="stylesheet" href="../css/jqx.darkblue.css">
<link rel="stylesheet" href="../css/qfq-bs.css">
<title>Element Configuration</title>
</head>
<body>
<div style="float: right">
<pre id="sample">
{
"text": {
"value": "value. Now its enabled",
"disabled": false,
"readonly": true
},
"select": {
"value": [
{
"value": 1,
"text": "a",
"selected": true
},
{
"value": 2,
"text": "b",
"selected": false
}
]
},
"radio": {
"value": "a",
"disabled": false
},
"checkbox": {
"value": true,
"readonly": true
}
}
</pre>
<button id="copy">Copy</button>
</div>
<p>
<textarea name="configuration" rows="20" cols="80" id="configuration"></textarea>
</p>
<p>
<button id="applyconfig">Apply</button>
</p>
<div class="container-fluid">
<div class="row hidden-xs">
<div class="col-md-12">
<h1>Title with a long text</h1>
</div>
</div>
<form id="myForm" class="form-horizontal">
<div class="form-group">
<div class="col-md-2">
<label for="text" class="control-label">Text input (name: text)</label>
</div>
<div class="col-md-6">
<input id="text" type="text" class="form-control" name="text">
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="select" class="control-label">Select (name: select)</label>
</div>
<div class="col-md-6">
<select id="select" class="form-control" name="select">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<b class="control-label">
Radio (name: radio)
</b>
</div>
<div class="col-md-6">
<div class="radio">
<label>
<input type="radio" name="radio" value="a">a
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio" value="b">b
</label>
</div>
</div>
<div class="col-md-4">
<p class="help-block"></p>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<b class="control-label">
Checkbox (name: checkbox)
</b>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input type="checkbox" id="checkbox" name="checkbox">
</label>
<p class="help-block"></p>
</div>
</div>
</div>
</form>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jqx-all.js"></script>
<script src="../js/qfq.debug.js"></script>
<script type="text/javascript">
$(function () {
var form = new QfqNS.QfqForm("myForm", 'none', 'none');
QfqNS.Log.level = 0;
$("#applyconfig").click(function () {
var configAsText = $("#configuration").val();
var configAsJson = JSON.parse(configAsText);
form.applyElementConfiguration(configAsJson);
});
$("#copy").click(function () {
$("#configuration").val($("#sample").text());
})
});
</script>
</body>
</html>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment