5.3 Extending the ZFE Web Client

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

When you add extensions to the ZFE web client, the modifications are visible to all your users and apply to all sessions. It is possible to write extension code containing specific logic that limits changes to certain users or sessions.

To add an extension

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

To share files without requiring authentication:

Create <install_dir>/sessionserver/microservices/zfe/extensions/public/. Place your code in that directory, calling it using the URL /zfe/public/*.

In this example, once extensions are enabled (see Step 2 above), 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.

Locate index.html, which you created in step 4 above.This is where you will be placing your extension files, creating 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.

When the files are in place, <install_dir>/sessionserver/microservices/zfe/extensions/client/index.html, the results should look like this:

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