Week 3 Unit 3: SAP Web IDE App Development

Basics
SAP Web IDE App Development Basics
Development Process Overview
Create Develop Preview Deploy

Source code editor with code

Coding completion, dynamic API
reference, and so on.

Wizards guiding the user through

New project a step-by-step process,
Templates automatically generating needed to
files and code SAP HANA Cloud

Extensibility to
WYSIWYG ABAP repository
project Design the UI in the layout editor
Design*
to
iOS and Android
While running the SAPUI5/SAP devices
Visual Fiori app, select an element and
Extensibility apply an extension, modification,
replacement
Manually deploy
to SMP, HCPms

Git integration
* Experimental feature

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 2

SAP Web IDE App Development Basics
Development Environment Overview
Menu bar User name
Toolbar Search
 Save  Find in files
 Create file (file name or content)
 Create
folder Git
 Delete  Manage your
development objects
 Undo
in your Git repository
 Redo
 Run History
Development  Tag, cherry-pick,
view revert
Collaboration
User  Integration with SAP Jam
preferences  Collaborate with project
members

Editor API reference

 SAPUI5 code editor  Context-sensitive
 Code completion  Dynamic support
© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 3
SAP Web IDE App Development Basics
Creating a Project
Various options are available for the developer to create a new project:

Create a new project Create a project from

from a template an existing archive
File  New  Project from Template File  Import  Archive

Create a project in an
existing Git repository
File  Git  Clone Repository Create a new extension
project, such as for SAPUI5 or
SAP Fiori extensibility
File  New  Extension Project
Create a project by importing the application from
the diverse repositories
File  Import  Application from SAPUI5 ABAP Repository

File  Import  Application from SAP HANA Cloud Platform

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 4

SAP Web IDE App Development Basics
Templates

The template wizard guides the user through

the definition of an application and then
generates the code

Standard templates are provided from

different categories
 SAPUI5 application (basic, mobile,…)
 SAP Fiori applications (master detail, fact sheet…)
 Plug-in development
 New component
 Extensions
 Cloud portal widget, Visualization Extension

Additional templates of any kind can be added

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 5

SAP Web IDE App Development Basics
Coding (Assisted Development)

 Code completion
• For JavaScript and XML
• Context-sensitive
• Editor completes words, code fragments,
or entire SAPUI5 objects
• JS snippets
 Insertion of XML code snippets
 Metadata completion from schema files
 API Reference pane
• Integrated API reference
• Context-sensitive, dynamic support
 Auto-save

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 6

SAP Web IDE App Development Basics
Layout Editor (WYSIWYG) I

Design your view graphically in the layout editor

and display the content of the XML view
Right-click the XML file and open with layout editor

 Design the view in the graphical display (Canvas)

 Drag & drop the SAPUI5 controls from the Palette to the
Canvas
 Configure the properties of the controls
 Bind the data fields to the OData service entity sets
 Check the outline of the XML view in the Outline pane

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 7

SAP Web IDE App Development Basics
Layout Editor (WYSIWYG) II

Canvas Outline pane

 Content of the  Outline of the
XML view XML view
 Graphical
display
Icon to open
Outline pane
Palette
 SAPUI5 controls
 drag & drop
Properties and
controls to the
Data pane
canvas
 Shows
properties and
data of selected
control
 Entity sets and
properties of
OData service
 OData binding
© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 8
SAP Web IDE App Development Basics
Run the Application

You can run the application to test functionality and design

There are various ways to run your app:
 Run with a frame
 Run without a frame
 Run with mock data
 Run on ABAP server
 Run on SAP HANA Cloud
 Run in an SAP Fiori launchpad sandbox

Additional ways can be provided via plug-ins, for example

 Run fact sheet

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 9

SAP Web IDE App Development Basics
Deploy the Application
Various options are available for you to deploy your app:
1. Deploy to SAP HANA Cloud

2. Deploy to ABAP Repository

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 10

SAP Web IDE App Development Basics
What Is Git?

Git is a widely used revision control and source code management system.
Available in SAP HANA Cloud and supported by SAP Web IDE.

 Version control system

 Distributed versioning
 Enables collaborative workflows

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 11

SAP Web IDE App Development Basics
SAP Web IDE and Git Integration

SAP Web IDE enables collaborative

development by providing seamless
integration with your Git repository.

Git client pane

Commit & Push

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 12

SAP Web IDE App Development Basics
Git on SAP HANA Cloud Platform Used by SAP Web IDE

 Source code is stored in Git repositories SAP HANA Cloud Platform

 Every developer has a local clone of a central remote
repository
Remote
 The clone is only executed initially to create the local Git
Repository
Git repository. (If the clone is executed again, then
the local Git repository will be overridden) Clone
1 Push
 A specific state of the repository is checked out into Fetch
4
the developer’s workspace
Checkout
 Changes are collected in commits (≅ ABAP transport) Workspace Local Git
2
Repository
 Commits can be pushed to and fetched from the 3

remote repository Files Commit

 Git allows you to branch or merge branches at any

time

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 13

Thank you

Contact information:

open@sap.com
© 2015 SAP SE or an SAP affiliate company.
All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an
SAP affiliate company.

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE
(or an SAP affiliate company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional
trademark information and notices.

Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors.

National product specifications may vary.

These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind,
and SAP SE or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or
SAP affiliate company products and services are those that are set forth in the express warranty statements accompanying such products and
services, if any. Nothing herein should be construed as constituting an additional warranty.

In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related
presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated
companies’ strategy and possible future developments, products, and/or platform directions and functionality are all subject to change and may be
changed by SAP SE or its affiliated companies at any time for any reason without notice. The information in this document is not a commitment,
promise, or legal obligation to deliver any material, code, or functionality. All forward-looking statements are subject to various risks and uncertainties
that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking
statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 15