Routing & Navigation in Fiori UI5 using Base Controller

In this example, We will try to setup Navigation and Routing among Views using Base Controller.

We will be following below steps-

1. Create another View file.

2. Create Base Controller file in the Controller Folder.

3. Create Controller file for the View in the Controller Folder.

4. Extent the Base Controller for View1 Controller.

5. Configure the View on manifest.json file.

6. Define Navigation Button and its Method.

Step 1 - Create another View file

In view folder create another view.xml file (Like we have created Second.view.xml file).

In your newly created view file, define the view using below code.

In Controller Folder, create a controller file named BaseController.js file.

Add the below code on your BaseController file.

In the Controller Folder create Controller file for view like View2.controller.js.

In the Controller Folder, go to View1Controller.js

Refer the below code -

In manifest.json file, under routes section, define the view as below -

So, the routes will look like below -

In the same manifest.json file in the targets object, define the target as below -

So your targets will look like below -

In the View1.xml View file, create a button like below -

Now, In the Controller Folder and in View1.Controller.js file, define the method like below -

So the View1.Controller.js file will look like below -

And it is done !!!