MCS Publishing | PPF Tile 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.