Inspired by Mocking up the Payroll Control Center Fiori App from DJ Adams I built a quick and dirty prototype using the AppBuilder. While you get all the details about AppBuilder in other blogs (this is a good starting page: SAP AppBuilder Developer Center) I just want to show you a simple use-case how you can consume external data and showcase them in the AppBuilder.
Recently there were some discussions on Twitter where to ask questions regarding SAPUI5 and openUI5. While SCN still is the place to go, there are also some questions rised on StackOverflow recently. Therefore I make use of the public OData endpoint of StackOverflow which has the URL http://data.stackexchange.com/stackoverflow/atom.
For our simple demo app the goal is to select the newest Posts tagged with something like UI5 and show them in the app. Therefore we can use the query http://data.stackexchange.com/stackoverflow/atom/Posts?$filter=substringof(%27ui5%27,%20Tags)%20eq%20true&$orderby=LastA…
Here we are filtering all posts that have the substring of ui5 inside one of their tags.
Now that we have access to the data we can start to build the app.
Configuring an App in SMP Cloud
AppBuilder allows you to consume data from various sources, OData being one of them. You can connect to OData sources directly or via the SAP Mobile Platform, on premise or in the cloud.
Because the direct connection to the StackOverflow service did not work for me I opted for the second option to consume the service indirectly via the SMP Cloud.
There I created an application de.mte.stack :
The endpoint is simply the OData service from StackOverflow. Now I can consume the OData of this application via the AppBuilder in order to build my demo app.
Building the Prototype in AppBuilder
First I have to create an application profile in the AppBuilder:
Only the URL to the SMP (I used my free trial account here) and the Application ID of the app are needed here. The next step is to connect to the SMP Cloud and retrieve the details of the provided service.
Here an application connection to the SMP Cloud is created automatically. After a successfully created connection you can see the details of the provided service. As shown above the service offers collections of Badges, Comments, Posts etc. As we like to see the Posts regarding UI5 we create in another step a SMP OData Query that is based on the Posts collection:
AppBuilder allows us also to get a preview of the data here:
Now I used this data to build a Superlist with a List view and Detail view and implemented the Superlist in my demo app. Details for the steps needed can be seen here: AppBuilder Tutorial – SuperList
The created prototype now can be started inside AppBuilder or it can be exported as an Eclipse project or even deployed as a Kapsel app on SMP.
In the AppBuilder itself it looks like this:
With AppBuilder you can create a prototype including real data very fast. But there are some downsides to be aware of. While the tool supports drag and drop and offers a WYSIWYG perspective you can use only a small palette of UI controls. Elements like the SuperList are not standard UI5 controls and the documentation is not very detailed at the moment.
Also things like Navigation bar are already included but you have to code some cryptic stuff in order to make it really usable. In my example the navigation from List to Detail works out of the box via the Superlist but you cannot navigate back from Detail to List view. And when I show the Navigation bar I can see the back button but it does not work. Also it is visible on the List page, too.
In the next couple of months it is planned to integrate the AppBuilder into some Eclipse Web Application Tools. So maybe it does not make much sense to use AppBuilder at this early stage because many things will change soon. But at least for some small examples it may be a handy tool.
What do you think about AppBuilder? Would it be useful for you? Or do you prefer text editors like Sublime, Vi or Notepad for building your prototypes?