Drop down values selected in classic dialog doesn't show same value in touch ui dialog

Question

We have created a Classic UI Dialog and Touch UI Dialog with a drop down widget which displays dynamic values. We have used optionsProvider property for populating these values in classic ui and datasource in touch ui.

This works fine; However, after we select the drop down value in Classic ui and open the dialog in touch ui mode, touch ui dialog does not show the selected value in classic ui dialog. Same is the case when we try to save the value in touch ui dialog and open classic ui dialog. Moreover, irrespective of the fact selected values getting saved in page's component node, these dialogs not able to pick the value from the saved property when saved in other dialog mode.

Is this happening because of listeners since I am able to fetch the drop down value in other component with static values ?

Please help me with this issue.

Classic UI Attribute,

<productCategory
                        jcr:primaryType="cq:Widget"
                        fieldLabel="select Product Category"
                        name="./productCategory"
                        optionsProvider="function(){ &#xa;    var categories = []; &#xa;    var tags = '/etc/tags/mecommerce/categories'&#xa;    var url = CQ.HTTP.noCaching(tags+'.infinity.json'); &#xa;    var categoriesList = CQ.HTTP.eval(url); //DAM Url&#xa;     &#xa;for(var name in categoriesList){ //Looping the node structure&#xa;&#xa;/*&#xa;Each image will have the meta data in it's jcr:content. This meta data consists of many values like, its &#xa;type, size, fileFormat etc., We are checking the format is image or not and adding&#xa;*/&#x9;&#x9;&#xa;        if(categoriesList[name]['jcr:title']){&#xa;&#x9;&#x9;&#x9;var list = {}; &#xa;                        // each option should contain text and value&#xa;                  list['text'] = categoriesList[name]['jcr:title']; &#xa;            list['value'] = categoriesList[name]['jcr:title']; &#xa;&#x9;&#x9;&#x9;categories.push(list); &#xa;        } &#xa;    } &#xa;    return categories; // returns the JSON&#xa;}"
                        type="select"
                        xtype="selection"/>

Touch UI Attribute,

<productCategory
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/select"
                                fieldLabel="select Product Category"
                                name="./productCategory">
                                <datasource
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="/apps/mecommerce/commerce/components/content/categoryStandardProductDetail/datasources/categories"
                                    addNone="{Boolean}true"/>
                            </productCategory>

Answer 1

Issue is with datasource. When the value is adding to map, the key and value are not same. After Correcting the issue got resolved.

 List<KeyValue> categories = new ArrayList<KeyValue>();

    for (Iterator<Resource> it = categoryRes.listChildren(); it.hasNext();) {
        Resource category = it.next();
        ValueMap vm = ResourceUtil.getValueMap(category);

        String title = vm.get("jcr:title", category.getName());

        String value = vm.get("jcr:title", category.getName());
        if (!title.equals("*")) {
            value = value;
        }

        categories.add(new KeyValue(category.getName(), value));
    }

Modified as,

List<KeyValue> categories = new ArrayList<KeyValue>();

    if (dsCfg.get("addNone", false)) {
        categories.add(new KeyValue("", ""));
    }

    for (Iterator<Resource> it = categoryRes.listChildren(); it.hasNext();) {
        Resource category = it.next();
        ValueMap vm = ResourceUtil.getValueMap(category);

        String title = vm.get("jcr:title", category.getName());

        String value = vm.get("jcr:title", category.getName());
        if (!title.equals("*")) {
            value = value;
        }

        categories.add(new KeyValue(value, value));
    }