Map json to menu in Openui5

Question

In w2ui I can map a json to a sidebar http://w2ui.com/web/demos/#!sidebar/sidebar-1 Can I do it in openui5?

I want the same result.

Obviously I do not want a tree but a list of items that swipe right if I tap on an item (and visualize a sub-menu list) and slide left if I press back button (and visualize the menu at upper level). enter image description here

score 0 · Answer 1 · answered Jun 25 '14 at 09:24

I think it's possible, but as far as I know you have to do some manual labor:

Detect whether your node has one or more child nodes, and based on that set the sap.m.ListType to Navigation or not
If your root node (f.i., "/items") has child nodes (f.i., "childs"), you need to re-bind your list to this child path ("/items/<index_of_parent_node>/childs)
To get the swiping effect, you probably need to encapsulate the list in a sap.m.Page
Depending on the node level you're in, you need to hide/display your back button, and by pressing it bind your list to the parent path

However, if there's a cleaner, simpler approach I would love to hear it too!

I implement a my solution using a single master page and dinamically bind a model of the current list depending of the current position into the tree of my menu. The problem is that though I use a page as a master, the splitApp construct not show any swiping effect if I reload the same page on master column... — padibro, Jun 25 '14 at 13:34

score 0 · Accepted Answer · answered Jun 27 '14 at 06:27

I solved my problem: Every time that i click on a menu item i call this function into view controller:

//when click on item
    onPressMenuItem: function(evt) {

        var selectedItem=evt.getSource().getBindingContext().getObject();
        var objAction=getActionWhenPressMenuItem(selectedItem, this.getView().getModel());
        console.log(objAction);

        if(objAction.hasNextSidebar==true){ // sub menu
            var model = new sap.ui.model.json.JSONModel();
            model.setData(objAction.nextSidebar);
            var oSplitApp=sap.ui.core.Core().byId("splitApp");
            var nextView = sap.ui.xmlview("general.master.menuMaster");
            nextView.setModel(model);
            nextView.byId("idPageSidebar").setTitle(selectedItem.text);
            oSplitApp.addMasterPage(nextView);
            oSplitApp.toMaster(nextView);

        }else{ // open operation detail
            var idDetail =objAction.opDetail;
            var targetApp = getAppBySelectionId(idDetail);

            if(targetApp.masterView!=null){//if app has own master
                sap.ui.getCore().getEventBus().publish("navMaster", "to", {
                    idView: targetApp.masterView
                });
            }
            if(targetApp.detailView!=null){//if app has own detail
                sap.ui.getCore().getEventBus().publish("navDetail", "to", {
                    //titleOfDetailPage: selectedItem.text,
                    idView: targetApp.detailView,
                    //idCall: selectedItem
                });
            }   
        } 

    },

I create every time a new istance of the menu on a new page.

Map json to menu in Openui5

2 Answers2

Linked