Binding multiple values to DynamicForm field

[skuch]

Hi,

I was searching multiple days as how binding from datasource happens to DynamicForm fields. Specifically, I am looking to have binding "select" field, so when user selects option it will update another part of form. The data is provided by RestDataSource.

This is an output from RestDataSource:

{
    "response": {
        "status": 0,
        "data": [
            {
                "cSizePrice": "35.99",
                "cSize": "SMALL (350mm X 300mm)"
            },
            {
                "cSizePrice": "59.99",
                "cSize": "MEDIUM (500mm X 400mm)"
            },
            {
                "cSizePrice": "79.99",
                "cSize": "LARGE (750mm x 650mm)"
            }
        ]
    }
}

This is DynamicForm built:

     isc.DynamicForm.create({
      ID: "paneNewOrder",
      itemLayout: "absolute",
      styleName: "horizontalBottomLine",
      dataSource: "newDataSource",
      autoFetchData: true,
      fields: [
          {name: "uplImage", showTitle: false, editorType: "file", left: leftVal, top: topInit},
          {name: "btnDelete", title: "Delete Image", editorType: "button", left: leftVal, top: topInit + 25, click: "resetImage()"},
          {name: "cSize", title: "Choose Size of Diamond Picture", editorType: "select", left: 50, top: topInit + 120,
            change: "changeCalculate(?cSizePrice?)"}, // What are options to pass cSizePrice field bound with current 'cSize'?
          {name: "comment", title: "Comment", editorType: "textArea", width: 500, left: 50, top: topInit + 175},
          {name: "submit", title: "Submit", editorType: "submit", left: 640, top: topInit + 280, width: 80}
      ]
     });

As you can see above, binding 'cSize' looks like working as expected, though, when I change value what are my options to get matching 'cSizePrice' for given 'cSize'?
Maybe, there is an option to get values directly to variables in javascript from RestDataSource?

This is my 'RestDataSource' fetching values from spring controller:

isc.RestDataSource.create({
    ID:"newDataSource",
    dataFormat:"json",
    jsonPrefix:"",
    jsonSuffix:"",
    operationBindings:[
         {operationType:"fetch", dataProtocol:"postParams", dataURL: "<c:url value="${newDataUrl}" />"}
    ],
    transformResponse : function (dsResponse, dsRequest, jsonData) {
        var status = isc.XMLTools.selectObjects(jsonData, "/response/status");
    }
    });

Please let me know, would you have any suggestions, or perhaps, as I have just started with SmartClient, I might be fundamentally wrong with approaches I use, but would be glad to hear any feedback.

Thanks a lot,
Skuch!

[skuch]

Well, as always found temporary hack to get the data...

Here is current hacky solution, using object DOM:#

              ... prev code...
             change: "changeCalculate(newDataSource.$ba.dataChanged[0].target.localData)"},

    //TODO attempt to change text of CalcPrice?
    function changeCalculate(cSizePrice) {
        //alert("getting in here! £" + cSizePrice);
        console.log(cSizePrice);
        for ( i = 0; i < cSizePrice.length; i++ )
        {
            if ( cSizePrice[i]._selection_3 === true )
            {
                alert(cSizePrice[i].cSizePrice);
            }
        }
    }

It's been time consuming, though, to find correct location of data from objects themselves:

[{…}, {…}, {…}]0: {cSizePrice: "35.99", cSize: "SMALL (350mm X 300mm)", _selection_3: true}1: {cSizePrice: "59.99", cSize: "MEDIUM (500mm X 400mm)", _selection_3: false}2: {cSizePrice: "79.99", cSize: "LARGE (750mm x 650mm)", _selection_3: false}length: 3__proto__: Array(0)

Would you know any easier and, perhaps, "correct" approach, replies welcome!

Thanks,
Skuch

[Isomorphic]

This approach is completely wrong (you are referring to an obfuscated variable $ba).

We would recommend revisiting the QuickStart Guide since it seems like you missed several key concepts.

It's not clear whether you are trying to do a calculation from loaded data or from all data. If you're trying to get the loaded data, you just call grid.getData(). If you are trying to fetch records that match criteria, you can call DataSource.fetchData() and work with the retrieved data in the callback.

[skuch]

Thank you for response.

What have you meant from loaded data, or from all data?

Currently dynamicform is fetching data using restdatasource, and then fetched values are being bind into one of the "select" form fields dynamicform has. I think, then, it is pre-loaded?

Great, I have implemented your approach and looks like everything is working a way better & manageable way. (BTW I have token obfuscated variable $ba, as dumped data using console.log(restdatasource) and found by structure loaded array).

Here's new approach:

//declare global size/price ref
var cProdSizePrice = new Object();

// other code ...
newDataSource.fetchData(null, 
        function ( dsResponse, data )
       {
            for ( i = 0; i < data.length; i++ )
            {
                  cProdSizePrice[data[i].cSize] = data[i].cSizePrice;

                 // make very first price - initial price
                 if ( i == 0 )
                 {
                      changeCalculate(data[i].cSize);
                 }
             }
        }
);

field calculation:

       changed:  "changeCalculate(this)" }

function implementation:

    //TODO attempt to change text of CalcPrice?
    function changeCalculate(cSizeId)
    {
        console.log(cSizeId);
        if ( cSizeId._value !== undefined )
        {
            cSizeId = cSizeId._value;
            console.log("new cSizeId: " + cSizeId);
        }
        rightLabelCalcPrice.setContents("Initial price: £" + cProdSizePrice[cSizeId]);
    }

I am wondering, it looks like using this._field to get current "select" field value isn't correct way, but seems I can't get anywhere from documentation which method/property I should use instead. Would really appreciate, if you would suggest anything.

P.S. like I've said, I'm novice in smartclient && if I am wrong with my approaches I would appreciate, if you point to right direction. I am currently working on small e-commerce project and there are some deadlines to be met, so have no time to learn fully QuickStart Guide, but definitely read some related to project topics

[Isomorphic]

You're not showing any code involving "this._field" but anything like that would be the wrong approach. If you need the FormItem you just call getItem().

Trying to "save time" by not reading the QuickStart Guide or other documentation will not save time. Please do not post again, or ask for help, until you have read the QuickStart Guide and made basic attempts to use the documentation to help yourself.

[skuch]

Thank you, you completely right. My fault. Going to better off read documentation. BTW 'getValue()' was correct way to get ._value item.

Thank you one more time;)