How to...

Glue42 Enable Your App

Quick Guide

To Glue42 enable your app, you need to do 3 things:

  • reference the respective Glue42 library (JavaScript, .NET, Java);
  • initialize Glue42;
  • create an application definition and add it to the Glue42 Desktop configurations folder;

The following is an example of configuring a simple web app. Use this Vanilla JS web app skeleton and follow the steps in the guide below to test in practice how to Glue42 enable an application and add it to the Glue42 Application Manager. See the README.md for instructions on how to run the app.

On how to reference and initialize Glue42 in a .NET, Java, Angular, ReactJS or Node.js environment, see the respective technology menu items in the Glue42 Enable Your App section.

  1. Reference the glue.js library file in a <script> tag. If you are using the example app skeleton provided above, the glue.js library file is located in the ./lib folder.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Test App</title>
    <script type="text/javascript" src="lib/glue-4.5.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
  1. Initialize the Glue42 library.

To initialize the Glue42 library, you can use this code snippet in a <script> tag directly in your index.html or in a .js file which you can reference in your index.html:

Glue()
    .then((glue42) => {
        window.glue = glue42
    })
    .catch(console.log);

Your index.html should now look something like this:

<body>
    <h1>My Test App</h1>
    <div>
        <p>
            Some Data
        </p>
    </div>
</body>
<script>
    Glue()
        .then((glue42) => {
            window.glue = glue42
        })
        .catch(console.log);
</script>
  1. Create an application definition.

To show your app in the Glue42 Desktop App Manager dropdown menu, you need to create an application configuration .json file. You should place this file in the %LocalAppData%\Tick42\UserData\<REG-ENV>\apps folder. <REG-ENV> in the link should be replaced with the region and environment folder name used for the deployment of your Glue42 Desktop - e.g., T42-DEMO.

Below, you can see how to create a quick and simple application definition:

{
    "name": "test-app",   // required
    "title": "My Test App",
    "type": "window",   // required
    "details": {        // required
        "url": "http://localhost:3333/test-app.html", //required
        "mode": "tab",
        "width": 500,
        "height": 400
    }
}

That’s it! You now have your first Glue42 enabled app!

For more advanced configuration settings, visit the Configuration section.

See also:

  • Our full Tutorials on integrating Glue42 Desktop functionalities in your apps.
  • Our Examples section for example Glue42 Desktop functionality implementations and example apps we have developed for testing purposes.
  • Get acquainted with the core Glue42 Concepts and learn how to work programmatically with the Glue42 Desktop platform.
  • Reference