cancel
Showing results for 
Search instead for 
Did you mean: 

List SAPUI5

rubens12
Participant
0 Kudos

I have two pages, in the first(1461232176312_S0.view) have a list, in the second(1461232176312_S1.view) have a input. I need when I click in an Item at my list the value of this item go to the input.

Bellow is my views and controllers.

#1461232176312_S0.view


<mvc:View xmlns:mvc="sap.ui.core.mvc" controllerName="generated.app.controller.1461232176312_S0" xmlns:m="sap.m">
    <m:Page id="sap_List_Page_0" title="Logins" showHeader="true" showFooter="true" showNavButton="false">
        <m:content>
            <m:List id="sap_List_Page_0-content-sap_m_List-1" mode="SingleSelectMaster" width="100%" headerText="Header" footerText="" backgroundDesign="Solid" showSeparators="All" growing="false" growingThreshold="20" growingScrollToLoad="false" items="{path:'/results'}" itemPress="_onListItemPress">
                <m:items>
                    <m:ObjectListItem id="sap_List_Page_0-content-sap_m_List-1-items-sap_m_ObjectListItem-1" showMarkers="false" intro="" title="{name}" number="" numberUnit="" numberState="None" type="Active" selected="true">
                        <m:attributes/>
                        <m:firstStatus/>
                        <m:secondStatus/>
                    </m:ObjectListItem>
                </m:items>
                <m:headerToolbar>
                    <m:Toolbar id="sap_List_Page_0-content-sap_m_List-1-headerToolbar-sap_m_Toolbar2-1" visible="true" enabled="true" width="" design="Solid">
                        <m:content>
                            <m:SearchField id="sap_List_Page_0-content-sap_m_List-1-headerToolbar-sap_m_Toolbar2-1-content-sap_m_SearchField-1" placeholder="Search" showSearchButton="true" visible="true" width="100%"/>
                        </m:content>
                    </m:Toolbar>
                </m:headerToolbar>
            </m:List>
        </m:content>
        <m:footer>
            <m:Bar id="sap_List_Page_0-footer-sap_m_Bar-1" design="Auto">
                <m:contentLeft/>
                <m:contentMiddle/>
                <m:contentRight/>
            </m:Bar>
        </m:footer>
        <m:headerContent/>
    </m:Page>
</mvc:View>
#1461232176312_S0.controller.js


sap.ui.define(["sap/ui/core/mvc/Controller",
    "sap/m/MessageBox",
    "sap/ui/core/routing/History",
    'sap/ui/model/json/JSONModel'
    ], function(BaseController, MessageBox, History, JSONModel) {
    "use strict";


    return BaseController.extend("generated.app.controller.1461232176312_S0", {


     onAfterRendering: function() {
        var bindingParameters;
        


        var filterData;
        
     },


    manageFilters: function(controlId, aggregationName, filterData) {
       var view = this.getView();
       var filters = [];
       filterData.filters.forEach(function (filter) {
           var value1 = filter.type === 'Date' || filter.type === 'DateTime' ? new Date(filter.value1) : filter.value1;
           var value2 = null;
           if (filter.value2) {
               value2 = filter.type === 'Date' || filter.type === 'DateTime' ? new Date(filter.value2) : filter.value2;
           }
           var oFilter = new sap.ui.model.Filter(filter.path, filter.operator, value1, value2);
           filters.push(oFilter);
       });
       if (filterData.bindingParameters) {
         filterData.bindingParameters.filters = filters;
         view.byId(controlId).bindAggregation(aggregationName, filterData.bindingParameters);
       }
       else {
         view.byId(controlId).getBinding(aggregationName).filter(filters);
       }
    },






    onInit: function() {
        this.oRouter = sap.ui.core.UIComponent.getRouterFor(this);
        this.oRouter.getTarget("1461232176312_S0").attachDisplay(jQuery.proxy(this.handleRouteMatched, this));


         




            // We only want this behavior in master -> detail and not in master -> master where it causes unwanted issues
            var view = this.getView();
            view.addEventDelegate({
                onBeforeShow: function () {
                    var content = this.getView().getContent();
                    if(content){
                        if (!sap.ui.Device.system.phone) {
                            var oList = content[0].getContent() ? content[0].getContent()[0] : undefined;
                            if(oList){
                                var contentName = oList.getMetadata().getName();
                                if(contentName.indexOf('List') > -1){
                                    oList.attachEventOnce("updateFinished", function(){
                                        var oFirstListItem = this.getItems()[0];
                                        if (oFirstListItem) {
                                            oList.setSelectedItem(oFirstListItem);
                                            oList.fireItemPress({listItem: oFirstListItem});
                                        }
                                    }.bind(oList));
                                }
                            }
                        }
                    }
                }.bind(this)
            });


    },
	handleRouteMatched: function(oEvent) {
		var sServiceUrl = ".../sap/opu/odata/sap/...";
		var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, true, "user", "pass");


		var oJsonModel = new sap.ui.model.json.JSONModel();


		oModel.read("/z_nameset?", null, null, true, function(oData, response) {
			oJsonModel.setData(oData);


		});
		sap.ui.getCore().setModel(oJsonModel);
		this.getView().setModel(oJsonModel);


	},
	_onListItemPress: function(oEvent) {
		var oListItem = oEvent.getParameter("listItem");
		var oBindingContext = oListItem.getBindingContext();
		
		return new ES6Promise.Promise(function(resolve, reject) {
		
		    this.doNavigate("1461232176312_S1", oBindingContext, resolve, ""
		    );
		}.bind(this));
		
	},
	doNavigate: function(sRouteName, oBindingContext, fnPromiseResolve, sViaRelation) {
		var that = this;
		var sPath = (oBindingContext) ? oBindingContext.getPath() : null;
		var oModel = (oBindingContext) ? oBindingContext.getModel() : null;
		
		var entityNameSet;
		if (sPath !== null && sPath !== "") {
		
		    if (sPath.substring(0, 1) === "/") {
		        sPath = sPath.substring(1);
		    }
		    entityNameSet = sPath.split("(")[0];
		}
		var navigationPropertyName;
		var sMasterContext = this.sMasterContext ? this.sMasterContext : sPath;
		
		if (entityNameSet !== null) {
		    navigationPropertyName = sViaRelation || that.getOwnerComponent().getNavigationPropertyForNavigationWithContext(entityNameSet, sRouteName);
		}
		if (navigationPropertyName !== null && navigationPropertyName !== undefined) {
		    if (navigationPropertyName === "") {
		        this.oRouter.navTo(sRouteName, {
		            context: sPath,
		            masterContext: sMasterContext
		        }, false);
		    } else {
		        oModel.createBindingContext(navigationPropertyName, oBindingContext, null, function (bindingContext) {
		            if (bindingContext) {
		                sPath = bindingContext.getPath();
		                if (sPath.substring(0, 1) === "/") {
		                    sPath = sPath.substring(1);
		                }
		            }
		            else {
		                sPath = "undefined";
		            }
		
		            // If the navigation is a 1-n, sPath would be "undefined" as this is not supported in Build
		            if (sPath === "undefined") {
		                that.oRouter.navTo(sRouteName);
		            } else {
		                that.oRouter.navTo(sRouteName, {
		                    context: sPath,
		                    masterContext: sMasterContext
		                }, false);
		            }
		        });
		    }
		} else {
		    this.oRouter.navTo(sRouteName);
		}
		
		if (typeof fnPromiseResolve === "function") {
		    fnPromiseResolve();
		}
		
	}
    });
}, /* bExport= */true);
#1461232176312_S1.view


<mvc:View xmlns:mvc="sap.ui.core.mvc" controllerName="generated.app.controller.1461232176312_S1" xmlns:m="sap.m" xmlns:layout="sap.ui.layout" xmlns:form="sap.ui.layout.form" xmlns:core="sap.ui.core">
    <m:Page id="sap_IconTabBar_Page_0" title="Transferência de Aproval" showHeader="true" showFooter="true" showNavButton="false">
        <m:content>
            <layout:VerticalLayout id="sap_IconTabBar_Page_0-content-sap_ui_layout_VerticalLayout-1461314564746" width="100%" visible="true">
                <layout:content/>
            </layout:VerticalLayout>
            <form:Form id="sap_IconTabBar_Page_0-content-sap_ui_layout_form_Form-1461242814069" width="auto" visible="true">
                <form:formContainers>
                    <form:FormContainer id="sap_IconTabBar_Page_0-content-sap_ui_layout_form_Form-1461242814069-formContainers-sap_ui_layout_form_FormContainer-1" visible="true">
                        <form:formElements>
                            <form:FormElement id="sap_IconTabBar_Page_0-content-sap_ui_layout_form_Form-1461242814069-formContainers-sap_ui_layout_form_FormContainer-1-formElements-sap_ui_layout_form_FormElement-1" visible="true">
                                <form:fields>
                                    <m:Text id="sap_IconTabBar_Page_0-content-sap_ui_layout_form_Form-1461242814069-formContainers-sap_ui_layout_form_FormContainer-1-formElements-sap_ui_layout_form_FormElement-1-fields-sap_m_Text-1" text="Field" width="auto" maxLines="1" wrapping="false" textAlign="Begin" textDirection="Inherit"/>
                                </form:fields>
                                <form:label>
                                    <m:Label id="sap_IconTabBar_Page_0-content-sap_ui_layout_form_Form-1461242814069-formContainers-sap_ui_layout_form_FormContainer-1-formElements-sap_ui_layout_form_FormElement-1-label-sap_m_Label-1" text="Label" design="Standard" width="auto" required="false" textAlign="Begin" textDirection="Inherit"/>
                                </form:label>
                            </form:FormElement>
                            <form:FormElement id="sap_IconTabBar_Page_0-content-sap_ui_layout_form_Form-1461242814069-formContainers-sap_ui_layout_form_FormContainer-1-formElements-sap_ui_layout_form_FormElement-2" visible="true">
                                <form:fields>
                                    <m:Text id="sap_IconTabBar_Page_0-content-sap_ui_layout_form_Form-1461242814069-formContainers-sap_ui_layout_form_FormContainer-1-formElements-sap_ui_layout_form_FormElement-2-fields-sap_m_Text-1" text="Field" width="auto" maxLines="1" wrapping="false" textAlign="Begin" textDirection="Inherit"/>
                                </form:fields>
                                <form:label>
                                    <m:Label id="sap_IconTabBar_Page_0-content-sap_ui_layout_form_Form-1461242814069-formContainers-sap_ui_layout_form_FormContainer-1-formElements-sap_ui_layout_form_FormElement-2-label-sap_m_Label-1" text="Label" design="Standard" width="auto" required="false" textAlign="Begin" textDirection="Inherit"/>
                                </form:label>
                            </form:FormElement>
                            <form:FormElement id="sap_IconTabBar_Page_0-content-sap_ui_layout_form_Form-1461242814069-formContainers-sap_ui_layout_form_FormContainer-1-formElements-sap_ui_layout_form_FormElement-3" visible="true">
                                <form:fields>
                                    <m:Text id="sap_IconTabBar_Page_0-content-sap_ui_layout_form_Form-1461242814069-formContainers-sap_ui_layout_form_FormContainer-1-formElements-sap_ui_layout_form_FormElement-3-fields-sap_m_Text-1" text="Field" width="auto" maxLines="1" wrapping="false" textAlign="Begin" textDirection="Inherit"/>
                                </form:fields>
                                <form:label>
                                    <m:Label id="sap_IconTabBar_Page_0-content-sap_ui_layout_form_Form-1461242814069-formContainers-sap_ui_layout_form_FormContainer-1-formElements-sap_ui_layout_form_FormElement-3-label-sap_m_Label-1" text="Label" design="Standard" width="auto" required="false" textAlign="Begin" textDirection="Inherit"/>
                                </form:label>
                            </form:FormElement>
                            <form:FormElement id="sap_IconTabBar_Page_0-content-sap_ui_layout_form_Form-1461242814069-formContainers-sap_ui_layout_form_FormContainer-1-formElements-sap_ui_layout_form_FormElement-4" visible="true">
                                <form:fields>
                                    <m:Text id="sap_IconTabBar_Page_0-content-sap_ui_layout_form_Form-1461242814069-formContainers-sap_ui_layout_form_FormContainer-1-formElements-sap_ui_layout_form_FormElement-4-fields-sap_m_Text-1" text="Field" width="auto" maxLines="1" wrapping="false" textAlign="Begin" textDirection="Inherit"/>
                                </form:fields>
                                <form:label>
                                    <m:Label id="sap_IconTabBar_Page_0-content-sap_ui_layout_form_Form-1461242814069-formContainers-sap_ui_layout_form_FormContainer-1-formElements-sap_ui_layout_form_FormElement-4-label-sap_m_Label-1" text="Label" design="Standard" width="auto" required="false" textAlign="Begin" textDirection="Inherit"/>
                                </form:label>
                            </form:FormElement>
                        </form:formElements>
                    </form:FormContainer>
                </form:formContainers>
                <form:layout/>
                <form:title>
                    <core:Title id="sap_IconTabBar_Page_0-content-sap_ui_layout_form_Form-1461242814069-title-sap_ui_core_Title-1" text="Form Title" level="Auto"/>
                </form:title>
            </form:Form>
            <layout:Grid id="sap_IconTabBar_Page_0-content-sap_ui_layout_Grid-1489422540207" defaultIndent="L3 M3 S0" defaultSpan="L6 M7 S12" position="Center" width="auto" containerQuery="false" hSpacing="1" vSpacing="1">
                <layout:content>
                    <form:SimpleForm id="sap_IconTabBar_Page_0-content-sap_ui_layout_Grid-1489422540207-content-sap_ui_layout_form_SimpleForm-1489422604659" layout="ResponsiveGridLayout" editable="false" visible="true">
                        <form:content>
                            <m:Label id="sap_IconTabBar_Page_0-content-sap_ui_layout_Grid-1489422540207-content-sap_ui_layout_form_SimpleForm-1489422604659-content-sap_m_Label-3" text="Login de" design="Bold" width="100%" required="true" textAlign="Begin" textDirection="Inherit"/>
                            <m:Input id="sap_IconTabBar_Page_0-content-sap_ui_layout_Grid-1489422540207-content-sap_ui_layout_form_SimpleForm-1489422604659-content-sap_m_Input-1489422684395" value="{name}" type="Text" showValueHelp="false" enabled="true" visible="true" width="auto" valueHelpOnly="false" maxLength="0"/>
                            <m:Label id="sap_IconTabBar_Page_0-content-sap_ui_layout_Grid-1489422540207-content-sap_ui_layout_form_SimpleForm-1489422604659-content-sap_m_Label-1489422792449" text="Data de" design="Bold" width="100%" required="true" textAlign="Begin" textDirection="Inherit"/>
                            <m:Input id="sap_IconTabBar_Page_0-content-sap_ui_layout_Grid-1489422540207-content-sap_ui_layout_form_SimpleForm-1489422604659-content-sap_m_Input-1489422795312" value="{name}" type="Text" showValueHelp="false" enabled="true" visible="true" width="auto" valueHelpOnly="false" maxLength="0"/>
                            <m:Label id="sap_IconTabBar_Page_0-content-sap_ui_layout_Grid-1489422540207-content-sap_ui_layout_form_SimpleForm-1489422604659-content-sap_m_Label-1489422799778" text="Data de" design="Bold" width="100%" required="true" textAlign="Begin" textDirection="Inherit"/>
                            <m:DatePicker id="sap_IconTabBar_Page_0-content-sap_ui_layout_Grid-1489422540207-content-sap_ui_layout_form_SimpleForm-1489422604659-content-sap_m_DatePicker-1489422802464" displayFormat="MMM dd, yyyy" placeholder="Insira a data" enabled="true" visible="true" width="auto"/>
                            <m:Label id="sap_IconTabBar_Page_0-content-sap_ui_layout_Grid-1489422540207-content-sap_ui_layout_form_SimpleForm-1489422604659-content-sap_m_Label-1489422808345" text="Data até" design="Bold" width="100%" required="true" textAlign="Begin" textDirection="Inherit"/>
                            <m:DatePicker id="sap_IconTabBar_Page_0-content-sap_ui_layout_Grid-1489422540207-content-sap_ui_layout_form_SimpleForm-1489422604659-content-sap_m_DatePicker-1489422811257" displayFormat="MMM dd, yyyy" placeholder="Insira a data" enabled="true" visible="true" width="auto"/>
                        </form:content>
                        <form:title>
                            <core:Title id="sap_IconTabBar_Page_0-content-sap_ui_layout_Grid-1489422540207-content-sap_ui_layout_form_SimpleForm-1489422604659-title-sap_ui_core_Title-1" text="Transferência de Aproval" level="Auto"/>
                        </form:title>
                    </form:SimpleForm>
                    <m:Button id="sap_IconTabBar_Page_0-content-sap_ui_layout_Grid-1489422540207-content-sap_m_Button-1489422977800" iconDensityAware="false" text="Button" type="Emphasized" iconFirst="true" width="110px" enabled="true" visible="true" press="_onButtonPress"/>
                </layout:content>
            </layout:Grid>
        </m:content>
        <m:footer>
            <m:Bar id="sap_IconTabBar_Page_0-footer-sap_m_Bar-1" design="Auto">
                <m:contentLeft/>
                <m:contentMiddle/>
                <m:contentRight/>
            </m:Bar>
        </m:footer>
        <m:headerContent/>
    </m:Page>
</mvc:View>


#1461232176312_S1.controller.js


sap.ui.define(["sap/ui/core/mvc/Controller",
    "sap/m/MessageBox",
    "sap/ui/core/routing/History",
    'jquery.sap.global',
    'sap/ui/model/json/JSONModel'
    ], function(BaseController, MessageBox, History, JSONModel) {
    "use strict";


    return BaseController.extend("generated.app.controller.1461232176312_S1", {


     onAfterRendering: function() {
        var bindingParameters;
        


        var filterData;
        
     },


    manageFilters: function(controlId, aggregationName, filterData) {
       var view = this.getView();
       var filters = [];
       filterData.filters.forEach(function (filter) {
           var value1 = filter.type === 'Date' || filter.type === 'DateTime' ? new Date(filter.value1) : filter.value1;
           var value2 = null;
           if (filter.value2) {
               value2 = filter.type === 'Date' || filter.type === 'DateTime' ? new Date(filter.value2) : filter.value2;
           }
           var oFilter = new sap.ui.model.Filter(filter.path, filter.operator, value1, value2);
           filters.push(oFilter);
       });
       if (filterData.bindingParameters) {
         filterData.bindingParameters.filters = filters;
         view.byId(controlId).bindAggregation(aggregationName, filterData.bindingParameters);
       }
       else {
         view.byId(controlId).getBinding(aggregationName).filter(filters);
       }
    },






    onInit: function() {
        this.oRouter = sap.ui.core.UIComponent.getRouterFor(this);
        this.oRouter.getTarget("1461232176312_S1").attachDisplay(jQuery.proxy(this.handleRouteMatched, this));


         




            var view = this.getView();
            view.addEventDelegate({
                onBeforeShow: function () {
                    if (sap.ui.Device.system.phone) {
                        var oPage = view.getContent()[0];
                        if (oPage.getShowNavButton && ! oPage.getShowNavButton()) {
                            oPage.setShowNavButton(true);
                            oPage.attachNavButtonPress(function () {
                                 this.oRouter.navTo("1461232176312_S0", {}, true);
                            }.bind(this));
                        }
                    }
                }.bind(this)
            });


    },
	handleRouteMatched: function(oEvent) {
		var params = {};
        if (oEvent.mParameters.data.context || oEvent.mParameters.data.masterContext) {
            var oModel = this.getView ? this.getView().getModel() : null;
            if (oModel) {
                oModel.setRefreshAfterChange(true);


                if (oModel.hasPendingChanges()) {
                    oModel.resetChanges();
                }
            }


            this.sContext = oEvent.mParameters.data.context;
            this.sMasterContext = oEvent.mParameters.data.masterContext;


            if(!this.sContext) {
                this.getView().bindElement("/" + this.sMasterContext, params);
            }
            else {
                this.getView().bindElement("/" + this.sContext, params);
            }


        }


	},
	_onButtonPress: function(oEvent) {
		var dialogName = "D0_1461254659145";
		this.dialogs = this.dialogs || {};
		var dialog = this.dialogs[dialogName];
		var source = oEvent.getSource();
		var bindingContext = source.getBindingContext();
		var path = (bindingContext) ? bindingContext.getPath() : null;
		var model = (bindingContext) ? bindingContext.getModel() : this.getView().getModel();
		var view;
		if (!dialog) {
		    view = sap.ui.xmlview({viewName: "generated.app.view." + dialogName});
		    view._sOwnerId = this.getView()._sOwnerId;
		    //need to set router so we can use navigation in dialogs
		    view.getController().setRouter(this.oRouter);
		    dialog = view.getContent()[0];
		    this.dialogs[dialogName] = dialog;
		}
		
		return new ES6Promise.Promise(function(resolve, reject) {
		    dialog.attachEventOnce("afterOpen", null, resolve);
		
		    dialog.open();
		    if (view) {
		        dialog.attachAfterOpen(function () {
		            dialog.rerender();
		        });
		    }
		    else {
		        view = dialog.getParent();
		    }
		    view.setModel(model);
		    if (path) {
		        view.bindElement(path, {});
		    }
		});
		
	}
    });
}, /* bExport= */true);


rubens12
Participant
0 Kudos

Can someone help me?

Accepted Solutions (0)

Answers (3)

Answers (3)

former_member203031
Contributor

Hi Rubens,

As i understood from your text at top, You are having a list and when you click on any item the values need to be displayed in the next page.

Please make event while clicking on the list like below:

list:function(evt){

var sel_value = evt.oSource.getValue(); //IN this you will get the only selected values.

Now you can simply bind the sel_value to one local josn model and you need to pass it to the next view and bind it to the UI element where you want to display.

Thanks,

Deepak Raj.

rubens12
Participant
0 Kudos

Sorry, but I an starting work with SAPUI5, and I don't know how can I use this example in my code

Do I have to put your example in what file?

I have the method "_onListItemPress" in my controller 0

_onListItemPress: function(oEvent) {
		var oListItem = oEvent.getParameter("listItem");
		var oBindingContext = oListItem.getBindingContext();
		
		return new ES6Promise.Promise(function(resolve, reject) {
		
		    this.doNavigate("1461232176312_S1", oBindingContext, resolve, ""
		    );
		}.bind(this));
		
	}
former_member227918
Active Contributor

Hi Rubens,

Its too large to check your code and provide any comment on it, anyways, check below point if helps,

*In the 2nd view: I suppose that value belongs to this.sMasterContext, if so, you can get that value using model.getProperty(this.sMasterContext + "/propertyname"), and set that value to desired input. if not,

*In the 1st view: you can have one more pattern along with other two (context and masterContext), and similar to that pass the desired value as well.

-Akhilesh

rubens12
Participant
0 Kudos

Do you have an example where have two pages, In the first a Strandard List item with navigation to second page?

former_member227918
Active Contributor
0 Kudos

what is your main problem ? your code not working at all ?

rubens12
Participant
0 Kudos

Some things in the code is working.

On the image are my two views.

I need when I click on an iten at the left list, the value of this iten go to the input. It is not working

former_member227918
Active Contributor
0 Kudos

i would suggest, please go through the below link and understand the flow and step by step app development and there are 10 exercises you can follow and that may be helpful to resolve your issue as well.

building-sap-fiori-like-uis-with-sapui5-in-10-exercises/

rubens12
Participant
0 Kudos

It didn't help me, but thanks

akshaya_p
Contributor
0 Kudos

Hi Ruben,

Get the selected value from the list on select of list item

in xml view<List id="idList" selected="onListSelect">

in controller

onListSelect: function(event)

{

var selItem=this.getView().byId("idList").getSelectedKey();

this.getRouter.navTo("Results",{

item:selItem

}

}

In your routing in manifest.json , add a parameter in your route pattern to pass this value to the second page.

For example

"routes": [{ "name": "Results",

"pattern": "{item}",

"target": "Results" }]


"targets": { "Results": { "viewName": "Results",

"title": "Results", "viewLevel": 2,

"controlAggregation": "pages",

}}

In your View2 controller, in routematched event, get your selecteditem from this code

routematched:function(event)

{

var selItem= event.getParameter('arguments').item;

}

you can then set this selItem into your input control in view 2.

Hope this helps!