I am looking for a software vendor to take over the AppContainer product

The AppContainer product was started as proof that a more effective application development is possible compared to SAP’s product portfolio.

It is approx. five times more efficient than Business Application Studio in the relevant area, has none of the limitations of AppGyver and produces native Fiori UIs utilizing SAPUI5. Further more, applications can be built for SAP Hana, S/4Hana and ECC (and other databases). It is a containerized application, meaning it works in the cloud and on premise. The last advantage is, it is fully integrated into git and CI/CD pipelines to allow building professional software.

XMLView Editor

The AppContainer has multiple components but let’s focus on the UI development first – the graphical UI5 Editor. It allows to create or modify XMLViews via drag’n drop of UI5 controls and configure every single available property.

The Design Time Browser allows to view all development artifacts and our goal is to create a simple UI that shows the contents of a database object. Clicking on the tile opens the next screen.

Modifying development code requires to be authenticated, hence the login dialog is shown first.

Likely we want to create a new directory to isolate this application from other code, a click on the “Add sub folder” button at the root folder level allows that. Let’s call that folder DatabaseList.

Clicking on the newly created folder shows all its file – there are none and the button with the “+” icon allows to create one. In UI5 the foundation of all pages is the XMLView, so we name the file “App.view.xml”.

This is an empty file and we have multiple options to edit it. One is using the text editor just as we write UI5 apps today. But for XMLView files, these are files with the suffix “*.view.xml” there is also a graphical editor. Clicking on this “Editor” opens it.

The editor consists of the canvas and on the right hand side a selection of UI5 controls, layout options (UI5 Containers), Models and the Properties of the currently active control.

A Heading makes sense for our application, so the control H1 (Deadings) is dragged and dropped over the canvas. This adds the UI5 control exactly as it will be rendered in the application later. No more surprises that something looks different than anticipated.

Setting properties

Probably the default text is not that useful, it should be changed. A double-click on the control shows all properties of this control. Not only the title property but all UI5 properties of this control and all can be changed.

I have changed the title from “New Title” to “All database”. Properties that have a fixed list of available values, like in this control the Level property are shown as a select-able list. A click on the “Update” button does change the control’s settings.

Next a control should is added which will show all values the database view has. Expanding the “Selectors” group shows all controls of that type and I picked the second, the “Select List”, and dragged it into the canvas as well. Again, this is the way it gets rendered by UI5 with the current settings.

Model binding

But this control should be bound to data as well, so the “Model” group is expanded, showing all available objects in the SAP system. The database view “DATABASES” contains the data we want to show, so this model is dragged into the “Select List” object previously added to the canvas.

Note: It shows the text “with model” now as well, not only the UI5 control type.

A “Select List” requires “List Item” as template, this is the next object dragged over the “Select List”.

The result of that action is that for each row in the “DATABASE” view one “List Item” is shown. Obviously this view has four records. The default text “Item” is probably not the most useful text here, we rather want to show a column of the view. In other words, the “List Item” must be configured.

A click (no doublckick!) on any of the items selects that in the properties group and we can see its “text” property is the constant “Item”. But it has a drop down element as well, which we click on.

The “text” property should be bound to the “DATABASE_NAME” column of the model and a click on update shows the result.

Save and modify and run

With the application being complete the empty XMLView file we created initially can be updated using the “Save” button at the top and then we close the editor.

Back in the “Design Time Browser” this XMLView object can be opened again to modify it, making it better and better. What we actually did is creating a native XMLView file as required by the UI5 framework. Opening it it the text editor proofs that.

And yes, this is a fully working application. The “Design Time Browser” offers a “run” link as well, which opens the UI5 html application.

Recap

So what have we accomplished in those three minutes it took to build the application:

1. Exposed the data of the view DATABASES via oData. Can’t remember doing that? In fact, the AppContainer did that for us fully automatically!
2. Configured and used the authentication and authorization. Again, the AppContainer does that automatically reusing existing SAP information.
3. Created a new UI5 application.
4. Connected the data service with the UI application.
5. Deployed the entire code as read-to-run application.

So essentially we did the same as this SAP tutorial: https://developers.sap.com/group.cp-frontend-ui5-1.html

As said, the AppContainer has many more functions but this is the highlight for UI development.