mehtashail
Posts: 0
Joined: Tue Feb 04, 2014 1:29 am

POST data to a service from a dynamic grid

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

Maryna Brodina
Posts: 0
Joined: Thu Apr 05, 2012 7:27 am

POST data to a service from a dynamic grid

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

mehtashail
Posts: 0
Joined: Tue Feb 04, 2014 1:29 am

POST data to a service from a dynamic grid

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

mehtashail
Posts: 0
Joined: Tue Feb 04, 2014 1:29 am

POST data to a service from a dynamic grid

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

Illya Stepanov
Posts: 0
Joined: Mon Mar 18, 2013 8:48 am

POST data to a service from a dynamic grid

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...

Illya Stepanov
Posts: 0
Joined: Mon Mar 18, 2013 8:48 am

POST data to a service from a dynamic grid

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.

mehtashail
Posts: 0
Joined: Tue Feb 04, 2014 1:29 am

POST data to a service from a dynamic grid

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.

Maryna Brodina
Posts: 0
Joined: Thu Apr 05, 2012 7:27 am

POST data to a service from a dynamic grid

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)?

mehtashail
Posts: 0
Joined: Tue Feb 04, 2014 1:29 am

POST data to a service from a dynamic grid

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.

Alena Prykhodko
Posts: 0
Joined: Tue Apr 09, 2013 7:36 am

POST data to a service from a dynamic grid

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

Return to “Issues”