github.com/abap2UI5-addons/custom-controls

Custom Controls

Thirteen ready-to-use custom controls, one builder class each.

★ 3ActiveMIT license

Repository on GitHubInstall with abapGit

What it does

A library of thirteen custom controls for abap2UI5: signature pad, Chart.js charts, barcodes, a camera scanner that reads several barcodes at once, Excel export, form validation, product tours, Font Awesome, animations, clickable image maps, Markdown, a code editor and a rich text editor. The controls ship in their own BSP Z2UI5_CCI, so nothing in abap2UI5 or its frontend has to change. Each control is used from ABAP through a builder class with one render( ) method; properties bind, values come back into ABAP variables and events arrive in the app like for any built-in control. The overview app z2ui5_cl_cci_sample_00 lists every control with its sample.

  • SignaturePad, Validator, ExportSpreadsheet, CodeEditor without external libraries
  • ChartJs, Barcode, DriverJs, FontAwesome, AnimateCss, Markdown wrap well-known JS libraries
  • BarcodeScanner reads every barcode in the picture at once, or counts identical labels
  • RichTextEditor (SunEditor) works on OpenUI5 too, with DOMPurify sanitizing
  • Branch main loads libraries from jsDelivr, branch local vendors them for offline systems
  • One builder class per control, one sample app per control

Requirements

  • Standard ABAP 7.50 or higher
  • abap2UI5 with the reserved resourceRoot z2ui5_cci in the frontend manifest
  • ExportSpreadsheet needs SAPUI5 (sap.ui.export is missing under OpenUI5)
  • Branch main needs browser access to jsDelivr; branch local does not
  • BarcodeScanner needs https and 'wasm-unsafe-eval' in the CSP script-src

Installation

Pull the repository with abapGit into a package of your own. abap2UI5 itself has to be installed first.

https://github.com/abap2UI5-addons/custom-controls

  1. Install with abapGit in this order: abap2UI5, then this repository
  2. Branch main: the sources with libraries from jsDelivr (default); branch local: the same with every library vendored into the BSP, for browsers without internet access
  3. Brings the ABAP classes, the BSP application Z2UI5_CCI and the two ICF nodes it is served from
  4. Start ?app_start=z2ui5_cl_cci_sample_00; if it says ICF Node NOT found, activate the node z2ui5_cci in SICF
  5. Bind configuration structures with omit_initial = abap_true and the camelCase mapper where the library expects it

Usage

z2ui5_cl_cci_rich_text_editor=>render(
    view   = page
    value  = client->_bind( mv_html )
    height = `20rem`
    change = client->_event( `TEXT_CHANGED` ) ).