Question:

How to detect orientation change in SAPUI5 application and perform some code only if device is in Landscape Mode?

Answer:

"sap.ui.Device.orientation" is Orientation Event Change API. Using this API we can trigger a event where we can perform some actions.

"sap.ui.Device.orientation" has "attachHandler(function,optionalListnere?)" method which gets triggered when registered.So we can perform any event in its definition.

"jQuery.device.is.landscape" is Device API which detects wheter device is in landscape mode or portrain mode.

Example:

Bind List in its views controllers onInit() only if device is in Landscape mode otherwise show a message pop up.

Code:

jQuery.sap.require("sap.m.MessageBox");
var listObject = this.getView().byId("newList");
sap.ui.Device.orientation.attachHandler(function(oEvt){      if(jQuery.device.is.landscape){      listObject.unbindAggregation();      listObject.bindAggregation(          "items","/LTA_TAB_SET",                    new sap.m.ColumnListItem({                      cells : [ new sap.m.Label({                        text : "{FieldType}"                      }), new sap.m.Label({                        text : "{Col1}"                      }), new sap.m.Label({                        text : "{Col2}"                      }),new sap.m.Label({                        text : "{Col3}"                      }),                      new sap.m.Label({                        text : "{Col4}"                      })],               }) );
 }else{    sap.m.MessageBox.show("Please use this application in Landscape mode.",sap.m.MessageBox.Icon.INFORMATION );
 }

Regards,

Rauf

Recently during a Demo Dashboard creation using SAPUI5, we came across the need of some Gauges to display KPIs. But unfortunately we found SAPUI5 in want of a Gauge control.

The easier option was to use of the several jQuery based charting libraries (like jQPlot) and I experimented with quite a few of the same before quickly coming to the conclusion that they were cumbersome to use with SAPUI5. Armed with he knowledge that the SAPUI5 charting library is based on D3.js I started looking around before stumbling upon Tomer Doron's excellent D3 Gauges blog.

With a very little bit of hacking (download here) from my side I could make them look like this.

But how do I get it to play well with SAPUI5 ? From the above screenshot you can very well figure out that I used a 2x4 MatrixLayout to arrange them inside a panel, but how did I achieve this ?

If you look at the code here, especially the createGauge function in index.html and the Gauge function in gauge.js, you will notice that the gauge requires a container with the name "<GaugeName>GaugeContainer". For the example on the page, Tomer has used a <span> tag with similar effect. So we know we need a container name to which we can attach the gauges so we create 8 MatrixLayoutCells in the 2x4 MatrixLayout we mentioned earlier and set their id in the format "<GaugeName>GaugeContainer" for e.g. :

  var oGCell1 = new sap.ui.commons.layout.MatrixLayoutCell({  id : 'Plant1AvailabilityGaugeContainer',  hAlign:"Center"  });

Now this cell will serve as a container but we can only attach the gauge o it after all the SAPUI5 Javascript has been parsed to HTML and therefore we will use the $(document).ready function thus :

$(document).ready(function() {  createGauge("Plant1Availability", "Plant1 - Availability");  });

And voila ! You have your gauges !

I was working on the same demo I talked about in my last blog Gauges in SAPUI5 and as a tabular visualization for KPIs for multiple plants, we used a table with traffic light icons : Green, Red and Yellow to show the status of the KPIs. It somehow looked liked this :

Now when we demoed it to the client they were very clear about their needs. "It either shows a value with the traffic light or it is of just no use to us." Coming to think of it, a colored traffic light only represents a range of values and not any value in particular and this got us thinking about how we could best display the same using SAPUI5.

We decided that displaying the number within the circle could go a long way to meet the customer's needs and thus decided to create a simple and basic custom control for the same. It's called ColorCircle and the source code for the same can be downloaded from here. How does it look ? Somewhat like this :

The circles are generated using CSS and have been done with the help of Jose Vargas'Responsive CSS Circles blog.

The different properties of the custom control are as follows :

• value : int : Value to display inside the traffic light. (default : 0)
  
• size : sap.ui.core.CSSSize : Size of the traffic light circle (default: 50px)
• asc : boolean : Flag for comparison logic. If the color changes from Green to Yellow to Red as the value increases set true else set false if the color changes in the opposite direction as the value increases (default : true)
• glimit : int : The max value where the Green zone ends. For e.g. if values up to 50 should display a Green light then glimit should be set as 50 (default: 75)
• rlimit : int : The max value where the Red zone begins. For e.g. if values up from 90 and above should display a Red light then rlimit should be set as 90(default: 90)

The custom control can be used in a column in a SAPUI5 Table Column thus  :

var oColumn3 = new sap.ui.table.Column({  label: new sap.ui.commons.Label({text: "KPI 2"}),  template : new com.fujitsu.custom.ColorCircle({size:"50%"}).bindProperty("value", "KPI2"),  width: "13%"
});
oTable.addColumn(oColumn3);

That's it ! Your shiny new Traffic Light with values are ready

If you would want to create your own Custom Controls using SAPUI5, read here the documentation here.

In this blog I will be concentrating more on creating and adding plugins (barcode scanner) to a cordova applications, rather than explaining SAPUI5 coding (I am sure that nobody needs simple button click functionality to be taught in sapui5.....   ).

For packaging of sapui5 application with phoneGap refer my previous blog Packaging sapui5 application using phoneGap for Android .

There are some confusion about phoneGap and cordova, as far as codebase is concerned there is no difference between them. Phonegap is a command that encapsulates cordova, major difference is that phonegap has a remote build capability whereas cordova supports local builds, you can find more information about this here . In this blog I will create cordova application and add barcode scanner plugins to it.

Download and install nodejs from here.

Open command prompt (or terminal ) and execute command npm you should see the following screen

all possible npm related commands are listed here. To install cordova execute "npm install -g cordova".

Guys behind proxy, to set proxy parameters ,execute following command :

set HTTP_PROXY=http://user:password@proxy.domain.com:port

set HTTPS_PROXY=http://user:password@proxy.domain.com:port.

now you can execute "cordova" command to see if it is installed properly, you should see all the cordova related commands.

Once cordova installation is confirmed, execute following command to create cordova project.

cordova create E:\programs\barcodeScanner com.enterprisemobility.barcodeScanner barcodeScanner

now do "cd barcodeScanner" and execute the command "cordova platform add android", this command adds specified platform (i.e., android) to the cordova project. Folder structure can be seen as follows :

Execute command "cordova run --device" or "cordova run --emulator", application should start on device(or emulator) as shown in the following screen shot.

Now coming to the barcode part, you can download barcode scanner from here, supported barcode formats are listed in the same page.

To install barcode scanner in your project execute this command:

"cordova plugin add PATH"

where PATH is a location of barcodeScanner plugin,it may be downloaded location or it can be git repository location.

To copy it from a git repository "GIT" command line tool should be installed in your system.

You can install it by executing the command "npm install git".

After installing barcode scanner plugin, you can call the following function to scan the barcode from openUI5 or sapui5 code.

cordova.plugins.barcodeScanner.scan(
  function (result) {
  alert("We got a barcode\n" +
  "Result: " + result.text + "\n" +
  "Format: " + result.format + "\n" +
  "Cancelled: " + result.cancelled);
  },
  function (error) {
  alert("Scanning failed: " + error);
  }
  );

this is my modified index.html code

<html>

    <head>

        <meta charset="utf-8" />

        <meta name="format-detection" content="telephone=no" />

        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->

        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

        <link rel="stylesheet" type="text/css" href="css/index.css" />

        <title>Hello World</title>

    </head>

    <body>

        <div class="app">

            <h1>Apache Cordova</h1>

            <div id="deviceready" class="blink">

                <p class="event listening">Connecting to Device</p>

                <p class="event received">Device is Ready</p>

            </div>

  <input type="button" value="scan" onclick="scan()"></input>

        </div>

        <script type="text/javascript" src="cordova.js"></script>

        <script type="text/javascript" src="js/index.js"></script>

  <script type="text/javascript">

            function scan(){

  cordova.plugins.barcodeScanner.scan(

      function (result) {

          alert("We got a barcode\n" +

                "Result: " + result.text + "\n" +

                "Format: " + result.format + "\n" +

                "Cancelled: " + result.cancelled);

      },

      function (error) {

          alert("Scanning failed: " + error);

      }

   );

  }

        </script>

        <script type="text/javascript">

            app.initialize();

        </script>

    </body>

</html>

on click of a scan button, application starts looking for a barcode

To package your sapui5 application, simply copy index.html and related .js files from www folder of your sapui5 application and paste it in a www folder within barcodeScanner  folder and add reference to cordova.js file in index.html.

your barcode scanner app is ready ...enjoy

With the release Fiori, SAP has announced to the world that it is serious about improving the lives of users and it is spending resources providing easy to use tools. Fiori provides a greatly enhanced user interface built on an up to data HTML5 architecture. However, the question now comes up 'How are my users using the new tools"?

With Google Analytics, you can determine where your visitors are coming from, which links on your site are getting the most hits and how long the visitors spend on various pages of your site. In addition to providing critical marketing data, it also tracks browser features so that you can make informed design decisions. Analytics will tell you the screen resolution and connection speed of your users.

Integration of Google Analytics with custom Fiori applications (and SAPUI5 architecture in general) will provide site owners and administrators a view into HOW the users are using the system, as well as key demographic information on the users who.

Integration Instructions

Google Analytics Account Setup

The setup the Google Analytics account is basic and free. It is recommended that you setup for two accounts; one for production user and one to use as a base for testing.

Step 1 – Establish an account with Google Analytics

• Go to http://www.google.com/analytics
• Enter your Google account email and password and click Sign In
• Click on the Admin tab at the top header area of the site.
• In the 'Account' section, choose to 'Create a new Account'

• On the next page, you will be asked 'what would you like to track. Choose ' Website'
• Choose Universal Analytics

• Fill out the remaining fields
• Agree to the Terms and Conditions

Step 2 – Get the Google Analytics tracking code

Google Analytics only tracks pages that contain the Google Analytics tracking code. The first step is to get the specific tracking code for your site. The second step (which will be covered later) is to add the code to each of your portal pages, which you want to track.

You'll need to update the "xxxx-x" in the sample above with your own Google Analytics account number.

Fiori Application Integration

The integration with your SAP Fiori application is basic and straightforward. However, it is important to note that Fiori applications are not typical web sites with several HTML pages with some CSS and JavaScript files utilized.

Fiori applications are written in JavaScript and are interpreted by the browser at run time. Therefore, there are no HTML files in which you add the Google Analytics code.  The Google Analytics code will be entered directly into the JavaScript code.

This example is meant to give you a basic overview how the integration can be completed.  These instructions assume you have an existing simple Fiori Master List and Detail application.

Step 1 – Add the 'core' Google Analytics to the Component JS file. Please remember to change the xxxxxxxx-xx to your own Google Analytics code

Also note the term AUTO in following line. This tells Google Analytics to ignore if the call is coming from a different website

Step 2 – Google Analytics is now accessible via the JavaScript variable 'ga'. You can now utilize the variable to call Google Analytics and record Events or Page Views. For simplicity I am using the following code to register a Page View' when the user clicks on an item in the master list.

Whenever a user clicks on an item, a call is made to Google Analytics and a page view is recorded via the page '/ViewDetail'.

Summary

This article detailed learnings of some recent efforts to integrate one of these best- of-breed web traffic tools and custom Fiori applications. Integration of the two applications will provide both administrators and business users imperative information on how their users conduct business within their Fiori application

Can I make a betterTwitter List Manager?

Stating the obvious

As anyone who has attempted to learn something new in the IT world will attest, without a goal or aim you quickly find yourself procrastinating and just clicking around randomly.  You don't really know what you are trying to do and end up doing pretty much nothing.  One of the hardest tasks for any kind of "start-up" project is setting yourself some goals and realistic expectations for what you want and can achieve...

Challenge Accepted

I'm not currently directly involved with any UI5 customer work, so anything I do in this area is mostly in my own time and for my own gain.  So, I needed to find something productive to do with my UI5 focus - I also wanted to try and build something that others may actually find useful (for a change!)  As a further twist, I wanted to do something that was a little away from the usual SAP world, i.e. I didn't want to just show PO header & line items with an approve/reject button.   On top of all that, I wanted to add a flavour to the blog series of how I typically approach the development lifecycle of a solution, picking up on some things I've learned and adapted to my own use from Agile, Design Thinking, etc. and other more technical paradigms.

What to build?

I've used Twitter for a few years now and have got to a decent number of both followers and followings, meaning organising my feeds, lists, etc. is nigh on impossible.  I've tried to use list managers I've found via Google but to no avail.  So, I thought I'd try to use the Twitter API, combined with a nice UI5 front-end to build a better list manager.  At this stage, I have absolutely no idea whether I can even come close to achieving what I've set out to, as I know next to nothing about the Twitter API and almost as little about UI5 development.  The coming months will be interesting...

Blogging as I go...

I'm trying to be more active with my blogging here on SCN, and whilst I have my other main series in progress here I thought I'd capture my adventure with Twitter and UI5 in another series, of which this is Part 1.  It isn't going to just focus on the UI5 tech stuff though (sorry?!) but the whole journey from inception of idea, through to completion of at least a working prototype.  I wanted to make a "proper" blog.  It's inspired a little by Matt Harding's great series about his "Fiori Like Challenge" that started here.

I'm hoping that as a journey, I get to discover, explore and share some useful knowledge/tools/methods/resources here on SCN and at the bare minimum I end up with a decent record of my efforts to look back on.  I'd really appreciate others taking the time to give feedback, less so on the UI5 technical side of things but more so on the approach, methodology and tools mentioned and used.  Hopefully we'll all gain something from this.

Please head on over to the next posting in this series - UI5 & Twitter - Designing the Solution

Footnote

As an aside, as I have been writing and researching more and more I've obviously been more conscious about the images I use, taking a lead from this great blog post by Tom Van Doorslaer.  I've noticed that Google's "Free to use or share" option in the advanced search pane isn't quite 100% clear, in that lots of the images it identifies still have some sort of license, often a Creative Commons one.  Typically you only realise this if you drill down into the image and check the source website a bit.  As a result of researching around this for this post, I discovered this website that acts as a front-end to multiple search engines and hopefully helps you better find content that is free to use and share.  It is still early days so I don't know how useful it will turn out to be...

Image sources

In line with my footnote above, here are the few credits for images in this post:

Links

UI5 & Twitter API - A Personal Challenge (this post)

UI5 & Twitter - Designing the Solution

How to mock up the solution?

Getting started - mock up tools

First things first - what do I want the end product to look like?  I generally like to use mockups or wireframes of UI's as a starting point for my application builds, however I no longer have a license for Balsamiq Mockups that I have used for years so I needed to find something as a replacement, that is ideally a plugin for Google Chrome so I can access it on whichever PC I happen to be using.

A bit of searching in the Google App store for Chrome led me to a number of options (including Balsamiq) but most are trials, have bad reviews, are only for mobile, have rubbish functionality or all of the above.  I could probably spend months just researching the different options but for the sake of my sanity, and your time, I settled on NinjaMock.  It looked like it had the features I needed, appeared free (we will see...) and the reviews were generally positive.

Initial experience is good, as you get to choose the type of project you want to mock up (I went for iPad to begin with) and then you are presented with a pretty impressive set of tools for creating the various layouts for your application.  You can create 3 projects with the free version, which seemed more than enough for my current usage.

Mockup Flow

Using NinjaMock, I created a rough idea of how I think the screens should end up.  Of course, this isn't a particularly complicated application and so I didn't need to worry too much about stretching the UI5 library with simple buttons, tables and checkboxes.  In a more complex environment, I may need to be careful that the UI designed with my mockup tool is compatible with the library available in my UI technology, in this case UI5.

I ended up with this mockup application - called UTLS - UI5 Twitter List Sorterer - as a starter for 10.  It isn't fully resolved (or at least wasn't when this blog posting was written) and may very well evolve over time as my efforts continue.  I didn't want to spend too much time on this phase as it doesn't really help with my understanding of UI5

I really like how you can share projects and your users/customers/peers/etc. can walk through the mockup in their browser - very cool.  Balsamiq had a great feature that generated a .pdf file with navigation built in so you could achieve the same thing, however you would then have to email it out.  I much prefer the Ninja way of doing things.

My UI has a very much Twitter standard look & feel to it.  I'm not looking to re-invent the wheel here, I am mainly using this solution as a vehicle for some more structured UI5 learning so I'm not losing too much sleep over how fancy my application looks (that might come with version 2.0!)

Mapping Features to Requirements

With the combination of user stories above and my initial mockups, I can now start to generate a list of actual requirements I need to build:

I've stopped here with the above extract as this table would quickly get very large (and boring) for any readers of this post.  Suffice to say, I've got an off-line version that holds more entries than this and is my master list of features I need to build.  For reference (and more stating the obvious) I tend to categorise features into the following rough buckets:

• UI - something that is part of the user interface and typically maps to a View element in the MVC paradigm
  Ordinarily this is something that could/would be constrained by things like the UI libraries available, the customers design guidelines or look & feel requirements, etc.  I find it best to try and capture all parts of this puzzle, so instead of just saying "build a landing page", I would break it down so I capture the page, headers, footers, links, and any other content on that page.  It is a low level of granularity in terms of capturing requirements but again, I find it helps a lot once you get into build in anger.  This approach is also useful for identifying common components, that can be re-used within different views.
• Service - typically maps to the Model in MVC and could be any type of data source or function, external or internal to the overall application
  Often, you may be using services that already exist, such as some of the Twitter API calls in this contrived example.  I still think it is beneficial to capture these requirements, as aside from ensuring you have complete coverage of the technical elements needed to make your application work it also allows you to resolve dependencies between components if/when necessary.
• Business Logic - some sort of logic that acts on the UI input, does some "stuff" and maybe forwards output back to the UI, whilst interacting with the services.
  In short, a Controller.   Apologies for the amount of egg-sucking training in this post...

Normally, I'd break the tasks down in this manner as I'd be responsible for estimating, resourcing and planning the build across a team of differently skilled (and potentially dispersed) resources so I find it useful to bucket tasks together, as well as identifying dependencies across tasks.  You also get a feeling of what service links to which business logic and ultimately enables which UI features, so if you are doing releases of the solution via Agile or some similar approach, it is a bit easier to manage what will be delivered and when.  I'm sure lots of people with vastly more experience in this area will be chuckling at my rudimentary approach but it works for me.

User Story Mapping

Following on from the above, there is an interesting application of User Story Mapping that is outlined best (IMHO) in this article with accompanying powerpoint pack.  It is this kind of approach that I try to follow and for me, makes the most sense.  Of course, with most things like this YMMV - I'm sure I do things differently to most other people.

Wrap up

I've now got a (vague) idea of how I want my app to look and the sort of functionality I want to implement.  Next step is to start building, and getting the first release of a working application up and running on my local laptop.  As I alluded to in the opening post in this series, getting past the inertia of starting a project like this is often the hardest stage for me.  I envisage a little bit of procrastination and random button clicking in the coming weeks but hopefully I will end up building something soon.

Image sources

Links

UI5 & Twitter API - A Personal Challenge

UI5 & Twitter - Designing the Solution (this post)

For those uninitiated, let me start with a brief overview of SAP's rapid-deployment solutions (RDS). It is an implementation methodology that provides a framework (via step-by-step guides, best practices, templates, and tools) for SAP solutions to be delivered quickly and easily with a predictable scope, predictable timeline, and predictable outcome. In short, as compared to a traditional implementation approach, the RDS approach is a 20-80% savings in implementation time and cost.

And as of two weeks ago, several new user experience (UX) rapid-deployment solutions were released, which support SAP's user experience and design strategy. Today I want to focus specifically on one of these new releases, the SAPUI5 Design RDS. The SAPUI5 Design RDS takes the same methodology which was used internally at SAP to create Fiori apps and makes it (said design methodology) available to you to help you create your own Fiori designed transactional apps.

It's called the SAPUI5 Design RDS because the Fiori apps that SAP created are based on SAPUI5, which is SAP's enterprise-ready HTML5 rendering library for client-side UI rendering and programming. And this RDS follows suit by showing you how to take SAPUI5 and create your own Fiori designed apps in the same way. And it's important to note that Fiori isn't derived from SAPUI5 alone; it's also a design paradigm with specific look and feel requirements (for any app wanting to be considered truly Fiori designed). So, for the first time, SAP is making the specifics of this design paradigm available publicly.

Here's what you need to know to take advantage of this RDS and get access to the Fiori design guidelines:

The SAPUI5 Design RDS is available on the Service Marketplace. If you are interested in getting started quickly with the best practices and Fiori design guidelines specifically, you can download this content directly here. Make sure you have pop ups allowed, and click on the "Installation" link and then follow the on-screen instructions for downloading the zip file. Once you have the zip file downloaded, you'll want to extract it to a folder of your choosing.

Inside the folder with the extracted files, you have a couple options. The content is designed to be consumed via the RDS_SAPUI5_NW731V1_STND.htm file. If you double click this file, you'll load the step-by-step guide in your browser which walks you through preparation, requirements, scoping, etc. with corresponding files available on the right hand side under "Accelerators."

Eventually, while clicking through the step-by-step guide, you'll get to the "Deploy: Train Key Users" section which will have a link on the right hand side for "Content library." Clicking on this link will open a window that provides you a nice list (see below graphic) of all the "building blocks" (best practices) included in the implementation content for this rapid-deployment solution.

"U55: SAP Fiori Design" is where you will find the Fiori design guidelines in the form of best practices organized by SAP Fiori Principles, SAP Fiori App Types, SAP Fiori Patterns/Components/Controls, and an appendix that provides detailed information on Fiori typography, colors, and icons. Alternatively, if you want to get to this file directly without going through the step-by-step guide in the browser, simply go to the folder where you extracted the zip file, and browse for the file starting with "U55" via the following folder structure: SAP_BP -> BBLibrary -> Documentation. Here you will also find best practices and guides for the rest of the package (all those files listed in the graphic above).

I should also give you the link for the SAPUI5 Design RDS "Quick Guide" which is a step-by-step guide for setting up your SAP Fiori Integrated Development Environment. And last but certainly not least, I should mention that everything I've outlined above is more of a self-service approach for learning how to create your own Fiori designed apps.

However, if you are interested in the full rapid-deployment solution experience inclusive of services (such as a UX design thinking workshop and hands-on SAPUI5 and Fiori design exercises) to facilitate the creation of a proof-of-concept Fiori designed app, check it out on the SAP Store, click the big orange "Contact Me" button and/or feel free to ask questions or leave comments below.

Here's to the creation of many more Fiori-designed apps!

The world is moving towards an online reality, but offline is still a requirement for several mobile projects. Customers in the shipping industry are often limited to a satellite connection once or twice a day, field service workers often work in conditions without network access and for some apps like travel expense it is crucial that you don’t need to roam to be able to enter your data and even images while abroad.

So we decided to improve our already existing capabilities with a UI5 model based solution. It was delivered with service package 1 of our 2.20 release, and the performance of the end result totally exceeded all of our expectations.

You now have the option to choose local storage or webSQL, and if you need even more local data you can also add a Phonegap/Cordova plugin that will give you capabilities up to 2 TB (not that your device has that amount of storage capabilities in the first place).

Now for the Neptune Developer, you only need to decide which internal tables and structures to store locally and we have of course provided you with helper scripts that should make development of offline handling of data easier than ever before.

Now let me try to describe the way our framework has evolved from a standard web server approach much like the one you are familiar with from the SAP Business Server Pages (BSP):

Here the server side coding was often stateful and had issues with session timeouts and loss of network connection.

After the emergence of SAPUI5 and a proper Model View Control framework, we changed to a new architecture with the state being handled by the client and only JSON data passed between the server and client.

For the ABAP developer the structures and internal tables are now represented as models in the UI5 framework making the transparency between ABAP and JavaScript easy to comprehend.

In our latest Support Package we took it one step further and added a choice to store these models in local cache or in the client webSQL database.

In the Neptune Application Designer you can simply choose the type of local cache you want in the attributes of an object bound to SAP data:

Neptune functions have been added to these objects to make coding a lot simpler:

• getOnline+objectName(value);
• getCache+objectName();
• setCache+objectName();
• model+objectName -> JSON Model Object
  • setData and getData commonly used to change the data content in the model

And to work with the data in offline mode easy we also added a helper JavaScript with the following methods:

• ModelData.Find(obj, key, val);
• ModelData.Delete(obj, key, val);
• ModelData.Update(obj, key, val, rec);
• ModelData.UpdateField(obj, key, val, updKey, updVal);
• ModelData.Add(obj, rec);

We have tested this framework with larger datasets (1 Million Records) - no problem regarding the performance on the device.

So, if you are in need of offline functionality in your Neptune Apps, don’t hesitate to upgrade to the latest SP and be amazed by the performance of the framework, I know I am.

Like to test it out, try our Sales Order app from our experience site.

Best Regards

Ole Andre Haugen

Let me begin with a quick introduction to PhoneGap... 

     PhoneGap is a mobile development framework produced by Nitobi, purchased by Adobe Systems in 2011. It enables softwareprogrammers to build applications for mobile devices using JavaScript, HTML5, and CSS3, instead of device-specific languages such asObjective-C. The resulting applications are hybrid, meaning that they are neither truly native (because all layout rendering is done via web views instead of the platform's native UI framework) nor purely web-based (because they are not just web apps, but are packaged as apps for distribution and have access to native device APIs). From version 1.9 onward it is even possible to freely mix native and hybrid code snippets.

The software underlying PhoneGap is Apache Cordova. The software was previously called just "PhoneGap", then "Apache Callback".Apache Cordova is open source software.

What do I need ?

     Well, Here's what you need to get started with ...

• SAPUI5 application ready and good to go
• Xcode  5.0 for ios 7 platform  to be installed in Mac
• Node.js to be installed (you can download here)
• Cordova to be installed after the installation of Node.js

I've done all the installation stuff, What do I do next ?

Run the following commands in the terminal window

                “$ sudo npm install -g cordova ”

You need to traverse to the directory where you want to create the cordova project

“$ cordova create hello com.example.hello HelloWorld”

Here “hello” is the name of the directory where your source code is maintained, and “HelloWorld” is the name if your app.

Now open the Xcode project created at the specified directory

     You have to manually copy paste the files (view and controller files) in the folder structure by traversing to the folder view on Mac and not in the Xcode ( Warning : pasting it directly in the Xcode project won’t copy the files in the folder structure of Mac, to avoid this paste it manually in the folder structure ).    

     You can do this by right clicking on the Xcode project -> show in finder…Here you can go ahead and copy paste your files.

Now you can run your app in the simulator to check. You can select your choice of target device and run the app.

ok, I've done everything , So  how do I actually deploy it to my device ?

To deploy it to your device you need to generate a .ipa file (this is just like your .apk file for your android)

Before you generate the .ipa file, go to build settings option of Xcode, from where you can choose the targeted device family to which you want to deploy the app .

In the Xcode  menu bar go to Product -> Archive

The below list displays the list of all previously generated .ipa files with versions, now click on distribute

Choose “Save for Enterprise or Ad Hoc Deployment “

Here select your relevant provisioning profile...

Specify the name of the .ipa file you want to generate

Your .ipa file will now be generated and you can install your application on the device using iTunes.

Cordova Command line options

“create <PATH> [ID [NAME [CONFIG]]]  "

    creates a Cordova project in the specified PATH, wit ID reverse-domain-style package name - used in <widget id> NAME is a human                     readable field CONFIG is a json string whose key/values will be included in [PATH]/.codova/config.json [--copy-from|src=<PATH>] ... use                     custom www assets instead of the stock Cordova hello- world. [--link-to=<PATH>] ......... symlink to custom www assets without creating a                     copy.

“help”                  

                    shows the syntax summary

“info”

                   print out useful information helpful for submitting bug reports and getting help.  Creates an info.txt file at the base of your project

                   " platform(s) [{add|remove|rm} <PLATFORM>]“   add or remove a specified PLATFORM, OR [{list|ls}] ........ list all installed and                                                available platforms [{update|up} <PLATFORM>] ...... update the version of Cordova used for a specific  PLATFORM; use after updating                                   the  CLI.

“plugin(s) [{add|remove|rm} <PATH|URI>]”

                   add or remove a plugin from the specified PATH or URI, OR  [{ls|list}] ......... list all currently installed plugins [search <keyword1                     keyword2...>]. search the plugin registry for plugins matching the keywords

“prepare [PLATFORM..]”

                    copies files for specified platforms, or all platforms, so that the project is ready to build in each SDK

“compile [PLATFORM..]”

                     builds the app for specified platforms, or all platforms

“build [PLATFORM...]”

                      shortcut for prepare, then compile “run [--debug|--release] [--device|--emulator|--target=FOO]     [PLATFORM]“ deploys app on                     specified  platform devices / emulators

“emulate [PLATFORM...]”

                       alias for "run --emulator"

“serve [PORT]”

                   runs a local web server for www/ assets. Port defaults to 8000.

                    Access projects at: http://HOST_IP:PORT/PLATFORM/www

Command-line Flags/Options

                 -v, --version -  prints out this utility's version

                 -d, --verbose - debug mode produces verbose log output for all activity,including output of sub-commands cordova invokes

Happy coding

Please feel free to leave your suggestions.

References: Wikipedia - Introduction to phoneGap.

Hello,

While studying SAP Gateway OData Channel, my first need was to create a sales order using a Gateway Service. I came accros a lot of documents to create simple Gateway Services, but most of them were for Query or read operations. There is not a lot of documentation for create operation, especially for sales orders where the input structure can be very complex since there is a header and line items. In fact, when you want to manage collections of items related to a single entity (the order header), you need to build complex business entities.

Prerequisites:

• Create complex entities: How To... Create Complex Business Entities using the Gateway OData Channel
• The following document also explains how to build an application frontend with the UI Development Toolkit for HTML5 (from page 23): End-to-End How-to Guide: Building SAPUI5 Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services

1. Create your complex entities using the provided link

2. Create a SAP UI5 Application project Within Eclipse

3. Edit the controller part of the application

• Implement the onInit function to declare the oData model that will be used for the application:

onInit : function() {  // URL of the OData service - IMPORTANT: relative to the server  var sServiceUrl = this.getUrl("/sap/opu/odata/sap/SALESORDERTSCH/");
// create OData model instance with service URL and JSON  var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, true, user, password);
// Save the model
sap.ui.getCore().setModel(oModel);

• Create the executeOrderCreation method: here, the order header and line items are hard coded.

executeOrderCreation : function() {  // Retreive previously created Model  oModel = sap.ui.getCore().getModel();     // Set order header data  var requestORderHeader = {};  requestORderHeader.OrderId = '0';  requestORderHeader.DocumentType = 'TA';  requestORderHeader.CustomerId   = 'C6603';  requestORderHeader.SalesOrg = 'S010';  requestORderHeader.DistChannel  = '01';  requestORderHeader.Division = '01';  requestORderHeader.DocumentDate = null;  requestORderHeader.OrderValue   = null;  requestORderHeader.Currency     = 'EUR';  // Create item data  var articles = ["C10010", "C10011", "C10150", "C17100", "C17200", "C17300", "C18000", "C18001",                  "C18002", "C18100", "C18200", "C18201", "C18202", "C20010", "C20011", "C20012",                  "C20013", "C20014", "C20020", "C20030", "C20040", "C20050", "C20070",                 "C10010", "C10011", "C10150", "C17100", "C17200", "C17300", "C18000", "C18001",                  "C18002", "C18100", "C18200", "C18201", "C18202", "C20010", "C20011", "C20012",                  "C20013", "C20014", "C20020", "C20030", "C20040", "C20050", "C20070"];  var itemData = [];  var poste = 10;  for (var i = 0; i < articles.length; i++)   {   var posteBis = ""+ poste;  // Create line items  itemData.push({ OrderId: '0', Item: posteBis , Material: articles[i], Plant : "P010",  Quantity : '200', Description : null,  UoM : null, Value : null });  poste = poste +10;  }   // Link items to the order header  requestORderHeader.SOItems = itemData;  // Retrieve model from controller  var oModel = sap.ui.getCore().getModel();  oModel.setHeaders(  { "Access-Control-Allow-Origin" : "*",  "Content-Type": "application/x-www-form-urlencoded",  "X-CSRF-Token":"Fetch" }  );  // Declare a variable to handle the security token  var token;  // Create a read request to retreive the X-CSRF token  oModel.read('/SOHeaders',   null,   null,   false,   function(oData, oResponse) {  token = oResponse.headers['x-csrf-token'];  },  function() {  alert("Error on read process");  }  );  // Set POST request header using the X-CSRF token  oModel.setHeaders(  {  "X-Requested-With": "XMLHttpRequest",                          "Content-Type": "application/json",  "DataServiceVersion": "2.0",    "Accept": "application/atom+xml,application/atomsvc+xml,application/xml",   "X-CSRF-Token": token }   );  // Call the create request  oModel.create('/SOHeaders',   requestORderHeader,   null,   function(oData, oResponse) {   alert ('Order creation succeed !');  },  function() {   alert('Call service creation failed');   }  );
},

On the code above, the request header for the POST request has the following: "Content-Type": "application/json". At the beginning, I was using application/xml and it was not working. Here, my line items and header content are Json content. I think it is easier to use JSon because you don't need to manage xml markers. You just link your parameters with the associated value and this is all you need to have concerns about.

4. Edit the view

In the view file, I have simply created a button in the createContent() function that will be used to call and test the service:

createContent : function(oController) {  // Create service call button  var oButton = new sap.ui.commons.Button({  text : "Call service",  enabled : true,  press :  function() { oController.executeOrderCreation();}   // Execution of method executeService defined in the controller  });  // Place button in button div in html page  oButton.placeAt("button");  },

5. Test your application:

• Locally:

• You can also deploy the application on the ABAP server

Then you can test it from SE80 transaction in the backend:

Enjoy !

Hi Folks,

These days we have seen many applications built on SAPUI5 with tile based design.

To create such controls, we can either extend the existing controls or play with CSS theming.  So, we will see how we can make a SAPUI5 Panel control looks like a standard tile in 6 simple steps by changing the CSS theme attributes.

Solution:

Step 1: Create the UI5 project and initial view (Project Name: Tile, View: Main.JS)

Step 2:  Populate the createContent function in Main.view.JS as follows, which will create a standard panel and place the same in your screen.

Now your screen will look like the below.

Step 3: Go to the index.html page where we need to do some CSS coding to adjust the theme for the panel (you can keep a separate style file to write the styles).

Writing this CSS will make the header part of the panel with white background and remove the bottom header line.

Step 4: Now, give the tile a nice border with suitable colour and shadow property

Step 5: Register “CSS hover” property to give some sort of animation while hovering the tile.

Step 6: Register a click event for the tile and enjoy

• oPanel.attachBrowserEvent("click",function(){

       alert("Tile pressed");

       });

Regards

Sreehari

subtitled I don't need no stinkin' plug-in (or Maintenance Certificate, or Solution Manager, or....)

My motivation was to learn about UI5 by doing it. However, since I'm currently resting between engagements, I was unable to (legally) access a licensed SAP system. This blog (and the associated demojam entry in this years Melbourne SAP Inside Track) shows how I resolved the challenges I faced in getting UI5 to work with an old release of the ABAP WAS Developer Edition. After reading this, you will be able to deploy UI5 Applications on an ABAP system where you are unable to (or don't want to) install the ABAP UI5 Add-on.

Typical situations where this may apply include

• a legacy system (such as a 4.6 / 4.7 system) which is not compatible with the UI5 Add-On components
• a supported Netweaver release that has not been maintained to the level required to support the UI5 Add-On components (SMP Note 1941653)
• an SAP Developer Edition (such as the NW702 SP06 release) without a maintenance certificate

Develop the front end using Eclipse

I started with the Christian Jianelli blog series on Building a CRUD Application with SAPUI5 and ICF REST/JSON Service. First things first, I installed the latest Eclipse IDE for Java EE and the SAPUI5 Application Development Tools. Christian's blog series gave me the starting material for a UI5 interface, which I tested from within Eclipse on my laptop. Here's my version of the project in Eclipse ...

... and here it is in my browser.

It looks a little bare so I added some pretties ...

Problems installing the UI5 Add-on

OK, we have the 'presentation layer' working, now to install the UI5 Add-on into my ABAP system...

No Maintenance certificates on a Developer system (NW702 SP06), what about on a licensed system (I know, I know, but we have ways and means ...)

As it turns out, cheats never prosper

The licensed system is no good to me without a Solution Manger system; In short, deploying SAPUI5 on an ABAP server implies (at the very least)

• That the system has the appropriate levels of other support packs (see note),
• That the system has a Maintenance Certificate so you can load the UI5 Add-on via he SAINT transaction,
• and that you can access the appropriate STACK XML (or hack a version of it) from Solution Manager

I was annoyed now. I decided I was going to get this to work with the most constrained version of ABAP I could get my hands on (currently a Developer Edition of NW702 SP06), but first ......

Time for a think

Meanwhile, lets build our Web Service

In the meantime, I wrote a simple CRUD class, based on the one inSAPUI5 and ICF REST/JSON Service Part 1 and Building a CRUD Application with SAPUI5 and ICF REST/JSON Service Part 2.

You can build it yourself following Christian's blogs, or you can grab my SAP Link nuggets for the JSON fix and for the Web Service itself at the end of this blog. Please note that my versions of these are different from Christian's examples,

a) because I wanted to extend his example and

b) because there were some syntax and functional differences between the ABAP releases we were developing on.

ABAP WorkBench, showing the CRUD structure of the ZDEMOJAM Web Service

As Christian suggested, I tested http://nw702.basissap.com/sap/bc/zdemojam using the Postman extension for Chrome. Note the extra field compared to Christian's example code.

And here are the results, in table ZTB_DEMOJAM (again with the extra field...)

Now to integrate the ABAP Web Service with our UI5 front-end

But there is a problem accessing the ZDEMOJAM web service when I run the UI5 pages from within Eclipse.

It's not a 404 Resource not found, it's a 401 or 403 Authorisation Issue. For far too much information about this problem and how to get around it, google CORS SAP UI5 but essentially, the issue is that we have an application deployed on my local Apache Tomcat web-server that is calling a web resource running on another computer; the two reside on different domains or (if I ran an Apache Tomcat web server on my SAP server) different ports. There are ways around this, but I wanted to make this as simple yet as secure as possible.

Getting the UI5 front-end to run on our ABAP Server

Of course, the ABAP system is also a web server (that's what the W and the S in WAS stand for). So ... courtesy of the instance profile parameter icm/HTTP/file_access_2 I made a directory on my ABAP server available on the web ...

... and I unpacked the SAP UI5 components into the E:\usr\sap\sapui5 directory on my server to get.....

Looks promising, lets try something a bit trickier...

DOH !! The short story is that something happens when deploying SAP UI5 on Apache Tomcat, that doesn't occur when deploying it via an ABAP WAS

Time for another think

PS Decent Whisky needs to be at least old enough to buy itself a drink

OK, what about OpenUI5 ?

According to What is OpenUI5 / SAPUI5 ?, there is very little functional difference between SAPUI5 and OpenUI5, and given I am not a paying SAP customer, it has the Open Source license that I should be using anyway. So I deployed OpenUI5 to my ABAP Server, this time using instance profile parameter icm/HTTP/file_access_1 (bet you never saw that coming)

I downloaded the OpenUI5 library and unpacked it into the E:\usr\sap\openui5 directory on my server and now we get.....

A different colour, but I can live with that. Even better, we also get ...

Success - UI5 on an ABAP Server

Now I can just move the demojam3 application from my Eclipse workspace to a directory accessible via the ICM parameters, and I get a working UI5 application with an ABAP back end. Actually, the first time failed miserably, but then I changed where the index.html was looking for the OpenUI5 resources..

<script src="/openui5/runtime/resources/sap-ui-core.js".

and I got ....

The Holy Grail  - Integrating the lot into the ABAP Work Bench ...

But the definitive running version of the code, te UI5 Javascript that makes up the web-page, is not easily accessible to our ABAP developer. And it would be nice to have just one place to go to manage the code. And if this one place is accessible from within the SAP GUI, the developer can leverage all the code management facilities that ABAP provides.

So lets turn our Eclipse Project into a BSP....

I created a BSP Application called ZDEMOJAM_UI5 and added a page with flow logic called index.html. I completely replaced the generated code with the code from the index.html of my demojam3 Eclipse project.

Remember the change on line 7 <script src="/openui5/runtime/resources/sap-ui-core.js".

which is required to point the BSP index.html at the OpenUI5 library and resources.

Using the ABAP report BSP_UPDATE_MIMEREPOS, I loaded everything from the WebContent folder for the demojam3 Eclipse project into my BSP application as MIMEs...

Back in the ABAP WorkBench, you can see how the structure of folders and files in the MIMEs repository for ZDEMOJAM_UI5 reflect those from my demojam3 Eclipse project. To save confusion, consider deleting the META-INF and WEB-INF sub-folders and the index.html file from the MIMEs folder, but do not delete any other folders or their contents.

And the results after I activated and ran the BSP.

The big difference between this and the equivalent steps in Building a CRUD Application with SAPUI5 and ICF REST/JSON Service. is that I didn't have to load the UI5 libraries into the BSP. You only need to change the <script src="/openui5/runtime/resources/sap-ui-core.js" in the index.html to change the OpenUI5 library that this BSP uses.

... without installing anything on the Operating System

One last trick.: If I can't access the operating system or the SAP Profile Parameters to install the UI5 libraries, I can use someone else's   The downside is that I am at the mercy of the owner of the domain I load the libraries from (in this case SAP). The upside of using the libraries directly from the OpenUI5 site is that I am always using the latest version of the libraries.

Since the demojam is being held in a casino Hotel, I modified the output to suit. I leave that as an exercise for the budding UI5 Developer

Summary

This completes the implementation of a UI5 Application, calling a legacy ABAP back-end.

• No SAP Add-ons, so no disruption or Change Control required to start developing;
• No operating system modifications required (although I do recommend you use your own copy of the OpenUI5 library);
• Develop the database processing in ABAP,
• Develop the front end in Eclipse, then
• Deploying and running the combined code using standard ABAP tools (SE80 and / or BSP_UPDATE_MIMEREPOS), and
• The final application can be managed using standard ABAP tools and controls
  (Version Management, Change Management, Transport Management),and
• you can have a consistent look and feel for all your applications, from R3 4.6 right through to Hana Enterprise Cloud.

A quick update - At the airport on Saturday, demojam is tomorrow, and I'm passing time cleaning up some of the rubbish in my bookmarks and my documentation. And I found a reference to a Thomas Jung blog titled ABAP Freak Show - jQuery for BSP. UI5 is based on jQuery. So there's not much new under the sun at all !!

Appendix - Download Source Code

Download the zipped Eclipse project source code for demojam1, demojam2 and demojam3 (31K)

Download the SAPLink nugget containing the fix required for JSON processing.(111K)

Download the SAPLink nugget for the ZDEMOJAM Web Service (20K)

Appendix - References

Building a CRUD Application with SAPUI5 and ICF REST/JSON Service

Part 1

Part 2

Part 3

SAPUI5

http://scn.sap.com/community/developer-center/front-end

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5)

How to Build a SAP HTML5 Application Using MVC with the SAPUI5 Application Development Tool

SAPLink

http://code.google.com/p/saplink/

SAPLink plugins (SCN Code Exchange)

https://cw.sdn.sap.com/cw/groups/saplink-plugins

CL_TREX_JSON_SERIALIZER bug fixes

http://scn.sap.com/community/mobile/blog/2012/09/24/serialize-abap-data-into-json-format

thanks

Sometimes when we need to notify user about some events on a web application, growl notification is used. (Growl (software) - Wikipedia, the free encyclopedia). When we google for CSS for Growl, we can get many implementations. So I just pick this one jQuery UI Notification Widget by Eric Hynds. And created a SAP UI5 control for it. Here is how (example) it can be used.

Let's get into the control itself. Here is the javascript.

sap.ui.core.Control.extend('sap.dennisseah.Growl', {    // inspired by http://www.erichynds.com/examples/jquery-notify/index.htm    metadata : {        properties: {            title: {type: 'string', defaultValue: 'Title'},            message: {type: 'string', defaultValue: 'Hello, I am here!'},            visible: {type: 'boolean', defaultValue: false},            width: {type: 'sap.ui.core.CSSSize', defaultValue: '300px'},            autoclose: {type: 'boolean', defaultValue: true}        }    },    init: function() {        this._show = false;    },    renderer: function(oRm, oControl) {        if (oControl._show === false) {            return;        }        oRm.write("<div");        oRm.writeControlData(oControl);        oRm.addClass("sap-dennisseah-growl-ui-notify");        oRm.writeClasses();        oRm.write(' style="width:' + oControl.getWidth() + '">');        oRm.write('<div class="sap-dennisseah-growl-ui-notify-message sap-dennisseah-growl-ui-notify-message-style">');        oRm.write('<a class="sap-dennisseah-growl-ui-notify-cross sap-dennisseah-growl-ui-notify-close" href="#">x</a>');        oRm.write('<div class="sap-dennisseah-growl-ui-notify-title">' + oControl.getTitle() + '</div>');        oRm.write('<p>' + oControl.getMessage() + '</p>');        oRm.write("</div>");        oRm.write("</div>");    },    onAfterRendering: function() {        var that = this;        this.$().find('a').click(function() {            that.hide();        });    },    hide: function() {        this._show = false;        this.$().fadeOut('slow');    },    show: function() {        var that = this;        this._show = true;        this.invalidate();        if (this.getAutoclose()) {            setTimeout(function() {                that.hide();            }, 2000);        }    }
});

And its css can be find at http://dennisseah.appspot.com/sapui5/Growl.css

You can do show() and hide() to show and hide it respectively. When it is visible (shown) and with the autoclose flag set, it will fade out in 2 seconds. Otherwise, user has to click on the close (x) icon to hide is explicitly.

var growl = new sap.dennisseah.Growl({    title: 'Success',    width: '350px', // default is 300px    message: 'You have successfully created the control',    autoclose: false // default is true
});
growl.placeAt('content'); // you can add it to any containers such as page, panel, etc
growl.show(); // do this whenever you want to show it.

And this is how it looks like

Hope that you like it.

-Dennis

Introduction

This blog is about creating themes for SAP FIORI and for SAPUI5 custom applications.

In these series of blogs i will share different colors of fiori . I will try to create fiori themes using different colors. You all are most appreciated to mark your likes or dislikes . All suggestions are most welcome.

I always love to play around with CSS. I have worked as Web designer at my previous employer where i learnt web designing. Today i am happy that in SAP again i got something which i love to do .

Content

In this blog i will share the images, color codes, css classes and how can we use those classes in application.

References

1. Create and Apply Custom Theme to SAPUI5 Application
2. SAPUI5 SDK - Demo Kit
3. Ultimate CSS Gradient Generator - ColorZilla.com

Here We Go

We will talk in the context of the "sap_bluecrystal"

Let us start with RED color for theme.

Figure 1. Full application preview

                                             Figure 2. Tiles

Figure 3. List

Figure 4. Tab 1

Figure 5. Tab 2

          Figure 6. Mix

Lets Discuss

Hmmmm... did you see something new?

Everything RED you may not like RED but yes we have something new.

What i did for this ?

• Custom theme created
  
• Few color code changed
• Added new css class

How i achieved this?

I used standard blue_crystal theme for my application.

To create custom theme you can refer the document which i have referred at the beginning of this blog.

Apply that theme to your application and Bingo !!! You will Rock

Color Code

Replace the left hand side color codes with right hand side colors in your theme.

#009de0 = #CF0404

#006ca7 = #ff3019

#007cc0 = #CF0404

#00679e = #ff3019

#e6f2f9 = #eaefb5

#dddddd = #666666

Source Code

below are the classes which i have overridden.
You can put these classes in your custom .css file and give reference of that .css file in your index page or you can put it in  your theme designer's CSS panel.

.sapMGlobalBackgroundColor{background-image:linear-gradient(to bottom,#fcefec 0,#ffb9ab 100%);}
.sap-desktop .sapMBar.sapMPageHeader{background-color:#CF0404 !important; }
.sapMBar-CTX .sapMLabel{color:#ffffff;}
.sapMTile{-moz-border-radius: 10px;  -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px;  background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.sapMPullDown{background-color:#ffffff;}
.sapMList .sapMLIB.sapMGHLI{background-color:#e9d4b3;}
.sapMSFB{background:#d6dbbf}
.sapMBar-CTX .sapMBtnContent>.sapUiIcon,.sapMBar-CTX .sapMBtn{color:#ffffff;}
.sapMPageHeader.sapMBar-CTX .sapMBtn, .sapMPageHeader.sapMBar-CTX .sapMSlt{border-image:linear-gradient(#000000 8.33%,#666666 8.33%) 0 100%;}
.sapMSplitContainerMaster:not(.sapMSplitContainerMasterVisible):before{border-right:1px solid #000000;}
.sapMShellBrandingBar{background-color:#000000;}
.sapMBar.sapMPageHeader:before{border-top:0.25rem solid #000000;}
.sapMFooter-CTX .sapMSegBBtn{border-color:#000000;}
.sap-desktop footer.sapMBar, .sap-desktop footer.sapMBar.sapMBarTranslucent{background-color:#000000; !important}

Suggestions

Make sure that your change will affect only to those controls, of which, you want to change the style

for example : giving border-radius to .sapMBtn will give rounded border to all buttons irrespective of their location and types.

The End

Hope you liked it

Happy Learning

Hi,

for all that are interested in some simple openui5 application running agains a java OData Service build with odata4j framework.

Example:

Simple openui5 application for creating, reading, updating and deleting of Products. Project contains an OData service build with odata4j (http://odata4j.org/). There is no database, all Products are stored in the OData service. Please see project simple-odata4j-producer for OData implementation details skibap/simple-odata4j-producer · GitHub.

Steps:

1. Download example from skibap/simple-openui5 · GitHub
2. Extract and Deploy on web server
3. Start web server
4. Test application

Regards,

Paul

I am sharing the code for a circular range gauge. It illustrates the use for graphics context of canvas to create semi complex controls.

CSS

.sap-dennisseah-circular_range_guage{    width:50px;    height:50px;
}

.sap-dennisseah-circular_range-guage-input {
  position:absolute;   width:50px;  text-align:center;   margin-top:15px;   border:0px transparent;   background-color: transparent;      font-size:1em;  font-weight: bold;  color: #333;  opacity: 0.9;  z-index: 2;
}

Control (Javascript)

sap.ui.core.Control.extend('sap.dennisseah.CircularRangeGauge', {  metadata: {    properties: {      lowest: {type: 'int', defaultValue: 0},      highest: {type: 'int', defaultValue: 100},      value: {type: 'int', defaultValue: 0},    }  },      renderer: function(oRm, oControl) {    oRm.write("<div");    oRm.writeControlData(oControl);    oRm.addClass("sap-dennisseah-circular_range-guage");    oRm.writeClasses();    oRm.write('>');    var val = oControl.getNormalizedValue();    oRm.write('<canvas id="' + oControl.getId + '_canvas" width="50" height="50" style="position:absolute"></canvas>');           oRm.write('<input class="sap-dennisseah-circular_range-guage-input" value="' + val + '" />');    oRm.write("</div>");  },    getNormalizedValue : function(val) {    val = (val === undefined) ? this.getValue() : parseInt(val);    if (val > this.getHighest()) {      val = this.getHighest();    } else if (val < this.getLowest()) {      val = this.getLowest();    }    return val;  },  drawArc: function() {    var val = this.getNormalizedValue();    var strokeStyle = 'green';    if (val > 75) {      strokeStyle = 'red';    } else if (val > 50) {      strokeStyle = 'brown';    } else if (val > 25) {      strokeStyle = 'orange';    }        var c = this.$().find('canvas')[0];    var ctx= c.getContext("2d");    ctx.clearRect (0, 0, 50, 50);    ctx.beginPath();    ctx.arc(25, 25, 20, 0, 2 *Math.PI);    ctx.lineWidth = 10;    ctx.strokeStyle = '#ccc';    ctx.globalAlpha = 0.4;    ctx.stroke();    ctx.beginPath();    ctx.arc(25, 25, 20, 0, (val/this.getHighest()) * 2 *Math.PI);    ctx.lineWidth = 10;    ctx.strokeStyle = strokeStyle;    ctx.globalAlpha = 0.7;    ctx.stroke();   },                             onAfterRendering: function() {    this.drawArc();    var that = this;        this.$().find('input').change(function() {      if (isNaN(this.value)) {        this.value = that.getLowest();      }      var val = that.getNormalizedValue(this.value);      that.setValue(val);      that.drawArc();    });  }
});

And here is an working example, Example where we increase the value of the gauge in an interval of one second.

Actually, the gauge is editable. You can click on the value and change it.

Introduction

In my previous post Colorful Fiori - Part 1 - Red, we have seen how can we change fiori theme from traditional to different color.

This blog will show you a different color of fiori. In this blog i have also changed the theme of new launchpad. you can see the images below and try to make your fiori colorful.

Content

In this blog i will share the images, color codes, css classes.

Here We Go

We will talk in the context of the "sap_bluecrystal"

Yellow Green is the color of the day

Figure 1 : Tiles

Figure 2 : Split App

Figure 3 : Tiles - 2

Figure 4 : List 1                                                                                   Figure 5 : List 2

Figure 6 : Header Data                                                                       Figure 7 : Select

Figure 8 : List 3

Figure 9 : Tab

Figure 10 : Slider

  Figure 11 : Segmented Button

Figure 12 : Check Box

Figure 13 : Radio Button

Figure 14 : List 1

Color Codes

Replace the left hand side color codes with right hand side colors in your theme.

Css Class

.sapMPageScroll{
background: -moz-linear-gradient(top,  #f4fff4 0%, #d6dbbf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4fff4), color-stop(100%,#d6dbbf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f4fff4 0%,#d6dbbf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f4fff4 0%,#d6dbbf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f4fff4 0%,#d6dbbf 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f4fff4 0%,#d6dbbf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4fff4', endColorstr='#d6dbbf',GradientType=0 ); /* IE6-8 */
}
.sapMGlobalBackgroundColor{background-image:linear-gradient(to bottom,#3D3D3D 0,#7d7e7d 100%);}
.sapMGlobalBackgroundImage{background-image:none;}
.sap-desktop .sapMBar.sapMPageHeader{background-color:#9acd32 !important; }
.sapMBar-CTX .sapMLabel{color:#ffffff;}
.sapMTile{  -moz-border-radius: 10px;  -webkit-border-radius: 10px;  -khtml-border-radius: 10px;  border-radius: 10px;
background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-8 */}
.sapMPullDown{background-color:#ffffff;}
.sapMList .sapMLIB.sapMGHLI{background-color:#F0FFC9;}
.sapMBar-CTX .sapMBtnContent>.sapUiIcon,.sapMBar-CTX .sapMBtn{color:#ffffff;}
.sapMPageHeader.sapMBar-CTX .sapMBtn, .sapMPageHeader.sapMBar-CTX .sapMSlt{border-image:linear-gradient(#000000 8.33%,#666666 8.33%) 0 100%;}
.sapMSplitContainerMaster:not(.sapMSplitContainerMasterVisible):before{border-right:1px solid #000000;}
.sapMShellBrandingBar{background-color:#000000;}
.sapMBar.sapMPageHeader:before{border-top:0.25rem solid #000000;}
.sapMFooter-CTX .sapMSegBBtn{border-color:#000000;}
.sap-desktop footer.sapMBar, .sap-desktop footer.sapMBar.sapMBarTranslucent{background-color:#000000; !important}
.sapUshellTileInner{ -moz-border-radius: 10px;
-webkit-border-radius: 10px;
 -khtml-border-radius: 10px;
border-radius: 10px;
border:1px solid black;
background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-8 */}

Suggestions

Make sure that your change will affect only to those controls, of which, you want to change the style

for example : giving border-radius to .sapMBtn will give rounded border to all buttons irrespective of their location and types.

Happy Learning

The ability to add brand colors and other simple design features to an app can be very important for SAP customers. Let’s face it, employees are normally more loyal to their employer than their software vendor.

So even if the BlueCrystal theme from the SAP is great, it would be nice to have a simple way to change basic branding features.

Last time I was in Waldorf I met with Andreas Kunz and Frederic Berg and they showed me the new SAP on-demand Theme Designer and that was exactly what we were looking for.

At Neptune Software we have embraced the new UI5 framework from SAP so obviously we decided to integrate this feature into our designer.

This feature was released in our support package 2 of the 2.20 release of the Neptune Application Designer. To be able to use this feature with the Neptune Application Designer please update the Neptune Developer Role as well.

There is a new folder in the Role called Theme and it includes both a link to the Theme Designer from SAP and import function for Neptune:

The UI5 Theme Designer link will take you to the SAP site (You need to have an S-User here):

There are some different ways to use this tool. One way that works well is to test out one of the standard applications included as examples and see how your design will look and feel using the preview function:

You can now start changing the Theme. Use the Help link for information about the usage and test out the Quick, Expert and CSS options. Here is an example of a Neptune branded UI5 App:

When you are done designing, choose the Theme dropdown menu and select export:

Choose name id and vendor for your package and save it to local disk:

Unzip the downloaded file to a directory and go to the import transaction in the Neptune UI5 Theme Import:

After running the import you will be prompted for a transport request:

If the theme already exists you will be asked if you wish to update:

You will now be able to choose the new theme in the Neptune Application Designer theme tab:

Now you can preview your new themed App:

Design and theme away with your Neptune apps, it has never been simpler!

Check of the replay of the SAP and Google App Challenge Webinar.

https://www.brighttalk.com/webcast/11003/105103

The Spyvee Google Analytics with SAPUI5 / Fiori ntegration is highlighted about half way through