Finesse Gadget not picking up finesse.js

MartinNielsen · ‎12-13-2024

Hello everyone.

I am quite new to gadget development, and have only a rudementary understanding of what actually goes on under the hood when gadgets are loaded.

I am attempting to create a gadget from an Angular project which (in my mind at least) should be possible. But I have run into trouble.

I have created a "hello world" angular project, and built it with a small build script that creates the gadget.xml in the dist directory before the project i hosted.

The angular project itself is completely unchanged from the output of the ng new command. The xml looks like this

</ModulePrefs>

<![CDATA[ <!doctype html> <html lang="en" data-critters-container> <head> <meta charset="utf-8"> <title>GadgetPoc</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="stylesheet" href="styles-5INURTSO.css"></head> <body> <app-root></app-root> <script src="polyfills-XGEWO5NQ.js" type="module"></script><script src="main-RNJLK6BF.js" type="module"></script></body> </html> ]]>

</Content>

</Module>

I can see in the network log that the calls to gadgets/ifr?container and /gadgets/concat?container=default are both being called, and the result seems to be a concatenated blob of angular and my application. But the gadget doesn't actually load. the gadget is rendered in its iframe, and the body contains the html of the app

<app-root></app-root>

</body>

But the gadget does not render. It seems like the angular code is not being bootstrapped.

The bootstrapping of an angular app normally happens when the module is loaded as I understand it. But is seems this does not happen with the finesse gadget.

Am I so lucky that someone else has been on the same journey and can guide me in the right direction?

-Martin

nasinha · ‎12-13-2024

hi Martin,

Do take a look at the attached Archive.zip and use the ABC.xml and ABC.js file attached there. Create a similar one for your angular application. Replace the words "ABC" with your server details (or the appropriate code at your end) where it is used in the ABC.xml and ABC.js file. Hope this should resolve the problem that you are facing.

Also take a look at https://github.com/CiscoDevNet/finesse-sample-code

Thanks

Nabhonil

Thomas G. Johannesen · ‎12-13-2024

Where are you referring to the finesse.js file ?

The gadget has to load the finesse.js

You can do it like this :

<?xml version="1.0" encoding="utf-8" ?>
<Module>
	<ModulePrefs title="TaskPOC" description="" thumbnail="" author ="">
		<Require feature="pubsub-2"></Require>
		<Require feature="setprefs"></Require>
		<Require feature="settitle"/>
		<Require feature="dynamic-height"></Require>
	</ModulePrefs>

	<UserPref name="scheme" display_name="scheme" default_value=""/>
	<UserPref name="host" display_name="host" default_value=""/>
	<UserPref name="hostPort" display_name="hostPort" default_value=""/>
	<Content type="html">
		<![CDATA[
<!DOCTYPE html>

<link rel="stylesheet" type="text/css" href="__UP_scheme__://__UP_host__:__UP_hostPort__/desktop/thirdparty/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="visnummer.css" />

<script type="text/javascript" src="__UP_scheme__://__UP_host__:__UP_hostPort__/desktop/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="__UP_scheme__://__UP_host__:__UP_hostPort__/desktop/thirdparty/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="__UP_scheme__://__UP_host__:__UP_hostPort__/desktop/assets/js/finesse.min.js"></script>
<script type="text/javascript" src="gadget.js"></script>
<body>

</body>
<script type="text/javascript">
    gadgets.HubSettings.onConnect = function () { finesse.modules.taskpoc.init(); };
</script>
]]>
	</Content>
</Module>

and then you gadget.js file :

finesse.gadget = finesse.gadget || {};
finesse.container = finesse.container || {};
clientLogs = finesse.cslogger.ClientLogger || {};  // for logging

/**
 * The following comment prevents JSLint errors concerning the logFinesse function being undefined.
 * logFinesse is defined in Log.js, which should also be included by gadget the includes this file.
 */
/*global logFinesse */

/** @namespace */
finesse.modules = finesse.modules || {};
finesse.modules.taskpoc= (function ($) {
    var user;
    /**
     * Populates the fields in the gadgettest with data
     */
    function render() {
        clientLogs.log("Render");


        var teamId = user.getTeamId();
        var teamName = "";
        clientLogs.log("teamId" + teamId)


    }


    function handleUserLoad(userevent) {

        clientLogs.log("Gadget is now visible");  // log to Finesse logger
        clientLogs.log("Version 0.1");
        render();
    }

    function handleUserChange(userevent) {

        clientLogs.log("handleUserChange");

    }


    /** @scope finesse.modules.taskpoc*/
    return {
        /* Sets the user state */

        init: function () {
            var cfg = finesse.gadget.Config;

            clientLogs = finesse.cslogger.ClientLogger;  // declare clientLogs

            gadgets.window.adjustHeight();

            finesse.clientservices.ClientServices.init(cfg, false);

            clientLogs.init(gadgets.Hub, "taskpoc");

            user = new finesse.restservices.User({
                id: cfg.id,
                onLoad: handleUserLoad,
                onChange: handleUserChange
            });

            states = finesse.restservices.User.States;

            containerServices = finesse.containerservices.ContainerServices.init();
            containerServices.addHandler(finesse.containerservices.ContainerServices.Topics.ACTIVE_TAB, function () {

                gadgets.window.adjustHeight();
            });
            containerServices.makeActiveTabReq();
        }
    };
}(jQuery));

Please rate helpful posts and if applicable mark "Accept as a Solution".
Thanks, Thomas G. J.