cniesen
commented
8 years ago Array Field should do what you need.
Checkout Example 5 http://www.alpacajs.org/docs/fields/array.html
Open yogeshmsharma opened 8 years ago
cniesen
commented
8 years ago Array Field should do what you need.
Checkout Example 5 http://www.alpacajs.org/docs/fields/array.html
prasannawali
commented
8 years ago i am trying to edit array( in #form1) type using a pop up which is basically a fresh alpaca form(#form2) when i save the data in the #form2 i set the values to corresponding fields in #form1. but the issue is when i edit the same array again i am able to populate the corresponding fields in #form2 except grid(table) data
Please find the below sample html which describes the issue unable to upload the html file so pasting the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>eBiz-India's G2B Portal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="e-Biz, ebiz, DIPP, Login, " />
<meta name="description" content="eBiz Login" />
<meta name="category" content="eBiz" />
<link rel="stylesheet" href="/alpaca/uiassets/css/bootstrap.min.css">
<link rel="stylesheet" href="/alpaca/uiassets/css/ebizapp.css">
<link rel="stylesheet" type="text/css" media="screen"
href="/alpaca/uiassets/alpacajs-1.5.x/alpaca.css">
<link rel="stylesheet" type="text/css" media="screen"
href="/alpaca/uiassets/css/bootstrap-datetimepicker.css">
</head>
<body class="body-background">
<div class="container main-container">
<div class="page-heading">Issue Table Data</div>
<div id="issuePopup">
</div>
<div class="col-md-6">
<h5>Issue Table Data</h5>
<ul>
<li>
<p>Unable to save Table data within an array type</p>
</li>
</ul>
<ul>
<li>
<p>Steps:</p>
<p>Click on Add New Item and on Edit</p>
<p>Pop up appears where we fill the data and save</p>
<p>Note: the number of rows for table(Bank A/c Details) inside array is set based on the field NUMBER OF BANK ACCOUNTS</p>
<p>The Data is set to corresponding fields in the main form</p>
<p>When i click on Edit again Except table Data the other fields are getting populated</p>
<p>Can you please let me know how do i set the Data in the pop up form</p>
</li>
</ul>
</div>
</div>
<div id="insuredParticularDetails" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Insured Person Details</h4>
</div>
<div class="modal-body">
<div id="insuredParticularForm" class="col-md-12"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript"
src='/alpaca/uiassets/js/base-fwk/jquery-1.11.1.min.js'></script>
<script type="text/javascript"
src='/alpaca/uiassets/js/base-fwk/bootstrap.min.js'></script>
<script type="text/javascript" src='/alpaca/uiassets/alpacajs-1.5.x/handlebars-v3.0.3.js'></script>
<script type="text/javascript" src='/alpaca/uiassets/alpacajs-1.5.x/alpaca.js'></script>
<script type="text/javascript"
src='/alpaca/uiassets/js/base-fwk/moment-with-locales.min.js'></script>
<script type="text/javascript"
src='/alpaca/uiassets/js/base-fwk/bootstrap-datetimepicker.min.js'></script>
<script type="text/javascript" src='/alpaca/uiassets/js/ebizcommon.js'></script>
<script type="text/javascript">
function editInsuredParticularDetails(callback, itemIndex) {
callInsuredParticularAlpaca(itemIndex, callback);
}
function getInsuredParticularData(itemIndex, mainObject) {
var branchObj = $("#insuredParticularForm").alpaca("get");
branchObj.setValue(mainObject.top().childrenByPropertyId["employer-declaration-table"].children[itemIndex].getValue());
}
function callInsuredParticularAlpaca(pindex, mainObject) {
$("#insuredParticularForm").alpaca("destroy");
$("#insuredParticularDetails").modal("show");
$("#insuredParticularForm").alpaca({
"schema": {
"type": "object",
"properties": {
"is_ip_registered": {
"type": "string",
"required": true,
"enum": ["Yes", "No"],
"title": "Is IP already registered?"
},
"v_no_of_bank_accts": {
"type": "string",
"required": true,
"pattern": "^[0-9]*$",
"title": "NUMBER OF BANK ACCOUNTS"
},
"bank-ac-details-table": {
"type": "array",
"minItems": 1,
"items": {
"type": "object",
"properties": {
"account-no2": {
"type": "string",
"maxLength": 20,
"pattern": "^[ A-Za-z0-9-,.]*$",
"title": "ACCOUNT NO."
},
"name-of-bank2": {
"type": "string",
"maxLength": 100,
"pattern": "^[ A-Za-z0-9-,.]*$",
"title": "NAME OF BANK"
},
"bank_account_type_fk": {
"type": "string",
"enum": ["Savings", "Current", "Others"],
"title": "Account Type"
},
"branch-name2": {
"type": "string",
"maxLength": 100,
"pattern": "^[ A-Za-z0-9-,.]*$",
"title": "BRANCH NAME"
},
"micr-code2": {
"type": "string",
"maxLength": 9,
"pattern": "^[A-Za-z0-9]*$",
"title": "MICR CODE OF BANK BRANCH"
},
"ifsc-code2": {
"type": "string",
"maxLength": 20,
"pattern": "^[A-Za-z0-9]*$",
"title": "IFSC CODE OF BANK BRANCH"
}
}
}
}
}
},
"options": {
"fields": {
"is_ip_registered": {
"type": "radio",
"vertical": false,
"removeDefaultNone": true,
"maxMessages": 1
},
"v_no_of_bank_accts": {
"constrainMaxLength": true,
"constrainMaxLength": true,
"disallowOnlyEmptySpaces": true,
"hideInitValidationError": false,
"maxMessages": 1
},
"bank-ac-details-table": {
"type": "table",
"label": "Bank A/c Details",
"constrainMaxLength": true,
"disallowOnlyEmptySpaces": true,
"hideInitValidationError": false,
"maxMessages": 1,
"toolbarSticky": true,
"showActionsColumn": false,
"toolbar": {
"actions": [{
"action": "add",
"enabled": false
}]
},
"items": {
"fields": {
"account_no2": {
"constrainMaxLength": true
},
"name-of-bank2": {
"constrainMaxLength": true,
},
"bank_account_type_fk": {
"type": "select",
"noneLabel": "Select Category",
"removeDefaultNone": false
},
"branch-name2": {
"constrainMaxLength": true
},
"micr-code2": {
"constrainMaxLength": true
},
"ifsc-code2": {
"constrainMaxLength": true
},
}
},
"datatables": {
"paging": false,
"lengthChange": false,
"info": false,
"searching": false,
"ordering": false,
"autoWidth": false
}
},
},
"form": {
"buttons": {
"validate": {
"title": "Save",
"click": function() {
var val = this.getValue(),
control = $("#insuredParticularForm").alpaca("get");
if (this.isValid(true)) {
var setObj = mainObject.top().childrenByPropertyId["employer-declaration-table"].children[pindex],
bankTable=control.childrenByPropertyId["bank-ac-details-table"];
setObj.childrenByPropertyId["is_ip_registered"].setValue(val['is_ip_registered']);
setObj.childrenByPropertyId["v_no_of_bank_accts"].setValue(val['v_no_of_bank_accts']);
for(i = 0; i < bankTable.children.length; i += 1){
setObj.childrenByPropertyId["bank-ac-details-table"].children[i].childrenByPropertyId["account-no2"].setValue(bankTable.children[i].childrenByPropertyId["account-no2"].getValue())
setObj.childrenByPropertyId["bank-ac-details-table"].children[i].childrenByPropertyId["name-of-bank2"].setValue(bankTable.children[i].childrenByPropertyId["name-of-bank2"].getValue())
setObj.childrenByPropertyId["bank-ac-details-table"].children[i].childrenByPropertyId["bank_account_type_fk"].setValue(bankTable.children[i].childrenByPropertyId["bank_account_type_fk"].getValue())
setObj.childrenByPropertyId["bank-ac-details-table"].children[i].childrenByPropertyId["branch-name2"].setValue(bankTable.children[i].childrenByPropertyId["branch-name2"].getValue())
setObj.childrenByPropertyId["bank-ac-details-table"].children[i].childrenByPropertyId["micr-code2"].setValue(bankTable.children[i].childrenByPropertyId["micr-code2"].getValue())
setObj.childrenByPropertyId["bank-ac-details-table"].children[i].childrenByPropertyId["ifsc-code2"].setValue(bankTable.children[i].childrenByPropertyId["ifsc-code2"].getValue())
}
$("#insuredParticularDetails").modal("hide");
}
}
}
}
}
},
"postRender": function(control) {
//showLoading(false);
getInsuredParticularData(pindex, mainObject);
alert(JSON.stringify(control.getValue()))
control.childrenByPropertyId["v_no_of_bank_accts"].on("change", function() {
var itemcnt = control.childrenByPropertyId["v_no_of_bank_accts"].getValue();
var a = [{}];
while (itemcnt > 1) {
a.push({});
itemcnt = itemcnt - 1;
}
control.childrenByPropertyId["bank-ac-details-table"].setValue(a);
mainObject.children[pindex].childrenByPropertyId["bank-ac-details-table"].setValue(a);
});
}
});
}
$("#issuePopup").alpaca({
"schema" : {
"type" : "object",
"properties" : {
"employer-declaration-table": {
"type": "array",
"maxItems": 20,
"items": {
"type": "object",
"properties": {
"is_ip_registered": {
"type": "string",
"required": true,
"enum": ["Yes", "No"],
"title": "Is IP already registered?"
},
"v_no_of_bank_accts": {
"type": "string",
"required": true,
"pattern": "^[0-9]*$",
"title": "NUMBER OF BANK ACCOUNTS"
},
"bank-ac-details-table": {
"type": "array",
"minItems": 1,
"items": {
"type": "object",
"properties": {
"account-no2": {
"type": "string",
"maxLength": 20,
"pattern": "^[^<>=\"'`]*$",
"title": "ACCOUNT NO."
},
"name-of-bank2": {
"type": "string",
"maxLength": 100,
"pattern": "^[^<>=\"'`]*$",
"title": "NAME OF BANK"
},
"bank_account_type_fk": {
"type": "string",
"enum": ["Savings", "Current", "Others"],
"title": "Account Type"
},
"branch-name2": {
"type": "string",
"maxLength": 100,
"pattern": "^[^<>=\"'`]*$",
"title": "BRANCH NAME"
},
"micr-code2": {
"type": "string",
"maxLength": 9,
"pattern": "^[A-Za-z0-9]*$",
"title": "MICR CODE OF BANK BRANCH"
},
"ifsc-code2": {
"type": "string",
"maxLength": 20,
"pattern": "^[A-Za-z0-9]*$",
"title": "IFSC CODE OF BANK BRANCH"
}
}
}
}
}
}
}
}
},
"options" : {
"fields" : {
"employer-declaration-table": {
"hidden": false,
"toolbarSticky": true,
"toolbar": {
"actions": [{
"action": "add",
"click": function(key, action) {
this.refreshValidationState(true);
if (!this.isValid(true))
{return;
}
//this.top().childrenByPropertyId["number-of-employees"].setValue(this.children.length+1)
this.handleToolBarAddItemClick(function(item) {})
}
}]
},
"actionbar": {
"showLabels": true,
"actions": [{
"action": "up",
"enabled": false
}, {
"action": "down",
"enabled": false
}, {
"action": "add",
"enabled": false
}, {
"action": "remove",
"label": " ",
"click": function(key, action, itemIndex) {
var control = this;
if (confirm("Are you sure you want to delete row?")) {
control.removeItem(itemIndex, function() {
});
}
//this.top().childrenByPropertyId["number-of-employees"].setValue(this.children.length)
}
},
{
"label": "Edit",
"action": "custom",
"click": function(key, action, itemIndex) {
editInsuredParticularDetails(this, itemIndex);
return;
}
}
]
},
"items": {
"fields": {
"is_ip_registered": {
"label": "Is IP already registered?",
"type": "radio",
"vertical": false,
"removeDefaultNone": true
},
"v_no_of_bank_accts": {
"label": "NUMBER OF BANK ACCOUNTS",
"constrainMaxLength": true,
"maxMessages": 1,
"disabled": true,
"constrainMaxLength": true,
"dependencies": {
"is_ip_registered": "No"
}
},
"bank-ac-details-table": {
"type": "table",
"label": "Bank A/c Details",
"constrainMaxLength": true,
"maxMessages": 1,
"disabled": true,
"label": "Bank A/c Details",
"toolbarSticky": true,
"showActionsColumn": false,
"toolbar": {
"actions": [{
"action": "add",
"enabled": false
}]
},
"items": {
"fields": {
"account-no2": {
"constrainMaxLength": true,
"maxMessages": 1,
"disabled": true
},
"name-of-bank2": {
"constrainMaxLength": true,
"maxMessages": 1,
"disabled": true
},
"bank_account_type_fk": {
"type": "select",
"noneLabel": "Select Category",
"removeDefaultNone": false,
"constrainMaxLength": true,
"maxMessages": 1,
"disabled": true
},
"branch-name2": {
"constrainMaxLength": true,
"maxMessages": 1,
"disabled": true
},
"micr-code2": {
"constrainMaxLength": true,
"maxMessages": 1,
"disabled": true
},
"ifsc-code2": {
"constrainMaxLength": true,
"maxMessages": 1,
"disabled": true
},
}
},
"datatables": {
"paging": false,
"lengthChange": false,
"info": false,
"searching": false,
"ordering": false,
"autoWidth": false
},
"dependencies": {
"is_ip_registered": "No"
}
}
}
}
}
},
/*"form" : {
"buttons" : {
"validate" : {
"title" : "Validate",
"click" : function() {
var val = this.getValue();
if (this.isValid(true)) {
alert("valid"+JSON.stringify(val));
} else {
alert("invalid"+JSON.stringify(val));
}
}
}
}
}*/
},
"postRender" : function(control) {
}
});
</script>
yogeshmsharma
commented
8 years ago any update on Prasanna's input
I have a unique requirement of building complex forms.
I need a one section which has combination of multiple fields of different type (grid,textfield number etc), This section will be repeatable based on Action (+). Also this section need to be editable at any time,
[ + ] Section I [Text Field] [Text Field] [Grid Field] [R1C1] [R1C2] [R1C2] [R1C3] {editable} [R2C1] [R1C2] [R2C2] [R2C3] {editable}
thanks in advance.