Hi ,
through this post i would like to share how to create a simple report(like crystal/xcelcius) through SAP UI5 using javascript

Architecture

Scenario : Build a report including a chart and detailed data(which is used to populate the chart)

Step 1 : Create a dataURL of the div

We know in sap ui5  we can create element with id which is registered into framework . We can call them by using sap.ui.getCore().byId() or using document.getElementById() which will return the respective div element .

Now we will try to create a html canvas from a div (this will give additional control). In my case i have used html2canvas js library .

html2canvas([document.getElementById('id')], { //id is the charts id say

                onrendered: function (canvas) {          //once the div is rendered then only process

                    var imageData = canvas.toDataURL();

                    }})

this(imageData ) will give me  the div element's  image in dataURL format which will be used to push the image into a document(say pdf).

Step 2 : Create a pdf using the  third Party tools (jsPDF) to create PDF  .

Now you can push whatever you want into the PDF .

Example : -

var doc = new jsPDF();

        doc.setFont("times", "italic") ;

        doc.rect(5, 5, 200, 280) ;

        doc.setTextColor(0,175,200) ;

        doc.text(90, 15, 'Demo');

        doc.setTextColor(0,0,0) ;

        doc.setFontSize(10) ;

        doc.text(10, 25, 'Demo report');

        doc.addImage(imageData, 'PNG', 25, 75, 150, 80);

You can also add tables and populate data into it (everything in js)

please refer : - JsDoc Reference - jsPDF  for jsPDF syntax

by this this time you will have a PDF created you need to download . So you can add a button and attach the following code in  the controller

downlaod :

            var file = 'demo';

            doc.save(file + '.pdf');

This will download the PDF file with an image and few texts.

Very simple extension of the SAP UI5 Accordion, in order to include methods that will allow you to switch on and off the Drag and Drop (Sortable) and Unique Section / Multiple Sections features of the component.

Here you have a snippex with buttons that will allow you to test it:

http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/#60423

Please, let me know if you have any problems using it, or if you find any bugs!

Thanks and regards,

Andres.

In this and the next Blogs I will show you how you can set up your SAP Web IDE on Hana Cloud. I cut this in 5 parts:

What is...?

• SAP Web Integrated Development Environment (or SAP Web IDE) is a next-generation cloud-based meeting space where multiple project stakeholders can work together from a common web interface - connecting to the same shared repository with virtually no setup required. It includes multiple interactive features that allow you to collaborate with your colleagues and accelerate the development of your HTML5/UI5 applications.
• SAP HANA Cloud Platform is the in-memory Platform-as-a-Service offering from SAP, which enables customers and developers to build, extend, and run applications on SAP HANA in the cloud. With flexible subscription models and optional services for apps, database, and infrastructure, it provides instant access to the full power of SAP HANA.

This is the complete landscape of our model: let’s spend some words about it.

1. SAP Web IDE is in the cloud: it reads the destination we define in the SAP HANA Cloud Cockpit. You may have several destinations for different scopes.
2. After reading a destination, SAP Web IDE looks for the virtual system specified and tries to get the real system by examining the Access Controls specified in the SAP HANA Cloud Connector installed on the user’s local machine.
3. Any Access Control in the SAP HANA Cloud Connector points to one or more resources in the physical external system. This system can be an ABAP system or any other with OData capabilities.

Prerequisites

• You need a valid account on the https://account.hanatrial.ondemand.comportal (you can use your SCN password!).
• You will also need your SCN password. If you don't know it, here you can reset it.
• In the next part you will install the HANA Cloud Connector. This software, at moment, is only available for 64bit platforms, so before you continue with this guide ensure you are in the proper condition. Windows 8.x may be not yet supported. Please check also the prerequisitesof it
• Be sure to have your Internet browser up to date.

Opening SAP Web IDE for the first time

Open SAP HANA Cloud cockpit through the link https://account.hanatrial.ondemand.com

Click on the Cockpit link

Click on Subscriptions at the left site. In the Subsription section you will find one subscription: "sapwebide".

Click on the Application name ("webide") of this subscription.

You should see the application URL related to your SAP Web IDE tool. Copy this link in the clipboard

Paste this link in the browser. Your SAP Web IDE tool will be launched

Entering GIT User Settings

Before SAP Web IDE tool can be used with Git, you need to provide some information related to your name and your email address.

In SAP Web IDE Click on Tools and choosePreferences

Click on Git Settings

Enter your name and your email address and click on Save

SAP Web IDE is ready, but at the moment we cannot connect to a remote systems yet.

In the next part I will show, how you can install and configure the HANA Cloud Connector.

More Web IDE stuff published by Technology RIG

See you

Claudi

In this and the next Blogs I will show you how you can set up your SAP Web IDE on Hana Cloud. I cut this in 5 parts:

part 1	Opening SAP Web IDE for the first time Entering the Git User Settings
part 2this part	Installing and configuring the HANA Cloud Connector
part 3	Connecting to the remote system
part 4	Test the SAP Web IDE
part 5	Deploy your application to the ABAP Repository Test your application at the ABAP system

SAP Web IDE is ready, but we cannot connect to remote systems yet. In this part we will do the job. You need to configure the HANA Cloud Connector in order to connect the destinations, which you are going to define then, with the required systems.

Installing HANA Cloud Connector

At first, check the prerequisites o the HANA Cloud Connector!

Download the HANA Cloud connector from the link. If its possible use the plain version, not the Developer version.

For windows you have also an installer package (the one with the .msi extension). If you use it, you can skip the next step.

Once downloaded, unzip the connector and move the resulting folder in a suitable place on your local machine.

Go ins ide the extracted connector.

Run the file go.sh (or go.bat in case of Windows OS)

When the Connector is started you should see the “osgi>” prompt

Should you need to close the connector, you can simply type “close” in this console and the connector will be closed

Configuring the HANA Cloud Connector

Open browser and go to the link https://localhost:8443.

If you get the following error, click on Advanced. This error comes because you don’t have yet any valid certificate for this localhost server

Click on Proceed to localhost (unsafe)

Enter these credentials and click on Login

• User Name: Administrator
• Password: manage

Choose Master as the installation type since this is your first time you are installing the product and this is the only SAP HANA Cloud Connector in your system. Click on Apply

The first time you log in, you need to change the password. Do it and click on Save

Provide the following initial configuration and click on Apply. Proxy information is only needed if you are in a network that requires a proxy, like for example the SAP network.

*If you don’t know your SCN password, hereyou can reset it!

The landscape is configured. Now we need to add some mappings with the real systems. Click on Access Control

Click on Add… in the Mapping Virtual to Internal System section.

Enter the following information and click on Save.

What you are doing in this step is to assign to a real backend system a virtual name. In this way you can decouple the SAP Web IDE from the backend infrastructure. You can also create a virtual port, which of course can be different from the real one. In this case you will be using the same port. Let’s use as virtual server name “gm6.virtual” on the port 44333; this will be linked to the physical system GM6 with the URL https://ldcigm6.wdf.sap.corp:44333

NOTE: Please be aware that the server used in this document (GM6) is just an example, thus you may not have granted access to it.

Now you need to add all the resources related to the usages you want to have in your SAP Web IDE. These resources are the paths to be concatenated with the server URL in order to have the complete paths to the resources. For example, if you want to configure your SAP Web IDE to consume the OData service at the address https://ldcigm6.wdf.sap.corp:44333/sap/opu/odata and extend some SAP Fiori applications at the address https://ldcigm6.wdf.sap.corp:44333/sap/bc/adt, you just need to add the common part (the server name and the port) in the system mapping and all the different paths in the table of the accessible resources.

This is the list of the available resources that you can add as of today:

In this case let’s add just the following resources: “/sap/opu/odata”, “/sap/bc/adt” and “/sap/bc/ui5_ui5”, because for that server we want to use OData services, extend applications and also execute some SAPUI5 applications.

So click on Add… in the Resources section

Add the first resource and click on Save

Do the same for /sap/bc/adt and for /sap/bc/ui5_ui5 and click on Save

At the end you should have this configuration

Your SAP HANA Cloud connector has been properly configured. The status is green and it’s connected

You have successfully installed and configured your SAP HANA Cloud Connector.

In the next part we will connect to a remote system.

More Web IDE stuff published by Technology RIG

See you

Claudi

In this and the next Blogs I will show you how you can set up your SAP Web IDE on Hana Cloud. I cut this in 5 parts:

part 1	Opening SAP Web IDE for the first time Entering the Git User Settings
part 2	Installing and configuring the HANA Cloud Connector
part 3this part	Connecting to the remote system
part 4	Test the SAP Web IDE
part 5	Deploy your application to the ABAP Repository Test your application at the ABAP system

In the part 2 we have configured our SAP HANA Cloud Connector with a virtual server pointing to a given real server. This was pretty easy to do: now we have to say to our SAP Web IDE to point to the virtual server we have created, mapping to it all the related resources. We are going to setup, in the SAP HANA Cloud Cockpit, a new destination: this destination will give to the SAP Web IDE, the information about where to look for the specified backend.

Since you want to use the paths “/sap/opu/odata”, “/sap/bc/adt” and “/sap/bc/ui5_ui5”, you need to specify the usages odata_abap, dev_abap and ui5_execute_abap according to the table in the previous part.

Connecting remote system

From the HANA Cloud cockpit click on the left side on the link Destinations

Click on New Destination

Enter the following parameters and click on Save

Then click on New Property

Add the following new additional parameters:

When finished click on Save

At the end you should have the following situation

Pay attention to the fact that:

• the WebIDEUsage is a concatenation of some of the usages taken from the table at the previous part: just the ones we want to include in our
  destination
• the URL is not really the address of the real server, but it’s just the name of a virtual server.

If you have reached this point, you might want to know if your system is really working or not. Let’s test it by creating a new SAP Fiori App that will consume the OData services provided by our GM6 backend. See part 4

More Web IDE stuff published by Technology RIG

See you

Claudi

In previous Blogs I've shown you how you can set up your SAP Web IDE on Hana Cloud.

part 1	Opening SAP Web IDE for the first time Entering the Git User Settings
part 2	Installing and configuring the HANA Cloud Connector
part 3	Connecting to the remote system
part 4	Test the SAP Web IDE
part 5this part	Deploy your application to the ABAP Repository Test your application at the ABAP system

We have now configured and tested our SAP Web IDE on HANA Cloud.

In the this part I will show you how you can deploy your application to the ABAP Repository.

Deploy the application to the ABAP Repository

Go back to SAP Web IDE. You may want to close other open tabs and windows.

Select the project, right-click and select Deploy> Deploy to SAPUI5 ABAP Repository

For the Deployment Options, Select GM6 system and if authentication is needed provide user ID/Pwd. Keep Deploy a new application selected and click Next

Enter a name, e.g.  Z_TimeApproval (the name needs to start with Z), enter any description and click Browse. Note:  In Package field, $TMP is defaulted by the system if your system only supports local object creation. Click Next

Click Finish to deploy your application to the SAPUI5 ABAP Repository

Wait for the successful feedback. Click on OK. You have successfully deployed your app to the ABAP repository

Test your application at the ABAP system

Go to SAP Logon and logon to the GM6 system.

Enter the transaction code SE80

Introduction

With this blog I would like to show you how to create an application with SAP Web IDE which runs on smartphones and make use of the camera and the geolocation features provided by the Cordova plugin. With this application we'll be able to capture photos using the phone's camera and to load as well pictures from the phone's gallery. Beside this we also display on the main view of the app, latitude, longitude and altitude information coming from the GPS sensor.

The main view for this application will be built by using the SAP Web IDE Layout Editor.

You can find here the complete source code for this project.

Let's get started!

Prerequisites

• SAP Web IDE 1.7 and later (you can register at SAP HANA Cloud Platform to get your development environment)
• Hybrid Application Toolkit 1.1.0 downloadable from here.

Walkthrough

Create the application on SAP Web IDE

• Open SAP Web IDE
• Choose File --> New --> Project from Template and click on Next
• Select the SAPUI5 Mobile Kapsel App Project and click on Next
• Enter a project name (i.e. "testcamera") and click on Next
• Set the View Type to XML, leave the Namespace empty, enter the view name (i.e. "main") and click on Next
• Click on Finish. You have your application, now let's go in the view folder

Create the main view layout

• Right click on the view xml file (i.e. main.view.xml) and open it in the Layout Editor

• Change the page title to something like "Camera Test"

• Add 5 HBox controls to the view

• In the first HBox control add 2 buttons

• For the first button set the text to "Take a photo" and set the witdth to 150px
• For the second button set the text to "Pick from gallery" and set the witdht to 150px
• Save the file
• Add an image control to the second HBox
• Set the HBox's Justify Content property to Center

• Select the image you just added and change the following properties:

• Save the file
• Add a label and a text controls in the 3rd HBox and repeat this step also for the other two HBox controls

• For each one of the 3 added labels set the text property in the following order: Latitude, Longitude and Altitude
• For each one of the 3 added text controls set the text property to "Calculating..."
• For each one of the 3 added text controls change also the Element ID property and set it to txtLatitude,txtLongitude,txtAltitude, respectively

• Save the file

Create the main view controller

• Double click on the main view controller and delete in the file all the commented code

• Add the following content

sap.ui.controller("view.main", {    oView : null,    onInit : function() {        oView = this.getView();        navigator.geolocation.getCurrentPosition(this.onGeoSuccess, this.onGeoError, {enableHighAccuracy:true});    },    onGeoSuccess : function(position) {        oView.byId("txtLatitude").setText(position.coords.latitude);        oView.byId("txtLongitude").setText(position.coords.longitude);        oView.byId("txtAltitude").setText(position.coords.altitude);    },    onGeoError : function() {        console.log('code: '    + error.code    + '\n' + 'message: ' + error.message + '\n');    },    onPhotoDataSuccess :  function(imageData) {        var myImage = oView.byId("myImage");        myImage.setSrc("data:image/jpeg;base64," + imageData);    },    onPhotoURISuccess : function(imageURI) {        var myImage = oView.byId("myImage");        myImage.setSrc(imageURI);    },    onFail :  function(message) {    console.log("Failed because: " + message);    },    getPhoto : function() {        var oNav = navigator.camera;        oNav.getPicture(this.onPhotoURISuccess, this.onFail, { quality: 50,        destinationType: oNav.DestinationType.FILE_URI,        sourceType: oNav.PictureSourceType.PHOTOLIBRARY });    },    capturePhoto : function() {    var oNav = navigator.camera;    oNav.getPicture(this.onPhotoDataSuccess, this.onFail, { quality: 10, destinationType: oNav.DestinationType.DATA_URL });    }
});

Define the onpress event for the two buttons

• Reopen the view xml file and add the following functions to the press event of the two buttons:
  • for the first button add the function press="capturePhoto"
  • for the second button add the function press="getPhoto"

• Save the file

Deploy and run the app

• Right click on the name of the project and open Project Settings
• Go on Device Configuration
• Set the name of the project, the description, the application ID and choose the platforms which you want to run this app on

• Enable the Cordova plugins Geolocation, Camera and Access File and save the configuration

• Right click on the name of the project and choose Deploy --> Deploy to local Hybrid Toolkit
• Once deployed, right click on the index.html file and choose Run --> Run on --> iOS (Android) device.
• NOTE: Pay attention that if you want to use the emulator for testing, only the Android emulator can be used, because the iOS Simulator doesn't support camera emulation. Of course, for the Android emulator, camera emulation needs to be enabled in the AVD Manager. Geo-location only works on a real device

This is the final result

That's all folks!

Introduction

When experiencing destination connectivity problems, please follow the noted steps and include the results in your post.

Using Google Chrome clear the cache of your browser and reopen it.  Open Web IDE and prior to replicating your issue open the javascript console, if you are unsure about how to do, this steps can be found here.

Using one of the templates, File -> New ->  Project From Template, provide the necessary information up to the point of where you select your destination.  You may want to clear the console prior to selecting the destination, check the link for the steps.  After selecting the destination you should see an error displayed in the console.  Right click on the link in the console and choose Open link in New Tab.

At this point you should see an error within the browser window.  Provide this, your destination configuration and your HANA Cloud Connector configuration.

Common Errors...

Error: Cannot open tunnel with id account:///<USER ID>trial

Cause: Most likely the HANA Cloud connected is not connected or not running.

Error: Unable to open connection to backend system

Cause: Check the Internal Host name in the Cloud Connector

Error: Connection reset by peer

Cause: Check the protocol of the backend system in the Cloud Connector

Error: Access denied to resource /sap/opu/odata/IWFND/CATALOGSERVICE/$metadata on system...

Cause: Check the URL Path or Access Policy of the "Resources Accessible" of the connection in the Cloud Connector

Error: HTTP Status 500 - Could not connect to remote host

Cause: The destination url can not be accessed, maybe a typo or an incorrect Proxy Type

Error: Astaro Security Gateway....

Cause: Check the Proxy Type of the destination

An Admission

I have to admit it: In the last 10 years of my professional career as an developer and architect, I did not care a lot about user experience. I really like a nice UI and love to experience a good designed screen flow, but my mantra has been: functionality first. Perhaps this is just somehow typical for people like me who raised up with lots of clumsy command line interfaces and prefer to build great data structures and algorithms to designing fancy and shiny UIs.

But today my view to this has totally changed and I want to share the lesson that turned me around with you here.

The magical Seven-Step

The change started about four months ago when we thought about how to make life better for the users of our inhouse application. Just like everytime, we thought about new functionalty and enormous gains in performance. Typical developer stuff so to speak. Then one of my colleagues had a meeting with managers and users to learn about their biggest pain points and what they would love to change. Surprisingly, the top pain point was something they called "the magical Seven-Step".

They explained to us, that for every interaction with a customer on telephone or in a shop, they need to get an overview about this person and booked products and this process took seven "classic" transactions to step over. So just for knowing where the customer lives, which products are in use, which complaints are still open or how the user is paying its bills, seven transactions had to called one by one. You can see some examples of them in the screenshots below.

Ugly, aren't they? And to give you an impression on how often this seven steps are excuted: These transactions are call over 3.7 Mio times per month. Highly trained service desk personal is able to complete the magical seven-step in less then 30s. Now imagine: You call a hotline and want to talk about the correctness of the lastest bill and after getting through to a human being, you have to wait for another 30s before the real customer interaction could start. I think you would not be amused at all.

But on the other side, the service desk person has to click through these transactions under high pressure and keep in mind what was presented. This is some kind of brain jogging you really do not want to do the whole day. To make it even a bit worse, the search for the right contract or customer data is executed in an external third-party tool, so you even have to switch between two separated applications with totally differenty UIs.

At first I could not believe the story, so I tried it out for myself. And yes, this was a really PITA way to do daily work. So we needed to think about ways to do it better.

We start sessions with users to discover their possibly hidden needs and after a few iterations we had enough information gathered together to build a first solution, that should really impress users and managers alike. Therefore classical Dynpros did not make it as the underlying technology. New UIs should look a little bit sexy today, also at work. Coincidentally we had just upgraded to a new ABAP stack (7.40 SP7) so we had a new UI weapon at hand: SAP UI5.

Without much of knowledge or experience in UI5, a very small team of three developers and architects started to build a first prototype that should make life easier for the users. After two weeks, we had something ready to show and so we did. Success was overwhelming. The management of LoB, that did not had the confidence in the IT guys to come up with a great solution, wanted to have this in production ASAP and so we could build what is now called "OneClick":

OneClick explained

In the new world, the external search tool is simply integrated into the UI (see the long text entry field on top), so there is no need to switch applications anymore. When the correct customer is found and selected with one click, all of the needed information is loaded asynchronously in just a few seconds. All products and contracts, past and present, are shown as well as every contact or document of the customer. Detail information is presented in popups if the users needs it and does not clutter the screen with unimportant data. And if more information is needed or actions are required, the user can jump to the web UI version of the well-known classic dynpros.

So far, the renewal of the unattractive Seven-Step is a huge success. Besides delivering direct value to the users, it also gave our development team a good chance to get their hands a little dirty with a new technology. And it closed the gap of trust between IT and LoB at least a bit. A win-win-win-situation!

Conclusion

Personally, this little story told me how much a great user experience can matter and what potential lies there hidden in our old-school dynpros. And if UX is important to our users, it should also be important to us. This is my new mantra.

In this example, we not just did a redesin of the user interface or copied a screen to a new technology. Because we talked to the users that had to work daily with the sh*t we produced a long time ago, we learned a lot about their work and how this could be enhanced. In the end, we build a whole new UX based on UI5 and improved their work life a lot.

Looking back, I am sure that this was the right way to go. Talking to users, watching them work with the old UX and working with them together to build a new one felt just right. For the next time I would not change a bit, but follow a few simple rules:

• Dare and win! Search for a real pain point where today's way of doing things is causing a real headache. This gives you enough management attention to work on it because the effect of improvement is big enough.
• Always talk to real end users of the application you are working. Even better: Work with them together for some days to get a feeling for being a service desk employee, for example. Never trust management in what would be best for the users. Management can not know it because their working days are totally different.
• Start with a small, but somehow working prototype and show it to users to get their feedback early! It is no problem if the first versions use a lot of mockups that need to be replaced later on anyway. But perhaps you discover functionality that is not needed and could be removed to concentrate on the most important things.
• Do not build a feature that only one person requests. Most of the time it will turn out to a not-so-needed thing, but the time to build it is wasted.
• Think about UX, not just UI!

Hope you enjoyed the small story about UX and feel free to comment or ask questions about it.

Hi folks,

This blog mainly explains about navigating and parameter passing between two views.

Below is the Project directory.

Steps to follow

1. Create an SAPUI5 Application Project.

INDEX.HTML

2. Create a JS file named Component.js and place it inside WebContent folder.

(It mainly comprises of four steps :Configuration, Initialization,Access and view ownership)

jQuery.sap.declare("sap.ui.demo.Component");
sap.ui.core.UIComponent.extend("sap.ui.demo.Component", {  metadata : {  routing : {  config : {  viewType : "JS",  viewPath : "routingdemo",  targetControl : "NavContainer",  clearTarget : false,  },  routes : [  {  pattern : "", // which appears in URL, while you navigate  name : "first",     // Name that is used in navTo method  view : "FirstPage",   // this is the target view that you are navigating to  viewPath : "routingdemo", // path of the target view  targetAggregation : "pages" // this defines whether the target view is a [pages/content/masterpages/detailpages]  },
 {  pattern : "InSecondPage",  name : "second",  view : "SecondPage",  viewPath : "routingdemo",  targetAggregation : "pages"  },
 ]  }  },
 init : function () {
 // 1. some very generic requires  jQuery.sap.require("sap.m.routing.RouteMatchedHandler");  jQuery.sap.require("sap.ui.demo.MyRouter");  // 2. call overridden init (calls createContent)  sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
// 3a. monkey patch the router  var router = this.getRouter();  router.myNavBack = sap.ui.demo.MyRouter.myNavBack;  // 4. initialize the router  this.routeHandler = new sap.m.routing.RouteMatchedHandler(router);  router.initialize();  },  destroy : function () {  if (this.routeHandler) {  this.routeHandler.destroy();  }  // call overridden destroy  sap.ui.core.UIComponent.prototype.destroy.apply(this, arguments);  },  createContent : function () {  // create root view  var oView = sap.ui.view({  id : "app",  viewName : "routingdemo.App",  type : "JS",  });  return oView;  }
});

3. MyRouter.js (Custom Router)

jQuery.sap.declare("sap.ui.demo.MyRouter");
sap.ui.demo.MyRouter = {  /*  * to monkey patch the router with the mobile nav back handling  */  myNavBack : function (route, data) {  var history = sap.ui.core.routing.History.getInstance();  var url = this.getURL(route, data);  var direction = history.getDirection(url);  if ("Backwards" === direction) {  window.history.go(-1);  } else {  var replace = true; // otherwise we go backwards with a forward history  this.navTo(route, data, replace);  }  },
};

4. Create an App View .

App.view.js ( In app.view we usually have a sap.m.App or sap.m.SplitApp depending upon the requirement)

sap.ui.jsview("routingdemo.App", {  /** Specifies the Controller belonging to this View.  * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.  * @memberOf routingdemo.App  */  getControllerName : function() {  return "routingdemo.App";  },  /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.  * Since the Controller is given to this method, its event handlers can be attached right away.  * @memberOf routingdemo.App  */  createContent : function(oController) {  this.setDisplayBlock(true);  return new sap.m.App("NavContainer");  }
});

4. Create FirstPage View

a) FirstPage.view.js  Basic page which accepts two inputs( Name and password) on click of a button, we call a navigate function , which is wriiten in the controller part.

sap.ui.jsview("routingdemo.FirstPage", {  getControllerName : function() {  return "routingdemo.FirstPage";  },  createContent : function(oController) {  var flexbox=new sap.m.FlexBox({direction:"Column"});  flexbox.addItem( new sap.m.Input("name",{placeholder:"Enter UserName"}));  flexbox.addItem( new sap.m.Input("password",{placeholder:"Enter Password"}));  flexbox.addItem( new sap.m.Button('login',{text:"Log In",   press:function()   {   oController.navigate();      }    })  );  flexbox.setAlignItems("Center");  flexbox.setJustifyContent("Center");                       var page1 =new sap.m.Page({       title: "Routing Demo",       content:flexbox,       });                 return page1;
}
});

b) FirstPage.Controller.js

(In controller we get the instance of the router in the init method and use it to navigate to the specific page. we pass the parameters between the views by using an object and binding to a modelname. We use navTo method to navigate)

sap.ui.controller("routingdemo.FirstPage", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf routingdemo.FirstPage
*/  onInit: function()  {    this.router = sap.ui.core.UIComponent.getRouterFor(this);    },        navigate : function()      {   var json = {};     json.myname = sap.ui.getCore().byId("name").getValue();     json.mypass = sap.ui.getCore().byId("password").getValue();     sap.ui.getCore().setModel(json, "modelName");     this.router.navTo("second");    }
});

5. Create SecondPage View

a) SecondPage.View.js ( We can get the object in the model and use it in secondpage view ie object.myname )  object is userdefined.

sap.ui.jsview("routingdemo.SecondPage", {  getControllerName : function() {  return "routingdemo.SecondPage";  },  createContent : function(oController) {  var object = sap.ui.getCore().getModel("modelName");  var flexbox=new sap.m.FlexBox({direction:"Column"});  flexbox.addItem( new sap.m.Text({text : object.myname}));  flexbox.addItem( new sap.m.Text({text : object.mypass}));  flexbox.setAlignItems("Center");        flexbox.setJustifyContent("Center");                             var page2 =new sap.m.Page({                                                      content:flexbox,                            showNavButton: true,                            navButtonPress: function(){ oController.handleNavBack(); },                                  });                       return page2;      
}
});

b) SecondPage.controller.js ( we navigate back by using myNavBack method ,  which we have defined in our MyRouter.js , which is a custom Router)

sap.ui.controller("routingdemo.SecondPage", {  onInit: function() {  this.router = sap.ui.core.UIComponent.getRouterFor(this);  },  handleNavBack : function(){  this.router.myNavBack("first");
}
});

And the final output .

You can see the change in the URL,(InsecondPage). You can navigate Back by clicking on the back icon.

Hope this Blog helps.

Regards

Indrajith

Hello,

     Navigation and routing turn out to be the important aspects in building a SAPUI5 application. It is a prescribe standards laid for code re-usability and better understanding of the code.

Below you could find out the simple SAPUI5 code,

In index.html

• Define the component Container
• Specify the required libraries
• Specify the required roots, this would be utilised through out the project, that is sap.ui.demo.

In Component.js

Component turn out to be the important aspect of the application, it behaves as a central hub for accessing the data's in the json model and util data etc.,

Routing is defined with their specific views and their desired patterns within the metadata.

On running of this function, an init method is called, where in we instantiate the router and the app, in which the router calls its constructor and its matched handler present inside the MyRouter.

inside the MyRouter.js

Its an important part which is meant for routing the data in the url and to move on to the next view..

It contains the necessary logic  for showNavButton where in it is called back to its previous page along with the change in url.

In messageBundle.properties,

• This comes under i18n folder,
• This properties contains the necessary titles required for the definition of any shell or master or detail.

In model.json file

• It is the file which contains the data required to be displayed in the UI.
• This file is present in the model folder.
• This basically acts as the database.

and so on.....................................

util contains the necessary details needs to access the data, it can be used for functionalities like date formatter etc.,

Inside view folder,

Here we define the necessary views and controllers which is to be displayed.

Inside view folder,

• App view.js file contains the file which is called by the component.js
• When ever we start running the application a view is called and its corresponding views whether its a master or a detail is displayed inside the app.
• As we can see the "i18n>ShellTitle", Its the alias name defined inside the component.js,  which in-turn calls the messageBundle.properties file and displays the necessary title defined inside the messageBundle.

Inside master.view.js       this contains the necessary information displayed in the master              

Inside Master.controller.js file,

• When ever the master page is called in the app it calls router, loads the necessary details required, and it gets displayed in the view.
• On click of some particular list, the router along with the details will be passed to the component through "this.router.navTo" method. (in line 37) along with the parameters which is to be displayed in the url.

The resultant execution would be as shown below,

Where in the necessary details is displayed in the master page which is getting loaded from the json. The detail page is called the Empty.view.js which doesn't contains data hence its blank.

On click of any particular item in the masters page, moves on to the detail page.

Inside Detail.view.js

The detail view will display the necessary details which is clicked by the master view.

Inside Detail.controller.js..

• When we click the list in the master view it will be routed to

on click in the master page....

On Click of particular value inside the list in the master view, it will be routed to the Detail.view.js along with the change in the url pattern as shown above.

The pattern for the url is specified in the component.js file. we are specifically passing the contextid through navTo method from the master page.

Inside Empty.view.js

This page is displayed along with the master page.

Inside lineItem.view.js file..

On click of the particular Table in the detail page it is routed to this lineItem page.

                                                                                                                   inside LineItem.controller.js

Further on click of the table present in the Detail.view.js it will be routed to the LineItem page along with the change in the url pattern as shown.

There is a nav back button written in this page where in on click of that particular button it will be routed to its previous page that is Detail page, with the change in the url. It is achieved through "oRouter.myNavBack" written inside the handleNavback event.(in Line 19 of LineItem.controller.js).

Hope this would be a useful blog who is new to sapui5.

Thanks and Regards,

Nagarjun NM

Large web applications usually consist of multiple files. Every single resource has to be fetched from the server which comes with overhead and latency.

During development this is usually not a problem. It also allows only reloading files that have been changed instead of bundling all files after only one line was changed.

However when running an app in production the performance is important for a great user experience. A bundling process does also not create too much overhead as it won't be done every minute.

There are some simple techniques to boost the loading performance of OpenUI5 applications which do not even require you to touch app code.

All this does of course also apply for SAPUI5 and can be used by SAP customers and partners to optimize apps locally and e.g. upload them to a SAP NetWeaver system.

What can be done?

Reducing HTTP requests

Reducing the number of requests to the server is often the most effective way to boost performance.

OpenUI5 has already a built-in concept called preload. Usually when a module gets required and wasn't loaded before, a XHR will be sent to load that specific file. The preload allows loading multiple modules bundled into a single file. This can currently be done on library or component level.

If a module gets required after the bundled preload file was loaded, it can be executed directly, because the module content is already available. This can speed up the initial loading process especially if there is a high latency (mobile network / long distance to server).

Reducing payload

The payload size can be reduced by removing white-space and line-breaks or even rename variables or remove/rewrite code. This can reduce the file size a lot which not only speeds up loading those files but also reduces the amount of traffic for you and your users (bandwidth can be very limited in mobile scenarios).

Example

Let's assume our app's component has the following files/folders:

• controller
  • BaseController.js
  • Detail.controller.js
  • LineItem.controller.js
  • ListSelector.js
  • Master.controller.js
• model
  • AppModel.js
  • Device.js
  • formatter.js
  • grouper.js
• view
  • App.view.xml
  • Detail.view.xml
  • LineItem.view.xml
  • Master.view.xml
  • NotFound.view.xml
  • ViewSettingsDialog.fragment.xml
• Component.js

In total

• 10 Javascript files
• 6 XML files

If we would just load the component, all files are loaded and this would end up into 16 requests, just for our component.

(As you can see, a "Component-preload.js" file will be loaded first, but currently it's not there and OpenUI5 will fall back to the "Component.js" file)

What if we could load all the files in 1 request and also reduce the overall file size?

Note: This does only include JavaScript files and views. Locale specific files (i18n) or custom CSS would create additional requests.

You can use the grunt-openui5plugin for this. Grunt is a task-runner based onnode.js. See here for more information and help about grunt in general.

openui5_preload task

This task can be configured to bundle and minimize all relevant files of your component.

For our example app, it could look like this:

grunt.initConfig({    openui5_preload: {        component: {            options: {                resources: {                    cwd: 'webapp', // path to app root folder                    src: [ // include/exclude patterns for files                        '**/*.js', // in this example, we do only have js/xml files                        '**/*.xml' // but this can be used to e.g. exclude language-specific files                    ],                    prefix: 'my/app' // namespace prefix (in case the namespace is not already in folder structure like sap/ui/core/**)                },                dest: 'dist' // destination for the Component-preload.js file            },            components: 'my/app' // specify which component(s) should be processed        }    }
});

When we now load the component, you can see that only the Component-preload.js will be loaded which contains all the modules of our app.

(All other files in the screenshot are part of OpenUI5 itself, not the app)

Further information

A detailed documentation of the grunt task can be found on GitHub:

SAP/grunt-openui5 · GitHub

There is also a very small sample app project that demonstrates the usage of bower & grunt with OpenUI5:

SAP/openui5-sample-app · GitHub

Best regards,

Matthias

Twitter: @matthiaso

GitHub: matz3

Introduction

In some cases you may want to create a Fiori app that can navigate to another Fiori app. In Web IDE, a single Fiori app can be tested by selecting the app's Component.js and then choosing the menu option Run -> Run in SAP Fiori Launchpad Sandbox.  When wanting to test the navigation from one app to another, it is required that both apps are registered in the Launchpad.  In order to execute this scenario within Web IDE we will first need to perform the following steps:

• Create two Fiori applications
• Create a Fiori Sandbox Project

Creating the Application

In this example we will use the ES1 system.  For access and configuration information visit the blog How to configure and external GW system with SAP Web IDE.  After validating your configuration, create two applications using the "Fiori Master Detail Application" template. Enter the following values...

The Material Application

Project Name: materials

Odata Service: MATERIAL

The SalesOrder Application

Project Name: salesorders

Odata Service: SALESORDERXX

After the projects have been created verify that both are working correctly by selecting their Component.js and choosing the menu option Run -> Run in SAP Fiori Launchpad Sandbox.

Creating the Fiori Launchpad Sandbox App

Create an empty project folder by choosing the menu option File -> New -> Folder and provide a name, for example FLPSandbox.  Within this folder create the files neo-app.json and fioriSandboxConfig.json. The contents of the neo-app.json should be as follows.  Make sure to update the description and more importantly the first entries name, shown on line 7, to match the name of your destination if it differs from ES1.

{  "routes":[      {        "path":"/sap/opu/odata",        "target":{            "type":"destination",            "name":"ES1",            "entryPath":"/sap/opu/odata"        },        "description":"ES1"      },{        "path":"/orion",        "target":{            "type":"service",            "name":"orion"        },        "description":"Orion Service"      },{        "path":"/resources",        "target":{            "type":"service",            "name":"sapui5",            "entryPath":"/resources"        },        "description":"SAPUI5 Resources"      },{        "path":"/test-resources",        "target":{            "type":"service",            "name":"sapui5",            "entryPath":"/test-resources"        },        "description":"SAPUI5 Test Resources"      }  ]
}

The contents of the fioriSandboxConfig.json should be as follows, make sure to replace the values for the tenant, or the account name, and user id.  You can find the value for the account name in HCP by selecting the Account option in the HCP Cockpit.  On the trial system the value would be "<userid>trial".

{    "applications": {        "materials-display": {            "additionalInformation": "SAPUI5.Component=com.sample.materials",            "applicationType": "URL",            "url": "/orion/file/<TENANT>$<USER-ID>-OrionContent/materials",            "description": "Materials App"        },        "salesorders-display": {            "additionalInformation": "SAPUI5.Component=com.sample.salesorders",            "applicationType": "URL",            "url": "/orion/file/<TENANT>$<USER-ID>-OrionContent/salesorder",            "description": "Sales Order App"        }    }
}

Once the files have been saved, select the fioriLaunchpadSandbox.json file within the FLPSandbox project and then choose the menu option Run -> Run in SAP Fiori Launchpad Sandbox.  Choose each app and verify that it opens correctly in the Sandbox environment.

In the next blog we will implement the necessary code to process the navigation between the apps.

Introduction

In the first part of this blog we created two Fiori applications and also created a Fiori Launchpad Sandbox project were we configured it to display the two Fiori applications.  In this part we will add the code necessary to implement the app to app navigation between the two applications.  We can break this task into three parts

• Create a list containing the Sales Order Items in the salesorders app
• Implement the code to navigate from the sales order app to the material app
• Implement the code in the material app to navigate to the selected sales order item material

Creating the Sales Order Items list

In the salesorders project open the file view/Detail.view.xml.  Towards the bottom of the file you will find the declaration for the footer, above this we will add the code to create the listing of the sales order items.  Add the following code between the </content> and <footer id="detailFooter"> as shown.

        </content>        <List items="{SOItems}" headerText="Order Items">              <items>                   <StandardListItem title="{Item}" type="Active" press="goToMaterialDetail"                            info="{Material}"                            description="{Description}">                   </StandardListItem>               </items>     </List>        <footer            id="detailFooter">          ...

After completing the code entry test the app to verify no issues exist.  The result should resemble..

Implementing the Code to Navigate to the Material app

Within the List we defined the function goToMaterialDetail to handle the press event.  To implement the code to process this event, open the file view/Detail.controller.js in the salesorder application and add the following, making sure to place a comma at the appropriate place, either before or after the function, dependent on where you place it in your controller.

goToMaterialDetail: function(oEvent){      if(sap.ushell && sap.ushell.Container && sap.ushell.Container.getService){            var oCrossAppNavigator = sap.ushell.Container.getService("CrossApplicationNavigation");            oCrossAppNavigator.toExternal({                target : { semanticObject : "materials", action : "display" },                params : {                          "material" : oEvent.getSource().getInfo(),                          "description": oEvent.getSource().getDescription()                }            });        }else{            alert("App to app navigation is not supported in this mode");        }  }

The key parts in this function are the values of the semanticObject and action, which must match those you defined in the fioriSandboxConfig.json and the params which are what will be received by the target application.  Once completed, select the fioriSandboxConfig.json of the FLPSandbox project and choose the menu option Run -> Run in SAP Fiori Launchpad Sandbox.  Choose the Sales Order App and then choose an Order Item from the list, this should navigate you to the material application.

Implementing the Code in the Material app to Handle the Navigation

To be able to handle the incoming parameters, the binding of the list needs to be removed from the view and handled in the controller.  In the materials app open view/Master.view.xml and search for the string items="{/MaterialCollection}" and remove this from the list definition and save the file.  Open the file view/Master.controller.js, within this file we will define two functions, bindList which is defined as...

bindList:function () {       var oTemplate, aFilters, oList;       aFilters = this.getParamFilters();       oList = this.getView().byId("list");       oTemplate = oList.getItems()[0].clone();       oList.bindAggregation("items", {            path:'/MaterialCollection',            template:oTemplate,            filters:aFilters,       });  },

The second function will be called getParamFilters and defined as...

getParamFilters: function(){  var sComponentId, oMyComponent, aStartupParameters;  sComponentId = sap.ui.core.Component.getOwnerIdFor(this.getView());  oMyComponent = sap.ui.component(sComponentId);  if (oMyComponent && oMyComponent.getComponentData()) {       aStartupParameters = oMyComponent.getComponentData().startupParameters;       if (aStartupParameters) {            if (aStartupParameters.material && aStartupParameters.material[0] && aStartupParameters.description && aStartupParameters.description[0]) {                 var material = aStartupParameters.material[0];                 var description = aStartupParameters.description[0];                 var filters = [ new sap.ui.model.Filter("MaterialNumber", sap.ui.model.FilterOperator.EQ, material.toString())];                 this.getView().byId("searchField").setValue(description);            }            return filters;       }  }  return null;  },

The bindList function will call the getParamFilters function to check if any values have been sent to the application.  If so, then we will set the value of the search field to the material description and create a filter with the material number.  Otherwise the function will just return a null value.  Using this value, the bindList function will bind the items aggregation to the MaterialCollection with the corresponding filter and template values.  Place the call to the bindList function within the onInit function of the controller.

onInit : function() {     ...     ...     ...     oEventBus.subscribe("Detail", "Changed", this.onDetailChanged, this);     oEventBus.subscribe("Detail", "NotFound", this.onNotFound, this);     this.bindList();  },

In addition add the following line of code in the onSearch function to clear the app to app filter

onSearch : function() {     ...     ...     ...     //add this line to clear the app to app application filter     this.getView().byId("list").getBinding("items").aApplicationFilters = [];          // Update list binding     this.getView().byId("list").getBinding("items").filter(filters);     ...     ...

Conclusion

At this point your application should be complete.  After making sure all of the files have been saved, select the fioriLaunchpadSandbox.json of the FLPSandbox project and then choose the menu option Run -> Run in SAP Fiori Launchpad Sandbox.  Choose the Sales Order App and then choose an Order Item from the list, which should navigate you to the material application.  Verify that the master list has been filtered correctly and that the filter can be removed without issue.

SAPUI5/OpenUI5 is a great technology for creating good looking, responsive web applications. There is a huge number of controls available, so really beautiful applications can be composed. The total user experience, on the other hand, is not just the look & feel. Now I will focus on a very important aspect of user experience: performance.

Performance has, of course, many aspects. Is the back end processing fast enough? Can you maybe optimize the logic? Sometimes complete seconds can be saved by such improvements. Is the right amount of data exposed by Gateway, in other words, is your OData not too extensive? When in the application work flow do you request data from the back end? Do you use OData or json models? Network, connectivity and such infrastructure aspects also play a role.

With SAPUI5/OpenUI5 web applications are created. For a mobile experience I really like the approach of creating hybrid apps. For example by SAP Mobile Platform via Kapsel. Creating hybrid apps based on the web application has many benefits, but some companies just would like to keep the applications as responsive web.

I am not talking about simple applications with one or two screens, few OData calls, that’s it. Performance is becoming a topic for larger applications, e.g. with dozens of views. Each view has a controller, plus the additional files (internalization, component.js, css, mimes, util files, at least one html file), so we end up with dozens, maybe even 100+ files. These files have to “travel” from the server to the browser when the application is loaded. With fast internet connection, with fast devices, it can be still acceptable, but once you try it on a less powerful mobile device with bad internet connection, the experience is terrible.

There is a huge opportunity to improve performance regarding the dozens of files. Two things can be done: reduce the number of them, reduce the size of them.

Matthias Osswald (SAP) has just published a blog titled “Optimizing OpenUI5/SAPUI5 Apps”, which explains the solution in detail. It is based on grunt, so basically once the development of the application has finished, a grunt script can be executed (after proper configuration) and it will compress the files and combine the js file and views into one file. For large applications several seconds of load time can be saved with this approach. Give it a try, I was very pleased with the result.

In this Blog I will start off by creating a new Fiori Starter Application based on the Sales Order Tracking service provided by the SAP Gateway system.

We will then enhance the detail view by using the Layout Editor.

In part 2 I will show you how you can run the app with mock data and how you can deploy the application to SAP HANA Cloud.

For more details how you can set up your SAP Web IDE environment on HANA Cloud Connector look here. There you can find also informations about the prerequisites.

Creating a new project

The first step is about creating a new project. In this part we will simply create a project on the local workspace.

Start from creating a new project File> New> Project from Template

We will now select the application template that will at the end generate the code for our starter Fiori application. The Starter Fiori Application template will generate a master/detail list application accessing an OData Service. In this guide we will access a SAP Gateway system for the OData Service of sales orders.

At wizard step #1 (Template Selection), select the SAP Fiori Application template catalog. You could also select All Categories, and you would get all available templates displayed on the screen.

Select the tile FIori Master Detail Application if it is not already selected automatically. You can see if the template is selected by the upper right corner. Then click on Next

The wizard to create a new project displays the first step on Basic Information. At wizard step #2 (Basic Information), define the Project Name: MySalesOrderTracking and click on Next button

At wizard step #3 (Data Connection), click on ServiceCatalog to get all the available OData Services on the SAP Gateway system.

Open the drop down list and select the Gateway system.

Ask your system admin for your specific credentials. The list of OData Services is being fetched.

NOTE: Please be aware that the server used in this blog (GM6) is just an example, thus you may not have granted access to it.

Scroll down the list to see all the OData Services available on the Gateway system selected.

Search for "tracking" to show search and filter capabilities

Select the relevant OData Service, SRA018_SO_TRACKING_SRVE [Ext]

Expand the OData Service and show defined data collections for this OData Service.

Click Next

At wizard step #4 (Template Customization), enter the mapping data for the Master Section

Scroll down to the end to see the fields for the Detail Section.
Enter the mapping data for the Detail Section

Press Next

Click Finish. This will generate all the files in your workspace.

Open the new project folder, select the file index.html of the application and click on the icon Run. Ask your system admin for your specific credentials.

The Application Preview is started, the application is loading and data is fetched from the OData Service

Show the app in the different screen sizes...Select the size Small and change the orientation...

Enhance the application using the Layout Editor

Close the preview.

In the project, open the folder view if not already expanded.

Select the file Detail.view.xml and right-click. Select Open with> Layout Editor and WYSIWYG mode of the view is displayed.

Notice that when clicking on the different controls in the view the properties of the control are shown.

On the left side, expand some down-arrows to see the different controls that are available.

See that a control can be deleted from the UI. Click on the icon on the bottom bar and delete (<del>)

Click on {i18n>detailText and delete (<del>)

Expand the Display control section

Select the Object Attribute and drag it to the UI at the postion above the information icon.

Open the Outline pane (far right dark grey vertical bar, last icon). If you have a small display, you may arrange by minimizing for example the control patterns.

Make sure that the Object Number is selected, otherwise click on it. In the Outline pane on the right, the sap.m.ObjectAttribute is highlighted

Expand it and expand again the underlying properties. Select the property text, now the Data is shown instead of the control Properties

Scroll down the data under SalesOrders and select SalesOrdersNumber

Now we have SalesOrderNumber twice. Select the Object Header and open the properties on the Outline pane.

Select the property title and change the data to CustomerName.

Click on icon Save or File > Save

Run the application and show the resulting app: Select the file index.html of the application and click on the icon Run

The Application Preview is started, the application is loading and data is fetched from the OData Service. Check that the total amount is displayed in
the detail view as designed.

In the next part I will show you how you can run the app with mock data and how you can deploy the application to SAP HANA Cloud.

More Web IDE stuff published by Technology RIG

See you

Claudi

In the last post I've shown you how you can create a new Fiori Starter Application based on the Sales Order Tracking service provided by the SAP Gateway system. And how you can enhance the detail view by using the Layout Editor.

In this part I will show you how you can run the app with mock data and how you can deploy the application to SAP HANA Cloud.

Run the application with mock data

You may close open tabs and select the file index.html of the application. Run the app with mock data this time. (Run> Run with Mock Data)

Check that data has been generated (sometimes it needs a little bit time!)

To have more meaningful data we can create a JSON file with predefined data. Go back to your project view and expand the folder model.

Select the file metadata.xml the was generated while defining the OData Service connection previously. Righ-click the file and select Edit Mock Data

The popup window Edit Mock Data is displayed. Select the entity set SalesOrders as this is the data we are displaying in our app.

You could enter your data row by row. To simplify this task we will let SAP Web IDE generate random data for us. Click on Generate Random Data

You can overwrite some data fields. Just click in the text field and write your data. In our example, we have replaced the SALESORDERNUMBER in the first two by 12345 and 56789 respectively.

When you are finished replacing the data, press OK.

Check that the file SalesOrder.json has been generated in the model folder and check the file content.

Now we need to tell the system that it should use the JSON file when running the app with mock data. The configuration is done in the project settings.
Right-click the project main folder and select Project Settings

Select Mock Data. In the Mock Data Source section select JSON files. Then click Save

Acknowledge the information that the project settings have been saved by pressing OK

You may close the project settings pane by pressing Close. You may also close the SalesOrder.json file

Select the index.html file and run the application again (Run> Run with Mock Data)

Check that the data from the json file is displayed

Deploy the application to the cloud

Right-click your main project name and select Deploy and then Deploy to SAP HANA Cloud

Provide your password (that is your SCN password). Then press Deploy.

(If you don't know your SCN password, here you can reset it.)

Upon success, press OK

Logon to your SAP HANA Cloud Platform Cockpit account and select the content HTML5 Applications.
Check that your new application is listed. Click on your application name.

Notice that your application is deployed but not yet activated. In the next steps, we will activate the application in the Cockpit.

For this we need first to create a version of the last commit. Select under Content: Development and then click on the icon Create Version of the last committed line (that will be at the top of the list).

Define a new version number, e.g. 1.0, then press Add

Check that the version number has been assigned.

Now we need to activate that version. Select under Content: Version Management, then press on the activate icon of your defined version.

Confirm that you want to start your application by pressing Yes

Check that the application is activated, you should see a check in “is Active”. Now we want to launch the application by clicking on the link provided.

Provide your credentials of the OData Service.

You should see your app running. DONE!

More Web IDE stuff published by Technology RIG

See you

Claudi

Hello All,

This blog Describes how to load Data from a Local JSON file  with an AJAX request and render A VIZ chart using that Data.

for more information about VIZ charts UI5 CVOM HTML5 Charts - sap.viz.ui5 , Table - SAPUI5 Demo Kit

Development Tools required  for this can be downloaded from SAP Development Tools for Eclipse

Create A project can be of any type (sap.ui.commons or sap.m)

• create a sap.ui.commons project with an initial view blog (JSON view)
• create a folder for the JSON file as show below
• add sap.viz library in your index.html

Open the blog view and copy paste the below lines of code.

createContent : function(oController) {

//Data set Creation

  var dataset = new sap.viz.ui5.data.FlattenedDataset({

             dimensions : [ {

               axis : 1,

               name : 'Products',

               value : "{Product}"

             } ],

             measures : [

                          {

               name : 'Litre',

               value : '{Sale}'

             }

             ],

             data : {

               path : "/d/Products"

             }

           });

           var column2 = new sap.viz.ui5.Column({

             id : "column2",

             width : "490px",

             height : "292px",

             plotArea : {

              'colorPalette' : ['#B22400']

             },

             title : {

               visible : true,

               text : 'Daily Production'

             },

             dataset : dataset

           });

       // JSON Model Creation   

       var AuModel = new sap.ui.model.json.JSONModel();

          // AJAX call

          var url ="/blog_VIZ/jsonFiles/dailyProductin.json";

     $.ajax({

               type   :  "GET",

               url      :   url,

               contentType : "application/json",

               dataType      : "json",

                data            :  {},

                     success: function(data){

                        AuModel.setData(data);

                          },

                      error:function(jqXHR,textStatus,errorThrown){

                        alert("hi"+textStatus.toString());

                              }

              });

            column2.setModel(AuModel);

           return column2;

  }

Data in JSON File :

{

  "d":

  {

    "Products": [

          {

           "Product":"Milk",

           "Sale":"70"

           },

           {

           "Product":"Water",

           "Sale":"64"

           },

           {

           "Product":"Coke",

           "Sale":"55"

           },

            {

           "Product":"Sprite",

           "Sale":"30"

           },

           {

           "Product":"BP",

           "Sale":"45"

           },

           {

           "Product":"King fisher",

           "Sale":"59"

           }

            ]

         }

}

we are now ready to run & see the result , Right click on your index.html & click on  Run -----> Web App Preview and open the url in chrome Browser (prefered)

Here we go

Cheers

Pandu

Introduction

SAP Web IDE is the new powerful Integrated Development Environment for SAPUI5 and Fiori applications. Unfortunately, at moment there is no way to create a SAPUI5 Mobile app and include an external plugin directly from the SAP Web IDE interface.

In this blog I'll show you how to overcome this missing feature and how to include an external Cordova plugin, like the Barcode Scanner plugin, and use it for a SAPUI5 mobile application.

Of course, there is already a Barcode Scanner plugin among the Kapsel plugins, but for the scope of this project I won't use that one, just because I want to show you how to add an external plugin to the app. This blog will cover many of the aspects related to SAPUI5 Mobile Development and it's a sort of consolidation of all the material you might have already seen in other blogs in this area.

Objective

We are going to develop a SAPUI5 application from one of the standard templates which takes data from a backend system. We will use the OData service "CB_MATERIAL_SRV" for getting the material information from the backend. We will add some custom code to this app to extend the functionality of the search bar: a new button will be added aside the search field; by pressing this button you will have the ability to scan the barcode of a product and search for its information in the backend.

When our app will be ready, we will mobilise it using the Hybrid Application Toolkit and the trial HCPms system.

This is our challenge.

Let's get started.

Prerequisites

• SAP Web IDE 1.7 and later (you can register at SAP HANA Cloud Platform to get your development environment)
• Barcode Scanner Plugin (you can find it here)
• Hybrid Application Toolkit 1.1.0+ downloadable from here
• An HCPms account configurable as described here
• SAP HANA Cloud Cloud connector(latest version preferred) downloadable from here

NOTE: An Android or iOS device is required: emulator is not good for this exercise because it cannot scan the code using the camera.

All the above prerequisites must be properly configured, before moving forward with this guide.

Walkthrough

This is the list of all the steps we'll go through:

1. Create a sample barcode
2. Create a destination and connect it to Cloud Connector
3. Create a new app in the HCPms
4. Create a new Kapsel app with SAP Web IDE
5. Add a button to the Master view
6. Add the custom code for the new button
7. Deploy the app with HAT
8. Clone the Barcode Scanner repository
9. Add the Barcode Scanner plugin to the project
10. Build the project from command line
11. Run the project on a mobile device

Create a sample barcode

Since we want to scan a barcode of a product in order to test our final application, let's start by creating a sample barcode we will scan with our mobile device. You can generate free barcodes from Free Barcode Generator - Create barcodes here.

Select for example to create a QRCode, got on the Text tab and put the string "AI002", which is the product code we want to search in the backend. Then click on Create QR Code. On the left side a QR code for that product will appear. You can even download it as a picture if you want.

Create a destination and connect it to Cloud Connector

Our barcode is ready, we can start by creating a connection to the backend system. As the first step we can create a new destination to reach the CB_MATERIAL_SRV service located on the ABAP system called GM0.

Start the SAP HANA Cloud Connector and create an access control row for the resource path on the ABAP system

Access your HANA Trial environment and create a new destination which points to the Cloud Connector item created in the previous step

Create a new app in the HCPms

Now let's create a new application in the HCPms system. You can follow this blog to learn how to enable your HCPms environment.

Go on https://hcpmsadmin-<your_user>trial.dispatcher.hanatrial.ondemand.com where you need to replace the string "<your_user>" with your user account.

Click on Applications

Create a new Application with the following parameters and click on Save

Switch to the Backend tab and specify the Backend URL together with the Authentication Type and the Proxy Type. After this click on Save.

You should be able to ping the application successfully

Create a new SAPUI5 app with SAP Web IDE

Now that our connection is in place, let's create the SAPUI5 application

Open SAP Web IDE

Create a new SAPUI5 project from the template SAPUI5 Master Detail Kapsel Application

Enter a project name (i.e. Material)

Define the OData connection information to the CB_MATERIAL_SRV service

Provide the information about the fields you want to see in the application and click on Next.

NOTE: It's important, for the goal of this guide, that for the search field you choose "Material" otherwise the final application doesn't work!

Click on Finish to terminate the procedure

You can test the application by running it in the desktop preview mode

Right click on the name of the project in SAP Web IDE and choose Project Settings --> Device Configuration. Specify the App Name, the App ID (it needs to match the Application ID used in the HCPms configuration) and the description.

Also choose what platforms you want to build your app for. In my case it's for both iOS and Android

Specify in the Plugins section that you want to use the Logon Manager plugin. Enter the information about the SMP server and click on Save.

Then click on Close

Add a button to the Master view

In SAP Web IDE open the Master view (view/Master.view.xml) of the app. Add the following code just after the last "/contentmiddle" tag and save the file

                <contentRight>                    <Button id="barcodeButton" icon="sap-icon://bar-code" tooltip="Bar Code Scanner" press="onBarCodeScan"></Button>                </contentRight>

It should look like this

Add the custom code for the new button

Now open the Master view controller (view/Master.controller.js) and add the following function at the beginning of the file, just after the init function. Save the file

    onBarCodeScan: function() {        var that = this;        var code = "";  cordova.plugins.barcodeScanner.scan(     function (result) {                code = result.text;                console.log("This is the code: " + code);                that.getView().byId("searchField").setValue(code);                that.onSearch();     },     function (error) {     alert("Scanning failed: " + error);     }  );
},

It should look like this

Deploy the app with HAT

It's time now to deploy the project using Hybrid Application Toolkit.

Right click on the name of the project in SAP Web IDE and choose Deploy --> Deploy to local Hybrid Toolkit

After some time you need to specify the Download folder to save the application package coming from SAP Web IDE

Clone the Barcode Scanner repository

When the deployment finishes, open a Terminal window

Use Git to clone the repository where your external plugin is located. In our case we want to use the external plugin for scanning barcodes located here so we go in a new folder (in my case "/Users/i045523/myplugins") and we clone this repo with the following command:

git clone https://github.com/wildabeast/BarcodeScanner.git

Add the Barcode Scanner plugin to the project

Go in the SAPHybrid folder normally located in your home directory

Navigate to the Material/hybrid subfolder and type the following command to add the external plugin you cloned, to your project:

cordova plugins add <path_to_the_plugin> (in my case it is "cordova plugins add /Users/i045523/myplugins/BarcodeScanner/")

Build the project from command line

Type the command

cordova build

to completely rebuild the project from the command line (you cannot build from SAP Web IDE otherwise you will lose the plugin you just added)

Run the project on a mobile device

Go back to SAP Web IDE

Select the index.html file of the app, right click on it and choose Run --> Run on --> iOS (or Android) device

Once the application starts, provide the credentials for the backend server in the Kapsel Logon.

Don't forget to activate the Secure switch and click on Register

Then create a new passcode or disable it and click on Submit

Now a new button should be available beside the search bar.

By clicking on that button you can start the Barcode scanner and scan the previously created barcode.

Check this video to see how it works!

That's all folks!