Table of Contents

Finesse Gadgets

TO DO

Reference the Finesse and jQuery Libraries

Reference the Finesse and jQuery libraries hosted on the Finesse server from within your external Hosted Gadget using the below code. Full example outlines how to do this. 

<UserPref name="scheme" display_name="scheme" default_value=""/>
<UserPref name="host" display_name="host" default_value=""/>
<UserPref name="hostPort" display_name="hostPort" default_value=""/>	
<!-- jQuery -->
<script type="text/javascript" src="__UP_scheme__://__UP_host__:__UP_hostPort__/desktop/assets/js/jquery.min.js"></script>
 
<!-- Finesse Library -->
<script type="text/javascript" src="__UP_scheme__://__UP_host__:__UP_hostPort__/desktop/assets/js/finesse.js"></script>

Full Example

<?xml version="1.0" encoding="UTF-8"?>
<Module>
    <ModulePrefs title="My Sample Gadget"
        description="My Sample Gadget">
 
        <Require feature="settitle" />
        <Require feature="dynamic-height" />
        <Require feature="pubsub-2" />
    	<Require feature="setprefs" />
        <Require feature="loadingindicator">
        <Param name="manual-dismiss">false</Param>
        <Param name="loading-timeout">10</Param>
        </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>
        	<!-- Styling -->
            <link rel="stylesheet" href="My SampleGadget.css" type="text/css" />
 
		<!-- jQuery -->
		<script type="text/javascript" src="__UP_scheme__://__UP_host__:__UP_hostPort__/desktop/assets/js/jquery.min.js"></script>
 
		<!-- Finesse Library -->
		<script type="text/javascript" src="__UP_scheme__://__UP_host__:__UP_hostPort__/desktop/assets/js/finesse.js"></script>	
 
            <!-- Gadget Business Logic -->
            <script type="text/javascript" src="MySampleGadget.js"></script>
 
            <body class="claro">
                <!-- sample gadget html only has 1 div which will be modified during the My SampleGadget -->
                <div>
                    <div id="agentout">
                </div>
            </body>
 
            <script type="text/javascript">
                // initialize the gadget running the init handler defined in MySampleGadget.js
                gadgets.HubSettings.onConnect = function () {
                    finesse.modules.SampleGadget.init();
                };
            </script>
        ]]>
    </Content>
</Module>

Some Sample Gadgets

A Variation of the Update Call Variable Sample Gadget on Devnet

updatecallvariabledynamicv1a.zip