Navigation from Master to Detail view in SAPUI5 Application based upon User-input

[former_member327257]

Hi,

I have created an application, in which i am displaying a list of Employees (say) and navigating to detail view by clicking on any of the list item. But I want to navigate to detail view based upon user-input.

for eg. When User enters an employee ID then it will navigate to the detail view of that particular employee.

I am not able to figure out, how to resolve the problem.

Kindly suggest some way.

Thanks!!

[Former Member]

Hi there,

I'm assuming that you are familiar with the concept of Routing and know how the navigation works. So I am limiting my suggestion to just how the logic for the navigation should work:

Assuming that you have two views in an App control (note not a SplitApp control): You would have the first View on the App display an Input control that will accept the user input (the Employee ID) and a Button (to trigger the event). Next, in the press handler of the event of the Button in the respective controller, get a reference to the Router and use the navTo function to navigate to the route that you want to.

Sample from the Demo Apps sectiof of the guide:https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/helloworld/index.html

[former_member327257]

Hi Rao,

You are absolutely right regarding Routing. I know the concept of Navigation. Also it's not a SplitApp. The link you provided contains a basic example. I had already implemented that one.
My Question is, how to pass a value from input-field (Entered by end-user) to second view, which will display the details based upon what user had entered.. Assuming data is available locally in JSON format

[Former Member]

Hi Rajat,

In the case of Routing, you will use the navTo() to navigate to the second view. Assuming you want to pass any data to the second view, please use the oParameters parameter to from the method navTo(sName, oParameters?, bReplace?)

eg. if your route name is "toSecondView" and the data that the user entered is in the Input field with id = "idUserInput" on the first view with the id = "idFirstView" then in the event that is executing the navigation (eg. onPress of a Button):

Step 1: Get the value of the input field. This can be done with <viewReference>.byId("idUserInput").getValue().

Step 2: Put this value into Object:

var oDataToBePassed = { userInput = <viewReference>.byId("idUserInput").getValue() };

Step 3: Call the router:

<componentReference>.getRouter().navTo("toSecondView",oDataToBePassed);

Note: In case the value of the user input contains special characters, please use encodeURIComponent()

Step 4: If you want the user input to be part of the Hash, include the "userInput" property name as part of the route pattern in manifest.json

Step 5: To retrieve the value in the Detail view, add an event handler to the router using attachRouteMatched() method. Normally this is done in the onInit() of the Detail or App controller.

Step 6: In the function that you will add as event handler in the attachRouteMatched, the function parameter (oEvent) will provide the necessary data in oEvent.getParameters().arguments.userInput