Page tree
Skip to end of metadata
Go to start of metadata

Customizing Portable Gadgets

Customization Options

 Portable Gadgets come with both built-in customization options as well as the ability to edit styles locally through CSS. 

Required Settings:

The required fields are:

provision_location: the location of the provision installation
provision_api_key: available from the Admin API Tab in ProVision
provision_secret_key: available from the Admin API Tab in ProVision


Other required fields (by gadget)

Search:
     search: "string"
IPAM:
    ipam:  "string" 
DHCP:
    dhcp:  "string" 


Where, in each case, "string" is the search term used on the initial loading of the gadget. If it is an empty string (literally, ""), then gadget will load without a pre-defined search.

Optional Settings:

These settings must be included as parameters when initializing the gadget. See Getting Started With Portable Gadgets.


limit:  positive integer, or -1

The record return limit of the gadget. In some gadgets (search and DHCP) there are multiple types, so it limits per type.  The default limit, if this option is not provided, is 5.  If you specify limit a -1 (or basically any negative number), it will not enforce a limit.

links_change_window:  true

setting this to true (not string "true" but actual true type in javascript) will make links change the current window. The default behavior (not having this option or false), would have links open a new tab.

interact:    false

By default, there will be a search box on all these gadgets. But with this option set to false (again, using false not string "false") will remove that box so search cannot be changed.


Sample CSS Customization

Alternating Row Formatting:


<style>
.pg-subtitle {
    color: lightslategrey;
    font-size:1.4em;
    font-weight: bold;
}

.pg-field-name a:hover {
    text-decoration: none;
    color: white;
    background-color: gray;
}

.pg-results tr:nth-child(2n+1) {
    background: white;
}
.pg-results tr:nth-child(2n+0) {
    background: lightgray;
}
</style>