Create Hello World Application in Fiori Smart Template (Part 1)

Create a small application using Fiori Smart Template

In this tutorial, I am going to describe the steps that have been followed in creating and deploying a Fiori Smart Template application.

The following are the topics that are covered below.

     1.      Install HANA Cloud Connector

     2.      Create Destination in Web IDE

     3.      Create OData Service

     4.      Create Annotation Model

     5.      Create a project in Web IDE

     6.      Edit the project in Web IDE

     7.      Edit using Annotation Modeler

     8.      Run the application

     9.      Deploy the application to UI5 ABAP Repository

     10.    Deploy the app to an on Premise Fiori Launchpad

1. Install HANA Cloud Connector

First of all, you need a HANA Cloud Connector to make your on Premise OData service available in the Web IDE during design time and to deploy the Fiori Smart template app to your on Premise Fiori Launch Pad;

• Go to the below link to download the connector according to your operating system.

https://tools.hana.ondemand.com/#cloud

• Make sure you follow the steps described in the below link for the installation.

https://help.hana.ondemand.com/help/e6c7616abb5710148cfcf3e75d96d596.html

• Make sure you follow the pre-requisites mentioned in the above link as it is. The mandatory steps are mentioned below need to be fulfilled before the installation irrespective of your operating system.
  • Java 7 needs to be installed. In case you want to use SAP JVM, you can download it from the SAP Development Tools for Eclipse

Note: Ensure you install only Java 7 otherwise connector won’t work.

• The environment variable <JAVA_HOME> needs to be set to the Java installation directory, so that the bin subdirectory can be found. Alternatively, you can add the Java installation’s bin subdirectory to the <PATH> variable.

         

• Note: Once pre-requisites are met and the connector is installed, in a browser, enter: https://<hostname>:8443, where <hostname>
• In case if you want to troubleshoot the connector installation, you can refer the following link; it is very helpful.

          http://scn.sap.com/community/developer-center/cloud-platform/blog/2015/12/24/troubleshooting-hana-cloud-connector-installation-developer-edition

2. Create Destination in Web IDE

• To consume the on premise service and to deploy the Fiori Smart Template app to the ABAP repository we need to add the destination.

• Access of the following resources including all sub-paths need to be allowed:

           /sap/bc/adt

          /sap/bc/ui5_ui5

          /sap/opu/odata

• We need to fill out the red marked area, with your system information.   
•   

3. Create OData Service

In the ABAP system; 

– Create a structure with all the required attributes that are needed for the UI.

– Go to transaction SEGW, for OData development using SAP NetWeaver Gateway

– Click on Create Project

         

• Choose Generation Strategy : Standard

         

• Go to Data Model node

         

• Right click and select Import->DDIC Structure

            

           

• Select ‘Is Key’ fiield and then finish

         

• Click on Generate

         

• It prompt a window which will automatically filled with provider class and service registration. This will have a field called Technical Name that we need to note it down as we will be using it later.
• Save it to Local Object

         

Your OData service Technical Name would be * _ODATA_SRV

• Register your service as LOCAL

         

• Maintain

         

• Run using Gateway Client

         

/sap/opu/odata/sap/*_ODATA_SRV/*?$metadata

4. Create Annotation Model

– Go to SEGW; create a project of Project Type: Annotation Model for Referenced Service 

• Import ->Service Reference

              

• Click Next

               

• Click Finish

               

• Add Vocabulary Libraries based on our requirement

                

• Then create Annotation Model Definition by Clicking ‘Generate‘ button.

     Always note it down “Annotation Model Registration: Description”; *_ANNOT_ANNO_MDL

    

  – To create annotation, Click on Annotation button and then choose the library from which you want UI element to be added to the fields.

              

• On click of Ok button, APC classes and Annotation Model will get created that you can see in Runtime Artifacts Folder and finally the referenced service will be assigned to the created Annotation Model.
• APC Code: You can check annotation related code in method DEFINE_VOCAB_ANNOTATIONS ( ) of generated APC.
• Maintain Annotation Model: You can see Assignment of the Referenced Service to Annotation Model using transaction /iwbep/reg_vocan.
• Register the referenced service with Gateway Hub using Resister button in the Service Maintenance.
• ‘Maintain‘ the service
• ‘Load Metadata‘
• Access Annotation File using ‘Gateway Client‘

Use the following URL;

     /sap/opu/odata/IWFND/catalogservice;v=2/Annotations(TechnicalName=*_ANNOT_ANNO_MDL’,Version=’0001′)/$value

         

Continue on Part 2……….