0

Estou desenvolvendo uma pagina de compras, onde existem dropdowns que exibe as opções de produtos que o cliente pode comprar, preciso que quando o usuário clique em adicionar o conteúdo dessa linha seja adicionado em um arraylist, porém não estou conseguindo criar o arraylist em javascript nem em JSON, se puderem dar um exemplo de como posso fazer isso de criar esse ArrayList e como preenche-lo com o conteúdo da linha. Minha tela é assim:

inserir a descrição da imagem aqui

Por aqui consigo determinar as ações dos botões:

inserir a descrição da imagem aqui

<!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>
10
  • Qual é a estrutura do HTML dessa linha?
    – Sergio
    5/06/2017 às 12:08
  • @Sergio na verdade isso é criado em uma ferramenta de desenvolvimento BPM (BonitaSoft), e para esse botão adicionar eu consigo atribuir diversas Actions (POST, PUT, GET, DELETE) minha ideia é conseguir pela action POST por exemplo, jogar o conteudo dessa linha para dentro de um array isso seria possível?
    – R.Santos
    5/06/2017 às 12:13
  • Mostra pra gente o HTML que foi gerado e o evento de adicionar, por gentileza.
    – Aline
    5/06/2017 às 12:25
  • @Aline, é que como comentei essa ferramenta ela não gera um HTML, eu consigo arrastar os itens para a tela, botão, inputs, dropdowns, etc. E não tenho um código HTML para isso, sou iniciante na ferramenta também, desculpe não conseguir dar mais detalhes, sei que isso só me prejudica. mas se tiver uma dica de como posso daqui a pouco criar o arraylist e como passar dados pra ele, da forma convencional pode ser que já me ajude
    – R.Santos
    5/06/2017 às 12:33
  • Tudo bem, @R.Santos, mas, depois que renderizou o html na página, tu nao consegue inspecionar pra ver quais os padrões de nomenclatura e etc? E quanto ao evento de add? Tu quem gerencia?
    – Aline
    5/06/2017 às 13:13

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .