Navigation between views made easy with the Storyboard in the SAP Web IDE Full Stack
Hi all UI5 developers and SAP Web IDE users,
For a while now, there is a new version of the SAP Web IDE, called full stack. This version of the SAP Web IDE looks basically the same as the previous version but has some cool new features. One of these new features is the “Storyboard”.
In the beginning, this Storyboard was a way to view your navigation in your Fiori/UI5 app. It was not very useful because you could only view the navigation, not make a new one. With recent updates of the full stack Web IDE, this has been changed! Now it’s also possible to create new views in the Storyboard and in the lay-out editor you can make the navigation between the views.
This new feature makes the Storyboard useful and an added value for the full stack Web IDE. You don’t even have to write any code anymore! This brings the Storyboard to the next level.
In this blog, I show you how you can use the Storyboard to create views and a navigation between these views.
Create a project
Let’s start with creating a new empty UI5 app
Give your project a name and namespace
Create a first view and call it “App”. This view will be used as container view to add views to it and navigate between these views.
Open the Storyboard
Go to the Storyboard and select your project
This is what’s already generated by the Project template
Configure the app container
The wizard has already generated a Route and a Target, delete this. We don’t need this.
Go to the manifest.json of your project –> Routing
There you’ll see a route with no name and target “TargetView1”. Delete both.
It should look like this
Add a first view using the Storyboard
Create a first view from in the Storyboard. In the Storyboard click on “New View”
Give it a name, for example “View1”
Now you’ll have two views. To connect “View1” to the container view, we need to change the manifest.json again.
Make “View1” the starting point of the app
In the manifest, the Target has been generated during the creation of the view. The route should be added manually. If the Pattern is empty, it will be connected to the container view. During the start of the app (inclusive the routing component), the app will load the view behind the route with the empty pattern inside the container view. Therefore we need to create a route with an empty pattern:
If you go back to the Storyboard, you’ll see this:
Create a second view using the Storyboard
Create a second view, “View2”:
Again, we need to make the connection between “View1” and “View2”
Connect the two views
Select “View1” and click on the edit button
Add a button to the view
Fill in a text for the button
Go to events, click on the button behind the press event and select “Navigate To”:
Select the view where you want to navigate to, “View2” in this case:
The Storyboard will look like this.
You can do the same for “View2”. Add a button, configure the navigation and select “View1”. The result will look like this:
Manual actions for finetuning
In the app view, there is a “Page” added. We don’t need this, so you can delete everything between the tags “App”.
In the two other views, the wizard added “App” and “Pages” tags. We only want to have one “App” in our app, so again delete these tags ?
And we have an app with navigation between two views following best practices with almost no coding ? Not that I don’t like coding, but now I don’t need spending time on setting up the navigation and have more time for other cool coding stuff.
Have fun using the Storyboard!
Looking forward to the next improvements.