Script-based Integration

You don't need Node.js to use ActiveUI SDK. You can directly import the library in any HTML page.

Installation and Environment

Make sure to read the Artifacts page first.

Configure your application server so that umd/activeui-sdk.production.min.js script is served from https://host:port/your-application/umd/activeui-sdk.production.min.js.

Importing the SDK

Create a index.html file with the following code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>A Sample Page</title>
    <!-- Load React and ReactDOM from a CDN (integrity attribute computed with https://www.srihash.org/). -->
    <script
      src="https://unpkg.com/react@16.3.1/umd/react.production.min.js"
      integrity="sha384-4srYLE+UG0buQNlOqH1tQBudzBUlBoEZg/fAtDaPfAzqmDXgZh9eFTPzzogPHlJB"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js"
      integrity="sha384-Vq1+LEQ/83klHUsvPZ6Ne+bJ4T8yD7CI+mwRttTijmqepzny/G7sdNiX7HFzIdPp"
      crossorigin="anonymous"
    ></script>
    <!-- Adapt the path to where you retrieve the library from. -->
    <script src="https://host:port/your-application/umd/activeui-sdk.production.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/javascript">
      // ** Your code goes here! **
    </script>
  </body>
</html>

If you want to debug your application, take a look at this page.

Importing Named Exports

@activeviam/activeui-sdk has several named exports. In other sections of the docs you will see them imported:

import {createActiveUI} from '@activeviam/activeui-sdk';

If you are using the script integration you should instead do:

const {createActiveUI} = window.ActiveUI;
// Or if you're supporting older browsers:
// Note that in other documentation we also use some ES6 features that
// may not work in older browsers without using a compile step (which is used in the sandbox).
var createActiveUI = window.ActiveUI.createActiveUI;

Serving the Translation Files

The Internationalization of ActiveUI is done through separate JSON files: one for each available locales. These files need to be accessible in a folder named ./locales relatively to the index.html file mentioned above.

Using the Library

Open your browser to https://host:port/your-application/index.html. React, ReactDOM and ActiveUI will be available as global JavaScript variables.

← Offline Installation