Quantcast
Channel: SAPUI5 Developer Center
Viewing all 789 articles
Browse latest View live

Get started with SAPUI5 and Routing

$
0
0

Hi,

 

In this tutorial you will see how to start with SAPUI5 (OpenUI5) . It's actually a tutorial to create a Fiori-lik UI application like in the blog : Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises . But with that difference, that we use the Router component.

 

routing.png

A video says more than words:

 

You can find the full project on github:

https://github.com/lemaiwo/OpenUI5-and-routing

 

This project also includes the other two tutorials:

Dynamic Routing in UI5: SAPUI5 with Advanced Routing

Reusable menu: SAPUI5 Application with Reusable Menu

For the other two tutorials, you need to start with this one.

 

Thanks to Jeremy Coppey for the audio and his help with the editing of the movie.

 

Feedback is more than welcome!

 

Kind regards,

Wouter


SAPUI5 with Advanced Routing

$
0
0

Hi,

 

This tutorial is based on the previous tutorial: Get started with SAPUI5 and Routing

 

In the previous tutorial, we've used the router component in a static way. Now, we're going to take it to the next level and make it more dynamic. In that way, we could use one view in different ways depending on a parameter.

 

This tutorial will navigate from the first view to the second with an "id" as parameter. In the second view, we'll navigate again to the second view with another "id" as parameter.

tut2.png

The tutorial:

 

You can find the full project on github:

https://github.com/lemaiwo/OpenUI5-and-routing

 

This project also includes the other two tutorials:

UI5 with basic routing: Get started with SAPUI5 and Routing

Reusable menu: SAPUI5 Application with Reusable Menu

The project starts with the first blog, followed by this blog and the blog with the reusable menu is the last part of the project.

 

Thanks to Jeremy Coppey for the audio and his help with the editing of the movie.

 

Feedback is more than welcome!

 

Kind regards,

Wouter

SAPUI5 Application with Reusable Menu

$
0
0

Hi,

 

This tutorial is based on the previous tutorials: Get started with SAPUI5 and Routing and SAPUI5 with Advanced Routing .

 

In this previous tutorials, it's about starting with UI5 and how to use the router component.

 

Here, we'll see how to define the menu of the UI5 application only once. So you do not have to create your menu with the navigation in every view.

 

image tut3.png

Watch the tutorial:

 

 

You can find the full project on github:

https://github.com/lemaiwo/OpenUI5-and-routing

 

This project also includes the other two tutorials:

UI5 with basic routing: Get started with SAPUI5 and Routing

Dynamic Routing in UI5: SAPUI5 with Advanced Routing

This blog is the last part of the project.

 

Thanks to Jeremy Coppey for the audio and his help with the editing of the movie.

 

Feedback is more than welcome!

 

Kind regards,

Wouter

How to make the UI5 bootstrap process nicer and smoother

$
0
0

When the sapui5 core library is loading, the browser can freeze for a short moment. This can cause flickers, hangs and other not so nice side effects.

 

If the ui5 app is accessed via the web, or if its running on a device with lower cpu power, these negative side effects can be even worse.

 

You can design your app's index.html in the following way to make the ui5 bootstrap process nicer and smoother.

 

1. Preload stylesheet

 

Put a preload stylesheet directly into your app's index.html file's <head> section. This allows your app to apply css before having loaded the ui5 core library.

 

Alternatively you could put the style directly into a <style></style> section into your <head> to load the css rules even faster.

 

<!DOCTYPE html><html>  <head>  <meta http-equiv="X-UA-Compatible" content="IE=edge" />  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>  <title></title>  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />  <meta name="apple-mobile-web-app-capable" content="yes" />  <meta name="apple-mobile-web-app-status-bar-style" content="black" />  <link rel="stylesheet" type="text/css" href="./app/css/preload.css" />  </head>

The stylesheet contains the css rules that are needed before the ui5 library has been loaded, e.g. to style the splash screen:

 

html, body{  width:100%;  height:100%;  padding:0;  margin:0;  overflow:hidden;
}
#ui5strap-body{  height:100%;  position:relative;  overflow:hidden;
}
#loader{  position:absolute;  top:0;  left:0;  width:100%;  height:100%;  background-color: rgba(0,0,0,0.9);
}
#loader > img{  width:16px;  height:16px;  position:absolute;  left:50%;  top:50%;  margin-left:-8px;  margin-top:-8px;
}

2. Create the main layout

 

For the main layout of the app, create two containers: one for the app content, one for the loader / splash screen. Put the loader container after the content container:

 

<body role="application">  <div id="ui5strap-body">  <!-- OpenUI5 will inject the generated html here -->  </div>  <div id="loader">       <img src="./app/img/loader.gif" width="16" height="16" />  </div>

You can add an animated gif for a spinning loader icon. Please note that animated gifs can stutter when the ui5 library is loaded. Alternatively you can use css animations, and create an infinite spinning animation. Because css animations can be hardware accelerated, they don't stutter so much like gifs.

 

At this point, the browser already shows the splash screen, which covers the whole screen.


3. Include the ui5 library at the bottom

 

The loader / splash screen is now already showing and also styled correctly, and now we can include the ui5 core library.

 

Now it does not matter what happens behind the scenes, its all covered by the splash screen.

 

 

<!-- OpenUI5 Library -->  <!-- Get it from http://sap.github.io/openui5/ and put it into the directory structure -->  <script id="sap-ui-bootstrap" src="resources/sap-ui-core.js" data-sap-ui-xx-fakeOS="ipad"></script>

4. Start your app

 

Now you can pre-load other important libraries and start your app.

 

<script id="ui5strap-bootstrap" src="lib/ui5strap/ll.js"></script>  <script>       libertyLite('./app');  </script>  </body></html>

Please note that this part totally depends on the structure of the app you are using. The above snippet shows the init process of the Ui5Strap Boilerplate App.


5. Hide the loader / splash screen


Once your app has loaded completely, you can hide the loader / splash screen:


jQuery('#loader').css('display', 'none');


Or hide it with the jQuery.hide function to have it animated:


jQuery('#loader').hide();

 

The result is a nicer and smoother bootstrap process!

Using dynamic tiles in SAPUI5

$
0
0

In February I switched my job, I was a C# developer and now, I`m using SAP UI5 to create new, modern software. My main task in the past was to create or modify some client applications. My current task is, to build a seat reservation tool using UI5.

 

During my work on the application I learned a lot about the SAPUI5 framework. Now I would like to share my experience with you.

 

First I would like to give you a short overview of the application.

I have a list of four rooms in my master view at the moment (later it would be a variable amount of rooms) and every room has a detail view with two, three or four seats. Every seat has his own attributes and positions. My current program includes a detail view with an “ObjectList” control, I bind the model at this element as an“ObjectListItems”.  After the event “UpdateFinished” I hide this control.

 

1.png

 

Why I go this kind of way?

 

Because I can`t bind my model at the tiles container in the XML view, so I don`t get an actual model. To continue my tiles story, I create a new function in the event (“UpdateFinished”) and draw the tiles. In this function I use the property ODataModel of the model. I collect all valid entries of my selected room and write them in a separate list. At the end I use a loop to create the tiles and fill them with the attributes.

 

In the detail.view I used an empty AbsoluteLayout as a container.

 

<iml:AbsoluteLayout id="AL1"></iml:AbsoluteLayout>

The controller includes the following function:

 

drawTiles: function(oEvent) {  // prepare a list  var activeList = [];  if (localController == null)       localController = this;  // get the local model and transfer all objects in the odata object into the prepared list,  // if the the condition is true  var model = localController.getView().getModel();  $.each(model.oData, function(index, value) {       if (index.indexOf("SeatSet")>-1) {            activeList.push(value);       }  });  // GET IMAGE
// var oImageSource = localController.getView().byId("imageBox").getSrc();  var oImageSource = pic;  // save the local items and model from hided list  localItems = localController.getView().byId("lineItemList").getItems();  // sort activeList and convert roomNo (string)  var roomid = ZSeatReservationUI5.util.Formatter.Quantity(roomNo);  activeList = this.sortList(activeList, roomid);  // set ABSOLUTE LAYOUT  var heigth = "800px";  var width = "650px";  var oAbsoluteLayout = localController.getView().byId("AL1");  oAbsoluteLayout.setVisible(true);  oAbsoluteLayout.destroyContent();  oAbsoluteLayout.setHeight(heigth);  oAbsoluteLayout.setWidth(width);  oAbsoluteLayout.addContent(new sap.ui.commons.Image("Background", {src: oImageSource, width: width, heigth: heigth}));  var i = 0;  // loop on prepared list for every item and create for every item in list a new tile  while(activeList.length > i) {       var left = 0;       var top = 0;       var oContext = activeList[i];  // defined positions       switch (i){                 case 0:                         left = 116;                          top = 50;                          break;                 case 1:                           left = 340;                            top = 50;                           break;                 case 2:                           left = 116;                           top = 306;                           break;                 case 3:                           left = 340;                           top = 306;                           break;                 default:                           break;            }  left = left + "px";  top = top + "px";  var oTile = new sap.m.StandardTile();  //Layout: size of tiles  // Height: 226px  // Width: 194px  // set the bindings of the tiles  oTile.setTitle(ZSeatReservationUI5.util.Formatter.List(oContext.Attribute));  oTile.setNumber(ZSeatReservationUI5.util.Formatter.SeatText(oContext.SeatID));  oTile.setIcon(ZSeatReservationUI5.util.Formatter.UserUrl(oContext.UserId));  oTile.setInfo(ZSeatReservationUI5.util.Formatter.StateText(oContext.State));  oTile.setInfoState(ZSeatReservationUI5.util.Formatter.State(oContext.State));  oTile.setNumberUnit(oContext.User);  oTile.attachPress(this.handleSelectDialogPress);  oAbsoluteLayout.addContent(oTile, {left: left, top: top});       i++;  } 
},
,,,,,,

After this, the app looks like:

 

2.png

 

The tiles includes a press event, that triggers a reservation of the selected seat.

 

3.png

 

In addition I’m using the following ODATA structure:

 

4.png

 

I have also tested another way, the use a TileContainer control. The structure is very simple, I have created a container in my detail view.

 

<TileContainer xmlns="sap.m"       id="idTileContainer"       width="100%"       height="100%"       editable=""       allowAdd=""       tileMove=""       tileDelete=""       tileAdd="">       <tiles>      </tiles>  </TileContainer>

The controller includes the same function as the first example, except of the loop. I tried to use a template and the “bindAggregation” function of the container.

 

var oTileContainer = localController.getView().byId("idTileContainer"); oTileContainer.setModel(model);
var oTileTemplate = new sap.m.StandardTile({  title:"{Attribute}",     number: "{path:'SeatID', formatter:'ZSeatReservationUI5.util.Formatter.Quantity'}",     info: "{path: 'State', formatter:'ZSeatReservationUI5.util.Formatter.StateText'}",     icon: "{path: 'UserId', formatter:'ZSeatReservationUI5.util.Formatter.UserUrl'}",     infoState: "{path: 'State', formatter:'ZSeatReservationUI5.util.Formatter.State'}",     numberUnit: "{User}"  });
oTileContainer.bindAggregation("tiles", "/SeatSet", oTileTemplate);
oTileTemplate)

I ask myself the following question, why I couldn’t use the tiles and the tile container like a list control, for example, likes an objectlist with objectlistitems?

 

I also tried to create a tile container at the XML view . In the following I tried to bind the model, but I only get an empty page. I think the problem is, I didn’t define the aggregation like in a list control. (short example below)

 

<List id="lineItemList" items="{path:'SeatSet'}" mode="{device>/listMode}"  select="handleSelectDialogPress" updateFinished="updateFinished"  visible="true"  headerText="{i18n>DETAIL_CAPTION} {path: 'RoomID', formatter: 'ZSeatReservationUI5.util.Formatter.Quantity'}">  <items> …

The detail view contains this snippet.

 

<TileContainer xmlns="sap.m"  id="idTileContainer"  width="100%"  height="100%"  editable=""  allowAdd=""  tileMove=""  tileDelete=""  tileAdd="">  <tiles>       <StandardTile xmlns="sap.m"            id="idTile"            removable="true"            title="{i18n>DETAIL_SEATNO} {path:'SeatID', formatter:'ZSeatReservationUI5.util.Formatter.Quantity'}"            info="{path: 'State', formatter:'ZSeatReservationUI5.util.Formatter.StateText'}"            icon="{path: 'UserId', formatter:'ZSeatReservationUI5.util.Formatter.UserUrl'}"            activeIcon=""            number="{UserId}"            numberUnit=""            infoState="{path: 'State', formatter:'ZSeatReservationUI5.util.Formatter.State'}"            type="None"            iconDensityAware="true"            press="">       </StandardTile>  </TileContainer>

 

 

I hope I could give you a little insight into the use of tiles. If there are any suggestions or ideas for  an improvement of my app, bring it on.

 

Thanks.

sap.m.select data binding (SAP Fiori Select dropdown with data binding)

$
0
0

Hi,

 

I want to share my knowledge on binding the data to Select drop down in SAPUI5. We should use sap.m.select library to get a HTML select drop down menu in SAPUI5 mobile.

 

I will be using XML view as an example. (HelloWorldView.view.xml)

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
 xmlns="sap.m" controllerName="your_project_name.HelloWorldView"
 xmlns:html="http://www.w3.org/1999/xhtml"><Page title="HelloWorld" id="helloWorldPage">  <content>  <Select id="mySelectMenu">  </Select>  </content></Page></core:View>

Then, under the controller.js inside init method write, (HelloWorldView.controller.js)

var mModel = new sap.ui.model.json.JSONModel("model/your_data.json"); //initialise your model from a JSON file  sap.ui.getCore().setModel(mModel, "your_data_model"); //set model with a name to use later  var oItemSelectTemplate = new sap.ui.core.Item({            key : "{dkey}",            text : "{dtext}"        }); //Define the template for items, which will be inserted inside a select element
 var mySelectMenu = this.byId("mySelectMenu"); //Get a reference to the UI element, Select to bind data
mySelectMenu.setModel(sap.ui.getCore().getModel("your_data_model"));// set model your_data_model to Select element
mySelectMenu.bindAggregation("items","/mRoot",oItemSelectTemplate); //bind aggregation, item to Select element with the template selected above

Your JSON model file (model/your_data.json) should look something like this

{  "mRoot" : [ {  "dkey" : "1",  "dtext" : "Male"  }, {  "dkey" : "2",  "dtext" : "Female"  } ]
}

I hope this will help many newbies out there.

Refer to this page for more details https://www.6of5.com/6of5/rest/mobile/1001/UI5/displaypage.htm?PAGE=UI5Binding

 

--

Regards,

Vinay

SCN UI5 Application based on SCN RSS Feeds !

$
0
0

Introduction -

 

In my earlier blog  Creating SAPUI5 Applications based on Public JSON APIs or Web ServicesI discussed about consuming rest based APIs into UI5 application. On similar lines, I was thinking to make use of RSS feed data to be used in UI5 applications.


Basically my intention was to create web application which will display my entire documents/blogs summary and will help me to easily navigate to it and also I was looking for way to easily see unanswered questions in single page with ability to navigate to it. 


As SCN community is based on Jive platform, I thought initially to try out Jive APIs but I did not found any information related to it. Then I came across this great document Everything I know about... SCN RSS Feeds by Jason Lax which invoked me to think if it is possible to develop SAPUI5 application which will read the RSS feed data and display in excellent rich user interface.


So I started working on these things and my first challenge was finding a way to convert RSS feed to JSON. On googling, I found out this discussion jquery - Converting RSS To JSON - Stack Overflow


With the jQuery Howto: Google Feeds API - jQuery plugin , I was able to convert RSS to JSON overcoming CORS issue.

So here I will share details of 3 application based on RSS feed. All 3 applications can read any RSS feed but I will mainly focus on SCN RSS feed data.


1) Display SCN (Or Any)   RSS feed into FeedTile


In this application, I am using google feed api jQuery plugin to read RSS feed and converting it to JSON and then later pushing this data to feed items. FeedTile container is used to display FeedItems aggregation.

scn_app1.jpg

GiHub Code Link –  sapui5-scnapp/scnFeedTile.html at master · CmIm/sapui5-scnapp · GitHub

Demo Application Link –  SCN App#1


Basically you can read any valid RSS feed and display it in FeedTile.


2) UI5 Application Displaying SCN User Documents on dynamic Tiles


2nd application is based on reading RSS feed of an SCN user. So upon entering the name of SCN User, it will display documents created by the user for feed with below query http://scn.sap.com/community/feeds/documents?rssUsername=<scn_user>

Maximum 15 documents created by SCN user will be displayed in the form of tiles and on click of tile, it will open document in new browser window.


Here I am showing SCN feed result of great SCN authors Thomas Jung, Tammy Powlas and DJ Adams !

scn_app2.jpg


GiHub Code Link – sapui5-scnapp/scnUserTile.html at master · CmIm/sapui5-scnapp · GitHub

Demo Application Link – SCN App#2


3) UI5 Application Displaying SCN (Or Any) RSS feed details on dynamic Tiles


In this application, SCN RSS feed data will be displayed on tiles. The difference between this and 2nd application is this will display content of any user as per feed data.


You can display data for overall SCN space or for particular space. You can select any entry from dialog and click on display button.

scn_app3.jpg

For SCN Blog posts feed, below is the result.

scn_app4.jpg

Below is the result for SAPUI5 space.

scn_app5.jpg

To get the details of unanswered questions in particular space, you need to get the feed url of space with community id. For e.g. SAPUI5 space is having community id 2421 and below is the result for it.

scn_app6.jpg

 

You can type any other valid SCN feed url as well. Here is result for ABAP space,

scn_app7.jpg


And finally you can read the status updates of user as well ! It will accessed with url http://scn.sap.com/people/<scn_user_name>/feeds/updates [Reference - Jive 6.0 Community Administrator Documentation]


GiHub Code Link – sapui5-scnapp/scnFeed.html at master · CmIm/sapui5-scnapp · GitHub

Demo Application Link – SCN App#3

 

Below are the url to specific SCN spaces with community id.

ABAP - http://scn.sap.com/community/feeds?community=2015

SAP NW Gateway - http://scn.sap.com/community/feeds?community=2130

SAP HANA - http://scn.sap.com/community/feeds?community=2127

SAP Mobile - http://scn.sap.com/community/feeds?community=2056

SAPUI5 Space - http://scn.sap.com/community/feeds/unansweredthreads?community=2421

 

Closing Remarks –


I am still not able to show result for this SCN feed which is used for getting feed for SCN user’s blogs - http://scn.sap.com/blogs/feeds/users/<SCN_USER_NAME>


If it is opened in browser, it gives the result but not working in my application.


If the user name is firstName.lastName then only user photo will be displayed because I put the logic accordingly to show photo dynamically and it was not possible for other formats of user name.

 

I hope you will like my SCN applications and will use those to get maximum benefit as per your requirement. Please feel free to improve it to any extent.


SDN was good, SCN is better now let's make SCN UX Best !


As usual, Please feel free to put your comments/suggestions.


Happy Learning & Coding !

Creating Functions Available to All UI5 controls in a single go !

$
0
0

Hey All,

 

In this blog, let me explain how to make a function available to all the UI5 controls. So, to do this we gotta add the function to the control sap.ui.core.Control which is the base class of all the UI5 Controls.

 

UI5.jpg

So the concept here is, all the UI5 controls inherited from sap.ui.core.Control & thus adding a function to the sap.ui.core.Control would make sure that function is inherited by all the controls.

 

To do this we gotta first create an instance of sap.ui.core.Control so that the control is loaded.

 

var oDummy = new sap.ui.core.Control();

 

Now we gotta add our function to the prototype of sap.ui.core.Control. say let me name the function as "test".

 

sap.ui.core.Control.prototype.test = function(){          alert("My Custom Function!");
}


I'm just doing an alert if this function is called. Now let's test it by creating a button instance and check whether the function test() is available there.


var oButton = new sap.m.Button({text:"Sample",                                                  press :  function(oEvent){                                                      oButton.test();                                                            }                         });


Now every time the Button is press, the function test() will be triggered. Now the function test() can be invoked from all the UI5 controls.

chek out the example snippethttp://jsbin.com/jonud/1/edit



To Make it pratical, in one of the blog Draggable Controls in UI5 ! it was about implementing Draggable feature to UI5 Controls by using jQuery UI.  So, there we had to do all those jQuery stuff of grabbing the element from the DOM & blah blah blah. Now, lets make it cooler by creating a function draggable() and add it to UI5 controls so that just calling the UI5control.draggable() would do all the stuff for use.

 

I have put up the code for the function here Draggable

 

So once you add this code, the draggable() function will be avail to all the controls. say you can do something like,


var oButton = new sap.m.Button({text:"Drag Me"});
oButton.draggable(); // will make the button draggable.


Here's an example snippet,

JS Bin - Collaborative JavaScript Debugging&lt;/title&gt; &lt;link rel=&quot;icon&quot; href=&quot;http://static.jsbin.…



Regards

Sakthivel



Fun = Agile + SAPUI5; //Personal experience

$
0
0

Preface


I must admit that for a quite long time I just couldn’t find time to share enough on SCN. I read it daily, actually quite religiously and in the last months I have had many moments when great info SCN saved my day. When developing SAPUI5 code I rely on SAP documentation and blogs all the time. I feel good that I broke the ice and I am back in the “blogging business” to give back more.

 

Project Scope

 

We are building responsive SAP web applications which connect to the SAP backend system via Gateway/OData. The apps will be exposed to the internet to be used by thousands of partners of the customer.


Project approach

 

I believe in Design Thinking so I promoted this methodology at the customer. In the end we are not following each phases, but I am happy to see the continuous involvement of the users in the project before and during building. It’s a nice experience for the users, they expressed their satisfaction and amazing learning for us, the technical experts. I think I have seen many good applications my life, so sometimes I think I really know what the best way is to implement certain functionality. Until the users disagree unanimously ;-) These are moments when I get confirmation about the power of Design Thinking and Agile.

We split the project in sprints and we implement the user stories based on priorities. We maintain these in an online SCRUM tool. This way the results are coming continuously, which keeps the customer happy. After many waterfall projects in the past this is a refreshing experience!


Design

 

Full responsive design is the goal with support for “all newer browsers”. This is really the fun part. It requires a tricky cooperation among the usability expert, the designer and the developer, in our case all from different companies. I can recommend two tools here: AxureShare proved to be a useful platform to share mockups and invision for distributing and collaborating on the design.


Technical lessons learned


  • The wish to support for “all newer browsers” on “all devices” automatically means that I started with the sap.m library. The customer still would like to support IE9, so the very useful sap.m.FlexBox is out. The usability expert and the designer have no SAP background (you could say luckily), which means that their ideas are not easy to translate to SAPUI5. Just simple change of the colors is the css is not enough. In some cases we have to detect the device and use the desktop library for large screens and the mobile library for smaller ones and the css styles have to be assigned dynamically too.
  • I use Chrome for development and one day I got very surprised when a new OData create call kept failing. I am still grateful to Sakthivel Elango for his blog which explaining that Chrome has removed some DOM Level 2 API's and proving a workaround for it.
  • Since the Gateway work was parallel to the SAPUI5, in some cases I couldn’t wait for the Gateway-based OData service and I created one in HANA. In HANA I can create a table and a CRUD service in 5 minutes. This proved to be a good way to make sure that we don’t lose time.
  • I use OData binding wherever I can, because I think it is one of the strengths of SAPUI5, but for one of the applications I deviated from it. In this app the same data is manipulated on multiple screens, so I thought to get the data in JSON format from the OData service once in the controller of the first view and keep it in the session for all the other views. This way I minimize the traffic between the front-end and the back-end.
  • In one of the apps we have to make many updates in one go, so we use the batch update in OData. It works well, but creating the exact string took a while. Even a simple carriage return can break the whole thing. Making sure that the Content-Length is greater than the actual payload is another point of attention.

 

I am curious if you recognize these points and your experience is the similar. I will share more findings in a later phase of the project too.

Fullscreen Overlay Control for OpenUI5

$
0
0

Enhance your Control-Lib

 

I've recently read the following article on codrops: Fullscreen Overlay Effects.

 

I thought to myself, it would be very cool to have an equal control in my SAPUI5/OpenUI5 library. The possible uses of such a functionality are numerous after all! So i've create the following simple jsbin.

 

And a demo can be launched just here: View Demo

 

 

As you see in the article at codrops, you can apply many different styles and effects on your overlay. I've tested the demo with current Chrome, FF and IE11.

 

Hope you like it

 

Regards

 

Michael

Add an existing SAPUI5 project to the Cloud

$
0
0

Hi,

 

In the SAP HANA Cloud Platform you can create SAPUI5 applications by creating Java applications or XSEngine application.But recently SAP has added an option specific for HTML5 Applications to the SAP HANA Cloud Platform. This new feature is actually a git in the HANA Cloud and has some new awesome features for SAPUI5 applications! Check out this blog this nice demo : Lightweight HTML5 apps and Git on SAP HANA Cloud Platform

 

You can also find al the required information on the sap help: SAP HANA Cloud Platform and a nice helloworld tutorial: SAP HANA Cloud Platform. Everything is well documented to start! But what if you already have a SAPUI5 application. How can we add an existing SAPUI5 Application? Well, just follow these steps:

 

First config your eclipse: SAP HANA Cloud Platform

 

I'll start from my SAPUI5 application that I've created in my previous blogs:

Get started with SAPUI5 and Routing

 

This is what I already had:

 

p1.png

My Eclipse project:

p2.png

Now I want to add this to the cloud!

Go to the SAP HANA Cloud: https://account.hanatrial.ondemand.com/cockpit

There you'll find the new HTML5 Applications option. In the details of the HTML5 Applications, you have to create the a "New Application...":

p3.png

Fill in a name:

p4.png

Select your created application:

p5.png

In the tab "Development", you'll find the GIT URL.

We'll use this url in Eclipse to upload our projects

p6.png

In Eclipse, Open perspectives and select "Git Repository Exploring":

p7.png

Select "Clone a Git repository"

p8.png

Paste the GIT URL in the field "URI" (this will also fill in the host and repository path) + your user and password

p9.png

Select master

p10.png

And Finish.

 

This is how your "Git Repositories" will look like:

p12.png

Back to the JEE perspective, right click on the project name --> Team --> Share Project

p13.png

Select Git:

p14.png

Select your created repository and your project

p15.png

If you wait a second, you'll see the git icons. Your project is shared, but you still have to commit your project to the GIT in the HANA Cloud.

p16.png

Add a message, select all files and hit "Commit and push"

p17.png

Just hit OK

p18.png

Go back to the HANA Cloud and refresh the page, then you'll see your commit in the "Development" tab:

You could directly test by the url behind the comment or create a version. To activate your project and create a public url, you'll first need to create a version. This version can later be activated.

p19.png

We'll start by creating a first version:p20.png

Enter a name for your version:

p21.png

In the tab "Version Management" you can activate your created version.

p22.png

After activating the version, you'll see an url for your application:

p23.png

When I hit this URL, I get an HTTP Status 404... This is not what I've expected...

p24.png

This is because our index.html is not directly in the Working Directory of our Git. We have to add the name of the project and WebContent

p25.png

After adding the Project name (SAPUI5Tutorial1) + WebContent + index.html to the URL, I get my expected result:

p26.png

My first SAPUI5 application in the cloud by using this new feature!!! But I don't want to change the url manually... Therefore I can add "neo-app.json" file to configure my index.html as my welcome page. You'll have to create this file in the root of the "Working Directory". To do this, you can just follow the documentation:

  1. Import the root of the project as in this tutorial: SAP HANA Cloud Platform :Choose Import as general project
  2. Create a "neo-app.json" in the root of the project : SAP HANA Cloud Platform

 

Add the following to the json file:

{
"welcomeFile": "/SAPUI5Tutorial1/WebContent/index.html",
"sendWelcomeFileRedirect": "true"
}

This will redirect the URL of the application to the the index.html.

 

 

Kind regards,

Wouter

Chrome Extension: OpenUI5 API Instant Search

$
0
0

Hi everyone,

 

I just wrote a very simple chrome extension that helps you search for UI5 API more conveniently.

 

Here are the installation steps:

 

- Download the *.crx file from: http://goo.gl/7VhdXE

- In Chrome address bar type chrome://extensions

- Drag the file you just downloaded to Chrome window to install, click on Add

Screenshot from 2014-05-24 18:55:19.png


- To use the extension, just select the UI5 icon, enter your search term and click on the search result

illustrate.png


- A new tab will be opened to show the search result

Screenshot from 2014-05-24 19:10:10.png


Hope it helps. Cheers!



Using addDelegate to extend a control to use third party functionality

$
0
0

In the blog Creating Functions Available to All UI5 controls in a single go ! - Sakthivel Elango showed us one way to extend a control to use third party functionality, there are many ways you could achieve this, similar to what the blog shows you can use a mixin pattern or a simple decorator pattern with jQuery extend or even write the logic directly into a controller. In this blog I will contrast those methods and show you how I like to do it using a delegate handler which listens on controls events, allowing you to attach the logic for example after a control has been rendered.

 

All controls inherit properties from sap.ui.core.Control which in turn inherits from sap.ui.core.Element, sap.ui.core.Element has an undocumented method addDelegates, not sure why it isn't in the documentation but it is mentioned in the following method sap.ui.core.Element.html addEventDelegate and the method is used a lot in control development for adding additional functionality to controls.

 

An examples of where its used is in sap.ui.core.Control for triggering the busyIndicator after the control has been rendered "onAfterRendering".

 

A good use case for a delegate is sap.ui.core.delegate.ScrollEnablement which is attached to controls which require scrolling capabilities, it is used to listen on events like onBeforeRendering, onAfterRendering, onfocusin,ontouchstart, ontouchmove, ontouchend, onBeforeScrollStart,onScrollEnd etc and then implement functionality for handling these events from either of the following third party libraries Zynga Scroller and iScroll

 

Below is the code necessary for extending a control to support jQueryUI draggable, it loads the third party dependencies and onAfterRendering calls the draggable() method to attach the functionality to the controls DOM reference wrapped in a jQuery object $()

 

 

(function () {    "use strict";    /*global jQuery, sap, my*/    jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-core');    //dependencies    jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-widget');    jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-mouse');    jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-draggable');    jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-sortable');    jQuery.sap.declare('my.draggableDelegate');    my.draggableDelegate = function (oControl) { //inject control        this.oControl = oControl;    };    my.DraggableDelegate.prototype = {        onAfterRendering: function () {  //After the control has been rendered apply your logic            this.oControl.$().draggable({                cancel: false            });        }    };
}());

 

Then to implement the delegate on a control

 

var oButton1 = new sap.m.Button({  text: "Drag Me"
});
oButton1.addDelegate(new my.DragableDelegate(oButton1));

 

however instead of applying directly to a delivered control, it probably best to encapsulate the implementation in your own notepad control

 

(function () {    "use strict";    /*global jQuery, sap, my*/    jQuery.sap.require('sap.m.Button');    jQuery.sap.require('my.DraggableDelegate');    jQuery.sap.declare('my.Button');    sap.m.Button.extend("my.Button", {        renderer: {},        init: function () {            sap.m.Button.prototype.init.apply(this, arguments);            this.oDraggable = new my.DraggableDelegate(this); //create delegate            this.addDelegate(this.oDraggable); //attach delegate        }    });
}());

to call your new button

 

var oButton1 = new my.Button({  text: "Drag Me"
});

 

It may seem like a bit of an overhead, the advantage is you haven't changed standard code and the feature can be easily found, reused, tested, enhanced and changed without worrying about leaked side effects or problems when upgrading.

 

here is a JSBin working example - UI5:Using a delegate to implement jQueryUI draggable

SAPUI5 + Google Maps + Lima

$
0
0

Introduction -

 

When I first heard that SAP was building a web development toolkit it really made me curious, but when I read that the SAPUI5 toolkit was going opensource I inmediately knew that it was the perfect time to swim into the HTML5 + Javascript world. In my current blog, I will share my first attempt of SAPUI5 powered web application, inspired on the main activities that can be done in the city i live in: Lima.

 

There are two main blog posts that I found extremely useful while learning/developing:

Building SAP Fiori-like UIs with SAPUI5

SAPUI5 with Google Maps

 


Description -

 

The app consists on two main Views:

 

                         The main List                  |                                                   and the Detail

Main.png

 

An this is the Map within the Icon Tab Bar

 

img.png

 

 

You can find my source code on the following Github repository: rhmircin/LimaEsLinda · GitHub

 

 

There are some bugs and performance issues I'm struggling with, so feel free to fork, clone etc. Any idea, comment or suggestion is welcome.

The power of OData - Part 1 - Introduction

$
0
0

Content of this series:

 

     The power of OData - Part 1 - Introduction (this part)

The power of OData - Part 2 - Setting up the Environment

The power of OData - Part 3 - Creating a data Model

     The power of OData - Part 4 - Creating an OData service

     The power of OData - Part 5 - Consuming the service with SAPUI5

 

 

Over the weekend, I started looking at OData in more detail as I wanted to get a better understanding about this new “standard”. The first time I stumbled upon OData was when I read about SAPUI5 and the new Netweaver Gateway features.

 

Reading more about this topic, I realized that the protocol initially was defined by Microsoft and used within their products. Well, Microsoft won’t create a standard that is only for their own products, so there has to be more about it. OData in general is a protocol that is designed to provide standard CRUD access to data via websites, so that it can be compared to the common REST apis that exist.

 

Following the standard around and looking at the website, there are more producers than only Microsoft. The before mentioned Gateway for example acts as an OData producer, providing access to SAP systems. Microsoft’s Sharepoint, their SQL Server 2012, Windows Azure or the Team Foundation Server can also act as OData producers. Having those options and the possibility to access OData services from UI5 applications, a real new world opens up for us.

 

Just imagine we have some customer specific data lying in tables in a SQL Server or some data stored in a Sharepoint that we want to link with data coming from a SAP system. Well, call a few OData services and link the results within an UI5 application together, nothing “easier” then that. We could also build master/detail applications using data from 2 systems at each step. Getting the master data out of a SAP system and fetching the details from a Sharepoint directory. Many ideas and options are possible here.

 

What I really wanted to find out was: what if our data isn’t stored in Sharepoint or MS SQL Server? What if our developers prefer MySQL? What if we have an Apache running and use PHP, if we use some PHP-based web applications that access MySQL databases and process data?

 

The answer is: There are SDKs, OData producers that can be implemented and used, enabling us to create even more use cases and scenarios. By using those SDKs, we are able to access almost any data store through various languages (.NET based ones, Java, PHP) and create services that deliver the data we need. This data can then be mixed and enriched with the data stored in SAP to increase the user experience and the usability of applications. The times when we had to manually mix up data from different sources are over.

 

I’d like to start a short series here that begins with setting up the environment for developing PHP-based OData services. This would include setting up Eclipse and MySql as well as installing a web server. Next, I would create a sample database to fetch the data from. By using tools and SDKs provided by Microsoft, I will then create a sample service, add some more logic and finally create a simple UI5 application that will show the data in a web browser.

 

Adding data derived from a SAP system through SAP Netweaver Gateway would be the next step, which won’t be covered in this series.

 

Continue to read the next part: The power of OData - Part 2 - Setting up the Environment


The power of OData - Part 2 - Setting up the Environment

$
0
0

Content of this series:

 

The power of OData - Part 1 - Introduction

      The power of OData - Part 2 - Setting up the Environment (this part)

The power of OData - Part 3 - Creating a data Model

      The power of OData - Part 4 - Creating an OData service

      The power of OData - Part 5 - Consuming the service with SAPUI5

 

 

As already mentioned in the first part of this series (The power of OData - Part 1 - Introduction) I’d like to write about the usage of custom OData producers that can be combined with SAP Netweaver Gateway services or Sharepoint services to create even richer and better applications.

 

This post will deal with the initial setup of a development environment for developing own producers and services.As I wrote in another post about AIE (Trying new features and versions in Eclipse), I’m a fan of Eclipse. Therefore, I will use this as my basic IDE here to setup the needed tools. This also has the side-effect that I have all of my development tools in just one single IDE, as said within the mentioned blog post. You can for sure use other IDEs like Netbeans or just a plain text editor. So in the next lines, I will talk about choosing the needed Eclipse plugins, setting up a local web and database server and installing the OData producer SDK.

 

For this development example, I choose to use PHP. This is not a must; there exist SDK versions for Java, Python or .NET as well, but I feel that many organizations have their custom development, their web applications or services done in PHP in combination with MySQL.

 

Setting up a local webserver


My webserver of choice for local development is XAMPP available from ApacheFriends (https://www.apachefriends.org/de/index.html). The main advantage is that it comes with a ready to use Apache installation that includes the newest PHP, MySQL as well as Perl, FileZilla, Mercury and Tomcat, if anyone needs this, so that Java development and hosting would be possible. Another advantage is that this package is available for all major operating systems: Windows, Linux and OS X. As I use OS X at home, this enables me to develop wherever I am with the same solution.

 

The installation process is straight forward. After a successful installation, a control center is available that lets us start and stop the individual services as well as access the config files with one click:

 

XAMPP Controll Panel.png

XAMPP Config Options.png

If we navigate to localhost using our favorite browser, we should see the XAMPP start page, after we started the Apache service.

 

XAMPP Welcome.png

From this site, we can access PHP info, phpmyadmin for managing MySQL or J2EE specific things:

 

XAMPP Menu.png

Lucky for us, XAMPP comes with a user-friendly configuration, so that not much has to be changed. There is one line that has to be added in Apache’s configuration, what will be shown in the next topic.

 

Installing the SDK

 

The OData Producer Library for PHP is available as an open source library from GitHub: https://github.com/MSOpenTech/odataphpprod

 

After downloading the contents of the package should be extracted to a newly created directory within the “htdocs” folder under the XAMPP installation directory, which normally is C:\xampp \htdocs\ (for Windows users).

 

For this test, I created a folder “customer_api” and placed the OData producer files in this location:

htdocs path.pnghtdocs content 1.png

Now, your service root is accessible through a browser by calling the URL http://localhost/customer_api

 

Let’s look at the content.

 

We don’t actually need Docs and Tests here, so we can get rid of them. Web.config can be deleted as well, as this is specific for Microsofts IIS and we are using Apache here.

 

htdocs content 2.png

Finally, we have library and services. Within the library folder are the sources that create the services and provide the output we consume later on. Within services are the main services stored, that can be accessed. Index.php and Dispatcher.php are used to redirect request to the specific services. More about creating and routing services will come in the development part of this series.

 

There is one last thing we need here. As I wrote, Index.php and Dispatcher.php should redirect the requests. So we have to rewrite the requests by using Apache’s mod_rewrite module. To activate this module, we have to edit http.conf.

 

Open this file within your favorite text edit and search for this line:

 

#LoadModule rewrite_module modules/mod_rewrite.so

 

Remove the leading “#” to uncomment the line, save the config file and restart Apache.

 

Within the folder you created above, create a new file called “.htaccess”. This file will control access to the folder and will redirect every request that calls a <service.svc> to our Index.php that will handle the request.

 

Open the file in a text editor and insert the following content:

 

<IfModule mod_rewrite.c>

RewriteEngine on

RewriteRule (\.svc*) /customer_api/Index.php

</IfModule>

php_value include_path ".;C:\xampp\htdocs\customer_api\library"

 

This simply redirects all requests ending in .svc to Index.php.

 

The last line will define an include_path only relevant for the current application. As we don't need it elsewhere, you can insert it in this .htaccess file without the need of editing your php.ini, as I suggested in the previous version of this post. If you then go to http://localhost/customer_api, you should see a string saying "No configuration info found for"

 

I've also added my service.config.xml as there seems to be some problems with this.

 

Let’s move on to Eclipse to complete the environmental setup.

 

Installing Eclipse plugins


Whenever I start setting up my environment, I download a new basic Eclipse instance. I would recommend getting the newest Java EE edition from their download page: http://www.eclipse.org/downloads/

 

In my case, this would be the following version:

Eclipse J2EE.png

Next would be the decision what languages we need and what we want to develop.

 

For this series, we will be developing PHP applications as well as UI5 applications. It might be worth thinking about integrating the ABAP development tools within our installation so that we have one single application ready for accessing different systems.

 

The update sites for SAP tools (ABAP dev tools and UI5 tools) is the following: https://tools.hana.ondemand.com/kepler

The site for Juno can be found at https://tools.hana.ondemand.com

 

From the options screen, choose these packages:

  • ABAP Development Tools for SAP NetWeaver
  • UI Development Toolkit for HTML5

 

PHP related plugins and add-ons can be found here http://p2-dev.pdt-extensions.org/ what also is the URL to be used as update site in Eclipse. Here, I would recommend installing the following:

  • PDT Extensions
  • PHP Development Tools (PDT)
  • PHPUnit

 

The other plugins aren’t needed for this series, but may be worth some try, depending on the amount of PHP development that is done.

 

After the installation and restart of Eclipse, let’s import our OData project as a last step. Go to “FileàNewàProject” and choose “PHP Project”

new project 1.png

On the next screen, enter a project name and choose “Create project at existing location (from existing source)”. Enter here the path to the created folder in htdocs.

new project 2.png

Now click finish and your project is created. If you haven’t done yet, it is time to add the .htaccess file now. I think that Eclipse is better for editing this than a normal text editor.

new project 3.png

 

Continue to read the next part about creating the data model and some sample data for the service: The power of OData - Part 3 - Creating a data Model

The power of OData - Part 3 - Creating a data Model

$
0
0

Content of this series:

 

The power of OData - Part 1 - Introduction

The power of OData - Part 2 - Setting up the Environment

      The power of OData - Part 3 - Creating a data model(this part)

      The power of OData - Part 4 - Creating an OData service

      The power of OData - Part 5 - Consuming the service with SAPUI5

 

 

A rather short blog post for today’s part. I want to create the needed tables and relations in my sample data model upon which we will create our OData service and UI5 application. To have some values, I will also fill the tables with some sample data. The following picture gives an overview about the demo model that I will use:

 

Data Model.png

 

For this series, I will use phpmyadmin that was installed by the standard XAMPP installation. For bigger projects, MySQLStudio or similar editors might be better. To access phpmyadmin, go to http://localhost/phpmyadmin

 

To begin, we have to create a new database. Click on the database tab and enter a name. The collation can be left initial here; we don’t care about this for our tests.

Create Database.png

After clicking the “create” button, our database is now visible among the demo databases that are created by the XAMPP installer:

DB overview.png

Let’s click on it to begin creating the tables. We start with country and create all tables shown in the picture above before creating the foreign key relations.

Create Table.png

I will go over the creation process with pictures for the first table and give the values to insert as a text table for each table.

Table Columns.png

Tick here the checkbox in column A_I for the countryID row to let the MySQL server handle the unique identifier.

 

Country table

Name

Type

Length

A_I

countryID

INT

 

X

country

VARCHAR

45

 

 

City Table

Name

Type

Length

A_I

cityId

INT

 

X

city

VARCHAR

45

 

countryID

INT

 

 

 

Address Table

Name

Type

Length

A_I

addressID

INT

 

X

street

VARCHAR

45

 

number

VARCHAR

45

 

state

VARCHAR

45

 

postalcode

INT

 

 

cityID

INT

 

 

 

Customer Table

Name

Type

Length

A_I

customerID

INT

 

X

firstName

VARCHAR

45

 

lastName

VARCHAR

45

 

email

VARCHAR

45

 

addressID

INT

 

 

 

After finishing with table creation, we should have the following overview:

Tables finished.png

To create the relations, we have to define some indices first. All foreign key fields in the tables have to be defined as index, and then we can link the two tables. I will again show this for one table relation, the other relations should then be straight forward.

 

To create a relation between the city and country table, we have to create a new index based on the countryID field in the city table. To edit the table again, we click on the Structure link.

Edit structure.png

Here, we simply click the Index link in the countryID row:

create index.png

The index is then listed in the index overview.

index overview.png

Repeat this step with the following fields:

  • cityID in address table
  • addressID in customer table

 

Next we create the relation. We go again to the depending table, city in this example. Next, we click the “Relation View” link.

 

relation view.png

In this new dialog, we choose the table fields that are linked with the current one and define that there should be no action when a delete or an update is happening. Before saving our foreign key, we enter some name to identify it.

 

relations 1.pngrelations 2.png

Now do the same for the address table and the customer table.

 

We are now ready to insert some data. As we have relations between the tables, we have to insert data in the following order:

  1. country
  2. city
  3. address
  4. customer

 

Entering data can be done via the build-in insert function, but I prefer to have SQL statements for entering mass data. I attach a text document containing all the INSERT statements to add some sample data. Additionally, I will provide a "build" script that will create all the tables relations and data as shown in this post to have a fast start on this.

 

Feel free to add more demo data to the address and customer tables to get a “better” result in our final application. So far, the data model is created and ready to use. In the next part, I will show how to create the corresponding OData service that will serve the data we just created. In the final part, I will then consume this service and link the retrieved data within an UI5 application.

Google Drive hosting SAPUI5 apps

$
0
0

Hi guys.

This is my first post here and I'm going to talk a little bit about how to host a SAPUI5 App on Google Drive and share with everybody.

You don't need neither a domain nor a webserver. You can use Google Drive to publish and to use your UI5 apps.

It's very simple

 

 

 

1 - Access your Google Drive account

Go to the link https://drive.google.com/

 

 

 

2 - Create a new folder

Click on "CREATE" button.

gdrive1.png

 

Click on "Folder" button.

gdrive2.png

 

Give a name to your new folder.

gdrive3.png

 

Your new folder (SAPUI5 - GoogleDrive) has been created.

 

 

 

4 - Share your folder - Public access

Right-click on your new folder (SAPUI5-GoogleDrive), go to "Share" > "Share".

gdrive4.png

 

Your folder is not public, you can see the status: Private - Only you can access.
Click on "Change" to change the access permission.

gdrive5.png

 

Choose the option "Public on the web" and save.

gdrive6.png

 

Now your folder has public access and it has a hosting link. You can see clicking on Details button.

Everything that you upload to this folder can be accessed using the hosting URL.

gdrive7.png

 

 

 

5 - Create a SAPUI5 app

Create your new app: index.html

You can use the example below.

 

<!DOCTYPE html><html><head><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta charset="UTF-8"><title>SAPUI5 + Google Drive</title><meta name="author" content="Mauricio Lauffer"></head><body class="sapUiBody" role="application"><div id="content"></div><script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/sdk/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script><script type="text/javascript">
var oApp = new sap.m.App("myApp");
var oLabel = new sap.m.Label({
text : "Hello World"
});
var oPage = new sap.m.Page("page1", {
title : "SAPUI5 + Google Drive",
content : [ oLabel ]
});
oApp.addPage(oPage);
oApp.placeAt("content");</script></body></html>

 

I prefer to use XML view, but for simplicity's sake I used JS.

 

 

 

6 - Upload and Share the app to the Google Drive

Just upload your "index.html" file.

Yes, just it. You don't need to upload nothing more.

 

 

 

7 - Access the app

Did you remember the hosting link for your folder (SAPUI5-GoogleDrive)?

So, you'll use it to access your app.

 

Copy and paste the hosting URL in your browser (I hope it won't be Internet Explorer ).

Now just add your filename to the end of the URL.

It should look like it: https://googledrive.com/host/0B2gJUv6a_V1deXV4UWthQkdHbjQ/index.html

 

You can go straight by the file as well.

Click on your uploaded file and click on "Preview" button.

gdrive8.png

 

 

 

8 - The Result

I hope you enjoy your application and spread the word  

gdrive9.png

 

 

 

 

 

If you like to use GitHub (you should!), here's the link:

https://github.com/mauriciolauffer/UI5/tree/master/SAPUI5-GoogleDrive

UI5 Inspiration Gallery - Would it be useful?

$
0
0

That was then...

As part of some pre-sales and design effort I was involved with last year at a customer, I spent a bit of time using the D3.js - Data-Driven Documents website for inspiration, more specifically the Examples (Gallery · mbostock/d3 Wiki · GitHub) section of their website.  At the time, we weren't at the stage of needing clear functional or technical definitions for the future solution (a suite of Portal type app's based on UI5 for aesthetics and usability) but we were starting to build up lots of mock-up screens (using Balsamiq, which was my tool of choice at the time.)  Essentially, we were in design & exploration mode, trying to determine the boundaries of what we could do and how it would look - we would worry about actually implementing it and making it work later...

D3 Examples.jpg

Now, I hold my hands up that I'm not a designer - I am a developer.  I acknowledge that there are those amongst us who are pretty proficient at covering both roles.  I however follow the form follows function school of thought and hence accept that I may not always produce the most aesthetically pleasing of designs.  For this particular engagement, we didn't have a dedicated "designer" (and I suspect, based on experience, this is often the situation with SAP web/mobile engagements.)  So, as mentioned above, when it came to elements of the visual content for some of the app's we started to use the D3 example content as inspiration - basically, I assume, using their site as the creators intended.

 

This is now...

Fast forward to today and I have just spotted a brief exchange on Twitter, where some of the Australian SAP guys (John Moy, Chris Paine& Jason Scott) were briefly discussing "nice" examples of UI.  By nice, I mean those examples that are aesthetically pleasing in a complex, feature-rich kind of way; the sort of stuff that makes you go "wow, is all that done in UI5?  I thought that just did tiles and lists..."  Here's a link to the conversation on Twitter so you can see for yourself - check out the picture Chris shared and hopefully you'll see what I mean.

 

DJ HTML UI5 Design.jpgAll of this got me thinking, especially when DJ Adams followed up with this tweet.  I wonder if there is something we can do to help the UI5 (and probably wider) community with regards to design inspiration?  Should we setup a section in the SCN wiki or better yet a separate website, that is purely used for people to share their UI5 efforts.  I'm not talking about code based solutions - we already have Git and JSBin for that - I mean pure design look & feel.  Just a way for people to share screenshots or maybe even short video clips, similar to the shot Chris shared on Twitter, to act as a library of UI5 inspiration.  Maybe it could have a "I want a UI5 app that looks like this" (with associated image) section and then some clever people could share code snippets via Git/JSBin to help deliver the desired outcome.

 

  • I'm really just thinking out loud with this post and wondered what others, more active in the UI5 space, thought?
  • Is this a good idea to help build bridges between UI5 developers and web/mobile designers?
  • Does anyone think it could work (assuming it is set up correctly, i.e. away from SCN, simple to use, etc.)?
  • Would it help with "non-SAP" UI5 take up?
  • Or do we all think there is already so much content on the WWW that it would just be more noise and get lost?

 

All thoughts welcome, especially those that tell me to stop having random thoughts...

Troubleshooting SAP Netweaver gateway and SAP ECC systems from HTML5 webapp

$
0
0

Dear All,

This blog is about debugging Netweaver gateway and SAP ECC system during a server request made from a HTML5 web app.

 

Pre-requisite: We create a Function module that is remote enabled in ECC.

 

Add the authorization header in the AJAX call for the user we need. To find the authorization value for the users we can make use of REST clients such as POSTMAN etc or Gateway client tool.

 

Authorization header.png

 

$.ajax({

     type: "DELETE",

     processData: false,

     contentType: "application/json",

     processData: false,

     data: '',

     dataType: "text",

     headers: {

         "x-csrf-token": token1,

         "Authorization": "Basic ZjaDM="

     },

     url: delete_path,

     success: function (resp) {

 

 

         error: function (resp) {

             alert("unable to delete file");

         }

     });

 

 

Add an external breakpoint for the desired user in gateway system.(may be a redefined method or a remote FM )

Gateway.png

 

Add an endless loop to code snippet in ECC system in your custom FM or a class as follows.

 

DATA:W_VAR TYPE I VALUE 5.

  DO.

    IF W_VAR < 5.

      EXIT.

    ENDIF.

    W_VAR = W_VAR + 1.

  ENDDO.

 

Now when run the application from browser we will see the ABAP debugger session will be opened in gateway server.  If we had an RFC call to backend

to fetch then we can notice an endlees loop running in ECC.

 

Goto transaction SM50, click on as shown below .

 

SM50.png

 

Once debugger opened please click on variable W_VAR and change the value to 4 dynamically. You will see the loop gets exited giving room to troubleshoot next set of code.

 

We are now successfully able to debug the systems and made sure the code is bug free.

 

There may be other methods/tricks to accomplish this tasks much easier than this.

I welcome feedback/concerns to improve the content.

 

Cheers

PrabaharanThaW_R

Viewing all 789 articles
Browse latest View live




Latest Images