mobile menu

PPF Tile Widget

You are here
PPF Image Widget

PPF Tile widget

Adding a tile to a report can be useful when wanting to link other reports together or simply improve navigation.

Below is an example of ALL the options available when defining a tile widget. Some options are required, the options that are not required don't need to be defined unless something other than default is desired.

var ppf_widgets = {
    example_tile: { //Name of widget, unique
       datadepend: [],
       ele: ['btn1'], //REQUIRED
       type: 11, //REQUIRED
       height: 60,
       width: 200,
       fontsize: 15,
       fonttype: "Arial",
       txtcol: "#FFFFFF",
       txtalign: "center",
       btntxt: "Example Tile",
       bgcol: "#207196",
       hovcol: "#428db0",
       hovtxtcol: "#000000",
       brdwid: "2",
       brdcol: "#207196",
       hovbrdcol: "#207196",
       url: "", //REQUIRED
       target: "self",
       depend: [[]]
    }
}

Defining a tile widget

Key Value
ele

Required. The element(s) defined here refer to HTML elements that should be present in the HTML page that pairs with the PPF. So, if the HTML element the table should appear in is

<div id='extile'></div>

the ele definition would be

ele: ['extile']
datadepend
datadepend: ['voip','act']

If a widget is dependant on a certain data type then define a data dependency value. The format is an array. Common test types that can be defined are voip, act (which is Quality speed data), route, and capacity.

type

Required. Tile is type 11 and must be defined. When defined it should look like this

type: 11
url

Required. Define the destination URL when the tile is clicked. The full URL is required, including HTTP/HTTPS.

src: 'https://example.com'
width

Set the width to be used for the image as a pixel or a percentage.

width: '200px'
height

Set the height to be used for the image as a pixel or a percentage.

height: '200px'
fontsize

Specify the size of the font to use for the tile label. The value is in pixels (px)

fontsize: 15
fonttype

Specify the font family for the tile label. The default is Arial.

fonttype: "Arial"
txtcol

Specify the color of the tile label in hex code format, as shown below.

txtcol: "#FFFFFF"
txtalign

Specify how the tile label should align to the tile itself.

txtalign: "center"
btntxt

Specify the text for the tile label.

btntxt: "Example Tile Text"
bgcol

Specify the background color of the tile.

bgcol: "#207196"
hovcol

Specify the background color of the tile when the mouse is hovering over the tile.

hovcol: "#428db0"
hovtxtcol

Specify the text color of the tile label when the mouse is hovering over the tile.

hovtxtcol: "#000000"
brdwid

Specify the width of the border in pixels (px). Set to 0 to remove the border.

brdwid: 2
brdcol

Specify the color of the border.

brdcol: "#207196"
hovbrdcol

Specify the color of the border when the mouse is hovering over the tile.

hovbrdcol: "#207196"
target

Specify how the link should open. "self" will open the link in the same page, "new" will open the link in a new window.

target: "self"
depend Click here for dependency information.