Please enable JavaScript.
Coggle requires JavaScript to display documents.
6. Extensibility in SAPUI5 (Creating an Extension Project (Fiori_C6_P1, ※…
6. Extensibility in SAPUI5
Creating an Extension Project
From the File menu, choose
New > Extension Project
.
Choose Select Application
SAPUI5 ABAP Repository
Select the desired remote system
Select the application and choose
OK
. The
Extension Project Name
field is automatically populated in the wizard.
Import original application
checkbox: Use this imported application as reference only. Do not modify it.
Open extension project in extensibility pane
checkbox to automatically open the extensibility pane after the project is generated.
※
Metadata
of the original service is available as an XML file under folder localService
※
Component.js
defines a new component while inheriting the parent component
Component Configuration
＜ SAPUI5 1.30
metadata
was defined within the
Component.js
file
≧ SAPUI5 1.30
metadata
was defined within the
manifest.json
file
View Modification
only the “
visible
” property
only for controls with
id
entry at sap.ui5/
extends/extensions on
manifest.json
type:
sap.ui.ViewModifications
steps
to create an
View Modification
Open the extensibility pane:
Tools > Extensibility Pane
from the menu bar
Select
Extensibility Mode
under the
Preview Mode
dropdown
On the
Outline pane
on the right, choose
Show extensible elements
from the dropdown so only relevant controls that can be extensible are shown.
Select the control you want to hide on the
Outline
pane
Click on the
Extend button
, and then click
Hide Control
View Extension
Finding Extension Points
https://fioriappslibrary.hana.ondemand.com
Extensibility
Predefined places
Custom controls
can be inserted
Extension Point
ex: <
core:ExtensionPoint
name="ExtensionBefore"/>
can contain
default content
<core:ExtensionPoint name="ExtensionReplaceable"/>
<Label text="Name"/>
<Input type="Number"/>
</core:ExtensionPoint/>
Implementing an Extension Point
Create an extension project from the People Profile app
Open the
extensibility pane
, and switch to
Extensibility Mode
.
In the
Outline panel
, open Profile View, and
select the available extension
.
Click on the
Extend button
, and choose
Extend View/Fragment
SAP Web IDE always generates a fragment
extension point using a view
need to
manually code
the extension
metadata
and
view/controller
Using the Extensibility Wizard
result is the same as extensibility pane
View Replacement
should be considered
only if no other extension
can fulfill the custom requirement
any view can be replaced by a custom view
new view is created along with a new folder called
blocks
Controller Extension
Merging Controllers
add
new methods
(new functionality) to the controller
override current methods
(change functionality).
Controller Hooks
Call to a
unimplemented custom method
in Standard logic
if (this.customProfilePicture) {
this.customProfilePicture(oPerson);
}else{
this.defaultProfilePicture();
}
customProfilePicture is the name of the
method (hook)
Finding Controller Hooks
Find the hook on Fiori Library
Open the extensibility pane, and select
Extensibility Mode
.
Write the code to add the button, and run the extension project.
sap.ui.ControllerExtensions
case of
typed controllers
controller replacement
has to be used for extending it.
Controller Replacement
sap.ui.ControllerReplacements
Call
Standard Controller
using the apply API
StandardController.prototype.onInit.apply(this, arguments);
Translation Extension
Create an extension project
Create an extension by using the
context menu
of the project and then clicking
New
>
Extension
.
Confirm the Extension Project name.
In the available extensions, select
i18n Resource Text Customization
> FINISH
copy the i18n folder from the standard app into the extension app
Service Replacement
To make the SAP Fiori app use your new
ODATA Service
, you must create an
extension
.
multiple ways
to choose your replacement service
Service Catalog
Workspace
select an
XML file
from one of the folders in the
SAP Web IDE workspace
File System
Service URL
choose an SAP Gateway server
destination
and provide a
relative URL
of the location of the
OData service
Adding a Custom View
Deploying the Extension Application