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
795

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
jpegenau
Explorer

Hi @Dan_Wroblewski ,
the new UI looks and feels nice but I have a problem. 
Since the update, the Dropdown component seems to be broken. If I’m seeing this correctly, the text padding is being ignored. This causes the height of the fields not display correctly. 

jpegenau_0-1732869065726.png

If I enforce the height of the fields, I can't center the displayed text. It is also not possible to change this behavior in the component editor. 

jpegenau_1-1732869075786.png
Are you aware of this problem, and do you maybe have a fix in mind? 

Also: Was this update announced somewhere? The update caught me off guard just before I wanted to deploy my app to production, and I had no way to fix this. 

Thanks in advance! 


Dan_Wroblewski
Developer Advocate
Developer Advocate
0 Kudos

Thanks for writing …others have noticed this too …  I have alerted dev and will post anything I hear … currently traveling for SAP TechEd in UK 🙂

Dinu
Active Contributor
0 Kudos

Is there a way to switch to the old interface for folks who are just wrapping up a project. 

Dinu
Active Contributor
0 Kudos

I suppose these bugs introduced in the new versions don't affect the already built and deployed versions(web). Do they? 

Dan_Wroblewski
Developer Advocate
Developer Advocate
0 Kudos

@Dinu I would doubt it but I have asked if that is possible and if I hear something I will post that here. Why did you want to go back to the old version?

I think the update of the design UI and any bug(s) introduced are merely coincidental. And any deployed versions would not be affected. 

Dan_Wroblewski
Developer Advocate
Developer Advocate
0 Kudos

@jpegenau I tried to reproduce your bug but could not -- I am assuming it was already fixed. Can you check?

Dinu
Active Contributor
0 Kudos

The project team in the last mile of delivery found it disturbing to find a different tool on Friday. The changes are all for good cause. But in a delivery project we need to manage any change, good or bad. Such changes impact, in short term, the schedule of the project.  

 

jpegenau
Explorer
0 Kudos

Hi @Dan_Wroblewski!  No, sadly it is not fixed. No change in behavior. I tried my existing apps and also a new app. 

(Note, that the view in the UI Designer reflects the changes to the field correctly, as soon as you go into preview mode the field is not working like it is supposed to)

 

Dan_Wroblewski
Developer Advocate
Developer Advocate
0 Kudos

I'm sorry but I do not understand exactly which properties you are changing and how it appears in design time and preview. Again, I added a dropdown and previewed it and all was OK.