I'm developing a shopping page, where there are dropdowns that display the product options that the customer can buy, I need when the user clicks add the content of that line is added in an arraylist, however I am not able to create the arraylist in javascript nor JSON, if you can give an example of how I can do this to create this ArrayList and how to fill it with the contents of the line. My screen looks like this:
HereIcandeterminethebuttonactions:
<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/html">
<head>
<title>pedido</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/widget.css">
<link rel="stylesheet" href="../theme/theme.css">
<script src="js/vendor.min.js"></script>
<script src="js/runtime.min.js"></script>
<!-- assets attached to the page -->
<!-- widget need to be injected at runtime -->
<script src="widgets/pbTitle/pbTitle.js"></script>
<script src="widgets/pbInput/pbInput.js"></script>
<script src="widgets/pbSelect/pbSelect.js"></script>
<script src="widgets/pbButton/pbButton.js"></script>
<script src="widgets/pbText/pbText.js"></script>
</head>
<body ng-app="bonitasoft.ui" pb-model="58949bd7-40d1-48ed-9377-38f7f73c4738">
<div class="container-fluid">
<div class="row">
<div pb-property-values="39428a7e-e7a6-4acf-ba61-4536a76a2950">
<form novalidate class="col-xs-12" ng-class="properties.cssClasses" name="$form" ng-if="!properties.hidden">
<div pb-property-values="b30d4897-9664-4fa9-8a36-4adf01576e16">
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden">
<div class="row">
<div pb-property-values="59f816f2-c982-4cb7-b6ec-631568599ae5">
<div ng-if="!properties.hidden" class="component col-xs-12" ng-class="properties.cssClasses">
<pb-title></pb-title>
</div>
</div>
</div>
<div class="row">
<div pb-property-values="d8a41fe8-8607-42f1-ad85-45df63f22252">
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden">
<div class="row">
<div pb-property-values="432154f2-0b6a-4a25-8554-0ff0a0712463">
<div ng-if="!properties.hidden" class="component col-xs-12" ng-class="properties.cssClasses">
<pb-input></pb-input>
</div>
</div>
</div>
<div class="row">
<div pb-property-values="54f1ed64-76be-4596-aa03-70a75ef9e5ed">
<div ng-if="!properties.hidden" class="component col-xs-12" ng-class="properties.cssClasses">
<pb-title></pb-title>
</div>
</div>
</div>
<div class="row">
<div pb-property-values="41509ec6-8740-4b81-ab1b-39ad39eb4f9b">
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden">
<div class="row">
<div pb-property-values="7594216f-a971-4290-a146-75315c0c16a7">
<div ng-if="!properties.hidden" class="component col-xs-4" ng-class="properties.cssClasses">
<pb-text></pb-text>
</div>
</div>
<div pb-property-values="1a73b64e-b16a-4b4f-938d-48a1f90ee3b0">
<div ng-if="!properties.hidden" class="component col-xs-4" ng-class="properties.cssClasses">
<pb-text></pb-text>
</div>
</div>
<div pb-property-values="8ffac374-d3e7-45f9-8cfd-5ec6d36e4f14">
<div ng-if="!properties.hidden" class="component col-xs-4" ng-class="properties.cssClasses">
<pb-text></pb-text>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div pb-property-values="26a67a06-dda9-4da3-8d63-41f1a12820a0">
<div class="col-xs-12" ng-class="properties.cssClasses" ng-if="!properties.hidden" ng-repeat="$item in ($collection = properties.repeatedCollection) track by $index">
<div class="row">
<div pb-property-values="4dd7d924-5244-444d-870c-fd5b51a3bb7c">
<div ng-if="!properties.hidden" class="component col-xs-4" ng-class="properties.cssClasses">
<pb-select></pb-select>
</div>
</div>
<div pb-property-values="3bc747b8-84a7-474a-bdb7-42ca576cabbc">
<div ng-if="!properties.hidden" class="component col-xs-4" ng-class="properties.cssClasses">
<pb-select></pb-select>
</div>
</div>
<div pb-property-values="612c1119-2e72-4633-9d45-1abb9286f17c">
<div ng-if="!properties.hidden" class="component col-xs-2" ng-class="properties.cssClasses">
<pb-input></pb-input>
</div>
</div>
<div pb-property-values="e6ac398e-0307-44bd-8c0f-987c2e1e4d7f">
<div ng-if="!properties.hidden" class="component col-xs-2" ng-class="properties.cssClasses">
<pb-button></pb-button>
</div>
</div>
</div>
<div class="row">
<div pb-property-values="014362e5-b321-4d19-b52f-878d44250784">
<div ng-if="!properties.hidden" class="component col-xs-12" ng-class="properties.cssClasses">
<pb-text></pb-text>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div pb-property-values="a6baa941-6079-40cc-9038-71903865b541">
<div ng-if="!properties.hidden" class="component col-xs-4" ng-class="properties.cssClasses">
<pb-text></pb-text>
</div>
</div>
<div pb-property-values="2f75ef3f-ab42-4cfb-8873-8afe62f551a5">
<div ng-if="!properties.hidden" class="component col-xs-12" ng-class="properties.cssClasses">
<pb-button></pb-button>
</div>
</div>
</div>
<div class="row">
<div pb-property-values="9ea87133-a8b3-4d2c-955f-29eadfe18b2a">
<div ng-if="!properties.hidden" class="component col-xs-12" ng-class="properties.cssClasses">
<pb-text></pb-text>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div pb-property-values="453280ad-8431-4eba-b000-216fe1c18df5">
<div ng-if="!properties.hidden" class="component col-xs-12" ng-class="properties.cssClasses">
<pb-button></pb-button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<script>angular.module('bonitasoft.ui.services').factory('dataModelFactory', function() {
var resources = {};
resources['58949bd7-40d1-48ed-9377-38f7f73c4738'] = {"taskId":{"type":"urlparameter","value":"id","exposed":false},"formOutput":{"type":"expression","value":"return {\n\t'pedido': $data.formInput.pedido\n};","exposed":false},"task":{"type":"url","value":"../API/bpm/userTask/{{taskId}}","exposed":false},"context":{"type":"url","value":"../API/bpm/userTask/{{taskId}}/context","exposed":false},"formInput":{"type":"json","value":"{\r\n \"pedido\" : {\r\n \"empresa\" : \"\",\r\n \"itensPedido\" : [ \r\n {\r\n \"impressoraPedido\":\"\",\r\n \"suprimentoPedido\":\"\",\r\n \"quantidadePedido\":1\r\n }]\r\n }\r\n}","exposed":false},"requestImpressora":{"type":"url","value":"../API/bdm/businessData/com.company.model.Impressoras?q=find&p=0&c=10000","exposed":false},"requestSuprimento":{"type":"url","value":"../API/bdm/businessData/com.company.model.ModeloImpressoraSuprimento?q=findByCodigoModeloImpressora&p=0&c=10000&f=codigoModeloImpressora={{teste}}","exposed":false},"teste":{"type":"expression","value":"//return $data.formInput;\n\n\nvar x = $data.formInput.pedido.itensPedido.length - 1;\nreturn $data.formInput.pedido.itensPedido[x].impressoraPedido.codigoImpressora;\n\n","exposed":false},"lista":{"type":"expression","value":"var obj = [];\nvar x = $data.formInput.pedido.itensPedido.length - 1;\nvar cod = $data.formInput.pedido.itensPedido[x].impressoraPedido.codigoImpressora;\nobj.push(cod);\nvar z = obj.length;\nreturn obj +\" Código Valor: \"+ cod;","exposed":false},"array":{"type":"expression","value":"var vetor = new Array (\"José\");\nvetor.push(\"Antonio\");\nreturn \"Agora o Teste Array possui \" + vetor +\"<BR>\";","exposed":false}};
return {
get: function(uuid) {
return resources[uuid];
}
};
});
</script>
<script>angular.module('bonitasoft.ui.services').factory('modelPropertiesFactory', function() {
var resources = {};
return {
get: function(uuid) {
return resources[uuid];
}
};
});
</script>
<script>angular.module('bonitasoft.ui.services').factory('propertyValuesFactory', function() {
var resources = {};
resources['59f816f2-c982-4cb7-b6ec-631568599ae5'] = {"alignment":{"type":"constant","value":"left"},"text":{"type":"interpolation","value":"Pedido"},"dimension":{"type":"constant","value":12},"level":{"type":"constant","value":"Level 4"},"isDisplayed":{"type":"constant","value":true},"widgetId":{"type":"constant","value":"pbTitle"},"labelHidden":{"type":"constant","value":false},"class":{"type":"constant","value":"org.bonitasoft.web.designer.experimental.parametrizedWidget.TitleWidget"},"label":{"type":"constant","value":null},"readonly":{"type":"constant","value":false},"cssClasses":{"type":"constant","value":""}};
resources['612c1119-2e72-4633-9d45-1abb9286f17c'] = {"alignment":{"type":"constant","value":"left"},"labelWidth":{"type":"constant","value":1},"isDisplayed":{"type":"constant","value":true},"placeholder":{"type":"constant","value":null},"class":{"type":"constant","value":"org.bonitasoft.web.designer.experimental.parametrizedWidget.InputWidget"},"label":{"type":"constant","value":""},"labelPosition":{"type":"constant","value":"top"},"type":{"type":"constant","value":"number"},"dimension":{"type":"constant","value":12},"widgetId":{"type":"constant","value":"pbInput"},"value":{"type":"variable","value":"$item.quantidadePedido"},"labelHidden":{"type":"constant","value":false},"required":{"type":"constant","value":false},"readonly":{"type":"constant","value":false},"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"minLength":{"type":"constant","value":""},"maxLength":{"type":"constant","value":""},"readOnly":{"type":"expression","value":"$item.impressoraPedido.codigoImpressora == null"},"min":{"type":"constant","value":1},"max":{"type":"constant","value":null},"step":{"type":"constant","value":1}};
resources['39428a7e-e7a6-4acf-ba61-4536a76a2950'] = {"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false}};
resources['d8a41fe8-8607-42f1-ad85-45df63f22252'] = {"alignment":{"type":"constant","value":"left"},"dimension":{"type":"constant","value":12},"isDisplayed":{"type":"constant","value":true},"widgetId":{"type":"constant","value":null},"labelHidden":{"type":"constant","value":false},"class":{"type":"constant","value":"org.bonitasoft.web.designer.experimental.parametrizedWidget.WidgetContainer"},"repeatedCollection":{"type":"variable","value":null},"label":{"type":"constant","value":null},"readonly":{"type":"constant","value":false},"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false}};
resources['e6ac398e-0307-44bd-8c0f-987c2e1e4d7f'] = {"removeItem":{"type":"variable","value":"$item"},"alignment":{"type":"constant","value":"right"},"isDisplayed":{"type":"constant","value":true},"targetUrlOnSuccess":{"type":"interpolation","value":null},"class":{"type":"constant","value":"org.bonitasoft.web.designer.experimental.parametrizedWidget.ButtonWidget"},"label":{"type":"constant","value":"Remover Item"},"collectionPosition":{"type":"constant","value":"Item"},"buttonStyle":{"type":"constant","value":"danger"},"dimension":{"type":"constant","value":12},"valueToAdd":{"type":"expression","value":null},"collectionToModify":{"type":"variable","value":"$collection"},"widgetId":{"type":"constant","value":"pbButton"},"labelHidden":{"type":"constant","value":false},"action":{"type":"constant","value":"Remove from collection"},"dataToSend":{"type":"expression","value":null},"readonly":{"type":"constant","value":false},"disabled":{"type":"constant","value":false},"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"url":{"type":"interpolation","value":null},"dataFromSuccess":{"type":"variable","value":null},"dataFromError":{"type":"variable","value":null}};
resources['a6baa941-6079-40cc-9038-71903865b541'] = {"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"text":{"type":"interpolation","value":"{{lista}}"},"alignment":{"type":"constant","value":"left"}};
resources['1a73b64e-b16a-4b4f-938d-48a1f90ee3b0'] = {"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"text":{"type":"interpolation","value":"<h5><b>Suprimento"},"alignment":{"type":"constant","value":"left"}};
resources['7594216f-a971-4290-a146-75315c0c16a7'] = {"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"text":{"type":"interpolation","value":"<h5><b>Impressora"},"alignment":{"type":"constant","value":"left"}};
resources['014362e5-b321-4d19-b52f-878d44250784'] = {"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":true},"text":{"type":"interpolation","value":"{{$item.impressoraPedido.modeloImpressora}}"},"alignment":{"type":"constant","value":"left"}};
resources['2f75ef3f-ab42-4cfb-8873-8afe62f551a5'] = {"removeItem":{"type":"variable","value":null},"alignment":{"type":"constant","value":"right"},"isDisplayed":{"type":"constant","value":true},"targetUrlOnSuccess":{"type":"interpolation","value":null},"class":{"type":"constant","value":"org.bonitasoft.web.designer.experimental.parametrizedWidget.ButtonWidget"},"label":{"type":"constant","value":"Adicionar"},"collectionPosition":{"type":"constant","value":null},"buttonStyle":{"type":"constant","value":"success"},"dimension":{"type":"constant","value":12},"valueToAdd":{"type":"expression","value":"{ \"impressoraPedido\" : \"\", \"suprimentoPedido\" : \"\", \"quantidadePedido\" : 1}"},"collectionToModify":{"type":"variable","value":"formInput.pedido.itensPedido"},"widgetId":{"type":"constant","value":"pbButton"},"labelHidden":{"type":"constant","value":false},"action":{"type":"constant","value":"Add to collection"},"dataToSend":{"type":"expression","value":"{ \"impressoraPedido\" : \"\", \"suprimentoPedido\" : \"\", \"quantidadePedido\" : 1}"},"readonly":{"type":"constant","value":false},"disabled":{"type":"constant","value":false},"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"url":{"type":"interpolation","value":null},"dataFromSuccess":{"type":"variable","value":null},"dataFromError":{"type":"variable","value":null}};
resources['432154f2-0b6a-4a25-8554-0ff0a0712463'] = {"alignment":{"type":"constant","value":"left"},"labelWidth":{"type":"constant","value":1},"isDisplayed":{"type":"constant","value":true},"placeholder":{"type":"constant","value":null},"class":{"type":"constant","value":"org.bonitasoft.web.designer.experimental.parametrizedWidget.InputWidget"},"label":{"type":"constant","value":"Empresa"},"labelPosition":{"type":"constant","value":"top"},"type":{"type":"constant","value":"text"},"dimension":{"type":"constant","value":12},"widgetId":{"type":"constant","value":"pbInput"},"value":{"type":"variable","value":"formInput.pedido.empresa"},"labelHidden":{"type":"constant","value":false},"required":{"type":"constant","value":true},"readonly":{"type":"constant","value":false},"cssClasses":{"type":"constant","value":""}};
resources['8ffac374-d3e7-45f9-8cfd-5ec6d36e4f14'] = {"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"text":{"type":"interpolation","value":"<h5><b>Quantidade"},"alignment":{"type":"constant","value":"left"}};
resources['3bc747b8-84a7-474a-bdb7-42ca576cabbc'] = {"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"disabled":{"type":"constant","value":false},"required":{"type":"constant","value":false},"labelHidden":{"type":"constant","value":false},"label":{"type":"interpolation","value":""},"labelPosition":{"type":"constant","value":"top"},"labelWidth":{"type":"constant","value":4},"placeholder":{"type":"interpolation","value":""},"availableValues":{"type":"expression","value":"requestSuprimento"},"displayedKey":{"type":"constant","value":"codigoModeloImpressora+' | '+nomeSuprimento"},"returnedKey":{"type":"constant","value":null},"value":{"type":"variable","value":"$item.suprimentoPedido"}};
resources['9ea87133-a8b3-4d2c-955f-29eadfe18b2a'] = {"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"text":{"type":"interpolation","value":"{{array}}"},"alignment":{"type":"constant","value":"left"}};
resources['41509ec6-8740-4b81-ab1b-39ad39eb4f9b'] = {"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"repeatedCollection":{"type":"variable","value":null}};
resources['b30d4897-9664-4fa9-8a36-4adf01576e16'] = {};
resources['4dd7d924-5244-444d-870c-fd5b51a3bb7c'] = {"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"disabled":{"type":"constant","value":false},"required":{"type":"constant","value":false},"labelHidden":{"type":"constant","value":false},"label":{"type":"interpolation","value":""},"labelPosition":{"type":"constant","value":"top"},"labelWidth":{"type":"constant","value":4},"placeholder":{"type":"interpolation","value":""},"availableValues":{"type":"expression","value":"requestImpressora"},"displayedKey":{"type":"constant","value":"codigoImpressora+' | '+modeloImpressora+' | '+patrimonio"},"returnedKey":{"type":"constant","value":null},"value":{"type":"variable","value":"$item.impressoraPedido"}};
resources['26a67a06-dda9-4da3-8d63-41f1a12820a0'] = {"alignment":{"type":"constant","value":"left"},"dimension":{"type":"constant","value":12},"isDisplayed":{"type":"constant","value":true},"widgetId":{"type":"constant","value":null},"labelHidden":{"type":"constant","value":false},"class":{"type":"constant","value":"org.bonitasoft.web.designer.experimental.parametrizedWidget.WidgetContainer"},"repeatedCollection":{"type":"variable","value":"formInput.pedido.itensPedido"},"label":{"type":"constant","value":null},"readonly":{"type":"constant","value":false},"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false}};
resources['453280ad-8431-4eba-b000-216fe1c18df5'] = {"removeItem":{"type":"variable","value":null},"alignment":{"type":"constant","value":"center"},"isDisplayed":{"type":"constant","value":true},"targetUrlOnSuccess":{"type":"interpolation","value":"/bonita"},"class":{"type":"constant","value":"org.bonitasoft.web.designer.experimental.parametrizedWidget.ButtonWidget"},"label":{"type":"constant","value":"Enviar"},"collectionPosition":{"type":"constant","value":null},"buttonStyle":{"type":"constant","value":"primary"},"dimension":{"type":"constant","value":12},"valueToAdd":{"type":"expression","value":null},"collectionToModify":{"type":"variable","value":null},"widgetId":{"type":"constant","value":"pbButton"},"labelHidden":{"type":"constant","value":false},"action":{"type":"constant","value":"Submit task"},"dataToSend":{"type":"expression","value":"formInput"},"readonly":{"type":"constant","value":false},"disabled":{"type":"expression","value":"$form.$invalid"},"cssClasses":{"type":"constant","value":""},"hidden":{"type":"constant","value":false},"url":{"type":"interpolation","value":null},"dataFromSuccess":{"type":"variable","value":null},"dataFromError":{"type":"variable","value":null}};
resources['54f1ed64-76be-4596-aa03-70a75ef9e5ed'] = {"alignment":{"type":"constant","value":"left"},"text":{"type":"interpolation","value":"Itens Pedido"},"dimension":{"type":"constant","value":12},"level":{"type":"constant","value":"Level 4"},"isDisplayed":{"type":"constant","value":true},"widgetId":{"type":"constant","value":"pbTitle"},"labelHidden":{"type":"constant","value":false},"class":{"type":"constant","value":"org.bonitasoft.web.designer.experimental.parametrizedWidget.TitleWidget"},"label":{"type":"constant","value":null},"readonly":{"type":"constant","value":false},"cssClasses":{"type":"constant","value":""}};
return {
get: function(uuid) {
return resources[uuid];
}
};
});
</script>
</div>
</body>
</html>