Skip to Content

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.

Use Case

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 :

SMP3 App.png

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:

AppBuilder SMP App Profile.png

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.

SMP3 Server Profile.png

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:

SMP3 New SMP ODATA Source.pngSMP3 New SMP ODATA Source 2.png

AppBuilder allows us also to get a preview of the data here:

/wp-content/uploads/2014/02/preview_392034.png

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

Result

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:

App.png

Conclusion

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?

To report this post you need to login first.

17 Comments

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

  1. Gareth Ryan

    Hi Mark,

    Nice little example of using AppBuilder and I like that it is based on current SCN vs SO discussions 🙂

    I’ve not meddled with AppBuilder at all – would you say it is worth trying or better to stick with a “proper” dev environment?

    Cheers,

    G.

    (0) 
    1. Mark Teichmann Post author

      On the one hand the AppBuilder includes some nice functionality like WYSIWIG, drag’n drop, support for Kapsel etc. But on the other hand the generated code is not really what I would use as a starting point for a productive app. Neither is the code of the StarterKit Applications from GWPA btw. Also the source code editor in AppBuilder is not really an editor. You do not have code completion. So using it just for Mockups it could make sense but for all the other stuff I would not use it in the current version.

      Regarding the SAP Mobile Platform 3 I get the feeling that everything is just in alpha stadium. So my hopes are that in one or two years all these tools are production ready and more integrated with each other.

      (0) 
      1. Gareth Ryan

        Mark Teichmann wrote:

        Regarding the SAP Mobile Platform 3 I get the feeling that everything is just in alpha stadium. So my hopes are that in one or two years all these tools are production ready and more integrated with each other.

        How long have we all been saying that? 😉

        (0) 
        1. Midhun VP

          Even the product has not reached the market, the customers who are interested to start with SMP3, SAP is ready to help them. I think the customers are bothered about the future migrations if they start with available version of SMP (2.3). There are customers who came with a requirement of SMP3.

          – Midhun VP

          (0) 
          1. Mark Teichmann Post author

            It is planned to have SMP 2.3 still available as a ‘sidecar installation’ when SMP 3 will be GA. That will ensure that current MBO applications will be usable at least as long as SMP 3 will be supported.

            That should give the customers some time for the migration or redevelopment of their apps.

            (0) 
            1. Midhun VP

              You are right. But there are customers (new) who don’t want to put effort into migration and want SMP 3 features. From a customers standpoint their point is right, if they start with SMP 3 from now they can save money and time.

              – Midhun VP

              (0) 
    2. Midhun VP

      I assume that everything is not possible with Appbuilder. You can use it for simple apps (listview, detailview kind of), but with a eclipse set up we have more control over the design and development.

      @Mark, can you please give steps to run the app in a device after exporting the project to eclipse, since I can’t try kapsel in the absence of SMP3.

      – Midhun VP

      (0) 
      1. Mark Teichmann Post author

        Hi Midhun,

        I did not tried before but I would try to copy the .apk file from the bin folder of the Android project to your device.

        Cheers, Mark

        (0) 
        1. Arpit Oberoi

          Hello Mark,

          I am trying to configure SMP settings in my app designer and I am getting following error:

          Failed to connect to SMP Onboarding Service. The error message is:

          {}

          Is there any way to debug/trace the reason for this error?

          Thanks,

          Kind Regards,

          Arpit

          (0) 
          1. Mark Teichmann Post author

            Hi Arpit,

            in the settings you need to enter the url to the SMP server, a security config and an application id.

            Have you checked that the security config and application ID both exist on your SMP server? If yes, have you checked if you can reach the SMP server in the browser?

            There is a log file in folder appbuilder\ares-project\logs , maybe you get some more information there.

            (0) 
            1. Arpit Oberoi

              Hello Mark,

              Thanks for your response. The SMP server is reachable in browser and I can see one application running with security conifg as I used Google Chrome Postman Plugin to test the application following the help from following link and unfortunately the log file is showing only login details, there are no logs related to SMP server connections. In SMP server setting profile, the userid and password I am using is the user id and password to access SMP server which is my S User ID and password or do you need to use the user id and password to access the backend system?

              How to use the SMP Cloud with Copy & Paste

              (0) 
              1. Mark Teichmann Post author

                User ID and Password are the ones that you defined in the security config on SMP. This could be the credentials of your backend system depending how you set up the security config.

                (0) 
                1. Arpit Oberoi

                  Well Securrity profile has following settings:

                  The way I have configured scenario is SAP HANA Cloud connector is connected to SAP GW backend system and SMP server has end points from SAP HANA Cloud connector.Capture.JPG

                  (0) 
                    1. Arpit Oberoi

                      that didn’t work either 🙁 , I can do this successfully using Chrome Postman, but I don’t know why it’s not letting me use SMP settings in Appbuilder.

                      (0) 
                      1. Mark Teichmann Post author

                        sorry to hear. It just worked for me therefore I can be of no help here for you.

                        You should raise the question in a new discussion thread. I am sure there are AppBuilder experts out there that can find the solution.

                        (0) 
                        1. Arpit Oberoi

                          Hello Mark,

                          Thanks for your help and guidance. I got it working now. It was a silly thing. I was using Google Chrome Canary instead of Google Chrome to run the Appbuilder and hence I was getting this problem. It seems Appbuilder doesnt work with Google Chrome Canary.

                          (0) 

Leave a Reply