Component Preload

The Component Cards include multiple files - Component.js, View.view.xml, Main.controller.js, and others. For productive environments they should all be bundled into one single file called Component-preload.js.

The recommended way to generate Component-preload.js is to use the UI5 Tooling. To generate the bundle, follow these steps:

1. Initiate an NPM project with npm init
2. Add dev dependency to the UI5 Tooling - npm install @ui5/cli --save-dev
3. Add build script into the generated "package.json" file -

   "scripts": {
   	"build": "ui5 build"
   }
   

4. Put all card files into a folder called "card"
5. Create ui5.yaml and configure it how to find the "card" folder

   specVersion: "3.0"
   type: application
   metadata:
     name: your-project-name
   resources:
     configuration:
       paths:
         webapp: card
   

6. Finally, the folder structure should look like this:

   yourCardPackage
   |--  card
   |	|--  dt
   |		|--  Configuration.js
   |	|--  i18n
   |		|--  messagebundle.properties
   |		|--  messagebundle_en.properties
   |		|--  messagebundle_de.properties
   |	|--  images
   |		|-- Image.png
   |	|--  manifest.json
   |	|--  Component.js
   |	|--  View.view.xml
   |	|--  Main.controller.js
   |--  ui5.yaml
   |--  package.json
   

7. Execute npm build. This will generate "dist" folder, which contains the production-ready Component-preload.js, the rest of the files that are not part of it, like images, and manifest.json
8. In the end, the files from the "dist" folder should be used. In your application, make the manifest property of the card point to the one in the "dist" folder, or if uploading a card to SAP Build Work Zone, upload the entire "dist" folder, for example.

Note: By default, the UI5 Tooling also includes the "dt" folder into the Component-preload.js. As it is used only during card configuration, you have to remove the "dt" folder.

builder:
  componentPreload:
    excludes:
      - "your/component/card/dt/*"

There are many options provided by the UI5 Tooling that the card developer should use to create the most optimal preload for his card. For more information, see UI5 Tooling - Configuration section.

Example

Try it Out