Skip to Content

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 Sales Orders app based on the Fiori Worklist template

In SAP Web IDE Full-Stack:

  1. From the menu, select: File -> New -> Project from Template.
  2. Select the SAP Fiori Worklist Application template.
  3. Give the project a name, title, and namespace.
  4. Select the ES5 Gateway Demo System and the GWSAMPLE_BASIC service.
  5. Select App Type to be Standalone App.
  6. Select:
    1. Object Collection: SalesOrderSet
    2. Object Title: CustomerName
    3. Object Numeric Attribute: NetAmount
    4. Object Unit of Measure: CurrencyCode
  7. 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:

  1. Select the ColumnListItem as the Control from which the navigation will happen.
  2. The Event is press
  3. Choose to Navigate To the new view.
  4. 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.

 

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:

  1. Control: Page
  2. Event: navButtonPress
  3. 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 🙂

 

 

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. Nigel James

    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

    (0) 
      1. Yuval Morad

        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

        (0) 
    1. Michal Keidar Post author

      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.

      (0) 
      1. Nigel James

        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)

        (0) 
        1. Michal Keidar Post author

          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.

          (0) 

Leave a Reply