Skip to content

Commit 2aa90a8

Browse files
EliJDonahueEliJDonahue
committed
Add supporting docs
1 parent ce095e6 commit 2aa90a8

File tree

2 files changed

+339
-8
lines changed

2 files changed

+339
-8
lines changed

‎Import/examples/Import/gn_ViewCard/Default View Card.xml‎ renamed to ‎Documentation/SampleViewCardTemplate.json‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
<AML>
2-
<Item type="gn_ViewCard" id="B0E7EDD674F7428BB575CBCCC02FAD6A" action="add">
3-
<description>This is a generic View Card that will be used as a System Default Card. Innovator will use this card when a specific card isn't defined.</description>
4-
<template_definition>{
1+
{
52
"container": {
63
"type": "grid",
74
"style": {
@@ -130,7 +127,4 @@
130127
"width": 7
131128
}
132129
}
133-
}</template_definition>
134-
<name>Default View Card</name>
135-
</Item>
136-
</AML>
130+
}

‎Documentation/ViewCardProperties.md‎

Lines changed: 337 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,337 @@
1+
# View Card Templates
2+
3+
4+
## 1. Node Template Structure
5+
6+
### Sample Template
7+
This partial template shows the top-level object for a View Card template definition.
8+
9+
```(JSON)
10+
{
11+
"container": {
12+
"type": "grid",
13+
"style": {
14+
"rows": [{"height": 20}, … , {"height": 25}],
15+
"cols": [{"width": 50}, … , {"width": 75}],
16+
"cells": [{...}, … , {...}],
17+
// Optional style properties. See Section 2: "Node Global Styling".
18+
}
19+
}
20+
}
21+
```
22+
23+
### Node Template Properties
24+
The following properties are supported for defining the node structure.
25+
26+
Name | Path | Type | Example
27+
-----|------|------|-------------
28+
Type | `container.type` | string | Currently only supports the "grid" type.
29+
Style | `container.style` | object | The style object contains `rows`, `cols` and `cells` arrays defining the content structure as well as properties defining the global node style. See Section 2: "Node Global Styling" for more detail on style properties.
30+
.... Rows | `container.style.rows` | array | The rows array contains objects each representing a row of node content.<br/>`"rows": [{"height": 20}, … , {"height": 25}]`
31+
.... Columns | `container.style.cols` | array | The cols array contains objects each representing a column of node content.<br/>`"rows": [{"width": 50}, … , {"width": 75}]`
32+
.... Cells | `container.style.cells` | array | The cells array contains the content and styles to be rendered inside the node. See section 2 for more detail on defining cells.
33+
34+
## 2. Node Global Styling
35+
36+
### Sample Template
37+
This partial template highlights the global node styles.
38+
39+
```(JSON)
40+
{
41+
"container": {
42+
"type": "grid",
43+
"style": {
44+
"width": 200,
45+
"height": 90,
46+
"color": "#F7F7F7",
47+
"padding": {
48+
"left": 12,
49+
"right": 12,
50+
"top": 12,
51+
"bottom": 12
52+
},
53+
"rows": [{"height": 20}, … , {"height": 25}],
54+
"cols": [{"width": 50}, … , {"width": 75}],
55+
"border": {
56+
"width": 1,
57+
"color": "#555555",
58+
"cornerRadius": 2,
59+
"shadow": {
60+
"horizontal": 2,
61+
"vertical": 3,
62+
"color": "#000000",
63+
"opacity": 0.5
64+
}
65+
},
66+
"cells": [{...}, … , {...}],
67+
}
68+
}
69+
}
70+
```
71+
72+
### Node Styling Properties
73+
The following properties are supported for styling graph nodes.
74+
75+
Name | Path | Type | Example
76+
-----|------|------|-------------
77+
Height | `container.style.height` | integer | The height of the node in pixels.<br/>`"height": 100`
78+
Width | `container.style.width` | integer | The width of the node in pixels.<br/>`"width": 100`
79+
Background Color | `container.style.color` | hex/string | The color of the node background.<br/> `"color": "#F7F7F7"`<br/>`"color": "gray"`
80+
Padding | `container.style.padding` | integer/object | The padding of content inside of the node.<br/>`"padding": 12` – same padding for all sides will be applied. <br/>`"padding": {"left": 10}` – omitted values default to 12. <br/>`"padding": {"left": 5, "right": 5, "top": 10, "bottom": 10}`
81+
Border | `container.style.border` | object | The border property takes an object with `width`, `color`, `cornerRadius`, and `shadow` properties.
82+
.... Border Width | `container.style.border.width` | integer | The node border width in pixels.<br/>`"border": {"width": 1}`
83+
.... Border Color | `container.style.border.color` | hex/string | The color of the node border.<br/>`"border": {"color": "#555555"}`<br/>`"border": {"color": "gray"}`
84+
.... Corner Radius | `container.style.border.cornerRadius` | integer | The radius in pixels for corner smoothing.<br/>`"border": {"cornerRadius": 2}`
85+
.... Shadow | `container.style.border.shadow` | object | The shadow property takes an object with `horizontal`, `vertical`, `color`, and `opacity` properties.
86+
........ Horizontal Size | `container.style.border.shadow.horizontal` | integer | The horizontal shadow size in pixels.<br/>`"shadow": {"horizontal": 2}`
87+
........ Vertical Size | `container.style.border.shadow.vertical` | integer | The vertical shadow size in pixels.<br/>`"shadow": {"vertical": 3}`
88+
........ Shadow Color | `container.style.border.shadow.color` | hex/string | The color of the node shadow.<br/>`"shadow": {"color": "#000000"}`
89+
........ Shadow Opacity | `container.style.border.shadow.opacity` | 0.0-1.0 | The opacity of the node shadow.<br/>`"shadow": {"opacity": 0.5}`
90+
91+
## 3. Binding Cell Content
92+
93+
### Sample Template
94+
This partial template highlights several cell definitions.
95+
96+
```(JSON)
97+
{
98+
"container": {
99+
"type": "grid",
100+
"style": {
101+
"width": 200,
102+
"height": 90,
103+
"color": "#F7F7F7",
104+
"padding": { … },
105+
"rows": [{"height": 20}, … , {"height": 25}],
106+
"cols": [{"width": 50}, … , {"width": 75}],
107+
"border": { … },
108+
"cells": [
109+
{
110+
"content": "image",
111+
"content_binding": "icon",
112+
"col": 0,
113+
"row": 0
114+
},
115+
{
116+
"content": "text",
117+
"content_binding": "keyed_name",
118+
"col": 1,
119+
"row": 0
120+
},
121+
{
122+
"content": "text",
123+
"content_binding": "generation",
124+
"col": 2,
125+
"row": 0,
126+
"style": {
127+
"verticalAlignment": "top",
128+
"horizontalAlignment": "end",
129+
"font": {
130+
"size": 10,
131+
"family": "Tahoma",
132+
"weight": "normal",
133+
"color": "#777777"
134+
}
135+
}
136+
}
137+
]
138+
}
139+
}
140+
}
141+
```
142+
143+
### Cell Content Properties
144+
The following properties are supported for binding content to a node.
145+
146+
Name | Path | Type | Example
147+
-----|------|------|-------------
148+
Cell Content | `cells[i].content` | string | The type of content displayed in the cell.<br/>`"content": "text"`<br/>Also supports `"image"`.
149+
Cell Content Binding | `cells[i].content_binding` | string | Contains the property name corresponding to the defined Node Type.<br/>`"content_binding": "name"`
150+
Cell Column Index | `cells[i].col` | integer | The index of the column where the cell is located.<br/>`"col": 0`
151+
Cell Row Index | `cells[i].row` | integer | The index of the row where the cell is located.<br/>`"row": 0`
152+
Cell Style | `cells[i].style` | object | The style object contains properties for styling this cell. See Section 4: "Node Cell Styling" for more detail about styling cell content.
153+
154+
## 4. Node Cell Styling
155+
156+
### Cell Style Properties
157+
The following properties are supported for styling graph node content cells.
158+
159+
Name | Path | Type | Example
160+
-----|------|------|-------------
161+
Font | `cells[i].style.font` | object | The font property takes an object with `family`, `size`, `weight`, and `color` properties.
162+
.... Font Family | `cells[i].style.font.family` | string | The font family.<br/>`"font": {"family": "Tahoma"}`
163+
.... Font Size | `cells[i].style.font.size` | integer | The font size in pixels.<br/>`"font": {"size": 10}`
164+
.... Font Weight | `cells[i].style.font.weight` | string | The font weight.<br/>`"font": {"weight": "normal"}`<br/>Also supported: `"bold"`, `"bolder"`, `"lighter"`, `"inherit"`
165+
.... Font Color | `cells[i].style.font.color` | hex/string | The font color.<br/>`"font": {"color": "#777777"}`<br>`"font": {"color": "gray"}`
166+
Text Decoration | `cells[i].style.textDecoration` | string | The text decoration.<br/>`"textDecoration": "underline"`<br/>Also supported: `"none"`, `"overline"`, `"line-through"`, `"inherit"`
167+
Horizontal Alignment | `cells[i].style.horizontalAlignment` | string | The horizontal alignment of the content.<br/>`"horizontalAlignment": "start"`<br/>Also supported: `"middle"`, `"end"`
168+
Vertical Alignment | `cells[i].style.verticalAlignment` | string | The vertical alignment of the content.<br/>`"verticalAlignment": "hanging"`<br/>Also supported: `"middle"`, `"baseline"`
169+
Background Color | `cells[i].style.backgroundColor` | hex/string | The background color of the content.<br/>`"backgroundColor": "#F7F7F7"`<br/>`"backgroundColor": "gray"`
170+
171+
## 5. Simple Connector Styling
172+
173+
### Sample Template
174+
This partial template highlights a simple connector style.
175+
176+
```(JSON)
177+
{
178+
"style": {
179+
"color": "black",
180+
"weight": 2,
181+
"arrowhead": {
182+
"color": "black",
183+
"height": 17,
184+
"width": 7
185+
}
186+
}
187+
}
188+
```
189+
190+
### Cell Connector Properties
191+
The following properties are supported for styling simple connectors.
192+
193+
Name | Path | Type | Example
194+
-----|------|------|-------------
195+
Color | `style.color` | hex/string | The color of the connector line.<br/>`"color": "#000000"`<br/>`"color": "black"`
196+
Weight | `style.weight` | integer | The weight of the connector line.<br/>`"weight": 2`
197+
Arrowhead | `style.arrowhead` | object | The size and color of arrowhead which will be located near target node.
198+
.... Arrowhead Color | `style.arrowhead.color` | hex/string | The arrowhead color.<br/>`"arrowhead": {"color": "#000000"}`<br/>`"arrowhead": {"color": "black"}`
199+
.... Arrowhead Height | `style.arrowhead.height` | integer | The arrowhead height.<br/>`"arrowhead": {"height": 17}`
200+
.... Arrowhead Width | `style.arrowhead.width` | integer | The arrowhead width.<br/>`"arrowhead": {"width": 7}`
201+
202+
## 6. Sample Template
203+
204+
The following sample template can be used as a starting point for a View Card.
205+
206+
```(JSON)
207+
{
208+
"container": {
209+
"type": "grid",
210+
"style": {
211+
"width": 200,
212+
"height": 90,
213+
"color": "#F7F7F7",
214+
"padding": {
215+
"left": 12,
216+
"right": 12,
217+
"top": 12,
218+
"bottom": 12
219+
},
220+
"rows": [
221+
{
222+
"height": 20
223+
},
224+
{
225+
"height": 16
226+
},
227+
{
228+
"height": 16
229+
},
230+
{
231+
"height": 16
232+
}
233+
],
234+
"cols": [
235+
{
236+
"width": 22
237+
},
238+
{
239+
"width": 120
240+
},
241+
{
242+
"width": 35
243+
}
244+
],
245+
"border": {
246+
"width": 1,
247+
"color": "#555555",
248+
"cornerRadius": 2,
249+
"shadow": {
250+
"horizontal": 2,
251+
"vertical": 3,
252+
"color": "#000000",
253+
"opacity": 0.5
254+
}
255+
},
256+
"cells": [
257+
{
258+
"content": "image",
259+
"content_binding": "icon",
260+
"col": 0,
261+
"row": 0
262+
},
263+
{
264+
"content": "text",
265+
"content_binding": "keyed_name",
266+
"col": 1,
267+
"row": 0
268+
},
269+
{
270+
"content": "text",
271+
"content_binding": "generation",
272+
"col": 2,
273+
"row": 0,
274+
"style": {
275+
"verticalAlignment": "top",
276+
"horizontalAlignment": "end",
277+
"font": {
278+
"size": 10,
279+
"family": "Tahoma",
280+
"weight": "normal",
281+
"color": "#777777"
282+
}
283+
}
284+
},
285+
{
286+
"content": "text",
287+
"content_binding": "name",
288+
"col": 1,
289+
"row": 1,
290+
"style": {
291+
"font": {
292+
"size": 12,
293+
"family": "Tahoma",
294+
"weight": "normal",
295+
"color": "#333333"
296+
}
297+
}
298+
},
299+
{
300+
"content": "text",
301+
"content_binding": "classification",
302+
"col": 1,
303+
"row": 2,
304+
"style": {
305+
"font": {
306+
"size": 10,
307+
"family": "Tahoma",
308+
"weight": "normal",
309+
"color": "#333333"
310+
}
311+
}
312+
},
313+
{
314+
"content": "text",
315+
"content_binding": "state",
316+
"col": 1,
317+
"row": 3,
318+
"style": {
319+
"font": {
320+
"size": 10,
321+
"family": "Tahoma",
322+
"weight": "normal",
323+
"color": "#777777"
324+
}
325+
}
326+
}
327+
]
328+
}
329+
},
330+
"style": {
331+
"arrowhead": {
332+
"height": 17,
333+
"width": 7
334+
}
335+
}
336+
}
337+
```

0 commit comments

Comments
 (0)