Technical Articles
SAP Web IDE Presents: The Storyboard
One of SAP Web IDE Full-Stack’s nicest and most powerful features is the Storyboard perspective.
The Storyboard provides a visual representation of the application’s UI including its pages (views), navigations, and the services and entities that it uses. And it can be used to build some parts of your app with no code 🙂
Let’s take a simple use-case to see the Storyboard in action.
We will create an application based on the SAP Fiori Worklist template, where in its first view we’ll present a list of SalesOrders, and from each row in the list we will navigate to a view presenting the SalesOrderItems.
Prerequisites
- Create a destination pointing to SAP Gateway Demo System (ES5)
- The Storyboard feature should be enabled in the Preferences perspective, on the Features tab.
Create a Sales Orders app based on the Fiori Worklist template
In SAP Web IDE Full-Stack:
- From the menu, select: File -> New -> Project from Template.
- Select the SAP Fiori Worklist Application template.
- Give the project a name, title, and namespace.
- Select the ES5 Gateway Demo System and the GWSAMPLE_BASIC service.
- Select App Type to be Standalone App.
- Select:
- Object Collection: SalesOrderSet
- Object Title: CustomerName
- Object Numeric Attribute: NetAmount
- Object Unit of Measure: CurrencyCode
- Click Finish.
Optional: You can run the app at this point to see what it looks like (when prompted to select the file to run, select the index.html).
Launch the Storyboard
Select your Sales Orders project and open the Storyboard perspective from the left sidebar.
You can immediately see the visual representation of your app. You can expand the Entity Sets and see the SalesOrdersSet.
Use the Storyboard
Add a New View
Let’s start by adding a new view to our app. On the top left corner, click New View.
Enter a name for the new view, e.g. SalesOrderItems, click Next and then Finish.
You can see the new view was added in the Storyboard.
Build the New View
Reminder: We would like to present a list of SalesOrders where each row in the list will navigate to a view presenting the SalesOrderItems.
- Let’s build our new view to present the SalesOrderItems. While in the Storyboard, hover over the new view and click on the Pencil button. This opens the view in the Layout Editor.
- On the left, search for a List, then drag-and-drop it into the canvas.
- Click on the list in the canvas in order to select the StandardListItem.
- On the right, in the Properties pane, click to select the Entity Set to which we will bind the StandardListItem.
- In the dialog that opens, select the third radio button and the /SalesOrderLineItemSet Entity Set.
- Click OK to close the dialog.
- Now let’s bind the list’s Title and Description to properties of the service:
- In the Properties Pane, click on the Binding button of the Title property.
- Delete the “List Item 1” string and double-click on the ProductID property.
Click OK.
- In the same manner, bind the Description property to 2 properties: Quantity and QuantityUnit. Click OK.
The current Type of the StandardListItem is configured as Navigation, but we don’t want to navigate using this list, so change it to Inactive in the Properties Pane (scroll down a bit).
Optional: Bind the page’s title to a string from the i18n.properties file:
- Select the Page control.
This can be done via the canvas or via the Outline tab on the left (select the sap.m.Page control). Verify that the Page is indeed selected by seeing “Page” in the Properties Pane. - Click on the Binding button of the Title property.
- In the dropdown on the left, select i18n.
- Click on the + button to add a new string to the i18n.properties file.
- Enter a String Key, Value and Type. Click OK.
- Delete the “Title” string from the Expression text area, and double-click on the new i18n string you just added. It is added to the Expression text area.
Click OK.
The new view should look like this:
Configure Navigation
Now that we finished modeling our new view, we need to “connect” it to the app, i.e. make it part of the flow.
We want to configure a navigation from the Worklist.view.xml to our new view.
For this we need to return to the Storyboard 🙂
On the upper-right corner, click on the Storyboard tab.
You can see that the new view now has a new Entity Set:
Let’s configure the navigation in just a few clicks:
Hover over the Worklist.view.xml and click on the Arrow button.
In the Configure Navigation dialog:
- Select the ColumnListItem as the Control from which the navigation will happen.
- The Event is press
- Choose to Navigate To the new view.
- Check the Propagate context binding checkbox to propagate the SalesOrder entity.
Click on Configure Navigation to close the dialog.
Notice how the Storyboard now presents the new navigation.
You can configure navigations also from the Layout Editor:
Open the Worklist.view.xml view in the Layout Editor.
Select the Standard List Item control and click on the Events tab in the property editor panel.
Search for the relevant event (In our case it is the Press event), click on the icon next to it and select Navigate To from the menu.
In the Configure Navigation dialog:
- Select Propagate current context from the Data Binding options.
- Select the SalesOrderItems view from the View options.
Next,
Since the Object.view.xml isn’t used anymore, we can delete it.
Hover over it and click the Delete button (and confirm when prompted).
The Storyboard adjusts itself and now the flow is clearer:
Optional: Configure Back Navigation
Choose to edit the new view again (remember the Pencil button?).
Make sure the Page control is selected.
Change the Show Nav Button property to True.
In the Storyboard, configure navigation from the new view to the Worklist.view.xml:
- Control: Page
- Event: navButtonPress
- Navigate To: Worklist
Run the App
… and see the result!
In the storyboard, click the Run button (if prompted to select the file to run, select the index.html), and navigate through the app which we built in minutes, and with no code 🙂
Thanks for this great howto on the new storyboard feature. How do you think it compares with build.me in getting a prototype together and circulated with stakeholders?
Cheers,
Nigel
Does this story board feature only work if the model is well defined?
Hi
Not sure what is well defined.
You need a manifest.json in which there is an OData model.
This is generated upon UI creation on data connection step when choosing the datasource, or when adding a datasource.
Regards
Yuval
Hi Nigel,
Build can be used together with the Storyboard in SAP Web IDE.
Using Build, you can iterate with end-users and provide screenshots of end-user validated prototypes to begin the development process in SAP Web IDE.
For UI5-based Fiori apps, Build can be used for high fidelity prototyping and code generation for further development with SAP Web IDE on SAP Cloud Platform.
Then the Storyboard together with the Layout Editor can be used to further enhance the app, add views, create navigations, etc.
I hope this clarifies it a bit.
Regards,
Michal.
Thanks Michal - it would seem that one has to have a fully fledged 'schema' in order for these tools to work.
Is it possible to throw controls onto a storyboard without a connection to a service or a datasource?
Thanks,
Nigel
(I am appreciating all the fine work you and your team are doing - just trying to understand what is possible)
Hi Nigel,
Yes you can use the Storyboard and the Layout Editor even if your app is not yet connected to a data-source. You can drag & drop controls but you simply won't bind them to any data yet.
Once you eventually add a service to the app, you can then bind the view to an entity set and the control to the different properties.
Try it with a simple app based on the SAPUI5 Application template, where you get one empty view and the app is not connected to any service.
Regards,
Michal.
Hello Michal Keidar ,
Adding to Nigel's question, I have one another question:
Is it possible to iterate integratively the import between Build and Web IDE in SAP Cloud Platform?
Eg: After the app had been imported to Web IDE from Build, users provide some more feedback and the UX team make some changes to the prototype in Build. Is it possible that the changes recently made in Build continue to reflect on the app imported to Web IDE?
If not, is SAP intend to develop that function?
It would be a great feature for continuous integration between UX & UI development.
Thank you,
Victor.
Hi Victor,
I don't think your question is related to my blog but anyway, no it's not supported and not planned.
If more info is needed, please create a new question and not as a comment in a blog.
Thanks and regards,
Michal.
hi guys .. i'm new in sap web ide and i can't find storyboard icon, i only have 3 icons on the left (welcome, development and preferences).