In this example, We will create an additional view and navigate from one view to the other upon a button click.
We will be following below steps-
- 1. Create another View file.
- 2. Create Controller file for the View.
- 3. Configure the View on manifest.json file.
- 4. Create Button on View 1 and define its method on Controller file.
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.
Step 2 - Create Controller file for the View
In Controller Folder, create a controller file for the view like we are creating Second.controller.js file.
Add the below code on your Controller file.
Step 3 - Configure the View on manifest.json file
Now go to manifest.json file and add the Second View on routes array.
(you can use any name instead of Second)
So, the routes array of manifest.json file looks like below -
Now, on manifest.json file only, add the below lines on targets object.
Here, id - Second is the id of the new view which we created on step 1.
So, targets object of manifest.json file looks like below -
Step 4 - Create Button on View 1 and define its method on Controller file
In View1.view.xml file, create a Button for navigation.
Add the logic in View1.controller.js file for navToSecond function which will nagivate you from View1 to Second View.
Do not forget to add the UIComponent library at the top on the Controller and pass the same on the define function.
So, the View1.controller.js file will look like below -
And it is done !!!