Adding a Portable Gadget to a Web Page
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):
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.
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).
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:
...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.
Here is an example to load as an IPAM gadget, with an option to limit results to 10 records:
An example with the DHCP gadget:
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):
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.