custom development using sapui5 html5 in ndc

7/22/2019 Custom Development Using SAPUI5 HTML5 in NDC

1/19

Custom DevelopmentusingSAPUI5 ( HTML5) in NDC

National Drilling Company

Abdul Raheem Seyed

29th May, 2013

Dubai UAE.


2/19

Agenda NDC Profile

SAP UI Technologies @ NDC

HTML 5 Introduction

JQUERY / JSON / REST / ODATA

SAPUI5 Introduction

Why SAPUI5

Landscape Options

Application Architecture

SAPUI5 Selection criteria

Recommendations

Limitations

Demo

Discussion


3/19

NDC Corporate Profile Founded in 1972

Fully owned by Abu Dhabi National Oil Company(ADNOC)

Operates Offshore and Onshore Rigs

Services

Offshore Drilling Onshore Drilling

Ground Water Research Program

Directional & Horizontal Drilling

Barge Services

Wireline Services

Logging Services


4/19

NDC Vision MissionVision

To be the regional symbol of excellence in providing qualityand efficient drilling, workover and associated services.

MissionDrill and Workover Oil, Gas & Water wells and provide

associated well services, ensuring highest standards in

Health, Safety and Environment and Asset Integrity.


5/19

SAP UI Technologies @ NDC

ABAPDynpage

Webgui

( ITS)

JavaWebDynpro

JavaComposite

Applications( CAF )

ABAPWebDynpro

Floor PlanManager

( FPM )

SAPUI5


6/19

HTML5


7/19

JQuery / JSON / REST / ODATA

JQuery JS Library

JSON Data Exchange Format

RESTArchitecture Style

ODATA Protocol


8/19

Why HTML5?

Impressive user friendly UI

Any Screen on Any Device

Unmatched Extensibility

Efficiency and Performance

Parallel development, Outside in development

approach ,Faster development life cycle


9/19

HTML5 Frameworks

and more


10/19

SAPUI5

SAP Delivered HTML5 Framework

- Enterprise ready extensive and intuitive controls

- Mobile specific controls

- Predefined Themes

- Sample Code

- Test Suite

- Can be enhanced to build custom controls

- Runs on any of the existing SAP platform


11/19

Landscape Options

SAPNetWeaverJava 7.31

SP5

SAPNetWeaverABAP 7.0and above

with UI Add-

On

SAP HANAXS SP5

SAP UnwiredPlatform 2.2.1

Server Development Tool

SAP repository team provider

SAPUI5 SDK for eclipse


12/19

NDC Landscape

SAPUI5 SDK for eclipse

SAP NetWeaver

ABAP 7.01 SP7+

UI Add-on

For

Netweaver ABAP

Server Development Tool


13/19

Application Architecture

ABAP Classes

REST Services

JSONModel

JS Views

JS Controlers

SOA

MVC at UI layer

SAPUI5 Application


14/19

HTML5 Selection Criteria

Mobile Device access required in near future

Application requires rich functionalities such

as Multimedia, 3D Graphics, Charts, etc.

No need of WebDypro features such asinteractive forms, etc.


15/19

Recommendations

Define UI patterns for unified look and feel beforedevelopment

Finalize JSON format initially for parallel development

Maintain urls and global variables in a separate JS file

Extra care needs for handling resource cache

For the rest services create

services in a predefined nodes

in the ICF hierarchy


16/19

Limitations

No WYSIWYG editor available for development

No minified JS Library

No interactive form support or similar

functionality for printing


17/19

Demo


18/19


19/19

custom development using sapui5 html5 in ndc

Documents