Guys are you all ready to dive in to this River :-)  (now called as SAPWebIDE – next generation development environment for Fiori Apps). In this blog, I will explain you on getting started with SAP WebIDE Local installation.

First of all “SAP WebIDE” , What is it? SAP WebIDE – browser based development environment which enables development of sapui5/fiori apps, extending fiori apps, build & deployment of hybrid applications.

SAP WebIDE 1.0 a trial version was originally released first in SAPPHIRE as SAP River IDE with HANA Cloud Platform and 1.4 was released on October 2014 also with the local installation version made available globally in the name of SAP WebIDE. The latest version of SAPWebIDE is 1.9 and the current version available on the SCN for local installation is 1.8.

Let’s download the trial version from the SAP store.

Here are the list of prerequisites, follow the links to get the same and get it installed in your local machine.

• Java run-time 7 (at least version 1.7), use the command line statement “java –version” to check your version.
• Orion Application server 5.0 
• p2 director
• Git 2.3.6
• node.js v0.12.2
• Bower 1.4.1

Prerequisites for the installation of hybrid application toolkit plugin.

• Apache ant 1.9
• Android SDK 24
• Cordova 3.6.3
• SMP SDK (optional - unless you plan to leverage the features of SMP in your app)

After installing all of these, let’s maintain the below environment variables (subject to your actual software installation location)

Go to Control Panel->System->Advanced system settings->Environment variables

• JAVA_HOME = C:\program files\java\jdk1.7.0_60
• ANT_HOME = C:\apache-ant-1.9.4
• KAPSEL_HOME = C:\SAPWebIDE\SMP3SDKInstaller_3_7_1_win\modules\KapselSDK\KapselSDK

Now follow the below steps from your command line interface

cd \
mkdir SAPWebIDE
cd SAPWebIDE

.

Unzip the orion application server to c:\SAPWebIDE

Unzip p2 director to c:\SAPWebIDE

Unzip SAP_Web_IDE_Local_Inst (which includes files for the SAP Web IDE - updatesite.zip & Hybrid App Toolkit – SAP_HAT_Local)  to c:\SAPWebIDE

Follow the commands in you command line interface

cd /d c:\SAPWebIDE\director
director –repository jar:file:/c:/SAPWebIDE/SAP_Web_IDE_Local_Inst/updatesite.zip!/ -installIU com.sap.webide.orionplugin.feature.feature.group –destinatin c:\SAPWebIDE\eclipse

.

I guess most of you would have already tired, anyway let’s not delay anymore. GET STARTED!!!

Navigate to C:\SAPWebIDE\eclipse and double-click on the orion application

It will open the command line interface like this

Now open your chrome and launch the SAP Web IDE through http://localhost:8080/webide/index.html

Once you start the orion application server for the first time, you have to create a new account for it, then you can login to SAP Web IDE, HERE YOU GO!!

Yet one more last step is pending, which is installing the hybrid application toolkit plugin.

Navigate to the folder C:\SAPWebIDE\SAP_Web_IDE_Local_Inst \SAP_HAT_local-1.2.5

Click on the setup (windows command script), which will launch your default-browser for the prerequisites validation.

Check all your prerequisites, installation cannot be completed with any error over here. During installing your hybrid application toolkit enter your sapwebide url as http://localhost:8080/webide/index.html and  remember the password you give for the certificate, which you need to enter at the later stage.

Once you are done with the installation, navigate to the folder C:\SAPWebIDE\SAP_Web_IDE_Local_Inst \SAP_HAT_local-1.2.5 and click on the run (windows command script), which will launch the command line interface like this

You need to enter the password which you had given for the certificate. Now let’s check the hybrid application toolkit connection from SAP WebIDE.

Launch your preferences in SAP WebIDE and go to Hybrid Application Toolkit , make sure the same port number is maintained as you can see in both the screenshots here and click on the test connection. You can see the response as Connection is up. Your Hybrid App Toolkit version is V1.2.5.

That's it. Your environment is ready for you to develop applications. HOLAAA!!!

Thank you!

Rottwei (Kishore Kumar)

Technology Consultant/ UI Expert

Exa-AG

Dear Readers,

In this blog I mentioned,

How to Create a HTML5 Application in HCP?

How to Add the Applications into Git Repository?

How to Import a project into Web Ide Worhspace?

How to maintain Versioning?

How to do Commit and push to HCP?

1. Goto your SAP HANA Cloud Platform Cockpit -> Click on HTML5 Applications ->New Applications-> Give Application Name -> save.

2. In New Application Table at last Column Click on Edit button.

3. It will navigate to your web Ide -> Authentication give your username and password. Click ok.(If you not give username and password it will give ‘No Authentication’ error )

4. The Git Repository is created and it looks like below.

5. You can create new Project or import existing project.

Right Click on created Repository folder and choose the option.

6. You can import the existing project into your git Repository

Select Import->Browse -> OK

Here you can import only the .zip format Projects. So before importing the project you should Archive your project into .zip format.

7. Your project is imported into Git Repository and it looks like below,

8. In Right Side, You get commit option, click on stage all option.

9. Give Commit Description.

10.  Click on Commit.

Now your Application to Commit successfully into Your Git Repository and your project is turn to Green.

11.  If you edit any file in your project, the particular edited file and project is converted Green to *.

12.  And it will visible in Git on the screen right side, follow Step from 8.

13. If you want to see the Versioning.

14.  Goto your Cockpit ->select Html5 Application->  Click on your Repository folder -> Versioning

15.  To create Versions, In History table last column Actions-> click on .

Give version name and click save.

16.  So You will get version number. Again In History table last column Actions-> click on.

To activate your application version.

Click on Yes button.

17.  Run the application.

Please give your valuable feedback to improve myself and improve my Blog Writing Skills.

Thank you so much,

Santhosh Gowda.

Inspired by Santhosh Gowda and his Commit Ui5 Application into Git Repository.

Prerequisites:

SAPUI5 application is created in Web IDE and deployed to HCP (sample project name: sdn)

1. Download Git from http://git-scm.com/download
2. Install Git
3. In WebStorm go to File->Default settings… In a popup select Version Control->Git
4. In SAP HCP Cockpit go to HTML5 Applications, select our application created in in Web IDE, select Versioning from left hand menu, right click on the link next to Git Repository URL and select Copy Link Address

5. In WebStorm go to VCS->Checkout from Version Control->Git and in the popup paste an url to Git repository (copied on previous step), change name of the Parent and project directories if needed. Click Clone. 
6. Bummer!

7. Go to Git directory, in file etc\gitconfig add following setting in [http] section:

[http]  sslVerify = false
  You might have to run text editor as Administrator

8. Repeat step 5. New project will appear in the WebStorm

9. Now we can work on the application locally and once we done with changes, open Tool Window #9 (Version Control). Right click on the resource and select Commit Changes..., set Author and Comment (optional) and click on Commit (or Commit and Push). Select a branch in case of Push and click Push

10. Now we go back to SAP HCP Cockpit, go to HTML5 Applications, select our application created in in Web IDE, select Versioning from left hand menu. We see our commit in the table, so we can create a new version and activate

Once we are done with activating a new version we can run the application and ensure our changes are deployed correctly

Hi all,

Questions:

i wanna to navigate from one view to other view by using SAP UI5 project. what to do ? how to do?

Solution:

There are diiferent ways to navigate from one views to other.

- Using App Container

- Using Routing Concepts

- Declare and Destroy my view

Here i will show one simple example for navigation.

1. APP CONTAINER:

- SAP Mobile lib has this CLASS sap.m.App - it is a container which holds all your views at one place.

Index page:

<script>

  sap.ui.localResources("sap_web_nav");

  var view = sap.ui.view({id:"idV11", viewName:"sap_web_nav.V1", type:sap.ui.core.mvc.ViewType.JS});

  var view2 = sap.ui.view({id:"idV12", viewName:"sap_web_nav.V2", type:sap.ui.core.mvc.ViewType.JS});

  var app = new sap.m.App({

  id:"myApp"

  });

  app.addPage(view );

  app.addPage(view2 );

  app.placeAt("content");

    </script>

Here we added our two views in one single app container,

View1 :

  var oControllerElements = [];

  var oMatrix = new sap.ui.commons.layout.MatrixLayout({

  columns : 2

  });

  var oButton = new sap.ui.commons.Button({

  text  : "Click",

  press : oController.handlePressClickMe

  });

  oMatrix.createRow(new sap.ui.commons.Label({text : "Name"}), new sap.ui.commons.TextField({id:"idTextFieldName"}));

  oControllerElements.push(oMatrix);

  oControllerElements.push(oButton);

  return oControllerElements;

View 1 controller.js:

handlePressClickMe : function(){

  sap.ui.getCore().byId("myApp").to("idV12");

  sap.ui.getCore().byId("idV2Label").setText("My Name is: "+sap.ui.getCore().byId("idTextFieldName").getValue());

}

so by using "to" property from sap.m.app API we can easy to navigate from one view to other view

Thanks,

Karthik A

Introduction

This blog post describes the SAP Web IDE Git Client features, from the very simple ones to the most complex. I’ll explain how to use it in the most beneficial way.

The first thing you have to do to work with Git, is to have a Git repository in your SAP Web IDE workspace, which you obtain by cloning (or you can deploy an application to SAP HANA Cloud Platform (HCP), which creates a Git repository for you, but in this post I’ll explain it from the clone option). The SAP Web IDE Git Client can work with any Git server, I’ll use the SAP HCP Git server.

Cloning the Git Repository

When you create an HTML5 application in the SAP HCP cockpit, you get a Git repository.

To clone this repository, click on the created application, select Versioning from the menu on the right [1], and click Edit Online [2]. SAP Web IDE opens showing an external command confirmation dialog box (telling you that the Git repository will be cloned).

Click OK. The Clone Repository dialog box appears. Enter your HCP credentials and click OK. If you select Remember Me, your credentials are saved until the next time you refresh your browser.

Once the repository has been cloned, you will see it in your workspace [4]. To follow the operation status, from the View menu, select Console.

Publish Changes to Work Collaboratively

So you’ve worked on your files and saved the changes. You now need to publish your changes so that your colleague, we’ll call him Bob, can see them and continue to work on top of your change. For this, you must push your changes.

First, open the Git pane (by clicking the Git pane button on the right menu bar [5]). You will see the modified, added, or deleted files on the staging table. Select the checkbox for the files that you want to publish [6], enter a description for the commit [7] and click Commit [8]. Your changes are committed and ready to be pushed to the Git server.

The repository status changes to indicate that your branch contains one change that the remote branch does not [9].

To push your commit, select Push > origin/master [10]. You could also press the commit and push button [11] instead of pressing commit and then push. Your commit is merged in the Git server (if there are no conflicts).

Update Workspace with the Latest Changes

Now Bob wants to get your changes.

He must click Fetch. His origin/master branch is updated with the changes. He can see the fetched changes on the Changes Fetched dialog box that appears when the fetch is complete. On the Git status area [9] he’ll see that his branch is one commit behind the remote branch – which means that his remote branch contains changes that his local branch does not.

But Bob’s workspace still does not contain your changes. He has to rebase his local branch by clicking Rebase and then selecting origin/master when prompted.

After pressing OK, if there are no conflicts, the rebase operation is completed and Bob will get your changes. Now he can continue to work on the most updated code.

I recommend you fetch and rebase before performing push in order to avoid merge issues.

Staging Table in Detail and the Amend Magic

All your changes appear in the staging table [12] until you commit them. These can be added, deleted or modified files, and also files with conflicts. To see the changes made to the files, double click the line in the table. You can ignore new files – which means that the Git repository will not track changes on those files, and you will not be able to commit them. For the other files, you can open the file in the editor by selecting Edit from the context menu.

If you have any changes you want to discard, click Discard [13] or Discard All [14]. You can also stage all your changes by selecting the Stage All checkbox [15] – this means that the next commit will contain all these files.

If you committed some change but still didn’t push it, and you want to add more changes to the same commit, stage the files that you want to add to the commit, select the Amend Changes checkbox [16] and commit. You don’t need to enter a commit description since the commit you are amending to, already has one.

There are a lot cases to use the Amend option. Let’s say you developed something that works only partially. You still cannot push it, but you want to save it in its current state. In this case, you can commit without pushing and continue with your development. The diff will be only with your new development. In other words, it compares the current state to the committed one. When ready, you can stage your files, amend the commit, and then commit.

The amend option is very powerful but it can also cause trouble if you don’t use it correctly. For example, amending changes to a commit that was already pushed and merged will cause your next push to fail.

In the next blog I will explain how to work with multiple branches and how to use the Git History pane.

Until UI5 allows for client-side data handling in OData models (coming with 1.28), JSON models are the way to go for handling client-side scenarios (offline capabilities, sorting/filtering, etc pp). Typically more than one model will be involved in the application logic, most likely at some point resulting in the need to merge data.

There's plenty of advice on the Internets on retrieving data from a JSON model, handling data changes manually, then setting the data back to the model.

They all more or less do this:

// merging arrays
var oldArray = [obj1, obj2];
var newArray = [obj3, obj4];
jsonModel.setData( jQuery.merge( oldArray, newArray ) );
// adding an item
jsonModel.getData().push( obj );

This works fine. But as soon as server-side data is involved, the structure of the JSON result is determined both by the service model $metadata and prepended by the "/d/results" nested object (which is OData version 2 standard by the way!).

Instead of going through the effort of manually iterating over deeply nested structures, UI5 offers the merge-Parameter on the JSON-model setData()-method: jsonModel.setData(rawODataObject, boolMerge)

In order to use that feature, the to-be-merged JSON models need to be of the same structure with corresponding array indexes.

In the example Northwind OData service above, the Employee entity with LastName "Davolio" is at d.results[0], "Fuller" at d.results[1].

If you were to add positions to them from a second OData query, the positions need to be at the desired array indexes:

This would make d.results[0] the "Sales Representative", d.results[1] the "Vice President, Sales".

Code-wise this looks schematically like this:

var sUrl = "http://services.odata.org/V2/Northwind/Northwind.svc/Employees";
// load data into client-side model
var oJsonModel1 = new sap.ui.model.json.JSONModel();
// select only some fields of the Employees entity set
// sync request done intentionally
oJsonModel1.loadData(sUrl, {"$select": "EmployeeID,LastName,FirstName"}, false);
var oJsonModel2 = new sap.ui.model.json.JSONModel();
// select different fields of the Employees entity set
// sync request done intentionally
oJsonModel2.loadData(sUrl, {"$select": "TitleOfCourtesy,Title"}, false);
// merge the data into first JSON model
oJsonModel1.setData(oJsonModel2.getData(), true);

Note the use of getData() on the to-be-merged model - in UI5 terms, it retrieves the "raw" data that subsequently can be used for the merge.

Along the same lines, a locally construced JSON model can also be merged in one retrieved from an online resource.

Again, the key is to map array indexes of the models so UI5 can merge them together correctly.

Also, the /d/results structure needs to present to merge remote and local JSON data together:

//... continued from above
var oJsonModel3 = new sap.ui.model.json.JSONModel();
// note the /d/results structure - OData JSON standard!
var oJson  = {    d : {        results: [            { "LocalID" : "4711"},            { "LocalID" : "4712"},            { "LocalID" : "4713"}        ]    }
};
oJsonModel3.setData(oJson);
// merge it into first JSON model
oJsonModel1.setData(oJsonModel3.getData(), true);

The resulting oJsonModel1 then looks like this:

I've put together a sample UI5 application that showcases merging both remote (aka retrieved from a URL) and remote with local JSON models.

Source-Code is over at GitHub.

Here are some screenshots:

Applying a second "remote" JSON model:

Merging both local and remote JSON models:

original idea by Konstantin Anikeev with his Blog Post Asynchronous load of SAPUI5,

"thank you for the inspiration to create this kinky easy-to-use Module"

Why use CoreLoader.js?

Loading SAPUI5 or OpenUI5 based Application needs time. JavaScript and CSS files need to be loaded before the view appears. During this time the User has to wait, this depends on the network connection speed and the used libraries (for example: on cellular devices about 20 seconds).

Modern web-based Applications respond fast. All initialization and loading should be done in the background. The User needs to be notified about that process. That is what Konstantin and I have tried to implement.

How to use or integrate into (existing) Applications?

Simple! The main focus of this development has been to make the integration in existing Applications extremely easy. You do not need to remove your initialization Code from your index.html. Utilize this module by changing some attributes in your bootstrap <script> tag!

What do you need?

Only one JavaScript file is needed. You can download it from GitHub repository. Just place the file "CoreLoader.js" where you want. My suggestion: "/WebContent/util/CoreLoader.js", Than change the bootstrap script tag to the source where you have placed the CoreLoader.js. The Module automatically generates all required DOM-elements at runtime.

ORIGINAL: index.html

<!DOCTYPE HTML><html>    <head>        <meta http-equiv="X-UA-Compatible" content="IE=edge" />        <meta name="viewport" content="width=device-width, initial-scale=1.0" />        <meta charset="UTF-8">        <title>Example Application</title>        <script id="sap-ui-bootstrap"                src="resources/sap-ui-core.js"                data-sap-ui-libs="sap.m"                data-sap-ui-theme="sap_bluecrystal"                data-sap-ui-resourceroots='{                        "com.inwerken": "../com_inwerken"                }'                data-sap-ui-xx-bindingSyntax="complex">        </script>        <script>        // execute when Core is loaded ...        sap.ui.getCore().attachInitEvent(function () {                // .. load Component                var oComponentContainer = new sap.ui.core.ComponentContainer({                        height: "100%",                        name: "Example"                });                oComponentContainer.placeAt("content");        });        </script></head><body class="sapUiBody" role="application">        <div id="content"></div></body></html>

How to Install?

Just make the following changes to your index.html:

1. bootstrap script tag
   • EDIT line 08 id="util-coreloader"
   • EDIT line 09 src="to your url path/CoreLoader.js"
   • INSERT line 10 data-loader-src="original src value"
     
     
2. application init time
   • INSERT line 20
   • INSERT line 28
   • INSERT line 30

CoreLoader.js: index.html

<!DOCTYPE HTML><html>    <head>        <meta http-equiv="X-UA-Compatible" content="IE=edge" />        <meta name="viewport" content="width=device-width, initial-scale=1.0" />        <meta charset="UTF-8">        <title>Example Application</title>        <script id="util-coreloader"                src="util/CoreLoader.js"                data-loader-src="resources/sap-ui-core.js"                data-sap-ui-libs="sap.m"                data-sap-ui-theme="sap_bluecrystal"                data-sap-ui-resourceroots='{                        "com.inwerken": "../com_inwerken"                }'                data-sap-ui-xx-bindingSyntax="complex">        </script>        <script>        // execute when Core is loaded ...        CoreLoader.onReadyState(function() {                sap.ui.getCore().attachInitEvent(function () {                        // .. load Component                        var oComponentContainer = new sap.ui.core.ComponentContainer({                                height: "100%",                                name: "Example"                        });                        oComponentContainer.placeAt("content");                        CoreLoader.ready();                });        });        </script></head><body class="sapUiBody" role="application">        <div id="content"></div></body></html>

Finished? Yes.

That's all. Try to launch your Application.

It should work and come up with a Screen like this:

This blog is part of my SAPWebIDE - Deep Dive series. As part of this blog, we will see how we can connect our local SAPWebIDE to remote SAP Netweaver Gateway System. If you don't have one then let's get it from here (SAP Netweaver Gateway Consumption System) . We will also see how we can consume the oData services from this system (ES1) in our WebIDE to create Master-Detail Fiori Application.

First we have to create the destination. Now open your cmd promt and follow the commands as below. Name your destination file as name of your system (ES1).

Once the ES1 file opened in the notepad, enter the following details.

The property - WebIDEUsage indicates the Usage of mentioned SAP System. Here are the some of other options.

Save and Close the notepad.

Let's verify our connection to remote system ,refresh your SAPWebIDE.

File -> New -> Project from Template -> choose SAP Fiori Master Detail Application

click on Next, enter Project Name and next , you must see ES1 system gets displayed here based on the destination you just maintained.

That's it. You have successfully connected your local SAPWebIDE with your SAP Netweaver Gateway consumption system.

Thank you!

Rottwei (Kishore Kumar)

Technology Consultant/ UI Expert

Exa-AG

Guys are you all ready to dive in to this River   (now called as SAPWebIDE – next generation development environment for Fiori Apps).

First of all “SAP WebIDE” , What is it? SAP WebIDE – browser based development environment which enables development of sapui5/fiori apps, extending fiori apps, build & deployment of hybrid applications.

SAP WebIDE 1.0 a trial version was originally released first in SAPPHIRE as SAP River IDE with HANA Cloud Platform and 1.4 was released on October 2014 also with the local installation version made available globally in the name of SAP WebIDE. The latest version of SAPWebIDE is 1.9 and the current version available on the SCN for local installation is 1.8.

As part of this blog series, I will take you deep dive into SAPWebIDE (cloud & local) with various topics as mentioned below. Stay tuned for more topics.

Thank you!

Rottwei (Kishore Kumar)

Technology Consultant/ UI Expert

Exa-AG

This blog is part of my SAPWebIDE - Deep Dive series. As part of this blog, we will see how we can extend the standard SAP Fiori Application. Fiori apps can be extended through

• View Extensions
• View Modifications
• View Replacement
• Controller Extension
• I18n Resource Text Customization
• oData service replacement

In this blog we will cover View Extension using Extension Point, Controller Extension and I18n Resource Text Customization. The recommended approach to extend any standard Fiori application is to keep the parent application untouched and by creating the extension project of the same. Extension project holds the reference to the parent application and only the extended implementation. Extension projects loads the parent application at run time with the extended behavior of its own.

Let’s take a business scenario from the Part 4, we have explored the sample Fiori application Approve Purchase Orders. Now the customer wants more supplier details like SupplierId to be displayed in the UI which is not the current behavior.

First step is to create the extension project for the Approve Purchase Orders from File -> New.

Select the Application for which who want to create the Extension Project. That could be from Remote (SAP ABAP UI5 Repository / SAP HANA Cloud Platform) or directly from your workspace. In our case we have already imported the sample Approve Purchase Orders application into our workspace in Part 4. Let’s choose the same and Extension Project name will be created automatically.

Click on Next and Finish.

Now we need to find the extension point in the parent application where we can add our implementation via extension project. You can get the Extension Point and other details of all the Fiori apps from the SAP Fiori Apps Reference Library. Or else you can also just search the project with the text ‘ExtensionPoint’ to find where and all the extension points are available.

In our case the extension point ‘extensionAfterObjectHeader’ is present in the S3_PurchaseOrderDetails.view.xml just above the General Information, which I would like to use it here.

Right click your extension project New -> Extension, click on Next

You can see the various Extension options available, for now you choose the Extend View/Fragment.

In the Extension Point Selection, select your View/Fragment and the corresponding Extension Point.

Click on Next and Finish.

Open S3_PurchaseOrderDetails_extensionAfterObjectHeaderCustom.fragment.xml, add the following code.

<form:SimpleForm xmlns:form="sap.ui.layout.form" title="{i18n&gt;xtit.supplierTitle}" layout="ResponsiveGridLayout" minWidth="1024" maxContainerCols="2" class="nwEpmRefappsExtPoApvControlLayout" labelSpanL="3" labelSpanM="3" emptySpanL="5" emptySpanM="5" columnsL="1" columnsM="1">                                                <Label xmlns="sap.m" text="{/#PurchaseOrder/SupplierId/@sap:label}"/>                                                <Text xmlns="sap.m" text="{SupplierId}"/></form:SimpleForm>

Next we need to enable the newly added text ‘xtit.supplierTitle’ in the I18n.resource, for that right click your extension project and New -> Extension, click on Next and select i18n Resource Text Customization

Click on Next and Finish.

Open i18n > i18n_en.properties add the text

#XTIT: Title of the Supplier Information form
xtit.supplierTitle=Supplier Information

Now to enable binding of Supplier ID in the view, we need to extend the controller of the same. Right click your extension project, New -> Extension, click on Next. Select Extend Controller and click on Next.

Choose S3_PurchaseOrderDetails and select Copy of the parent controller.

Click on Next and Finish.

Open the file S3_PurchaseOrderDetailsCustom.controller.js and update the SupplierId parameter in the _bindView parameters.

parameters: {    select: "POId,OrderedByName,SupplierId,SupplierName,GrossAmount,CurrencyCode,ChangedAt,DeliveryDateEarliest,LaterDelivDateExist,DeliveryAddress,ItemCount"
}

Save your application. Now right click the localIndex.html , Run > Run with Mock Data.

You can see the Supplier Information on the Screen. You have successfully extended the standard Approve Purchase Orders Fiori application.

Thank you!

Rottwei (Kishore Kumar)

Technology Consultant/ UI Expert

Exa-AG

Guys are you all ready to dive in to this River   (now called as SAPWebIDE – next generation development environment for Fiori Apps).

First of all “SAP WebIDE” , What is it? SAP WebIDE – browser based development environment which enables development of sapui5/fiori apps, extending fiori apps, build & deployment of hybrid applications.

SAP WebIDE 1.0 a trial version was originally released first in SAPPHIRE as SAP River IDE with HANA Cloud Platform and 1.4 was released on October 2014 also with the local installation version made available globally in the name of SAP WebIDE. The latest version of SAPWebIDE is 1.9 and the current version available on the SCN for local installation is 1.8.

As part of this blog series, I will take you deep dive into SAPWebIDE (cloud & local) with various topics as mentioned below. Stay tuned for more topics.

Thank you!

Rottwei (Kishore Kumar)

Technology Consultant/ UI Expert

Exa-AG

Hi all,

no business or training content, but the video is still worth to spend 4 minutes on it

https://www.youtube.com/watch?v=gFPLBA2bOcw

Best regards

Stefan

Currently I am going through openSAP course onBuild Your Own SAP Fiori App in the Cloud and there come across one question about creation of EDMX file.

There are different ways to create edmx file as answered in the course discussion forum by Yoram Friedman

This is a common scenario in many big projects, since you do want to work on the UI in parallel to the team creating the business logic. The best solution is to reach an early agreement on the "interface" between the two and use this as a starting point. If at this stage you want to generate an EDMX schema you can't do it from the service as the service does not exist yet. You need to either use a third party EDMX generator or use the WebIDE ODATA Model Editor (which is not part of this specific training)

Check out this video: https://www.youtube.com/watch?v=xs0cSan05mw

Now in case if you are not able to use 3rd party EDMX generator tools or find it difficult to use SAP Web IDE OData Model Editor and want to leverage the efforts of OData modelling done on backend OData developer team then there is simple way for it.

Assuming that backend developers (SAP Gateway OData developers) at least started creating OData service using transaction SEGW with properly defined OData artifacts such as entity, entitySet, association/navigation etc. but they do not want to spend time to implement complete backend logic. In such scenarios, if OData service is registered then in Gateway Client transaction /IWFND/GW_CLIENT using $metadata query we can see the complete metadata of OData service as shown below.

You can either select menu Goto -->Service Metadata

Or after executing $metadata, click on Response in Browser

In both cases, it will open the metadata file in the browser as shown below,

Now you can simply save this file as .edmx or .xml and can easily use it for creation of mock data inside your Fiori application from SAP Web IDE.

As shown below, we can use .xml or .edmx file

you can refer 5 easy steps to create a Fiori app using an EDMX file & testing it by leveraging the #SAPWebIDE mock service by Jitendra Kansal for further steps and details.

-Chandra

There are several providers for maps in UI5. However the most simplest that can be used is google maps.

Google Maps is not just a map, it has an entire array of features that can be used. Not only is its feature base wide but it is fairly simple to use and its implementation is forward.

The concept is to just add a "DIV" tag element in the DOM and the Google maps API will handle the rest.

In ui5 one of the simplest ways to introduce an empty "DIV" tag would be to use "HBox".

An empty "HBox" set with an "id" is  enough. But what needs to be done is that the ID provided will always be prepended with an additional id. Find out the id of the element from the console of the browser.

Ensure that the Google maps API library is included in index.html just above the UI5 initialisation scripts.

The next step is to call the map initialisation function inside the onAfterRendering event.

A sample can be found here 

Introduction

    This is a quick blog explaining how to generate a print from SAPUI5 application . We currently have the flexibility to generate print from the back end system. For an ABAP back end system with SAPUI5 front end , we can generate an excel file or a PDF file from back end and push it to the browser so that the user can download it or take print out manually . The same technique is applicable for other (supported) back ends as well. Here, i am completely forgetting about the back end server , and thinking of generating the printouts from the browser using javascript .

Benefits 

1. Printout will be rendered in the browser
2. Data is not transferred to the back end system to generate the document and push back to the client.
3. Include SAPUI5 controls directly into the output, like charts, tables etc .

Theory : The theory behind here is , we can print html document using javascript Window print() Method

Step 1: Create a SAPUI5 application project in Eclipse , create a view and develop your UI5 application ( These steps have been discussed multiple times , so i am not discussing it here again ).

Now my application looks like the below. I included some header data , a table with stock information, and followed by a graphical representation of profit percentage .

When the controls are rendered , corresponding HTML code will be generated . So , if we want to include any SAPUI5 standard controls, we should get the rendered html content.

Below is the print format which we are now going to design .

Now we will think of some HTML stuffs . All the header information can be rendered using plain HTML tags ( using <div> , <p> etc ) and the table can be created in our choice using the <table> html tag . Graph html code can be taken from the rendered HTML DOM and insert into our print document. In the controller , i am defining a function which accept the JSON data for the header and the table ( for the header and the table ) .

In the above code snippet, i am creating the HTML code corresponding to the output expected . HTML DOM for the chart is read using the outerHTML variable from the document . Using the generated HTML string, a popup is opened and the same is printed .

And here comes your document

Lazy to write the HTML tags for the print out ?

This is for lazy people Are you not confident enough to write the HTML for your print out ? SCN is there to help you .

Step 1 : Create a blog or document in SCN.

Step 2 : Go to MS Word , and draft your output ( for eg , i am creating a table )

Step 3: Copy the table, and paste it in the content editor , and go to the html version (right side, top )

Here you will get the HTML code . You may need to clean the code based on your requirement . There are many free internet services available to create HTML from MS Word contents .

Happy coding

Sreehari

Hi All,

Introduction:

A document management system (DMS) is a system (based on computer programs in the case of the management of digital documents) used to track and store documents. It is usually also capable of keeping track of the different versions modified by different users

Requirement:

In SAP QM and PM module have a requirement to create notification from mobile/tablet. Under created notification i have to attach notification images

( for ex:: i want to create one notification for damaged train track).

Technical Req:

1. CANVAS Tag from HTML5
2. File Transfer Plug-in
3. File Opener Plug-in

Methods:

1. UPLOAD document from Tablet/Mobile
2. Download document from SAP Server to SD Card

Code snippet:

1. Index Page:

2. Use below class to open Camera:

var Images = function(){};//Class

Images.prototype.getPhotoList(source,checkDes,ListId) {

navigator.camera.getPicture( function (imageData) {

var imageList = {

"imageData": "data:image/jpeg;base64," + imageData,

"imageName":checkDes

}

addImageToList(imageList,ListId);//Attach your image to List

}, onFail, { quality: 50,

destinationType: destinationType.DATA_URL,//File Url we can use

sourceType: source });

}

This function will add your clicked image to Noti list.

3. Upload Image to SAP:

    -Use canvas-to-blob.min.js this third-party JS file. it converts your image into blob.

    -NotificationNo - Get Notification number from GW Service response ( 200 Ok Response). Attach Notification response number to image slug.         

Because images have large number of bytes. It might be take some time to upload. So create a new QUEUE Logic for Notification images. Based on the status of queue, upload your file ( one by one ) to SAP system.//User Your own queue logic to upload image .

Images.prototype.convertToBLOB_and_UploadToSAP(NotificationNo,ImageDescription,MobKeyValue,addedImageSourcePath){

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var imageObj = new Image();

     imageObj.src = addedImageSourcePath;

     imageObj.onload = function() {

     ctx.drawImage(imageObj, 0, 0);

if (c.toBlob) {

c.toBlob(

function (blob) {

var reader = new FileReader();

reader.readAsArrayBuffer(blob); //array buffer

reader.onload = function (evt){

var oServiceURL = "proxy/sap/opu/odata/sap/ZGW_DO_APP_SRV";//Generic Service

var fileTarget = evt.target.result;

var SPath = "/DocSet";

var Header = {

headers: {

                   "x-csrf-token" : token1,

                   "Authorization" : "Basic cnRoYW5DDDDD",

                   "slug": MobKeyValue

             };

}

var UploadImg = new sap.ui.model.odata.ODataModel(oServiceURL);

UploadImg.setHeaders(Header );

UploadImg.attachMetadataFailed(function(){

             this.getEventBus().publish("Component", "MetadataFailed");

  },this);

UploadImg.create(SPath,fileTarget,function (oSuccess){

alert("Image Uploaded Successfully");

},function(Error){

alert("Error Due to Upload");

});

};

},

'image/jpeg'

);

}

};

}

SAP ECC System:

Go to CV04n Transaction-----Enter your Doc Number----Go to Doc Tab---Open your image

Thanks,

Karthik A

• How to get call stack when some exception happens
• How to debug source code in product system such as ABAP Server?

• How to manually change source code ?

For solve a issue, the normal process is that you investigate the issue, then change source code in Git, then do release build, then wait the source code transport from one system to another system, after the source code reach the system, then you do test to verify that the fix really work. If the fix not work,then repeat the process.

How can we easily check whether our solution can work ? The answer is:  manually change the source code by browser debug tool.

We need first understand how SAPUI5 application run:

When an SAPUI5 application ( for the Fiori application, it is a Component) first time run, the browser will load the source code and execute it. When you return to the launchPad,  the component instance will be deleted but the source code is still kept. The next time you run it, because the source code has been loaded, so the browser will directly create the new instance and run it. 

Understand function format

After following code executed, the browser will put the function into the class prototype

sap.ca.scfld.md.controller.BaseFullscreenController.extend("sap.suite.ui.smartbusiness.drilldown.view.Drilldown",
{    _getChartPercentFormatter  = function() {     ......   }
}

So if you want to change the function  _getChartPercentFormatter, you need paste following source code into Browser console window:

sap.suite.ui.smartbusiness.drilldown.view.Drilldown.prototype._getChartPercentFormatter = function() {  ......
}

• How to run code in Chrome, Firefox, IE ?
• for Chrome

    Choose "Develop tool" from menu, click the "Console" window, then directly paste you code, press 'Enter' to execute it

• for Firefox

     Choose "Developer"-->"Developer Toolbar" from the menu, then paste code, press 'Enter' to execute it.  

• for IE

     Choose "F12 Developer Tool" from menu, click "Console" window, paste code, then press green triangle button to execute it.

For partners who want to develop responsive SAP Fiori apps, we offer an enablement hands-on workshop, where participants will learn how to build and extend SAP Fiori apps using SAPUI5 and SAP Web IDE on SAP HANA Cloud Platform.

We will cover the principles of SAPUI5 which is the UI framework for SAP Fiori apps, and walk through the SAP Web IDEfunctionality to simplify the development and extension of SAP Fiori apps.

Participants will deploy the apps to their accounts on SAP HANA Cloud Platform or to their ABAP-on-premise landscape. They will connect the app to their own backend system or to a SAP Gateway demo system.

The workshop targets partners who have in idea (use case) for an app or app extension they want to develop. Following registration you will be asked to submit your use case which we will discuss with you in a 1:1 meeting. We can then jointly determine co-innovation partnering options, in terms of how we can support you in your development effort leveraging SAPUI5 and SAP Web IDE experts as well as subsequently in your go-to-market strategy.

Why should I attend?

You will get your hands dirty with hands-on exercises covering SAP Fiori app development principles and consult with SAPUI5 and SAP Web IDE technical experts regarding your specific scenario implementation.

Agenda

Day 1

• Introduction to SAP Fiori UX and tools
• Hands-on: Build your first SAPUI5 app
• SAPUI5 architecture and basic concepts (MVC, libraries, components, fragments, theming, availability, browser-support)
• Hands-on: Models and Data Binding
• Models and Data Binding in SAPUI5
• Navigation Concept in SAPUI5

Day 2

• The easy way to create an SAP Fiori app
• Hands-on: Create an SAP Fiori app using a template, enhance it with additional artifacts and deploy
• Extend an SAP Fiori app using SAP Web IDE
• Hands-on: Extend an SAP Fiori app
• SAP Web IDE extensibility using plugins
• Hands on: Develop your own plugin

Target Audience

Partner developers and technical consultants

Prerequisites

Knowledge of HTML and JavaScript

Cost

$250 per participant

Where and When?

Chicago, USA  27 – 28 of May

In my last blog I described how you could use open source tools to give you more control and flexibility on how to develop your code and what tools to use. Opensource is awesome and all but unfortunetely, unlike SAPUI5, OpenUI5 doesn't have the closed source sap.Viz library to help make those fancy analytical apps. Even if you are working with SAPUI5, VizFrame is closed source if you don't like it's behavior... you can't do anything about it.

A little DIY

The next logical step was of course to create an open source library myself that I called SimpleCharts.

You can add it to your project with the following command (assuming you have bower installed):

- bower install openui5-simplecharts

Then in your project you just need to add the following code to Component.js:

sap.ui.getCore().loadLibrary("openui5.simplecharts", "./bower_components/openui5/simplecharts/");
jQuery.sap.registerModulePath('bower_component', './bower_components');

If you want to use the map plot, add the Leaflet library to index.html:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /><script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

And there you go. After this, creating a chart is as simple as creating a dataset and a chart (it is loaded as library so you don't need "jQuery.sap.require"):

var chartData = new openui5.simplecharts.SimpleChartData();
var data = { items: [ { "team": "Benfica", "goals":20 } , { "team": "Porto", "goals":15 } ] };
chartData.bindDimensions({ items : [ { name: "team", description:"Team", axis: "x"} ] };
chartData.bindMeasures({ items : [ { name: "goals", description:"Goals", rank: "1"}]});
chartData.bindData(data);
var chart = new openui5.simplecharts.SimpleBarChart({ title: "Goals by Team"});
chart.setData(chartData);

You can also declare the chart in XML by referencing openui5.simplecharts which is loaded as a UI5 library. There is a BarChart, LineChart, PieChart, StackedBarChart and MapPlot (which is based on leaflet), and you can get more detail from the JSDocs. I won't go into much detail because the purpose of the exercice was to learn, not to dump a library chart on SCN, so here's what I learned along the way:

D3.js is just .... WOW

It's incredible how such a great library like d3.js (Data-Driven-Documents) is available for free, and we can thank Mike Bostock for giving us this gem. For those who don't know d3.js, it is a DOM manipulation library focused on Scaled Vector Graphics (SVG). Not only did Mike create d3.js, he created many examples of charts to guide your development. I used them to create all the charts except the MapPlot so this is more Mike's work then mine.

To learn about D3.js there is this free book which I almost bought. I really recommend you read it, because while looking at examples is ok, only after reading the book was I able to really understand all commands and create a chart without looking at an example. Well worth it, and free!

I hope the source code available on Github will help you learn d3.js in the context of OpenUI5. Fork all you want, because like I said this was a learning journey, it's not my objective to become a maintainer (I will make ajustments to keep learning, but unfortunately I don't have enough time for it).

In the end, after creating all these charts, I found the NVD3.js library which has a set of pre-build charts based on D3.js. While the purpose of the exercice was to learn D3.js, if all you want is to make some charts you should check it out.

Maps for free!

As much as I love Google Maps and Mapbox, they aren't free and I wanted to make a bubble chart over a map. I soon discovered Mapbox's JS library is built on Leaflet (actually the Leaflet creater joined Mapbox), and if you can accept uglier maps, you can use this library combined with OpenStreetMaps for free (or you can just fork it and replace OSM with Mapbox). You can check the SimpleMapPlot.js file to see how I did it.

I was going to use a D3.js on a Leaflet layer to draw the chart itself, but for simple bubble charts that's not necessary since you can use L.CircleMarker to draw the circles you see in the screenshot and Leaflet accepts longitude and latitude coordinates directly. I ended up using D3 scales for the bubble size, so that it adjusts to the window size of the map.

Building the library

Another challenge was to create a openui5 library so that it worked as any other native library (i.e sap.m), which meant following this library page of the OpenUI5 project and looking at what John Patterson had done in Google Maps library for UI5. This is the last section and it was the last thing I did, but ... I shouldn't have. Libraries must follow a specific signature so I had to refactor all the code (lesson learned).

The thing I had more trouble with was the CSS and the themes. I didn't know anything about LESS but the OpenUI5 build uses it so I had to learn. It's cool (basically CSS with variables) but if you don't want to bother, just rename your .css to .less since CSS is a subset of LESS.

Finally I wanted to build the library so I could grab the library-preload.js. I tried to understand the preload on Optimizing OpenUI5/SAPUI5 Apps but ultimately failed and took the easy way out ... I used the OpenUI5 project build. You can clone it using git, and then you add your project to the folder stucture. If you followed the rules on the library page this is straighforward. Just don't forget to add your project themes/less to the theme folders at the bottom (don't know why but blue_crystal has a separated folder in the project).

All that is left is to open the gruntfile.js of the OpenUI5 project, add your library to the build, run "grunt build" and after a few minutes you will get the library-preload.js (and the library.css) in the "target" folder.

Conclusion

The main thing I hope you take away from this blog, is that there are tools out that will enable you to do anything you want. In the age of Real-Time and the Internet of Things don't restrict yourself to end-user frameworks that exist. If you have a vision (and the time) you can build it yourself!

Let's build an OCR (optical character recognition) app for Android with Cordova and Tesseract. With this we can leverage any SAPUI5 app with the OCR functionality.

What is Tesseract?

According to its site, Tesseract is probably the most accurate open source OCR engine available and it can read a wide variety of image formats and convert them to text in 60 languages. For complete explanation, please visit https://code.google.com/p/tesseract-ocr/

What you need:

• Android SDK r22 and Android NDK r10
• Tess-two library
• Cordova library

Build Tess-two

• Create a folder "programs" under c:\
• Download Tess-two to c:\programs\tess-two
• Type the following commands;
  

  cd tess two

  ndk-build

  android update project --path c:\programs\tess-two --target android-22

• Once it is done, check if you have the liblept.so and libtess.so under c:\programs\tess-two\libs.

Create Cordova Project

• Under C:\ prompt create a Cordova project:
  cordova create c:\programs\OCR com.enterprisemobility.OCR OCR

• Execute the following commands:
  

  cd OCR

  cordova platform add android

• Download and install the required plugins.
  Use the command cordova plugin add <path_to_Plugin>
  • com.tesseract.phonegap.tesseractPlugin (https://github.com/engzhaowei/Tesseract-phonegap-android-example/tree/master/plugins/com.tesseract.phonegap.tesseractPlugin)
  • cordova-plugin-camera (https://github.com/apache/cordova-plugin-camera)
  • cordova-plugin-file (https://github.com/apache/cordova-plugin-file)
  • cordova-plugin-media (https://github.com/apache/cordova-plugin-media)
  • cordova-plugin-network-information (https://github.com/apache/cordova-plugin-network-information)

• Replace c:\programs\OCR\www folder with this one: https://github.com/ferrygun/OCR/tree/gh-pages/www
  
  

• Download the language file from here and put in the asset folder under c:\programs\OCR\platforms\android\assets.
  
• Copy all files from c:\programs\tess-two\libs to C:\programs\OCR\platforms\android\libs
  

Modify Java Source Files

• MainActivity.java (file location: c:\programs\OCR\platforms\android\src\com\enterprisemobility\OCR\MainActivity.java)
  Add the function to copy the language file from the assets folder to OCRFolder in storage device if it doesn't exists.
  

  if (!(new File(DATA_PATH + "tessdata/" + lang + ".traineddata")).exists()) {
  try {
  AssetManager assetManager = getAssets();
  InputStream in = assetManager.open("tessdata/" + lang + ".traineddata");
  OutputStream out = new FileOutputStream(DATA_PATH
  + "tessdata/" + lang + ".traineddata");
  byte[] buf = new byte[1024];
  int len;
  while ((len = in.read(buf)) > 0) {
  out.write(buf, 0, len);
  }
  in.close();
  out.close();
  Log.v(TAG, "Copied " + lang + " traineddata");
  } catch (IOException e) {
  Log.e(TAG, "Unable to copy " + lang + " traineddata " + e.toString());
  }

  
  
• TesseractPlugin.java (file location:c:\programs\OCR\platforms\android\scr\com\tesseract\phonegap\TesseractPlugin.java)
  onPhotoTaken()to convert a captured image to bitmap and perform the OCR:

  BitmapFactory.Options options = new BitmapFactory.Options();
  options.inSampleSize = 4;
  Bitmap bitmap = BitmapFactory.decodeFile(_path, options);
  ExifInterface exif = new ExifInterface(_path);
  int exifOrientation = exif.getAttributeInt(
  ExifInterface.TAG_ORIENTATION,
  ExifInterface.ORIENTATION_NORMAL);
  Log.v(TAG, "Orient: " + exifOrientation);
  int rotate = 0;
  switch (exifOrientation) {
  case ExifInterface.ORIENTATION_ROTATE_90:
  rotate = 90;
  break;
  case ExifInterface.ORIENTATION_ROTATE_180:
  rotate = 180;
  break;
  case ExifInterface.ORIENTATION_ROTATE_270:
  rotate = 270;
  break;
  }
  Log.v(TAG, "Rotation: " + rotate);
  if (rotate != 0) {
  // Getting width & height of the given image.
  int w = bitmap.getWidth();
  int h = bitmap.getHeight();
  // Setting pre rotate
  Matrix mtx = new Matrix();
  mtx.preRotate(rotate);
  // Rotating Bitmap
  bitmap = Bitmap.createBitmap(bitmap, 0, 0, w, h, mtx, false);
  }
  // Convert to ARGB_8888, required by tess
  bitmap = bitmap.copy(Bitmap.Config.ARGB_8888, true);

  
  Once we have the image in bitmap format, we can perform the OCR and get the result from the recognizedText:
  

  TessBaseAPI baseApi = new TessBaseAPI();
  baseApi.setDebug(true);
  baseApi.init(DATA_PATH, lang);
  baseApi.setImage(bitmap);
  String recognizedText = "";
  recognizedText = baseApi.getUTF8Text();
  baseApi.end();

Calling Tesseract from index.html

Call Tesseract plugin (callNativePlugin) with parameter image URI.

function callNativePlugin(imageURI) {  var tesseractPlugin = cordova  .require('com.tesseract.phonegap.tesseractPlugin.TesseractPlugin');  tesseractPlugin.createEvent(imageURI, nativePluginResultHandler);  }

If success, we get back the result from nativePluginResultHandler:callback and print the result in html page.

function nativePluginResultHandler(callback) {  alert("Result: " + callback);  var result = document.getElementById("result");  result.innerHTML = callback;  }

I have attached the modified java files and index.html.

Build Cordova Project

Run cordova build under C:\programs\OCR\platforms\android. If there is no error, you will get the debug apk for testing:

Reference:

http://gaut.am/making-an-ocr-android-app-using-tesseract/