github.com/abap2UI5-addons/custom-controls-customer

Custom Controls (customer)

Template for your own controls, icon fonts and CSS, in your own BSP.

ActiveMIT license

Repository on GitHubInstall with abapGit

What it does

A template repository for a company's own frontend artefacts in abap2UI5: a UI5 reuse library, an icon font, corporate CSS or a custom control, served from the BSP Z2UI5_CCC under the resourceRoot z2ui5_ccc that abap2UI5 reserves. Fork it, put your files under app/webapp/, declare resource roots, libraries, icon fonts and stylesheets in cc/Extension.js, run npm run app2bsp and install the result with abapGit. Nothing in abap2UI5 or its frontend BSP has to be patched, so the artefacts survive framework updates. Use it for things only your company needs; generally useful controls belong in abap2UI5-addons/custom-controls.

  • Registers resource roots, UI5 reuse libraries, icon fonts and stylesheets at page level
  • Replaces the four framework patches that a framework update would overwrite
  • Template custom control Example.js and ABAP class z2ui5_cl_ccc with xmlns( ) and render( )
  • npm run app2bsp generates the abapGit BSP artefacts; CI fails on a stale BSP
  • Keeps an existing reuse-library BSP in place, registered by one entry
  • Check app z2ui5_cl_ccc_sample_00 verifies the installation

Requirements

  • Standard ABAP 7.50 or higher
  • abap2UI5 in a version that reserves the z2ui5_ccc resourceRoot
  • abap2UI5/frontend (the frontend BSP) when running in BSP or launchpad mode

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-customer

  1. Install with abapGit in this order: abap2UI5 (and abap2UI5/frontend for BSP or launchpad mode), then your fork of this repository (branch main)
  2. Fork or copy the repository first and put your artefacts under app/webapp/, then run npm run app2bsp and commit
  3. Brings the ABAP classes, the BSP application Z2UI5_CCC and the two ICF nodes it is served from
  4. Start ?app_start=z2ui5_cl_ccc_sample_00: if the badge renders, is styled and reacts to a click, the BSP is deployed
  5. Binary files such as fonts cannot be BSP pages: use base64 data URIs in CSS or MIME objects

Usage

DATA(view) = z2ui5_cl_ui5_view_builder=>factory( ).

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

z2ui5_cl_ccc=>xmlns( root ).             " declares xmlns:z2ui5_ccc - once per view

DATA(page) = root->ele( `Page` )->a( n = `title` v = `Warehouse` ).

z2ui5_cl_ccc=>render( page ).            " loads and installs the extension

page->tag( `Button`
    )->a( n = `icon` v = `sap-icon://my-icons/Regal`   " your own icon font
    )->a( n = `text` v = `Rack` ).

client->view_display( view->stringify( ) ).