0
I am developing a shopping page, where there are dropdowns that displays the options of products that the customer can buy, need that when the user click on add the content of this line is added in an arraylist, but I am not able to create the arraylist in javascript or JSON, if you can give an example of how I can do this of creating this Arraylist and how to fill it with the content of the line. My screen is like this:
This way I can determine the button actions:
<!DOCTYPE html>
<html xmlns="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>
What is the HTML structure of this line?
– Sergio
@Sergio actually this is created in a BPM development tool (Bonitasoft), and for this add button I can assign several actions (POST, PUT, GET, DELETE) my idea is to get through the POST action for example, play the contents of that line into an array that would be possible?
– R.Santos
Show us the HTML that was generated and the add event, please.
– Aline
@Aline, is that as I commented this tool it does not generate an HTML, I can drag the items to the screen, button, inputs, dropdowns, etc. And I do not have an HTML code for this, I am beginner in the tool also, sorry I can not give more details, I know that it only hurts me. but if you have a hint of how I can soon create the arraylist and how to pass data to it, in the conventional way it may help me already
– R.Santos
All right, @R.Santos, but after you render the html on the page, you can’t inspect to see what the naming patterns are and so on? What about the add event? You who manage?
– Aline
@Aline I can determine yes which action the button will perform, I will add in the question my screen where I drag the items to screen and show how it works the selection of actions, and another related thing, regarding the HTML code, it generates a huge HTML code automatically, would have a specific part that you would like me to add to the question?
– R.Santos
@Aline I try to fill the array obj so it doesn’t add the last item it shows me only the last item: var obj = []; var x = $data.formInput.pedido.itensPedido.length - 1; var Cod = $data.formInput.pedido.itensPedido[x].printingPedido.passwordImpressor; obj.push(Cod); var z = obj.length; Return obj +" Code Value: "+ Cod;
– R.Santos
Hmm, I don’t quite understand: don’t add the last item, just show the last item. I don’t know the tool, and I don’t know your HTML. I won’t be able to help you with that. = T
– Aline
Let’s go continue this discussion in chat.
– R.Santos
@Aline, I was able to export the page that is generated by the tool and I was able to open the code with the Notepad++ dai to visualize the HMTL code
– R.Santos