Getting Started With Portable Gadgets

Getting Started

Adding a Portable Gadget to a Web Page

Requirements

Setting up Portable Gadgets requires a ProVision instance URL and valid API credentials (API key and secret key), as well as some familiarity with HTML, CSS, and Javascript.

Before You Begin

Before you begin, make sure you have access to the source code for the web page on which you want the portable gadget to appear, or create a simple new web page for testing purposes with minimal tags like this (with the location of steps included as comments):

<html>
	<head>
		<!-- STEP 1 WILL GO HERE -->
		
		<!-- STEP 3a WILL GO HERE -->
		<!-- STEP 3b WILL GO HERE -->
	</head>
	<body>
		<!-- STEP 2 WILL GO HERE -->
	</body>
</html>

Step 1: Reference dependency files

Include the following two scripts the ﹤HEAD﹥ block. They should reference your provision installation.

In this example, "https://cloud.example.com/6c_123" is the root folder of a 6connect installation, so replace that with your own 6connect instance URL.

<script type='text/javascript' src="https://cloud.example.com/6c_123/portable/init.js"></script>
<link rel="stylesheet" type="text/css" href="https://cloud.example.com/6c_123/portable/css/provision-portable.css">

Step 2: Create Gadget ﹤div﹥

Place the html ﹤div﹥ tag for your gadget where you want it to appear in the page ﹤body﹥, and give it a unique id.

Your gadget should be an html element in your page body (any contents inside the element will be removed). This example has a div referred to as "gadget" (as the ID).

<!-- provision gadget -->
<div id="gadget"></div>

Step 3: Initialize the Gadget

a) Preparing the settings

First, a settings variable must be prepared with the details of the gadget.

It must have the following keys for the provision url and api keys:

provision_location
provision_api_key
provision_secret_key

...as well as the name of one of the gadget to load:

search -- does a search with the global search API
dhcp -- does a search with the DHCP API
ipam -- does a search with the IPAM API
pv-logs – details actions taken in ProVision.

Here is an example for a search gadget, loading with the search term "test". By default it will load up to five results per type.

<script type='text/javascript'>
var settings = {
provision_location: "https://cloud.example.com/6c_123",
provision_api_key: "00-ABCDEFGHIJKLMN00",
provision_secret_key: "00abcd11ef22ghij3300klmno123",

search: "test",
};
</script>

Here is an example to load as an IPAM gadget, with an option to limit results to 10 records:

<script type='text/javascript'>
var settings = {
provision_location: "https://cloud.example.com/6c_123",
provision_api_key: "00-ABCDEFGHIJKLMN00",
provision_secret_key: "00abcd11ef22ghij3300klmno123",

ipam: "test",
limit: 10
};
</script>

An example with the DHCP gadget:

<script type='text/javascript'>
var settings = {
provision_location: "https://cloud.example.com/6c_123",
provision_api_key: "00-ABCDEFGHIJKLMN00",
provision_secret_key: "00abcd11ef22ghij3300klmno123",

dhcp: "Test",
};
</script>

b) Initialize the gadget HTML element

The gadget will initialize when scripted to do so with the provision() command. For the example html in section II, we can instantiate this gadget by running the following (as long as settings was prepared):

<script type='text/javascript'>
provision('#gadget', settings)
</script>

The first parameter targets the html element that is the gadget, using jQuery's selector format. In this case, it is an element with the ID "gadget".

Basic Page Example

Here is a simple example html page with a search gadget. In this example, a default search term of "test" is included, and the return limited 10 records.

<html>
	<head>
		<script type='text/javascript' src="https://cloud.example.com/6c_123/portable/init.js"></script>
		<link rel="stylesheet" type="text/css" href="https://cloud.example.com/6c_123/portable/css/provision-portable.css">
		<script type='text/javascript'>
			var settings = {
				provision_location: "https://cloud.example.com/6c_123",
				provision_api_key: "00-ABCDEFGHIJKLMN00",
				provision_secret_key: "00abcd11ef22ghij3300klmno123",

				search: "test",
				limit: 10
			};
			provision('#search_gadget', settings);
		</script>
	</head>
	<body>
		<div id="search_gadget"></div>
	</body>
</html>

Page tree