Overview
Adding a tile to a report is useful for linking reports together or improving navigation.
Full Example
Only options marked as required must be defined — all others use sensible defaults.
var ppf_widgets = {
example_tile: {
datadepend: [],
ele: ['btn1'],
type: 11,
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: "",
target: "self",
depend: [[]]
}
}
Required Keys
| Key | Description |
|---|
ele |
Required. HTML element IDs where the tile should render. Example: ele: ['btn1'] |
type |
Required. Must be 11 for a tile widget. |
url |
Required. Destination URL when the tile is clicked. Full URL including HTTP/HTTPS is required. Example: url: 'https://example.com' |
datadepend |
If the widget depends on a certain data type, define as an array. Common types: voip, act (Quality), route, capacity. |
Display Options
Dimensions & Text
| Key | Description | Example |
|---|
width | Tile width in pixels or percentage. | 200 |
height | Tile height in pixels or percentage. | 60 |
btntxt | Label text displayed on the tile. | "Example Tile" |
fontsize | Font size for the label in pixels. | 15 |
fonttype | Font family for the label. | "Arial" |
txtcol | Label text color (hex). | "#FFFFFF" |
txtalign | Label alignment: left, center, or right. | "center" |
Colors & Borders
| Key | Description | Example |
|---|
bgcol | Background color. | "#207196" |
hovcol | Background color on hover. | "#428db0" |
hovtxtcol | Text color on hover. | "#000000" |
brdwid | Border width in pixels. Set to 0 to remove. | "2" |
brdcol | Border color. | "#207196" |
hovbrdcol | Border color on hover. | "#207196" |
Behavior
| Key | Description | Example |
|---|
target | How the link opens: "self" (same window) or "new" (new window). | "self" |
depend | Widget dependencies. See dependency information. | [[]] |
