Skip to Content
Part 1 Part 2
Part 3

Update: SAP’s recommended tool to develop SAPUI5 app is using SAP Web IDE. So I would suggest you to start with Web IDE instead of Appbuilder. More info: SAP Web IDE – Enablement

Create a new project in Appbuilder

A simple UI5 app can be developed using Appbuilder with few clicks. I am using SuperList in this example.

1. Open Appbuilder and click on “New” button and provide the details as given below and click on “Confirm“.

ScreenHunter_120 May. 26 22.43.jpgScreenHunter_121 May. 26 23.00.jpg

2. Click on Help> SMP Settings and provide the following settings. You can find your IP using Google. The credentials provided is backend credentials. Click on “Confirm” to create a new profile.

ScreenHunter_138 May. 27 01.24.jpgScreenHunter_138 May. 27 02.07.jpg

3. Perform the on-boarding of the Appbuilder by clicking on the pencil icon in SMP Services panel in left side. Choose the SMP profile we defined and click on “Retrieve” button. Click on “Confirm” button after getting the success message as given below.

ScreenHunter_121 May. 26 22.49.jpg ScreenHunter_146 May. 30 14.54.jpg

Creating a SuperList to populate data

1. Select “Designer“> New SuperList. In the new dailog window leave all fields as by default and click on “Confirm“.

ScreenHunter_124 May. 26 23.49.jpgScreenHunter_125 May. 26 23.49.jpg

2. Click on dataStructure button on right side to select data source.

ScreenHunter_127 May. 26 23.53.jpg

3. Click on “” button and select “BusinessPartnerCollection” and click on “Confirm“.

ScreenHunter_126 May. 26 23.50.jpgScreenHunter_126 May. 26 23.51.jpg

4. Enter “BusinessPartnerID” inside Navigation Parameters textbox and click on “Confirm“.

ScreenHunter_127 May. 26 23.51.jpg

5. Locate “Label” in Toolbox> Drag and drop 2 labels to phone screen. Select first label and change it’s properties> click on button on right side> delete content inside “Express Definition” textbox> double click on “BusinessPartnerID“> Confirm. For the second label select Company.

ScreenHunter_138 May. 27 02.25.jpgScreenHunter_128 May. 26 23.53.jpg

6. Save the project and click on “Return” button.

ScreenHunter_128 May. 26 23.54.jpgScreenHunter_129 May. 26 23.54.jpg

7. From toolbox drag and drop Superlist to phone screen.

ScreenHunter_129 May. 26 23.55.jpg

8. Expand the style property of SuperList and provide given below details:

ScreenHunter_130 May. 26 23.56.jpg

9. Click on metadataFile button on the right side> Select Superlist file created and click on “Confirm“. You will get a list on the phone screen now. Click on “Run” button to see the app running in a simulator. We have called Odata service to get the data from backend.

ScreenHunter_131 May. 26 23.57.jpgScreenHunter_131 May. 27 00.05.jpg

To report this post you need to login first.

33 Comments

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

  1. ANGELIKI PISIRITZI

    Hi

    In step 3 I have a problem.It cannot connect to SMP.Neither responds

    Capture.PNGI ‘ve tried many things but nothing happened. Any ideas would be useful!

    thank you in advance

    (0) 
      1. ANGELIKI PISIRITZI

        I am running SMP3.0 on premise and full version.

        I am able to ping the SMP IP

        My port seems closed according to the website you sent me, but when i check with netstat -a -n -o in command prompt my port is listening.

        (0) 
        1. Midhun VP Post author

          Make sure the port 8080 is open and accessible from your system. Is telnet working ?

          Ex. telnet 62.169.216.180 8080.  You will get a black screen if port is open when you type this command in cmd prompt window.

          Midhun VP

          (0) 
    1. Midhun VP Post author

      What do you mean by not valid for you? You have to register for NWGW trial, then you will get credentials for the system. Pass the credentials after executing the url in a browser to see the data.

      Midhun VP

      (0) 
      1. prasad sistla

        hello Midhun,

        my credentials for NWGW is not working, right now i am not able to reset, not able to register with the gateway.

        let me know is there anyway?

        regards,

        Prasad

        (0) 
  2. Lekhak Patil

    Hi All,

    we have installed SMP 3.0 and App builder in the same machine

    we are facing the problem while onboarding the app in app builder

    we are using SMP admin credentials for SMP settings

    We have created new application in Admin not in cockpit

    the error message is:

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

    {“message”:”HTTP request failed”,”request”:{“headers”:{“X-SUP-SC”:”HTTP”,”Authorization”:”Basic c21wQWRtaW46czNwQWRtaW4=”,”Accept”:”application/atomsvc+xml;q=0.8, application/json;odata=fullmetadata;q=0.7, application/json;q=0.5, */*;q=0.1″,”DataServiceVersion”:”1.0″,”Content-Type”:”application/json”,”MaxDataServiceVersion”:”3.0″},”requestUri”:”https://localhost:8080/odata/applications/latest/com.list.test/Connections“,”method”:”POST”,”data”:{“DeviceType”:”iPhone”},”recognizeDates”:false,”callbackParameterName”:”$callback”,”formatQueryString”:”$format=json”,”enableJsonpCallback”:false,”inferJsonLightFeedAsObject”:false,”body”:”{\”DeviceType\”:\”iPhone\”}”},”response”:{“requestUri”:”https://localhost:8080/odata/applications/latest/com.list.test/Connections“,”statusCode”:0,”statusText”:””,”headers”:[],”body”:””}}

    No port problems as its in the same machine

    Please sujjest

    Regards,

    Lekhak Patil

    (0) 
      1. Lekhak Patil

        Hi Mithun,

        Thanks for the speedy reply

        If I pass the NWGW credentials I am getting almost same error

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

        {“message”:”HTTP request failed”,”request”:{“headers”:{“X-SUP-SC”:”HTTP”,”Authorization”:”Basic UDE5NDA2NjcyMjc6SW5pdGlhbDEyMw==”,”Accept”:”application/atomsvc+xml;q=0.8, application/json;odata=fullmetadata;q=0.7, application/json;q=0.5, */*;q=0.1″,”DataServiceVersion”:”1.0″,”Content-Type”:”application/json”,”MaxDataServiceVersion”:”3.0″},”requestUri”:”http://localhost:8080/odata/applications/latest/com.list.test/Connections“,”method”:”POST”,”data”:{“DeviceType”:”iPhone”},”recognizeDates”:false,”callbackParameterName”:”$callback”,”formatQueryString”:”$format=json”,”enableJsonpCallback”:false,”inferJsonLightFeedAsObject”:false,”body”:”{\”DeviceType\”:\”iPhone\”}”},”response”:{“requestUri”:”http://localhost:8080/odata/applications/latest/com.list.test/Connections“,”statusCode”:401,”statusText”:”Unauthorized”,”headers”:[],”body”:””}}

        But this time error code is 401

        Regards,

        Lekhak Patil

        (0) 
        1. Midhun VP Post author

          Can you provide a screen shot. Are you connecting to the SMP 3 trial ?

          Are you able to Ping the SMP IP from your system ?

          Midhun VP

          (0) 
          1. Lekhak Patil

            Hi Midhun,

            We are using SMP 3.0 trail from cloudshare

            We have installed app builder in the same cloud system

            1.PNG

            Whenever we are using localhost as server address in SMP settings of APPBuilder we are able to see logs with 401 error in admin log portal

            but if we use open ip we are not able to see any logs

            Do you think its a ip conflict issue as server and appbuilder are on same system and app is trying to connect to server from same server system??

            Please guide

            Regards,

            Lekhak Patil

            (0) 
            1. Midhun VP Post author

              Which is the Odata service you are using in while configuring application in SMP ? Are you able to see the data in a browser from the server with the Odata service used.

              Are you able to telnet the port 8080 from the server.

              Midhun VP

              (0) 
                  1. Lekhak Patil

                    Hi Midhun,

                    I am still facing the issue,

                    what I mean by (I am able to see data in browser is) in last comment:

                    I am able to access odta link in normal web browser with my NWGW credentials

                    not in App builder

                    Regards,

                    Lekhak Patil

                    (0) 
                      1. Lekhak Patil

                        Hi Midhun,

                        I am getting 401 not authenticated error in SMP1.PNG

                        I have followed all the steps to install SAPUI5 plugin to Juno and

                        APP Builder,Is APP Builder utilises any librery’s of SAPUI5 from eclipse??

                        I have attached log file of APP builder as well:

                        2.PNG

                        Please guide

                        Regards,

                        Lekhak Patil

                        (0) 
  3. prasad sistla

    hello Midhun,

    i am working on SMP3.0 cloud version, as in Part 1 i have followed the steps mentioned by you, where as in Part 2, i am getting the problem like this..

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

    {“message”:”HTTP request failed”,”request”:{“headers”:{“X-SUP-SC”:”HTTP”,”Authorization”:”Basic UDE5NDA2NjcyMjc6SW5pdGlhbDEyMw==”,”Accept”:”application/atomsvc+xml;q=0.8, application/json;odata=fullmetadata;q=0.7, application/json;q=0.5, */*;q=0.1″,”DataServiceVersion”:”1.0″,”Content-Type”:”application/json”,”MaxDataServiceVersion”:”3.0″},”requestUri”:”http://localhost:8080/odata/applications/latest/com.list.test/Connections“,”method”:”POST”,”data”:{“DeviceType”:”iPhone”},”recognizeDates”:false,”callbackParameterName”:”$callback”,”formatQueryString”:”$format=json”,”enableJsonpCallback”:false,”inferJsonLightFeedAsObject”:false,”body”:”{\”DeviceType\”:\”iPhone\”}”},”response”:{“requestUri”:”http://localhost:8080/odata/applications/latest/com.list.test/Connections“,”statusCode”:401,”statusText”:”Unauthorized”,”headers”:[],”body”:””}}


    1) AppBuilder is running on my local laptop. should i need to install it in Cloud of SMP3.0?

    2) In the SMP settings page i am giving the IP address of my Laptop? is that correct?

    3) user name and password i am providing is belong to gateway sytems, is that correct or any other credentials?


    let me know am i missing anything..


    regards,

    Prasad



    (0) 
    1. Midhun VP Post author

      You can use the appbuilder from your system. The IP address in SMP settings is the SMP 3 trial server IP (find it from google as I mentioned in the blog). The username and password is NWGW credentials.

      Midhun VP

      (0) 
  4. Anonymous

    hi midhun,

    i tried the same as you said.my cloud ip is

    66.175.100.242.

    the  error was like this..

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

    {“message”:”HTTP request failed”,”request”:{“headers”:{“X-SUP-SC”:”http”,”Authorization”:”Basic cDkyNjU1ODpTaGl2YXAxNjU0″,”Accept”:”application/atom+xml,application/atomsvc+xml,application/xml”,”DataServiceVersion”:”1.0″,”Content-Type”:”application/atom+xml”,”MaxDataServiceVersion”:”3.0″},”requestUri”:”http://66.175.100.242:8080/odata/applications/latest/com.mycompany.list/Connections“,”method”:”POST”,”data”:{“DeviceType”:”iPhone”},”recognizeDates”:false,”callbackParameterName”:”$callback”,”formatQueryString”:”$format=json”,”enableJsonpCallback”:false,”inferJsonLightFeedAsObject”:false,”body”:”<a:entry xmlns:a=\”http://www.w3.org/2005/Atom\” xmlns:m=\”http://schemas.microsoft.com/ado/2007/08/dataservices/metadata\” xmlns:d=\”http://schemas.microsoft.com/ado/2007/08/dataservices\”><a:author><a:name/></a:author><a:content type=\”application/xml\”><m:properties><d:DeviceType m:type=\”Edm.String\”>iPhone</d:DeviceType></m:properties></a:content></a:entry>”},”response”:{“requestUri”:”http://66.175.100.242:8080/odata/applications/latest/com.mycompany.list/Connections“,”statusCode”:0,”statusText”:””,”headers”:[],”body”:””}}

    am i missing something?

    regards,

    Prasad.

    (0) 
  5. Ali Naveed

    hi Midhun VP

    thanks for sharing 🙂


    i am getting the below issue in APP BUILDER.


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

    {“message”:”HTTP request failed”,”request”:{“headers”:{“X-SUP-SC”:”HTTP”,”Authorization”:”Basic

    i am trying to telnet my public ip which you provide a link. its show my port is closed.

    how to open my port i tried everything in windows open fire wall and opening the port.

    Regard

    Ali

    (0) 
  6. saurabh shrivastava

    Hi Midhun,

    I am using relay server  to connect smp 3.0 server s while help –> smp setting . should i give server url till complete  smp farm or how should i give serevr url.

    BR,

    saurabh

    (0) 

Leave a Reply