https://github.com/flovogt/ui5-external-library

UI5 sample app including an external library
https://github.com/flovogt/ui5-external-library

open-source openui5 ui5

Last synced: 6 months ago
JSON representation

UI5 sample app including an external library

• Host: GitHub
• URL: https://github.com/flovogt/ui5-external-library
• Owner: flovogt
• License: apache-2.0
• Created: 2021-01-11T15:31:34.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-10-30T10:17:43.000Z (almost 2 years ago)
• Last Synced: 2025-03-21T13:53:22.351Z (7 months ago)
• Topics: open-source, openui5, ui5
• Language: JavaScript
• Homepage:
• Size: 15.6 KB
• Stars: 4
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# UI5 External Library

This project shows how easy it is to use an already hosted custom thirdparty javascript library in an UI5 application.

The magic happens in [Component.js](webapp/Component.js) where you have to configure a shim in the *UI5 Loader*:

```javascript

  // Provides a shim for the lodash library

  sap.ui.loader.config({

    paths: {

      "custom/Lodash": "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min"

    },

    shim: {

      "custom/Lodash": {

        amd: true,

        exports: "_"

      }

    }

  });

```

Then you can use the external javascript library like you know it already from other UI5 artefacts. See [Home.controller.js](webapp/controller/Home.controller.js).

```javascript

sap.ui.define([

  "sap/ui/core/mvc/Controller",

  "custom/Lodash"

], function (Controller, Lodash) {

  "use strict";

  return Controller.extend("com.ui5.test.ui5ExternalLibrary.controller.Home", {

    onInit: function () {

      // call the thirdparty module via the path mapping

      var iResult1 = Lodash.divide(10, 2);

      // call the thirdparty module via the global namespace

      var iResult2 = _.divide(10, 2);

    }

  });

});

```

# Development

To run this UI5 application locally follow these steps:

1. Open the terminal and execute `npm i` in the root folder

2. Execute `npm start` in the terminal