UPDATED: tested with SAP Web IDE 1.17.2 on Trial Landscape


Introduction

In this blog I’m going to show you the solution to one of the two exercises presented to the SAP Web IDE Design Council 2015.

At the end of this exercise, you will gain knowledge on how to create a new SAP Fiori application using SAP Web IDE. You will learn how to use some of the new features of the product like the code editor, the layout editor and how to run the application using mock data. The final step will be to create a valid run configuration to run the application with some specific parameters. As optional steps you will learn how to deploy your new application firstly to SAP HANA Cloud Platform and then how to do it on your SAP FIORI Launchpad.

This blog has been split in 3 parts:

Link Content
Part1 Creating a new application with SAP Web IDE – Adding a new ObjectAttribute to the Detail view
Part2 Running the application with mock data – Creating run configurations
Part3 Deploying the app to HANA Cloud Platform – Deploying the app to SAP Fiori Launchpad (optional)

Prerequisites

The few prerequisites for the execution of this exercise are the following:

An account on the HANA Trial Landscape

You need to register here. Once you have your account, you can run your instance of SAP Web IDE using the following link: https://webide-<your_account>.dispatcher.hanatrial.ondemand.com/ where <your_account> is the account you received after registering.

An account on the SAP public gateway system

You can read the following SCN page for getting more information: http://scn.sap.com/community/developer-center/front-end/blog/2014/06/22/how-to-configure-an-external-gw-system-with-sap-river-rde

A destination in the HANA Trial Landscape cockpit

You have to go on your HANA Trial Landscape cockpit and create a new destination as in this screen shot:

/wp-content/uploads/2015/07/01_824280.jpg


A subscription to the HANA Trial Landscape Fiori Launchpad (required only if you intend to follow the optional chapter as well)

It can be obtained by following this procedure:

1. Open the HANA Trial Landscape cockpit and click on Subscriptions. Check that the “flpportal” application is among your subscriptions. If not, you can add it by clicking on the button New Subscription

/wp-content/uploads/2015/07/02_824281.jpg


2. Click on Services and check that the SAP HANA Cloud Portal service is enabled. If not, please enable it. Once enabled, click on this tile

/wp-content/uploads/2015/07/03_824357.jpg


3. Click on Configure SAP HANA Cloud Portal

/wp-content/uploads/2015/07/04_824358.jpg


4. Click on Roles and check that your user is correctly assigned to the TENANT_ADMIN role. If not, please assign your user to it.

/wp-content/uploads/2015/07/05_824359.jpg




Table Of Contents

1.0 CREATING A NEW APPLICATION WITH SAP WEB IDE

1.1 ADDING A NEW OBJECTATTRIBUTE TO THE DETAIL VIEW

1.2 RUNNING THE APPLICATION WITH MOCK DATA

1.3 CREATING RUN CONFIGURATIONS

1.4 DEPLOYING THE APP TO HANA CLOUD PLATFORM

1.5 DEPLOYING THE APP TO SAP FIORI LAUNCHPAD (optional)

1.0 CREATING A NEW APPLICATION WITH SAP WEB IDE

Open SAP Web IDE from the Trial Landscape. You should use a link like this:

https://webide-<your_account>.dispatcher.hanatrial.ondemand.com

where “<your_account>” is the account you have been assigned to after the registration to the HANA Trial landscape.

1. Open SAP Web IDE

2. From the top menu click on File –> New –> Project from Template

3. Select the SAPUI5 Master-Detail Application template and click on Next. Leave the SAPUI5 version set to the recommended one. This is the new template for SAP Fiori applications. The other ones, though still available, should be considered deprecated. The layout of this new template is the one showed in the picture.

/wp-content/uploads/2015/07/06_824363.jpg

4. Enter a name for your project (i.e. “DCExercise”) and click on Next

/wp-content/uploads/2015/07/07_824364.jpg

5. Select the Service Catalog source and the es4 destination from the drop down list. This is the destination that you should have already created previously according to the prerequisites

6. Enter the credentials to the system

7. Select the GWSAMPLE_BASIC service and click on Next

/wp-content/uploads/2015/07/08_824365.jpg

8. Fill the “Application Settings”, “Databinding Object” and “Databinding – Line Item” sections with the following values and click on Next

Application Settings

Parameter Value
Title Sales Orders
Namespace com.so
Description Sales Orders

Databinding Object

Parameter Value
Object Collection SalesOrderSet
Object CollectionID SalesOrderID
Object Title CustomerName
Object Numeric Attribute GrossAmount
Object Unit of Measure CurrencyCode

Databinding – Line Item

Parameter Value
Line Item Collection ToLineItems
Line Item CollectionID ItemPosition
Line Item Title ProductID
Line Item Numeric Attribute GrossAmount
Line Item Unit of Measure CurrencyCode

/wp-content/uploads/2015/07/09_824372.jpg

9. Click on Finish

10. Test the application by selecting the test.html file in the project explorer and clicking on the Run button on the top toolbar. A new page will open: just click on the first link “test/testFLP.html

/wp-content/uploads/2015/07/10_824374.jpg

11. The application starts successfully. You might need to enter your credentials for the OData service again.

1.1 ADDING A NEW OBJECTATTRIBUTE TO THE DETAIL VIEW

Let’s start now by customising a little bit our application by using the Code Editor and the Layout Editor features.

NOTE: pay attention that the layout of your workstation might not be the same of the one presented here in these screenshots. Of course this is NOT a problem for the completion of the exercise.

1. Expand the view folder of your project and double click on the Detail.view.xml file

/wp-content/uploads/2015/07/12_824396.jpg

2. The file will be opened in code editor mode on the right side of SAP Web IDE. Perform the following operations:

          1 – Open a new line just before the closing of the ObjectHeader. It should fall on line 8

          2 – Start typing “<att” and you will automatically get the tip to complete the remaining part of the tag with “attributes“. Just hit <ENTER> and the editor will complete the                word for you

          3 – As soon as you type the symbol “>” the string “</attributes>” is automatically added. Just open a new line between these tags. This new line should be the 9th

          4 – Start typing “<O” and hit <ENTER> to add the ObjectAttribute tag

          5 – Start typing “t”. Now you can hit <CTRL> + <SPACEBAR> to get the list of the available attributes for this tag: another way is to simply click on the small down arrow on                the right of the word you are typing. Select “text” and hit <ENTER>

          6 – Complete the code by adding “CustID” as value of the “text” attribute and typing “>” to close the “ObjectAttribute” tag

/wp-content/uploads/2015/07/13_824400.jpg

3. Save the file

4. Right click on the Detail.view.xml file in the project explorer and select Open With –> Layout Editor

/wp-content/uploads/2015/07/15_824403.jpg

5. The Layout Editor is opened in a new tab on the right side of SAP Web IDE. Do the following list of steps:

          1 – Firstly click twice on the blank space just above the “{CustomerName}” text. This will allow you to select the entire view and to change the Data Set property for it. You                can only change the Data Set property when selecting the entire view.

          2 – Click on the Data Set drop down list

          3 – Change this property to SalesOrderSet

          4 – In case you get this confirmation request click on OK. It’s just asking you if you really want to change the data set for the entire view: however this is already the data set                assigned to this vie, but the system is not able to recognise this.

/wp-content/uploads/2015/07/15b_824404.jpg

6. Once defined the view’s data set, you can replace the placeholder “CustID” defined at step 2.6 of this section with something bound to the underlying model. Select the CustomerID data field and click on OK. In this way we are binding that control with this data field

/wp-content/uploads/2015/07/17_824442.jpg

7. Change also the Title property for this control by typing the string “Customer ID” and hitting <ENTER>

/wp-content/uploads/2015/07/18_824443.jpg

8. Save the file and test the application again

9. You can see the new field added to the detail view.

/wp-content/uploads/2015/07/19_824462.jpg

Let’s go to the second part of this blog.

To report this post you need to login first.

19 Comments

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

  1. Martin Neuß

    Simmaco,

    your posts are really helfpul. Thank you for this !

    However, when I try to fulfil the prerequesites mentioned at the beginning I fail.

    The Connection to ES4 does not work, the message is “peer not authenticated”.

    I can hovever log in to es4 manually via WebGui.

    I think it is a truststore Problem … I do not have the JDK installed, so I do not have the JDK truststore. Since Fiori ist quite new for me, I am not really sure what to do now …

    Do you perhaps have a proposal for the next steps, or could you recommend some kind of document / link that I should read ?

    Thank you & best regards,

    Martin

    (0) 
    1. SIMMACO FERRIERO Post author

      Hi Martin,

      where exactly are you having this error? I’m not sure I’ve understood your problem.

      Could you please post a screen shot? You can also contact me with a direct message.

      Regards,

      Simmaco

      (0) 
      1. Martin Neuß

        Simmaco, thank you for your prompt answer.

        My explanations was a bit too short … let me give you some Details. As described in your blog, I tried to create Destination for ES4 in the SAP HANA Cloud Platform Cockpit.

        When I do so, and I try to check the Connection, the “peer not authenticated” message appears. Theese are my Settings:

        pic-00.PNG

        The bad Thing ist, when I try to create a new Project from a template using the wizzard, I think I have a Problem as a consequence of this.

        The message is:

        pic-01.PNG

        I also tried to authenticate with my user/pw on ES4 using BasicAutentication, but the result is the same.

        Do you perhaps have an idea what the reason could be ?

        Regards & greetings,

        Martin

        (0) 
        1. SIMMACO FERRIERO Post author

          Martin,

          I think you misspelled the URL in your destination. It’s “…sapdevcenter…” and not “…sapdvcenter”. Look at mine:

          /wp-content/uploads/2016/03/01_913729.png

          Regards,

          Simmaco

          (0) 
      2. Martin Neuß

        *** SORRY ***

        I find it hard to admit but … it was just a typo in the URL.

        I am really sorry for that !

        Regards & thank you again,

        Martin

        (0) 
  2. Hemant Sharma

    I am also getting error getting OData service in SAP Web IDE however when I test the ES4 connection it comes up .

    I also tried to alternative try to login to sap which is also successful.es4 error.PNG

    (0) 
  3. Hemant Sharma

    Thanks Simmaco for your quick turnaround , Appreciate that !!

    Error is for user credential ,when i test this url outside it goes fine with my user id / password however on webide it doesn’t workes4 error.PNG

    Attaching screenshot

    (0) 
    1. SIMMACO FERRIERO Post author

      Hi Hemant,

      I checked your destination and it seems good for me. However I could send mine and you could try to import it on your HANA Cloud Cockpit after deleting the existing one, just for being sure that the destination is a working one. Unfortunately here I cannot attach the file. Can you please contact me via a DM?

      On the other side, could you please tell me if you are behind a firewall which could block such kind of requests? Which browser are you using? Is it up to date?

      Regards,

      Simmaco

      (0) 
  4. Ashok Kumar

    Hi Simmaco,

    When creating SAP Fiori Application, using template SAP Fiori Master-Detail application, then i am getting error in “Template Customization” with error message ” Enter a valid value for “SAP Fiori Launchpad ” Parameter.

    On Clicking on “SAP Fiori Launchpad ” in Feature Selection” drop down there is ‘include’ and ‘exclude’, and “Next button is disabled.”

    Please suggest how to proceed.

    Regards

    Ashok Kumartemplate customization error.JPG

    (0) 
    1. SIMMACO FERRIERO Post author

      Hi,

      If you select “include” it means that your Fiori app won’t get the “index.html” file, because you are saying that you want to include it in the Fiori Launchpad.

      If you select “exclude”, the index.html file will be added to the webapp folder and you can execute your app even from the SAP Hana Cockpit.

      BTW: you need of course to fill all the mandatory fields (the ones with “*”) in order to have the Next button enabled.

      Regards,

      Simmaco

      (0) 
      1. Ashok Kumar

        Hi Simmaco,

        Thanks for the valuable suggestion and quick response.

        When i select either ‘include’ or ‘exclude’ the “Next” button is still disabled. i am unable to move to the next step. Please suggest

        Regards

        Ashok Kumar

        (0) 
        1. SIMMACO FERRIERO Post author

          Ashok,

          are you sure you have filled all the mandatory fields in the form? There is a scroll bar and you need to scroll it down and fill other fields.

          Regards,

          Simmaco

          (0) 
          1. Ashok Kumar

            Hi,

            Thanks for your response.

            I have not filled all the mandatory filled as scroll bar was not visible clearly. now after filling all the required data it is working fine. 🙂

            Thanks

            Ashok Kumar

            (0) 
  5. Srinivasan S

    Hi Experts,

    I have a query regarding the display of Odata values for Fiori Master Detail application. Is it possible to restrict these Odata values for a specific CustomerID?

    Please provide your valuable suggestions.

    Thanks,

    Srinivasan

    (0) 
  6. Michael Appleby

    Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

    NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

    Thanks, Mike (Moderator)

    SAP Technology RIG

    (0) 

Leave a Reply