Thursday, May 4, 2017

SortableList

OpenUI5 contains a lot of cool and useful controls, but when it comes to a need of ordering or rearanging some data, there is no out-of-the-box support.

After some googling, i figured out that the internal used jQuery UI library contains something cool called Sortable.

It contains everything you need and the best thing is, that the needed resources are still part of the UI5 framework hidden inside the package "sap/ui/thirdparty/jqueryui/jquery-ui-sortable".


SortableList Demo



Gotcha, but sadly jQuery only support desktop events and therefore the functionality does not work on touch based devices ;-(

Luckily i figured out jQuery UI Touch Punch that enables Touch Event Support for jQuery UI without additional needs.

So besides all the blogs that i have read, this is the first working demo that supports both device types.

On touch devices, i also added a swipe delete action for demonstration purposes, because this coding is part of my karafun karaoke playlist app to manage the singers song list.

Highlights

  • demo how to use jquery-ui-sortable with div elements on top of sap.m.List
  • adding touch support using touch-punch
  • adding nice css shadow and transparency effect while dragging

Source is located in the github repository.

Friday, March 31, 2017

ScrollReveal

Again it is demo time.

Playing around with some libs i discovered ScrollReveal.

It is a small library for easy scroll animations for web and mobile browsers.

So maybe give it a try (best viewed on small devices like phones ;-)


ScrolReveal Demo



Highlights


  • custom control to extend sap.m.List
  • support of binding and growing by resyncing dom elements
  • using JSON model initialized inside manifest.json


Source is located in the github repository.

Sunday, March 12, 2017

Showdown

I am not that fellow Old West fan (maybe a little one) and it is not High Noon.

Showdown is not a gun battle, instead it is a JavaScript Markdown to HTML converter that can be used server side (nodejs) and client side (browser).

My little UI5 control wrapper should be seen as a starting point for your own implementation, because i also added the prettify extension to highlight code (css, js, etc.) and remotely load content using ajax.


Showdown Demo




Source is located in the github repository.

Friday, January 13, 2017

SVGImage

Hello again in 2017!

Since i am a fan of using SVG images i always missed the feature to use as inline/embedded content inside my UI5 apps. Using SVGs by reference only does not allow to style parts of the image with css.

UI5 uses font based icons to include vector orientated images, but these kind of images are monochromatic only.

That's why i implemented a custom control, but also a prototyp which overrides the framework default behavior to allow usage off file names like NAME.inline.svg through different controls that have a img src property.

I included a demo, to show the usage off both implementations.

SVGImage



I put some links on top of the demo, that are quite handy helpers to work with SVG or infos in general.

As always, the github repository contains the control sources and a demo app.

Maybe the future of UI5 will be more colorful ;-)

Thursday, December 1, 2016

Advent Calendar

It is the time of the year again where i am going to be sentimental and thinking about me, my family and the life in general.

While reading the new codrops collection #264 edition i noticed the nice Cube Advent Calendar from Mary Lou.

I thought this would perfectly fit my blog if i could bring this to UI5.

As a small benefit, each day links to one interesting topic published in 2016.

OpenUI5 Developer Advent Calendar



So i hope, you will have some fun with the UI5 Advent Calendar and maybe we will see us next year.

The github repository contains the sources as a complete Web IDE cloneable project.

Have nice holidays and a happy new year!

Holger

Tuesday, November 29, 2016

Awesome Cloud

In former times, creating word clouds was mostly done using flash, applets or silverlight.

Searching for something similar using native javascript, i found a small jQuery plugin called awesomeCloud, that does something similiar without such needs.

awesomeCloud



Thursday, October 13, 2016

SAP HANA, express edition

At SAP TechEd Las Vegas, SAP announced that there will be a free version of his SAP HANA application stack called SAP HANA, express edition.

The full fledged HANA stack is free of charge and also allowed for productive use.

The current version based on SPS12 also features node.js development as server side development language called SAP HANA XS Advanced (XSA) driven by the Google V8 JavaScript engine.

SAP HANA, erpress edition

So if you wanna give it a try, you can register and download a binary installer or a virtual machine image.

System requirements / features


SAP HANA, express edition comes as a binary installer or as a pre-configured virtual machine image (ova file). If your host runs on an SAP HANA, express edition supported operating system, you can choose either the binary installer or the ova file. Otherwise, you must use the ova file.

Operating systems supported by SAP HANA, express edition include:

  • SuSE Linux Enterprise for SAP Applications, 11.4, 12.0, 12.1
  • Red Hat Enterprise Linux 7.2

HANA, express edition databases are limited to 32 GB of RAM


If you have not worked with HANA before, the side also offers a lot of developer related information.