Integration of WDABAP with SAP Ui5

Integration of WDABAP WITH
SAP UI5

What is SAPUI5
Prerequisites for WD ABAP + UI5 Integration
Introduction
Architecture
HTML Island
HTML Container
HTML Fragment
Communication between Web Dynpro and UI
Elements for HTML Integration
HTML Writer
Demo

• 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 controls.
• You can extend these controls as well as develop new custom controls.
• It supports CSS3, which allows you to adapt themes to your company's branding in an effective manner.
• It uses the open source jQuery library as a foundation

Architecture

• Both HTMLIsland and HTMLContainer are of type
AbstractHTMLElement. They hold references to
JavaScript and CSS sources.
• HTMLIslands contain static HTML

• HTMLContainers can contain content such as either
HTML, Web Dynpro UI elements or a combination of both.

Communication between backend and HTML AbstractElements

• Communication between the back end system and the
HTMLIsland or HTMLContainer instance on the client
(browser) is done via JavaScript calls.
• JavaScript calls can contain data as payload and they are compiled in the back end via an ABAP API.
• Communication from client to back end is realized by a
JavaScript callback API.

HTMLIsland vs. HTMLContainer

As you can see, you can decide which UI element you want to use depending on the place where the HTML should be build. If you want to build it on the server side, you should use
HTMLContainer. If you want to create the HTML elements on client side, you should use
HTMLIsland.

HTMLIsland
• HTMLIslands can define JavaScript and style sheet sources, and they contain a property staticHtml which can contain HTML code.
• Once the HTMLIsland UI element gets displayed, HTML code is sent to the browser and JavaScript and style