This document discusses how to create custom SAPUI5 libraries and deploy them to a SAP Fiori launchpad. It describes using the Web IDE template to structure a library with controls, a manifest, and build scripts. The library can then be consumed by other applications by adding it as a dependency and using the custom controls.

2. Create custom SAPUI5 libraries
And deploy them to your launchpad

3. Why a 🗲 talk about custom libraries
• Warehouse scanning applications
• 13 different apps, but all with the same user input patterns
› Scan a value (storage bin, outbound delivery, material, …)
› Enter quantity
› Enter weight / dimensions
› Select an option
› …
• Reusable controls to develop apps at the speed of light

4. Custom Controls

5. Web IDE Template

6. UI5 Library structure
All custom controls will be stored here
The script that loads the library
Library manifest
Builds the library

7. Library.js

8. Manifest.json

9. Gruntfile
• Does not create library-preload.js by default -> can be easily added
• https://github.com/SAP/grunt-openui5
grunt.initConfig({
openui5_preload: {
library: {
options: {
resources: "src",
dest: "dist“
},
libraries: "com/atlascopco/wm/common"
}
}
…
grunt.loadNpmTasks("grunt-openui5");
…

10. Consume a library
• Build & deploy to on-prem / Neo / Cloud Foundry application
• Add new library as dependency of consumer application
• Use your custom control in your application
"sap.ui5": { ... },
"dependencies": {
"minUI5Version": "1.60.1",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.ui.layout": {}
“org.openui5.ui5con.ui5conlibrary": {}
}
… xmlns:ui5con=" org.openui5.ui5con.ui5conlibrary.controls>
…
< ui5con:HelloUI5Con text=“Hello UI5Con” />
…

11. Fiori Launchpad start_up
Consume a library

12. Web IDE features

13. Thanks!