Page 1 of 1

POST data to a service from a dynamic grid

Posted: Thu Feb 20, 2014 7:28 pm
by mehtashail

Hello,

I have a Grid that is dynamically generated based on data returning from a service.
Each item in the grid has a toggle button. I want the user to be able to toggle each button and then submit the data via post to another service.

What is the best way to generate a either a JSON array or post the data the service. I saw some references to using local storage and JS but I havent seen a clear example on how to do this.

Help?

Here is an example of the screen. I want to be able to modify data and toggle on/of and post that data on submit.

Image

thanks
shail


POST data to a service from a dynamic grid

Posted: Thu Feb 20, 2014 7:50 pm
by Maryna Brodina

Hello! In mapping in corresponding request parameter add JS which retrieve all data and form the way you need.


POST data to a service from a dynamic grid

Posted: Thu Feb 20, 2014 7:53 pm
by mehtashail

Any clues/examples on how I get a handle on each item in the grid to construct the appropriate js?


POST data to a service from a dynamic grid

Posted: Fri Feb 21, 2014 3:35 am
by mehtashail

Any clues/examples on how I get a handle on each item in the grid to construct the appropriate js?


POST data to a service from a dynamic grid

Posted: Fri Feb 21, 2014 4:28 am
by Illya Stepanov

Hi --

Sorry for the delay, the basic approach is to read DOM elements values on your page with JavaScript and save them. Then form JSON objects and post by invoking the service on button click.
:: http://docs.appery.io/documentation/r...
:: http://docs.appery.io/documentation/r...


POST data to a service from a dynamic grid

Posted: Fri Feb 21, 2014 5:19 am
by Illya Stepanov

You have to do next things:
ol
liAdd to each of this grid items invisible label. Set text for this label by item id in the service mapping./li

liAttach to the toggle component "Value change" event to "Set local storage variable". Variable name - "itemId". Target component - choose hidden label with item id./li

liAttach to the toggle component "Value change" event to "invoke service" and choose goal service./li

liGo to the service invoked in 3 step and edit mappings. Navigate to request and change certain field you need. Click add js and insert next code:
pre
var listId = localStorage.getItem("itemId");
return "{itemId: " + listId + "}";
/pre
/li/ol
After this you can check the requests in developer tools (the one like FireBug, F12). And control proper execution.


POST data to a service from a dynamic grid

Posted: Fri Feb 21, 2014 2:19 pm
by mehtashail

Ilya - thanks for your response. The difference with what i want to do is I want to invoke svc when the submit button is clicked and submit all items whether or not they are toggled. i.e. itemId & toggled yes or no. I dont want to invoke the service on each toggle.


POST data to a service from a dynamic grid

Posted: Fri Feb 21, 2014 8:02 pm
by Maryna Brodina

Hello! Do you want to pass all toggle values to one service (update/create one record in collection)? or you need to update a few lines in collection (update each toggle value in corresponding record)?


POST data to a service from a dynamic grid

Posted: Fri Feb 21, 2014 9:59 pm
by mehtashail

Not sure I follow the question. I have a single service call I am trying to invoke on submit. I want to pass all the values of the toggle independent of whether the value has changed or not to the service.


POST data to a service from a dynamic grid

Posted: Sun Feb 23, 2014 10:54 pm
by Alena Prykhodko

Hello,

  1. Add the following javascript to get list values from the DOM and set it to the local storage variable(for example "diagnosisListValues").
    pre

    function FillPharmaListItems(){
    var listItems = [];

    //Here is code to fill listItems array with data you need.

    var listText = JSON.stringify(listItems)

    localStorage.setItem("diagnosisListValues", listItems);
    };/pre

  2. Run this function on sumbit button click (before save service invocation);

  3. On submit button invoke service datasorce. In this datasource you should map local storage variable "diagnosisListValues" to your request parameter via "add js". Example:
    pre

    return LocalStorage.getItem("diagnosisListValues");/pre