Finesse Gadgets

This is an old revision of the document!

Check out - finesse.utilities.Utilities.getParameterByName(str, name)
- https://developer.cisco.com/docs/finesse/#!javascript-library

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>

<?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>

updatecallvariabledynamicv1a.zip

Finesse Gadgets

TO DO

Reference the Finesse and jQuery Libraries

Full Example

Some Sample Gadgets

A Variation of the Update Call Variable Sample Gadget on Devnet