Getting Started
| Table of Contents |
|---|
Adding a Portable Gadget to a Web Page
Requirements
Setting up Portable Gadgets on 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):
| Code Block | ||
|---|---|---|
| ||
<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.6connect.com/6c_123" is the root folder of a 6connect installation, so replace that with your own 6connect instance URL.
| Code Block | ||
|---|---|---|
| ||
<script type='text/javascript' src="https://cloud.6connect.com/6c_123/portable/init.js"></script>
<link rel="stylesheet" type="text/css" href="https://cloud.6connect.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).
| Code Block | ||
|---|---|---|
| ||
<!-- 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
Here is an example for a search gadget, loading with the search term "6connect". By default it will load up to five results per type.
| Code Block | ||
|---|---|---|
| ||
<script type='text/javascript'>
var settings = {
provision_location: "https://cloud.6connect.com/6c_123",
provision_api_key: "00-ABCDEFGHIJKLMN00",
provision_secret_key: "00abcd11ef22ghij3300klmno123",
search: "6connect",
};
</script>
|
...
| Code Block | ||
|---|---|---|
| ||
<script type='text/javascript'>
var settings = {
provision_location: "https://cloud.6connect.com/6c_123",
provision_api_key: "00-ABCDEFGHIJKLMN00",
provision_secret_key: "00abcd11ef22ghij3300klmno123",
ipam: "6connect",
limit: 10
};
</script> |
An example with the DHCP gadget:
| Code Block | ||
|---|---|---|
| ||
<script type='text/javascript'>
var settings = {
provision_location: "https://cloud.6connect.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):
| Code Block | ||
|---|---|---|
| ||
<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 "6connect" is included, and the return limited 10 records.
| Code Block | ||
|---|---|---|
| ||
<html>
<head>
<script type='text/javascript' src="https://cloud.6connect.com/6c_123/portable/init.js"></script>
<link rel="stylesheet" type="text/css" href="https://cloud.6connect.com/6c_123/portable/css/provision-portable.css">
<script type='text/javascript'>
var settings = {
provision_location: "https://cloud.6connect.com/6c_123",
provision_api_key: "00-ABCDEFGHIJKLMN00",
provision_secret_key: "00abcd11ef22ghij3300klmno123",
search: "6connect",
limit: 10
};
provision('#search_gadget', settings);
</script>
</head>
<body>
<div id="search_gadget"></div>
</body>
</html> |