SAP Builders Blog Posts
Learn from peers about their low-code journey and write your own blog posts to share your thoughts and experiences as you become an SAP Builder.
cancel
Showing results for 
Search instead for 
Did you mean: 
Dan_Wroblewski
Developer Advocate
Developer Advocate
808

SAP Build Apps now has a new design-time UI that is intended to make it easier to navigate around the tool. Like with anything new, it might take a little while to get used to it. Here's a review and a few tips.

Most of the change is a rearrangement of where to find things:

  • Putting things you use most often on the main page (e.g., Preview).
  • Hiding things you use less often (e.g., Auth).
  • Rearranging or renaming buttons to make them more sensible (e.g., Variable and Integrations).  

In addition, there are some new or recent capabilities that are worth getting to know, now that they are more prominent.  

 

New UI

Here is a quick schematic of how the menu items were rearranged.

NewUI.png

The top main menu bar now organizes the main capabilities in a more logical way, based on the classic MVC (model-view-controller) paradigm:

Dan_Wroblewski_3-1731229847072.png

  • User Interface: The "view"
  • Variables: Essentially, this is the "controller" or "simple logic" since variables are used to create bindings, that create a way to respond to data and user actions. For more advanced logic, the logic canvas remains in the same place. Instead of a toggle between View and Variables – which was always a bit awkward – you now have clear buttons to go from User Interface to Variables
  • Integrations: The "model" or data, which now can come not just from data services but from processes and actions. 
  • App Settings: Other app-wide tasks that are done infrequently or even just once. 

 

Preview

The preview and build capabilities – especially the preview – are things I want all the time, and now they have dedicated buttons on the UI canvas.

Dan_Wroblewski_0-1731671764873.png

One of things I never liked is how many clicks it took to open a preview.

  • With the new versioning feature, it could take up to 5 clicks to open a preview:
    1. Launch
    2. Open Preview Portal
    3. Open Web Preview
    4. Settings (on your app)
    5. Open Preview (of specific version) 
  • The new exposed button saves you the first click.

What would be nice is to have a button on the UI canvas that opens the web preview for the editable version right away. 

And perhaps you can help me, but I never understood being in a specific project, saying preview ... 

Dan_Wroblewski_1-1731671909911.png

... and then again having to specify which project I want to run. 

Dan_Wroblewski_2-1731671957940.png

TIP: Whenever I see someone go to Launch tab each time they want to preview an app it makes my blood boil 😡. Open a preview window, and then whenever you save your changes to the project, the preview window will automatically update.

 

Build and Publish (deploy)

Similarly, to get to the build area you no longer have to deal with the preview option – the Publish button now takes you straight to where you build and deploy your app.

PET PEEVE: I don't like having an in-between dialog before getting directly to the build Area – they saved me a step by not mixing preview and publish, but now they lost me a step by having to choose between versioning and publish. 

Dan_Wroblewski_0-1732778023245.png

Note that for each build you must specify either a version (more on those later) or the latest editable state of the app.

Dan_Wroblewski_2-1731234019750.png

 

Versioning

This is how versioning works:

Dan_Wroblewski_3-1731672186661.png

  • Whenever you click Save, a "state" of the app is preserved. You can always restore that state – restoring means that the state is copied back on top of the current editable state (the original state remains in the history in the same place).
  • To view the states, you click the History (clock) icon.
  • When you want to mark a state as a new version, perhaps so you can deploy it, you click Publish and then Create a Release Version and it creates a new version for you. Basically, it's a marker for a specific state.

Here's what you see when you click the History icon.

Dan_Wroblewski_1-1731233919598.png

And remember, when you make a build, you cannot choose a state but rather a version (or the current editable state).

 

Pages

The new interface for working with pages lets you navigate to a page or create a new page without first opening the pages area.

Directly from the UI canvas, you get a dropdown with an option Add New Page. You can also navigate to Show All Pages, which takes you to the same pages area UI as we previously had. Note that the pages area (as of time of writing this blog) shows your pages in alphabetical order.

Dan_Wroblewski_4-1731230170247.png

The dropdown also shows the current page plus up to 4 other pages that you can directly navigate to. After a little testing, my understanding is that the dropdown shows:

  • The current page, plus the 2 previous pages and the 2 next pages.
  • If you are on the 1st or 2nd page or the last or second to last page, the list will be adjusted to show you up to 5 pages around the current page. 

Important to note that when I click Show All Pages, the pages are shown in alphabetical order. In the dropdown, the pages are shown in the order you created them.

 

Default App Layout

By default, a new project will be shown laid out as a full-screen web project. In the past, the default layout was for a mobile phone.

However, if you choose a mobile layout, SAP Build Apps remembers that choice in all your projects in that tenant, and will set the layout to mobile the next time you create a new project.

Dan_Wroblewski_1-1731567455471.png

I am told that although the original tool was designed primary for building cross-platform mobile apps, most partners and customers are using SAP Build Apps as a way to quickly create web apps without coding or using profession front-end tools.

Notice that the selector for choosing the "floorplan" for your app has moved to the right side, but it is basically the same: a zoom dropdown and a device dropdown. Notice that the choices for device have been simplified.  

Dan_Wroblewski_0-1731567334022.png

 

What do you think?

Please comment:

  • What do you think of the changes?
  • What other changes would you want?

😺

9 Comments