The SDON Cookbook

15/17 Page

Creating a Grid of Shapes with SDON

In addition to dividing a shape up into multiple cells for the purpose of displaying multiple data values in the same shape, You can use a "table" to shapes, or even diagrams, in a grid pattern.

The following SDON script shows a shape divided in to a grid of large cells with shapes positioned in some of the cells.

{
"Version": 20,
"Shape": 
{
"FillColor":"None",
"TextGrow":"Horizontal",
"Table":{"Rows":"11","Columns":"7","ColumnWidth":"150","RowHeight":"95","AlternateRows":{},
"RowProperties":[{"Row":"9","LineThick":"3"},{"Index":"1","Height":"50"}],

"Cells":[

{"Column":"2","Row":"1","Label":"Iteration 1.1"}, 
{"Column":"3","Row":"1","Label":"Iteration 1.2"}, 
{"Column":"4","Row":"1","Label":"Iteration 1.3"}, 
{"Column":"5","Row":"1","Label":"Iteration 1.4"}, 
{"Column":"6","Row":"1","Label":"Iteration 1.5 (IP)"}, 
{"Column":"7","Row":"1","Label":"P1 >>>2"},

{"Column":"1","Row":"2","Label":"Milestones","TextAlignV":"Top"},
{"Column":"1","Row":"3","Label":"Unicorns"},
{"Column":"1","Row":"4","Label":"Dolphins"},
{"Column":"1","Row":"5","Label":"Bears"},
{"Column":"1","Row":"6","Label":"Eagles"},
{"Column":"1","Row":"7","Label":"Iguanas"},
{"Column":"1","Row":"8","Label":"Antelope"},
{"Column":"1","Row":"9","Label":"Tarantulas"},
{"Column":"1","Row":"10","Label":"Needs UX help"},
{"Column":"1","Row":"11","Label":"Needs Sys Arch help"},

{"Column":"2","Row":"3","Shape":{"Hide":"true","ShapeContainer": 
{"Arrangement":"Row","ShapeAlignH":"center","ShapeAlignV":"left","Shapes": [{"Label":"Issue 1"},{"Label":"Issue 2","ID":"1"}]}}},
{"Column":"4","Row":"4","Shape":{"Label":"Issue 19","TextAlignH":"Left","FillColor":"#FF0000","ShapeType":"RRect","ID":"3"}},

{"Column":"6","Row":"2","Shape":{"Label":"Milestone 1","FillColor":"#FFFF00","ID":"2"}},
{"Column":"2","Row":"6","Shape":{"Label":"Milestone 3"}}


]}
}
,
"Returns":[{"StartID":"1","EndID":"2","StartDirection":"Right","EndDirection":"Left","LineColor":"#FF0000","Curved":"True"},
            {"StartID":"3","EndID":"2","StartDirection":"Right","EndDirection":"Left","LineColor":"#FF0000","Curved":"True"}
]
}
SDON shape grid

Initializing the Table

The table itself is defined with minimum row and column dimensions and to alternate colors:

"ColumnWidth":"150","RowHeight":"95","AlternateRows":{}

Adding Shapes to Cells

Some of the cells include "Shape":{}. Each cell can only contain one shape but that shape may contain a ShapeContainer or a ShapeConnector, allowing you to place complex diagrams inside one or more cells. The cell with a shape grows to accommodate the size of the shape(s) inside.

Note that the column labeled "Iteration 1.1" is wider than the rest because of the two shapes inside the "Unicorns" row.

{"Column":"2","Row":"3","Shape":{"Hide":"true","ShapeContainer": {"Arrangement":"Row","ShapeAlignH":"center","ShapeAlignV":"left",
                                       "Shapes": [{"Label":"Issue 1"},{"Label":"Issue 2","ID":"1"}]}}}

The two shapes are actually inside the ShapeContainer of the one shape allowed for this cell. This shape is hidden.

You can add shapes to cells in tables if the shape is the first shape in an SDON object, or a member of a ShapeContainer. However they are ignored if the shape is a member of a ShapeConnector.

You can also use the "Hide" property of the first shape in an SDON object if it contains a table with shapes. This lets you arrange shapes on a grid without showing the grid:

SDON shape grid with no border
15/17 Page