SAPUI5

This blog is a follow up on my previous blog, where I introduced the project scope, approach, etc. I think this blog makes more sense after reading the previous one. As mentioned, the most exciting aspect of this project was the responsive design for “all newer browsers” on desktop, tablet …

While working on Fiori application I was very impressed with the extensibility provided by the standard application View Extensions View Replacements View Modifications Control Extensions I tried to go through the demokit documentation and did not find a well document example set for these concepts. So thought of writing this …

Enhance your Control-Lib! Intro Usage Enhance your Control-Lib! Intro Today i want to show you a new custom control for UI5-applications. I let myself inspired by codrops once again (see Notification Styles Inspiration). The idea is to create a simple and responsive notification, which can be used on different devices. …

Decisions, decisions… If you’re starting out in SAP Enterprise UI5/Gateway development, you are going to find there are more than a thousand different ways of achieving the outcome. There’s editors, there’s repositories, there’s web content hosting, different types of views, binding techniques, etc; but in just a very quick post, …

Couple of weeks back  I got a chance to attend SAP workshop on Design thinking(DT) in Bangalore, India. I was floored by the DT  mindset  and the power it brings along for Innovation , providing customer delight not to forget it saves training costs!.“Design thinking” as a mindset has been …

In case you want to know if grunt can add value to SAPUI5/OpenUI5 projects, this blog may be of interest to you. To understand what grunt can do for your UI5 project, let`s take the POS app from the open UI5 demokit as an example. This app is located in …

Requirement First attempt in Chrome Approach1: use XHR breakpoint ( as usual ) Approach2: A far more efficient way In every UI5 application we declare usage on libraries like sap.ui.commons via “data-sap-ui-libs”. Have you ever thought about how does the logic work? Since we only declare the NAME of libraries …

For the past 5 months, I have spent much time on answering questions in this forum. Here are the kind of postings that I have difficulties with. “I do not know what I am doing, just post my questions and get suggestions”. – We are OK with new users and …

There is a lot of talk these days about a new trend in web development called “Offline First”. We are just getting comfortable with redesigning our enterprise application screens according to the “Mobile First” design pattern, and it is now time to design and build our applications offline-first. I have …

Problem: When deploying the SAPUI5 project from NWDS into SAP NW7.31 server getting the below warnings: 1. Warning occurred on server 6660150 during deploy of sap.com/EAR_UI5 : Web Class Existence Test: com.sap.ASJ.webjlin.000006 filter class “com.sap.ui5.resource.CacheControlFilter” cannot be found in the application class path. Possible reasons: 1) package or class name …

Recently we (Neptune) held a getting started webinar on how to create a fully functional Sales Order Search application based on UI5 using the Neptune Application Designer. The coding (minus the backend ABAP coding which was only walked through) took our CEO Ole-Andre Haugen 40 minutes to complete 😎 The …

I am playing a little bit with Google App Engine (GAE) and as first thing I tried to integrate OpenUI5 in a demo app. My app is just showing a list of projects and let the user to create a new project. Here a screen: Detailed info for Google App …

Suppose I need to investigate how the entities of Initiatives displayed in the table control below is accessed via OData in UI5 application Customer Engagement Initiative (CEI): Requirement1: find out the OData Access URL for Initiatives in table control. Launch the CEI application via Chrome, click F12 to open development …

Step1 Launch the application via Chrome. Step2 Go to tab “Sources”, enable Event Listener Breakpoints with type = Mouse.click. Suppose I need to find out the implementation of button “Create” in Customer Engagement Initiative (CEI): We could observe that once button is clicked, a pop up appears: And I have …

Introduction      In many cases when we develop web pages for business purposes, we may need to limit the text field numeric only(age,phone numbers etc). Same way, customers need the currency to be entered separated by comma,instead of seeing it as plain numbers. Here I am adding the code snippets …

I have prepared oData service that can handle uploading and downloading files using SAP gateway in blog post Uploading Files to SAP GW, Downloading Files from SAP GW – New Techniques. Based on this oData service, I created ui5 application that is described in this blog post. Issues with Fileuploader …

One question that I get very often form my customers is: “How can I use all this mobile device functions like camera, GPS and all the other stuff in a Web Application?”. As you might know the browser runs the Webpage in a sandbox for safety reasons. Direct access to …

Before I begin with the topic I would like to give a brief introduction about Gulp. Gulp.js is a open source JavaScript Task Runner. You can easily automate task like minification, compilation, unit testing, linting, etc Use the -g options to install Gulp globally on your machine. npm install -g …

This is a useful blog for beginners in ui5. This shows an example to consume the webservice in ui5 application. There are different ways in which this can be achieved. I have shown 2 methods in this blog. In both the methods, the input xml to the webservice is posted …

What is SAPUI5 ?                   The UI development toolkit for HTML5 (SAPUI5) is a user interface technology that is used to build and adapt client applications. The SAPUI5 runtime is a client-side HTML5 rendering library with a rich set of standard and extension controls. It provides a lightweight programming model …

Hi, Here i will explain about how to insert third party library to SAPUI5 and how to use that library file. Tables in SAPUI5 : sap.ui.table.Table [ Here we cant able to use nested tables ] Nested Tables Ex:   Insert Third Party Lib: define nested table in HTML tags: <table …

Here we go. It is a very helpful example for make user friendly application by using HTML5 audio tag. When an error occurs, users can be notified by a sound. In index.html write this: <body class="sapUiBody">   <div id="content"></div>   <audio id="idErrorSound">   <source src="audio/ErrorSound.mp3"></source>   </audio> </body> Now write …

In this example I am showing how to create a running clock sync with client machine’s clock. This is very small example, but very useful to make application user friendly. No third-party js library is required. Just a small js will suffice this requirement. Here is the example: In your …

Hi, Here we comes to know how to store data into HTML5 local database. HTML5 introduced Local storage concepts. The Main use for this concept was offline capabilities and local persisted storage features, you can deliver the same rich user experiences online and offline that were previously available only in …

Requirement is based on odata output show linked children tabs corresponding to the parent tab. These children numbers are dynamic depending upon parent’s data configuration. Also we have to go each tab and give some inputs, then save all tabs together in one save. Also user can move to any …

Over the last couple of months I have been playing with D3.js, the JavaScript visualization library that allows you to programmatically create SVG visualizations on the basis of a data set. I love how this allows me to think up how to visualize a particular dataset without any constraints of …

In a previous post I used the Google Maps API to interact with the SAP HANA Geographic objects Aggregation of tables by geographic location using geo-spatial SAP HANA capacities, SAP UI5 and Google Maps,  this is a more advanced stage of the UI5 and Google Maps integration, now the map …

This Blog explains about how to Integrate NFC Plug-in with Kapsel and how to read the NFC tag using SAPUI5 mobile application.for our understanding, entire process will be explained in five sections, 1) Kapsel Setup & Android Project Creation. 2) Add NFC plugin to Kapsel. 3) Import the project into …

Lately, I was struggling with correct handling of this token. Since I found some misleading content here in community network, I would like to share with my findings. What is CSRF, why do we use CSRF token and how long it is valid CSRF (Cross-site request forgery) is type of …

I have just completed a blog “Real Time GPS Tracker using SAP HANA XS, SAPUI5, Cordova Geolocation Plugin and OData”: http://scn.sap.com/community/developer-center/hana/blog/2014/07/07/real-time-gps-tracker-using-sap-hana-xs-sapui5-cordova-geolocation-plugin-and-odata