Skip to Content
Author's profile photo Guy Soffer

Use SAP Web IDE Templates for Rapid Fiori App Development

One of the unique features of SAP Web IDE is its collection of project templates. Sure, any IDE has project templates which allow you to generate pre-defined projects as a starting point. But, SAP Web IDE project templates are a bit different and allow you to achieve a lot more, using the same concept. You can even create your own templates if needed.

In this blog post, I would like to introduce you to each one of the different templates SAP Web IDE has to offer.


There are four main entry points to use the templates. All of them are accessible via the Welcome Page or the menu entry File>New.


Welcome Page:

31-01-2016 13-41-09.png

File>New:

31-01-2016 13-41-55.png

Project from Template

This is the most used entry point. These templates generate full-blown SAP Fiori applications based on the OData service you select. You can customize the binding of the data fields from the service to the UI controls before generating the application. The selected service should be compliant with OData version 2.0.

There are also additional templates such as the SAPUI5 Application (an empty SAPUI5 project) and even SAP Web IDE plugin project.

Note that in some of the templates there are multiple versions available. These templates have an Available Versions drop down list for selecting the version you need. By default, the recommended version is selected. More information about the steps required to create a project from a template is available here.

Project from Sample Application

You can create a project based on a collection of Fiori sample applications, developed using Fiori and SAPUI5 best practices. These apps use mock data at runtime so they work out-of-the-box without an existing OData service and do not require any further customization. It’s recommended to use these sample applications to learn the best practices and guidelines of a Fiori application. You would need to read and agree to the license agreement displayed on the Confirmation wizard step.

Quick Start with Layout Editor

Want to quickly use the Layout Editor for a new project or just for testing? This entry point creates an empty Fiori project with a single view (already bound to mock data) and automatically opens the Layout Editor for editing this view. No further customization is needed. More information can be found here.

Extension Project

This template allows you to create your own extension of an existing Fiori application and include any customization you might want to add. You can extend applications hosted on SAP ABAP UI5 Repository, SAP HANA Cloud Platform or even your SAP Web IDE workspace. Once generated, you can use the Extensibility Pane to extend the application.

In this post, I will share with you details for the templates available in the Project from Template entry point (except for the Empty Plugin template which probably belongs to another blog post).


SAP Fiori Master-Detail Application

31-01-2016 14-09-31.png

Previously called SAPUI5 Master-Detail Application. This is a full-blown project template for the split-screen layout application pattern based on Fiori guidelines and best practices. A working example of such an application can be found on SAPUI5 demo apps page.

On the left pane, you get a list of items. When you select an item from this list, its details are displayed on the right pane. There, you can also trigger related actions and review additional related items, if they exist.

There are several versions available for this template. If you want to work with older SAPUI5 versions, select the appropriate version from the Available Versions drop down list. The last two versions are deprecated. They work with SAPUI5 1.26 and are delivered for backwards compatibility (they were previously available as separate templates). If you deploy your apps to SAP HANA Cloud Platform, most of the time you will be using the latest version (which is the recommended one).

31-01-2016 16-12-57.png

After selecting the template, move on to the next wizard step where you will enter a name for your project.

Data Connection Step

The Data Connection step is common to all templates which require an OData service and allows you to customize the binding of data fields to the UI controls on the next step.


31-01-2016 16-22-26.png

You have 4 options:

  • Service Catalog
    For OData services exposed via the SAP Gateway service catalog. Each system is defined by your account administrator as an SAP HANA Cloud Platform destination. You can search for services and select the one you would like to use.
  • Workspace
    You can use an existing metadata.xml file (metadata file of an OData service) from your SAP Web IDE workspace. You don’t need a real service connection in order to generate the application but you would need to work with mock data when running the application (or define a real service URL).
  • File System
    Instead of selecting the metadata.xml from your workspace (see Workspace section above), you can upload an existing metadata.xml from your file system to SAP Web IDE.

  • Service URL
    You can type in the URL to your OData service (the system should be defined by the administrator of your account as an SAP HANA Cloud Platform destination).

Template Customization Step

The Template Customization step is common to all templates which allow additional customization before generation, including data binding for the OData service. Some fields are required and some are optional. In order to understand the customization options, click on the thumbnail on the right to enlarge the sample application screenshot.


31-01-2016 16-55-04.png

When selecting the data binding values, the options provided are based on your previous selections. For example, if you selected FlightCollection as the Object Collection, you will only get fields from Flight Collection for the Object Collection ID, Object Title etc.

More detailed information of the template and its generated code can be found here.


CRUD Master-Detail Application

31-01-2016 14-22-41.png

This template is based on the SAP Fiori Master-Detail Application template (see above) and adds create/update/delete capabilities to the generated application (if supported by the selected OData service). The applications contains an Add button, Edit form (to create or update an item), Save, and Delete buttons.

The generated form includes client-side input validation and formatting based on the metadata of the OData service (for example, type check, length, mandatory fields etc.). You can freely modify the form based on your requirements.

For more information about this template, refer to SAP Fiori Master-Detail Application template section above.

SAP Fiori Worklist Application

Previously called SAPUI5 Worklist Application. This is a full-blown project template for the worklist pattern based on Fiori guidelines and best practices. A working example of such an application can be found on the SAPUI5 demo apps page.

The application displays a list of items to be processed by the user and usually involves reviewing details of a list item and taking action.

There are several versions available for this template. If you want to work with older versions of SAPUI5, select the appropriate version in the Available Versions drop down list. The last version displayed has been deprecated. It works with SAPUI5 1.26 and is delivered for backwards compatibility (it was previously available as a separate template). If you deploy your apps to SAP HANA Cloud Platform, most of the time you will be using the latest version (which is the recommended one).

31-01-2016 17-32-25.png

The steps required to create an application from this template are similar to the other templates described above.


More detailed information of the template and its generated code can be found here.

Smart Template Application

This is a unique template. It’s based on a new paradigm by SAPUI5 where most of the logic and UI patterns are already defined by SAPUI5 Smart Template components. The application code contains a minimal set of files for configuration and definition of the components needed, including the OData service. These components act as runtime templates which get rendered (generated) when the app is running. The input at runtime is the OData service metadata, its annotations, and the data itself.

You won’t be able to use this template without proper metadata and annotations.

This project template uses 2 types of Smart Template views: List Report and Object Page. They are both based on the Fiori Design guidelines. The generated application will use the List Report as the first page and the Object Page as the second. Based on the OData service being used, the second page might contain also a navigation to an additional Object Page.

01-02-2016 09-59-06.png

01-02-2016 09-59-48.png

The steps required to create an application from this template are similar to the other templates described above except from an additional Annotation Selection step. This steps shows the annotations which exist for the selected service. You can add additional annotations files and change the order they will be loaded.

01-02-2016 09-41-32.png

Note that the Template Customization step only asks for an OData collection and OData navigation attribute as most of the customization is derived from the annotations.

More detailed information of the template and its generated code can be found here.

SAPUI5 Application

This is a simple template which allows you to create a new SAPUI5 project with an optional first view. The generated application doesn’t have any data binding so you don’t need an OData service or a metadata.xml file for generation.

You can select any type of SAPUI5 view. Note that you will be able to use the Layout Editor only for XML views.

01-02-2016 10-16-05.png

Master-Detail with Photos

This master-detail template is intended for a very specific scenario and probably won’t be suitable for other scenarios. In addition, the OData service must expose a specific schema which is required by the application. The result is a hybrid mobile application with offline support.

For more advanced development of hybrid mobile applications using SAP Web IDE, it is highly recommended to enable the external Hybrid App Toolkit plugin and use it instead.

Using SAP Mobile Secure, you can package the project as a native application and deploy it to mobile devices.


More information about hybrid application can be found here.



This completes the list of templates I wanted to show you!

Note that activating optional plugins can add additional templates to your arsenal. Make sure you check them as well. I hope you now have more understanding of the different project templates SAP Web IDE has to offer. Good luck with your next Fiori application development!

Feel free to comment and ask questions.

Assigned Tags

      28 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Shimon Ben Yair
      Shimon Ben Yair

      Very helpful.Good job

      Author's profile photo Inbal Sabag
      Inbal Sabag

      Thanks for a great post!!!

      Author's profile photo Michael Lichtinger
      Michael Lichtinger

      Great post. Thx for sharing.

      Author's profile photo Former Member
      Former Member

      Nice, thank you

      Author's profile photo Former Member
      Former Member

      Finally I understand what does each template do! thanks

      Author's profile photo Guy Soffer
      Guy Soffer
      Blog Post Author

      You should really try the templates. The development team has done a great job 🙂

      Author's profile photo Michal Keidar
      Michal Keidar

      Awesome.

      Author's profile photo Daniel Reger
      Daniel Reger

      Excellent post!

      Author's profile photo Uri Nizan
      Uri Nizan

      Great post, Guy. Thanks!

      Author's profile photo Samir Habib Saad
      Samir Habib Saad

      Time to test the new templates, lets see how the routing/navigation is being done

      Author's profile photo Guy Soffer
      Guy Soffer
      Blog Post Author

      Check out also the manifest.json editor for routing & navigation.

      Author's profile photo Samir Habib Saad
      Samir Habib Saad

      I just ran some tests... Excellent stuff! great job!

      The Descriptor Editor is so much simple than writing the navigation routes under Component.js this was a real pain in the past when trying to build some fast prototypes with navigation.

      Thanks for the updates

      Author's profile photo Keren Rotenberg
      Keren Rotenberg

      Great post, Guy. Thanks!

      Author's profile photo Pavan Golesar
      Pavan Golesar

      Great stuff. Great Explanation !! Keep it up. 😎

      Thanks

      Pavan G

      Author's profile photo Alon Shachar
      Alon Shachar

      Great post - Thanks

      Author's profile photo Hiroshi Iguchi
      Hiroshi Iguchi

      worklist template is gone anywhere this week.

      where??

      regards,

      Hiroshi

      Author's profile photo Uri Nizan
      Uri Nizan

      What do you mean by "gone"?

      It should still be there...

      Where are you looking? Trial? Factory?

      Author's profile photo Hiroshi Iguchi
      Hiroshi Iguchi

      I use trial.

      I understood(replaced another tile).

      http://scn.sap.com/thread/3847551

      regards,

      HIroshi

      Author's profile photo Uri Nizan
      Uri Nizan

      Oh, I see...

      It's not gone, just renamed...

      The old Fullscreen is now called Worklist.

      Some templates were merged into the same tile but still show up in the dropdown list when you select the tile.

      Capture.JPG

      Author's profile photo Former Member
      Former Member

      I have found a bug within the Master Detail Template. I used the ES4 GWSAMPLE_BASIC Service. When I select "Object Title": "Name" within the ProductSet, the generated project would not work. By starting the application, the following alert pops up:

      The Master view displays the error: "No ProductSet are currently available".

      I tracked the error and it is caused by the Master view:

      By changing the value of path: 'Name' to path: 'ProductID' the application is fixed and works as expected. Apparently, the wizard falsely writes the title instead of the key into the code...

      I'm not sure if this is a mistake in general or if it appears only in this scenario.

      Author's profile photo Guy Soffer
      Guy Soffer
      Blog Post Author

      Thanks Linda.

      I'll forward this to the development team.

      Author's profile photo Uri Nizan
      Uri Nizan

      Hi Linda,

      The issue is probably because the service does not implement a sorter for the name property.

      By default, the template sorts the data based on the property that is selected as the title property. If the service does not implement a sorter for this property then you get the error.

      Thanks,

      Uri

      Author's profile photo Erickson Taniajura
      Erickson Taniajura

      Hi,


      I tried the Fiori Worklist Application template following the tutorial and it works great. Then I wanted to use the same template to create a simple list of users from a SuccessFactors system. I setup a destination as shown below.


      Field

      Entry

      Name

      sap_hcmcloud_core_odata

      Type

      HTTP

      Description

      SuccessFactors Core OData API

      URL

      https://sfsfbizxtrial.hana.ondemand.com/odata/v2

      Proxy Type

      Internet

      Authentication

      BasicAuthentication

      User

      <S000xxxxxxx>

      Password

      <password>

      The entity that I want to read from is User. The data binding is shown below.

      When I run the generated application (without any modification), I get the following error.

      The details of the error is shown below.

      {

        "message": "HTTP request failed",

        "headers": [],

        "statusCode": 500,

        "statusText": "Internal Server Error",

        "responseText": "<html><head><title>Error report</title></head><body><h1>HTTP Status 500 - while trying to invoke the method org.apache.http.client.methods.HttpRequestBase.addHeader(java.lang.String, java.lang.String) of a null object loaded from local variable 'backendRequest'</h1></body></html>"

      }

      I tried reading the User table using OData query (via Postman) and it works. What did I do wrong?

      Thanks!

      Author's profile photo Michael Appleby
      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

      Author's profile photo Erickson Taniajura
      Erickson Taniajura

      Thanks Mike for the guidance. I will post a new question.

      KR

      Erick

      Author's profile photo Michael Appleby
      Michael Appleby

      Much appreciated!

      Author's profile photo Former Member
      Former Member

      /wp-content/uploads/2016/08/2_1017405.pngvar file_Data = btoa(reader.result);
        
      var fileData = {
        
      "FILE_DATA"   :  file_data,
        
      "FILE_NAME"   :  file.name,
        
      "MIME_TYPE"   :  file.type,
        
      "SIZE"   :  file.size,
        
      "LAST_MODIFIED"   :  file.lastModifiedDate.toString().substring(0,15),
        
      "FILE_DESCRIPTION":  sap.ui.getCore().byId('idInputFileDescription').getValue()
        
      };
        
      if(sap.ui.getCore().getModel('idModel').getData()){
        
      var aDocuments = sap.ui.getCore().getModel('idModel').getData().documents;
        
      var file_data = btoa(reader.result);
        
      ****aDocuments.push(file_Data);****
        sap
      .ui.getCore().getModel('idModel').setData({documents : aDocuments},true);
        sap
      .ui.getCore().byId('idDocumentsList').rerender();








      In this console is showing the error of push property of undefine even if it is defined.

      Please tell a solution to remove error.

      Author's profile photo Former Member
      Former Member

      I created a master detail app with Users Success Factors but i dont know HOW insert a User photo in the detail/master views. Can you help???