Appendix
Copy
A View Card template definition is a JSON structure containing node or connector rendering settings. If the graph rendering engine is not able to parse the template JSON or it has valid syntax but an invalid structure, the rendering engine will use the system default view card.
Node Template Structure
The general structure of a node template is as follows:
{
"container": {
"type": "grid",
"style": {
"rows": [{"height": 20}, … , {"height": 25}],
"cols": [{"width": 50}, … , {"width": 75}],
"cells": [{
"content": "image"|"text",
"content_binding": "binding_prop_name",
"col": column_index,
"row": row_index,
"style": {
// Text styling properties. Optional.
}
}
],
// Set of styling settings described below
}
}
}The root element of the template JSON is the “container” object. It contains type (currently only grid is supported) and style, the object containing the node structure and style settings.
- rows and cols: The arrays of row and column definitions required for grid content and used to determine the node content grid structure.
- cells: The array of items to be rendered inside the node.
- content: Determines if the content of the cell is text or if it is an image.
- content_binding: Contains the item name that must correspond to the name of the property specified in the Node Type (Figure 11).
- col and row: Determine the place in the grid where to render item.
View Cards support two levels of Styling Control:
- Global (Applied to all cells within a node).
- Individual cell styling.
Node Global Styling
The following controls are supported for the node:
Height: The height of the node in pixels. Example:
“height": 100
NoteMinimal allowed height is equal to 45 pixels.
Width: The width of the node in pixels. Example:
“width": 100
NoteMinimal allowed width is equal to 45 pixels.
- Background Color: The color of the node background. Examples: “color": "#F7F7F7","color": “black”
- Padding (left, right, top, bottom): The padding of content inside of the node. Example: “padding": 12 – same padding for all sides will be applied."padding": {"left": 10} – specified padding is set to desired value, other values default to 12."padding": {"left": 5, “right": 5, “top": 10, “bottom": 10}
- Border Width: The node border width in pixels. Example:
“border": {"width": 1}
- Border Color: The color of the node border. Example: “border": {"color": "#555555"}
- Border Corner Radius: The radius in pixels for corner smoothing. Example: “border": {"cornerRadius": 2}
- Border Shadow: The border shadow with properties horizontal (horizontal shadow size in pixels), vertical (vertical shadow size in pixels), color and opacity. If any value is missed –the default one is used. Example:
"border": { "shadow": { "horizontal": 2, "vertical": 3, "color": "#000000", "opacity": 0.5 } }
The following is an example containing multiple border properties:
"border": { "width": 1, "color": "#555555", "cornerRadius": 2, "shadow": { "horizontal": 2, "vertical": 3, "color": "#000000", "opacity": 0.5 } }
Node Cell Styling
The following controls are supported for cells containing text content:
- Font Family: The font family. Example:
“font": { “family": “Tahoma” }
Font Size: The font size in pixels. Example:
“font": { “size": 10 }Font Weight: The font weight supports the following values:
“font": {“weight": “normal"|"bold"|"bolder"|"lighter"|"100"|"200"|“300"|"400"|"500"|"600"|"700"|"800"|"900"|"inherit”}Font Color: The font color. Example:
“font": {“color": "#777777"}- Text Decoration: The text decoration supports the following values:
“textDecoration": “none"|"underline"|"overline"|"line-through"|"blink"|"inherit”
- Horizontal Alignment: The horizontal alignment supports the following values:
“horizontalAlignment": “start"|"middle"|"end” - Vertical alignment: The horizontal alignment supports the following values:
“verticalAlignment": “hanging"|"middle"|"baseline” - Background Color: The background color for the text. Example:
{ "content": "text", "content_binding": "part_number", "col": 2, "row": 1, "style": { "verticalAlignment": "top", "horizontalAlignment": "end", "textDecoration": "underline", "backgroundColor": "gray", "font": { "size": 10, "family": "Tahoma", "weight": "normal", "color": "#777777" } } }
Simple Connector Styling
The following controls are supported for a simple connector:
- Color: The color of the connector line. Example: “color": “black”
- Weight: The weight of the connector line in pixels. Example:
“weight": 2 Arrowhead: The size and color of arrowhead which will be located near target node. Example:
“arrowhead": {“color": “black”,“height": 17,“width": 7}Example of a simple connector template:
{ "style": { "color": "black", "weight": 2, "arrowhead": { "color": "black", "height": 17, "width": 7 } } }
Connector with Label Styling
Use the node template format to define a template for a connector that includes labels. See Section 4.1.1 for more information. The following is an example of a connector view card template:
{
"container": {
"type": "grid",
"style": {
"width":20,
"height":90,
"color": "#F7F7F7",
"padding": 12,
"rows": [{"height": 20}],
"cols": [{"width": 120}],
"border": {
"width": 1,
"color": "#555555",
"cornerRadius": 2
},
"cells": [
{
"content": "text",
"content_binding": "keyed_name",
"col": 0,
"row": 0
}
]
}
},
"style": {
"color": "black",
"weight": 2,
"arrowhead": {
"color": "black",
"height": 17,
"width": 7
}
}
}
Sample View Card
The following example shows a template definition that can be used in view cards to style both nodes and connectors.
{
"container": {
"type": "grid",
"style": {
"width":200,
"height":90,
"color": "#F7F7F7",
"padding": {
"left": 12,
"right": 12,
"top": 12,
"bottom": 12
},
"rows": [{"height": 20}, {"height": 16}, {"height": 16},
{"height": 16}],
"cols": [{"width": 22}, {"width": 120}, {"width": 35}],
"border": {
"width": 1,
"color": "#555555",
"cornerRadius": 2,
"shadow": {
"horizontal": 2,
"vertical": 3,
"color": "#000000",
"opacity": 0.5
}
},
"cells": [
{
"content": "image",
"content_binding": "icon",
"col": 0,
"row": 0
},
{
"content": "text",
"content_binding": "keyed_name",
"col": 1,
"row": 0
},
{
"content": "text",
"content_binding": "generation",
"col": 2,
"row": 0,
"style": {
"verticalAlignment": "top",
"horizontalAlignment": "end",
"font": {
"size": 10,
"family": "Tahoma",
"weight": "normal",
"color": "#777777"
}
}
},
{
"content": "text",
"content_binding": "name",
"col": 1,
"row": 1,
"style": {
"font": {
"size": 12,
"family": "Tahoma",
"weight": "normal",
"color": "#333333"
}
}
},
{
"content": "text",
"content_binding": "classification",
"col": 1,
"row": 2,
"style": {
"font": {
"size": 10,
"family": "Tahoma",
"weight": "normal",
"color": "#333333"
}
}
},
{
"content": "text",
"content_binding": "state",
"col": 1,
"row": 3,
"style": {
"font": {
"size": 10,
"family": "Tahoma",
"weight": "normal",
"color": "#777777"
}
}
}
]
}
},
"style": {
"arrowhead": {
"height": 17,
"width": 7
}
}
}