List Item not getting selected in WorkList kind of application

[former_member573574]

Hi SAP Gurus,

I have a small doubt. I have created a WorkList fiori-like application. There are 2 views on a single screen (used the SplitApp control) Main view has list of Fruits (used List control and binded with JSON model). When I click on any of the List Item, the second view has a SimpleForm control.

If I click on Kiwi, let's say, then have binded the form inputs with name and price. So, Kiwi and 78 will appear in the SimpleForm (2nd View).

The problem is, I have used RouteMatchedHandler method to handle the browser back and Forward button. Also, made the neccessary changes in the manifest.json's routing attribute. It is working fine.

Whenever I click on 1st fruit, then 2nd then 3rd, the corresponding data is getting displayed in the SimpleForm Inputs in the 2nd View. Also, the Back and Forward button is working as expected (with change in the URL end, i.e., #fruits/1, #fruits/2, .......)

But, when I go from 1st fruit to 2nd fruit and then when I press Browser back, ideally the select/highlight on List items should also change, but the selection is not getting changed on the List in the 1st View. To do this, I am setting the Selected item as:

oList.setSelectedItem(oList.getItems()[i]) in the For loop as shown below

Please help me to get the issue resolved. Your time is highly appreciated.

I have written the below code for 2nd View's controller:

Also, find the attached project files in case you feel a need to refer other files. app-view.txtcomponent-js.txtmain-controller.txtmain-view.txtmanifest-json.txtmodel-creation.txtview2controller.txtview2.txt

onInit: function () {
		
	//RouteMatchedHandler: This method triggers everytime when the page route/URL changes
		this.oRouter = this.getOwnerComponent().getRouter();
		this.oRouter.attachRoutePatternMatched(this.hercules, this);
	},
		
		hercules : function(oEvent){
		 var sPath = "/fruits" + "/" + oEvent.getParameter("arguments").mario;
		 this.getView().bindElement(sPath);   
			
			
			//Get the List object  
		var oMasterView = this.getView().getParent().getParent().getMasterPages()[0];
		var oList = oMasterView.byId("idList2");
			
		var fruitName = this.getView().getModel().getProperty(sPath).name;
			for(var i = 0; i < oList.getItems.length; i++) {
				if (oList.getItems()[i].getTitle() === fruitName){
				   oList.setSelectedItem(oList.getItems()[i]);
				   break;
				}
			}
   	},

[AbhishekSharma]

Hi PRATHAMESH,

Try first deselecting all items in Master page list and then select the one you want. Please try below code for reference.

 var oList = sap.ui.getCore().byId("yourlist");
 var oSelectedItem = oList.getSelectedItem();
// This action deselects item and allow you select the item again 
       if(oSelectedItem){
         oList.setSelectedItem(oSelectedItem,false);
       }

Hope this helps...

Thanks-

Abhishek

[former_member573574]

Hi Abhishek,

Thanks for your inputs and time.

But Abhishek, the problem is not that I am not able to select the list. I am able to select the list and it is highlighted as well. But the problem is, when I press the Browser Back Button the selection on the list Item is incorrect.

The scenario is:

1) I press the Kiwi list item and the corresponding details are displayed in the detailPage section on the R.H.S and also, the selection is correct on the L.H.S. on Kiwi.

2) Then I press the Pineapple list item. The output is as expected: (highlight is there on the Pineapple)

3) Now, when I click on the Browser Back button, the values should be displayed for Kiwi (It is working fine, handled with router concept) But, the selection should be on the Kiwi (the highlight should be on the Kiwi) As you can see in the below image, the selection is still on the Pineapple and not Kiwi (though Kiwi values are displayed in the R.H.S.)

How do I make the code change so that when I press Browser back or forward button, the respective List Item (fruit name) should get highlighted in sync with the information on the R.H.S ?

[AbhishekSharma]

Hi Prathamesh,

Per screen shots you shared it looks like while navigating from one Item to another in your Master Page corresponding Details are getting displayed on Details Page (should be without full page refresh). If Full Page is not getting refreshed then Browser back button will not be activate.

In Master Details app if your full page is getting refreshed then you might want to check this Navigation, per my understanding this should not happen.

If you still want to handle browser back button please refer below code, which will help to handle browser back button and update your Hash navigation.

document.onmouseover = function() {
     //You are working inside of SAPUI5 application
     window.innerDocClick = true;
}
document.onmouseleave = function() {
    //You are working outside of SAPUI5 application
    window.innerDocClick = false;
}
window.onhashchange = function() {
   if (window.innerDocClick != false) {
      window.innerDocClick = false;
   } else {
     //You clicked on Browser Back button
     //Handel your navigation here
  }
}

Please refer below demo application for scenario.

https://ui5.sap.com/test-resources/sap/m/demokit/master-detail/webapp/test/mockServer.html#/Objects/...

Hope this helps..

Thanks-

Abhishek