Custom Control Reference

Besides the UI5 library controls, a view can use the controls the abap2UI5 frontend ships itself: a camera, a file upload, the device position, a WebSocket, the Excel bridge, a dirty flag. Each is a UI5 control under the module namespace z2ui5.cc, so a view declares the namespace once and writes the control like any other:

DATA(view) = z2ui5_cl_ui5_view_builder=>factory(
    )->ele( n = `View` ns = `mvc`
        )->a( n = `xmlns`       v = `sap.m`
        )->a( n = `xmlns:mvc`   v = `sap.ui.core.mvc`
        )->a( n = `xmlns:z2ui5` v = `z2ui5.cc`

        )->tag( n = `Geolocation` ns = `z2ui5`
            )->a( n = `latitude`  v = client->_bind( latitude )
            )->a( n = `longitude` v = client->_bind( longitude )
            )->a( n = `finished`  v = client->_event( `POSITION` )
        )->stringify( ).

A property is bound like a property of any control, an event is wired to the backend with client->_event( ), and the event's parameters arrive as described on the Backend Events page. What a control does and when to use it is on the cookbook page its section links; this page is the contract those pages explain against, generated from the control's own metadata on the framework's main branch by npm run generate:controls and held fresh by check:controls. Edit the intro, never the block.

How to write a control of your own, and ship it with an app, is on Custom Controls under Extensibility.

Generated from app/webapp/cc on main — 17 controls, every one under xmlns:z2ui5="z2ui5.cc".

z2ui5:CameraPicture

Module z2ui5.cc.CameraPicture (source). Extends sap.ui.core.Control.

Used on Camera.

Property	Type	Default
value	string
thumbnail	string
width	string	(empty)
height	string	(empty)
autoplay	boolean	true
facingMode	string
deviceId	string

Event	Parameters
OnPhoto	photo (string) — may be prevented
press	none — may be prevented

z2ui5:CameraSelector

Module z2ui5.cc.CameraSelector (source). Extends sap.m.ComboBox.

Used on Camera.

No properties of its own.

No events of its own.

z2ui5:Dirty

Invisible control that marks the session as having unsaved changes: inside the Launchpad via the FLP dirty flag, standalone via the browser's "leave page?" confirmation prompt (a beforeunload listener).

Module z2ui5.cc.Dirty (source). Extends sap.ui.core.Control.

Property	Type	Default
isDirty	boolean	false

No events of its own.

z2ui5:ExcelBridge

Bridge between an abap2UI5 app and the Excel workbook it runs next to, for an app shown in the task pane of an Excel add-in.

Module z2ui5.cc.ExcelBridge (source). Extends sap.ui.core.Control.

Used on Microsoft Excel.

Property	Type	Default
rows	any	null
columns	any	null
numberFormats	any	null
target	string	A1
sheetName	string	(empty)
asTable	boolean	true
header	boolean	true
maxCells	int	20000
selection	any	null
selectionAddress	string	(empty)
readText	boolean	false
selectionChange	boolean	false
available	boolean	false

Event	Parameters
OnWritten	address (string), rowCount (int), columnCount (int)
OnRead	address (string), rowCount (int), columnCount (int)
OnSelectionChange	address (string)
OnError	message (string), code (string)

z2ui5:FileUploader

Module z2ui5.cc.FileUploader (source). Extends sap.ui.core.Control.

Used on Spreadsheet, Upload, Download.

Property	Type	Default
value	string	(empty)
path	string	(empty)
fileType	string	(empty)
placeholder	string	(empty)
buttonText	string	(empty)
style	string	(empty)
uploadButtonText	string	Upload
enabled	boolean	true
icon	string	sap-icon://browse-folder
iconOnly	boolean	false
buttonOnly	boolean	false
multiple	boolean	false
checkDirectUpload	boolean	false

Event	Parameters
upload	none — may be prevented

Aggregation	Type
_content	sap.m.HBox	single, hidden

z2ui5:Geolocation

Invisible control that reads the device position once after rendering into its bindable properties (longitude, latitude, ...) and fires finished so the backend can pick the values up.

Module z2ui5.cc.Geolocation (source). Extends sap.ui.core.Control.

Used on Geolocation.

Property	Type	Default
longitude	string	(empty)
latitude	string	(empty)
altitude	string	(empty)
accuracy	string	(empty)
altitudeAccuracy	string	(empty)
speed	string	(empty)
heading	string	(empty)
enableHighAccuracy	boolean	false
timeout	string	5000

Event	Parameters
finished	none — may be prevented
error	code (string), message (string)

z2ui5:HTMLFrame

A document of its own - HTML the app wrote, with its own styles - shown in an iframe beside the controls of the view, and the links and forms in it that talk back to the app.

Module z2ui5.cc.HTMLFrame (source). Extends sap.ui.core.Control.

Property	Type	Default
content	string	(empty)
width	sap.ui.core.CSSSize	100%
height	sap.ui.core.CSSSize	30rem
title	string	(empty)

Event	Parameters
sapevent	action (string), getdata (string), postdata (string)

z2ui5:InputExt

Module z2ui5.cc.InputExt (source). Extends sap.m.Input.

Used on Soft Keyboard.

Property	Type	Default
inputMode	string	(empty)

No events of its own.

z2ui5:MessageManager

Module z2ui5.cc.MessageManager (source). Extends sap.ui.core.Control.

Property	Type	Default
items	object
checkInit	boolean	false

Event	Parameters
change	none — may be prevented

z2ui5:MultiInputExt

Module z2ui5.cc.MultiInputExt (source). Extends sap.ui.core.Control.

Property	Type	Default
MultiInputId	string
MultiInputName	string
addedTokens	object
checkInit	boolean	false
removedTokens	object
TokenKeyCell	int	-1
TokenTextCells	string	(empty)

Event	Parameters
change	none — may be prevented

z2ui5:NativeBridgeScan

Scan button for an app running inside the abap2UI5 native mobile shell (abap2UI5/mobile-shell).

Module z2ui5.cc.NativeBridgeScan (source). Extends sap.ui.core.Control.

Used on Barcode Scanning, Native Mobile Shell.

Property	Type	Default
value	string	(empty)
text	string	Scan
icon	string	sap-icon://bar-code
enabled	boolean	true
showInBrowser	boolean	false

Event	Parameters
OnScan	value (string)
OnError	message (string)

z2ui5:SmartMultiInputExt

Module z2ui5.cc.SmartMultiInputExt (source). Extends sap.ui.core.Control.

Property	Type	Default
multiInputId	string
addedTokens	object
removedTokens	object
rangeData	object
checkInit	boolean	false

Event	Parameters
change	none — may be prevented

z2ui5:Storage

Invisible control that reads a value from browser storage (session/local, see sap.ui.util.Storage) into its value property and fires finished when the stored value differs from the current one. The write side is handled by the STORE_DATA frontend action.

Module z2ui5.cc.Storage (source). Extends sap.ui.core.Control.

Used on Clipboard.

Property	Type	Default
type	string	session
prefix	string	(empty)
key	string	(empty)
value	any	(empty)

Event	Parameters
finished	type (string), prefix (string), key (string), value (any)

z2ui5:Tree

Module z2ui5.cc.Tree (source). Extends sap.ui.core.Control.

Used on Trees.

Property	Type	Default
tree_id	string

No events of its own.

z2ui5:UITableExt

Module z2ui5.cc.UITableExt (source). Extends sap.ui.core.Control.

Property	Type	Default
tableId	string

No events of its own.

z2ui5:UploadSetExt

Module z2ui5.cc.UploadSetExt (source). Extends sap.ui.core.Control.

Property	Type	Default
uploadSetId	string
fileData	string	(empty)
fileName	string	(empty)
mediaType	string	(empty)
fileSize	string	(empty)
removedFileName	string	(empty)
checkInit	boolean	false

Event	Parameters
change	none — may be prevented
remove	none — may be prevented

z2ui5:Websocket

Invisible control that keeps a WebSocket connection to an ABAP Push Channel (APC) open and hands every inbound message to the backend: the message text lands in the bound value property and the received event triggers the roundtrip that lets the app process it.

Module z2ui5.cc.Websocket (source). Extends sap.ui.core.Control.

Used on WebSocket.

Property	Type	Default
path	string	(empty)
value	string	(empty)
checkActive	boolean	true
checkRepeat	boolean	true

Event	Parameters
received	none — may be prevented
error	code (string), message (string)