Elements Tags

Elements are used in a definitions block or directly when defining overview and central page types. Many sub-attributes are only used when defining a page. An elements block is defined using a elements tag with additional tags between an open { and close } brace.

Tag

Examples

 Status

Notes

elements

elements {

…

}

Optional

Defines elements for a tab, screen or page. If defined in a definitions block, they can be reused by pages within the script.

bar-chart

bar-chart id = "bar_chart_year" {

dimension "Year"

title "Vehicles Sold by Year"

bar column = "Vehicles Sold" {

link {

page id = "year"

}

}

sort-column = "Year"

}

bar-chart id = "lc-sales" {

cplan "/cplans/southern.cplan"

dimension "Posting Month"

title "Cases Sold by Month"

bar column = "Cases Y Y-1" title = "2018"

bar column = "Cases Y" title = "2019"

sort-column "Posting Month"

}

Optional

Defines a bar chart with the specified dimension and data column.

Multiple bars can be specified. By default, a legend displays on the right side of the chart.

Note the additional sub attributes used in a bar-chart block (dimension and a bar attribute are required):

  • background-color
  • border (color)—deprecated; use box
  • cplan (filter exp—defaults to inherit)
  • dimension
  • hide-legend
  • bar-chart items (column, link, title value)
  • legend-location
  • limit (first n)
  • sort (sort-column, reverse, no-sort)
  • title—deprecated; use box
  • title-justification—deprecated; use box
box

box percent = 50 {

title "Left Side"

title-justification "left"

element id = "mynos"

}

box style = "simple" {

element id = "gdcount" percent = 30

}

Optional

Creates a box around the element with a blue stripe along the top of the rectangle.

The style = simple option removes the blue stripe and drop shadow; titles are not allowed with the simple style.

The element to be boxed can be any central element as listed in this table; for example: hsplit, vsplit, table, grid, line, image, row, or chart. Use percent when the box tag is within a vsplit or hsplit.

Sub-components for a box block are (an element is required):

  • title
  • title-justification
  • element

dimension

dimension "SalesRep"

Optional

Specifies the column of data.

element

element id = “gdlines” percent = 17

element id = "lc-cases"

Optional

Includes data elements defined in another code block with the indicated id. Note the optional sub-attributes used in an element block:

  • background-color (for example: background-color "#aaaaff")

  • percent (for example: percent=49)

first

first 10

Optional

Limits the number of values shown. If omitted, all values display.

Typically used with the sort-column tag to display a limited number of the highest or lowest values.

grid

grid id = "gdcarlk" {

cplan "/cplans/carLK.cplan"

row "Group"

row "Make"

row "Model"

}

Optional

Defines a grid by specifying rows from a cPlan and the strings in those rows. Note the sub-attributes used in a grid block:

  • background-color
  • border (color)—deprecated; use box
  • cplan (filter exp—defaults to inherit)
  • header-columns (count)
  • header-rows (count)
  • row (label, column)

hbar-chart

hbar-chart id = "bar_chart_year" {

dimension "Year"

title "Vehicles Sold by Year"

bar column = "Vehicles Sold" {

link {

page id = "year"

}

}

sort-column "Year"

}

Optional

Defines a horizontal bar chart with the specified dimension and data column.

Multiple bars can be specified. By default, a legend displays on the right side of the chart.

Note the additional sub-attributes used in an hbar-chart block (dimension and a bar item are required):

  • background-color
  • cplan (filter exp—defaults to inherit)
  • data-labels (for bars; remove value axis)
  • dimension
  • hide-legend
  • hbar chart items (column, link, title value)
  • legend-location
  • limit (first n)
  • sort (sort-column, reverse, no-sort)

hsplit

vsplit {

hsplit percent = 50 {

element id = "ln-yearmo" percent = 0

element id = "br-yearmo" percent =50

}

hsplit percent = 50 {

element id = "gddimcount" percent = 90

spacer percent = 10

}

}

 Optional

Displays contained items horizontally, or left to right.

IMPORTANT: An hsplit tag must first be contained within a vsplit tag. Multiple hsplit tags within a vsplit are aligned top to bottom according to the vsplit tag.
id id = "br-yearmo" Optional Gives a block a name so it can be referenced elsewhere in the script.

image

image id = "preview" percent = 27 {

repository "brands"

path column = "group_jpg"

}

image id = "DI Logo" percent = 36 {

path "/divetab/scripts/images/
stacked-di-logo.png"

}

Optional

Specifies a graphic to include and gives it an id. Note the sub-attributes used in an image block (path is required):

  • background-color
  • border (color)—deprecated; use box
  • cplan (filter exp)
  • fallback-path
  • path
  • repository

line

line percent = 2 color = "ff00ff"

Optional

Draws a line as thick as the percentage.

line-chart

line-chart id = "line_chart_month" {

dimension "Month"

title "Vehicles Sold by Month"

line column = "Vehicles Sold"

sort-column = "Month"

}

Optional

Defines a line chart with the specified dimension and data column.

Multiple lines can be specified. By default, a legend displays on the right side of the chart.

Note the additional sub-attributes used in a line-chart block (dimension and a line chart item are required):

  • background-color
  • border (color)—deprecated; use box
  • cplan (filter exp)
  • dimension
  • hide-legend
  • legend-location
  • limit (first n)
  • line chart items (column, link, title, value)
  • sort (sort-column, reverse, no-sort)
  • title—deprecated; use box
  • title-justification—deprecated; use box
link

row {

text "DiveTab Info" {

justification "center"

link {

web-page "http://www.dimins.com/divetab/"

}

}

}

row {

text column = "Production Category Count" {

link {

page id = "rp-prod-cat"

}

}

}

row {

text column = "City/State/Zip" {

link {

map column = "Combined Address"

}

}

}

Optional

Defines a transition to a reference such as a DiveTab, DivePort, or web page, or to a document. Links can be included in charts, grids, and column sets.

Note the sub-attributes used in a link block (a reference is required):

  • condition (column)—enables or disables the link on the page
  • dimension
  • parameters (name, value)—passed to target page
  • reference

The reference types are:

  • diveport (url, page)
  • document (path, repository)
  • map (address column)
  • page (id, jump column)
  • photo-upload (path, repository)
  • web-page (url)
percent

percent = 50

percent = 85

Optional

Identifies the percentage of the display layout allocated for the element.

NOTE: The total percentage of the display layout elements within a vsplit or an hsplit must equal 100.

pie-chart

pie-chart id = "Pie-gp" {

dimension "Salesperson"

title "Units by Salesperson"

title-justification "left"

column column = "Cases Y Y-1" {

link {

page id = "rp-Product Category"

}

}

}

Optional

Defines a pie chart for the specified data dimension and data column. Note the sub-attributes used in a pie-chart block (dimension and a pie chart item are required):

  • background-color
  • border—deprecated; use box
  • cplan (filter exp)
  • dimension
  • hide-legend
  • legend-location (top, bottom)
  • pie chart column (column, link, value)
  • title—deprecated; use box
  • title-justification (left, right)—deprecated; use box

NOTE: By default, data is sorted up if the sort column is a string, period, or date, but data is sorted down if the sort column is a number. A pie chart displays the top 7 segments and consolidates the remaining values into an Other segment.

row

grid id = "gdcarlkvalues" {

cplan "/cplans/carLK.cplan"

row {

text column = "Group"

}

row {

text column = "Make"

}

row {

text column = "Prod Name Count" {

justification "left"

}

}

}

Optional

Specifies rows and columns of data to define a grid.

The cells in a grid are columns, either in-line, column-sets, or expand-sets.

sort-column

sort-column "Year"

sort-column "Cases YTD" reverse = true

Optional

Specifies a column to sort on.

spacer

spacer percent = 4

Optional

Adds space between elements. Horizontally it indents; vertically it pushes elements down.

table

table id = "tb-customer" {

dimension "Customer"

text column = "Net Sales" {

width 150

}

text "Cases" column = "Cases" {

width 50

}

sort-column "Cases" reverse = true

first 10

}

 

table id = "tb-product-color-link" {

dimension "Product Name"

text column = "Product Name" {

background-color "DDA0DD"

text-color "5F9EA0"

}

}

Optional

Defines a table on the page. The columns grow or shrink to fit the area available in the parent element on the page. Columns using the "width" tag keep that specified width.

NOTE: If used, the first tag limits what is displayed; first and sort-column are typically used together to display a limited number of the highest or lowest values.

Note the additional sub-attributes used in a table block:

  • alert
  • background-color
  • border (color)—deprecated; use box
  • bullet
  • column-set
  • cplan (filter exp)
  • dimension
  • image
  • limit (first n)
  • no-grid-lines
  • sort (sort-column, reverse, no-sort)
  • text/column
  • text-color
  • title—deprecated; use box
  • title-justification—deprecated; use box
  • value column
text

text {

value "expense"

title "EXP"

text-color "FF0000"

}

text "Cases Last Year" column = "Cases Q1 Y-1" {

value-format "#,#.00"

}

text "Cost" {

width 5

}

Optional

Specifies a title and color for the text, changes the default column heading, and can serve as a spacer column.

vsplit

hsplit {

vsplit percent = 50 {

element id = "br-year" percent = 49

line percent = 2

element id = "ln-mo" percent = 49

}

vsplit percent = 50 {

element id = "table-yr" percent = 90

}

}

Optional

Displays contained items vertically, or top to bottom.

IMPORTANT: A vsplit tag must first be contained within an hsplit tag. Multiple vsplit tags within an hsplit are aligned left to right according to the hsplit tag.

See also: