Extending the Web Client

You can update, modify, and customize the presentation of the web client by using your own HTML, CSS, or JavaScript from within the browser.

You can take advantage of extensions to make visual changes to the web client and to customize the application. The web client hosts your custom HTML or CSS code, making it easy to modify and support.

Adding an extension

Before proceeding keep in mind that although Host Access for the Cloud provides the ability to plan and use custom code, the code itself must be supported by the team that produced it.

You enable extensions in the Host Access For The Cloud console. There are detailed instructions available from the Extension page help icon .

When you add extensions to the web client, the modifications are visible to all your users and apply to all sessions.

To enable extensions

1. From the drop-down menu in the Adminstrative Console, select Host Access for the Cloud.

2. Click Extensions

3. Ensure extensions are uploaded to enable the Extensions toggle.

4. Toggle the Extensions switch to activate extensions.

5. Redeploy the service.

6. After extensions are enabled, from the same drop-down menu, select Host Access for the Cloud, and then Extensions. From here you can upload, download, or remove your extensions.

Making extensions available without client authentication

Files within the /client directory are protected using the level of authentication you selected in MSS.

To share files without requiring authentication:

1. Create a zip file that contains a directory named public. This directory will contain your extension code.

2. In this same zip file, add any other client or server extensions under the relevant directories (/client or /server).

3. Using the Extension page from the Host Access for the Cloud drop-down menu, upload the zip file. Call the URL /public/* to access your files.

Extension sample

In this example, once extensions are enabled, you can add some custom CSS and JavaScript code to change the menu label font color and print text to the JavaScript console.

You will create three files; custom.css, custom.js, and index.html

Step 1

Create index.html. Place your extension files in the file to create an entry point:

<!-- Define the link to the external style sheet -->
<link href="client/custom.css" rel="stylesheet">
<!-- Define the external JavaScript file -->
<script src="client/custom.js"></script>

Step 2

Change the default black menu labels to orange:

Create custom.css to change the color to orange:

/* Change link text to Orange */
a span {
    color: #ff5d28;
}

Step 3

Create custom.js to send text to the JavaScript console:

//Print message to the JavaScript console
console.log('Hello World!');

Step 4

Create a zip file containing client and server folders, each containing the relevant extension file. Using the Extension page from the Host Access for the Cloud drop-down menu, upload the zip file.

Step 5

Deploy the files. The the results should look like this:

And the “Hello World” text is visible in the JavaScript console:

More Information:

HACloud API Documentation