CODEWITHSUNDEEP
google-app-maker
New_2_Code
New_2_Code

Reputation: 328

Binding values to multiple labels in a List Widget; Using Dynamic Page Properties

Background:

I have a JSON object and I would like to bind it's values to a List Widget using a Dynamic Page Property. I am trying to set a dynamic page properties "value" to be a JSON Object, however I am not sure how to access that JSON's Approver's Elements.

Setting the Page Property "Value"

As I understand the dynamic page property should be able to accept a JSON object. In the below sample I do just that.

var jsonObject = {
    "Approvers": [{
        "Approver_Name": "John Doe",
        "Approver_Email": "[email protected],",
        "Approver_Status": "Pending"
    }, {
        "Approver_Name": "Jane Doe",
        "Approver_Email": "[email protected],",
        "Approver_Status": "Pending"
    }]
}
    app.pages.editSubmission.properties.Approver_Details = jsonObject;

Accessing values in Page Property

I have read the documentation regarding properties and bindings. https://developers.google.com/appmaker/properties. I have tried the standard method of binding the List Widget's datasource to be Dynamic Page Property. (I am still not sure how access the elements of Approvers.)

Unfortunately the documentation doesn't cover dynamic properties. (Or I missed it.) If anyone can point me to some documentation or another stack overflow post covering this topic it would be greatly appropriated.

Upvotes: 0

Views: 109

Answers (1)

Morfinismo
Morfinismo

Reputation: 5253

A List Widget expects its datasource to be an array of items, but you are providing a json object; hence it's not working. Instead of using a dynamic property use a <List>String property. That way you can do something like this:

var jsonObject = {
    "Approvers": [{
        "Approver_Name": "John Doe",
        "Approver_Email": "[email protected]",
        "Approver_Status": "Pending"
    }, {
        "Approver_Name": "Jane Doe",
        "Approver_Email": "[email protected]",
        "Approver_Status": "Pending"
    }]
}
app.pages.editSubmission.properties.Approver_Details = jsonObject.Approvers;

Then, when binding the values to your list, you can use three different labels inside the list row and each label has to be binded to the corresponding value:

@datasource.item["Approver_Name"]
@datasource.item["Approver_Email"]
@datasource.item["Approver_Status"]

Upvotes: 1

Related Questions