In the Advanced Editor, the @settings block can be used to tweak default settings and add all kinds of powerful features to your view.
The @settings block supports all decoration properties listed in the property reference, as long as you prefix each property with one of the following:
*-if you want to apply the rule to all itemselement-to apply the rule to elements onlyconnection-to apply the rule to connections onlyloop-to apply the rule to loops only
But, @settings also supports its own list of exclusive properties. The table below lists all properties that can be used exclusively inside an @settings block, describes their effect on the view, and lists valid values for each property (when there are multiple valid values, we've listed them as separate snippets of inline code).
There are just few more things you should know about the valid values listed below:
| Where you see... | You can use... |
|---|---|
selector |
Any selector |
color |
Any CSS web color or hex color code |
number |
Any number |
'field name' |
The name of any of your fields, wrapped in single or double quotes |
element type |
Any text/string value |
All values are unitless.
<style> th:first-child { width: 200px; } td:nth-child(3) div:not(:first-child) { margin-top: 1.5rem; } </style>0 to always display labels, regardless of zoom level.",
"Possible values": ["number"]
},
{
"Property": "foreground-opacity",
"Description": "Sets the opacity of showcased items ",
"Possible values": ["0..1"]
},
{
"Property": "geo-location",
"Description": "Sets the field that will be used to geo-locate elements",
"Possible values": ["'field name'", "string template"]
},
{
"Property": "geo-style",
"Description": "Sets the style of the geo map",
"Possible values": ["auto", "streets", "satellite"]
},
{
"Property": "ignore",
"Description": "Ignores a selection. See the filter guide for more information.",
"Possible values": ["selector"]
},
{
"Property": "ignore-orphans",
"Description": "Hides any orphans (elements that have no connections). See the filter guide for more information.",
"Possible values": ["true", "false"]
},
{
"Property": "include",
"Description": "Includes a selection. See the filter guide for more information.",
"Possible values": ["selector"]
},
{
"Property": "layout",
"Description": "Sets the layout type",
"Possible values": ["force", "static", "scatter"]
},
{
"Property": "layout-bounds-xmax",
"Description": "Sets a maximum x coordinate that grid and guide lines can extend to",
"Possible values": ["number"]
},
{
"Property": "layout-bounds-xmin",
"Description": "Sets a minimum x coordinate that grid and guide lines can extend to",
"Possible values": ["number"]
},
{
"Property": "layout-bounds-ymax",
"Description": "Sets a maximum y coordinate that grid and guide lines can extend to",
"Possible values": ["number"]
},
{
"Property": "layout-bounds-ymin",
"Description": "Sets a minimum y coordinate that grid and guide lines can extend to",
"Possible values": ["number"]
},
{
"Property": "layout-gravity",
"Description": "Sets the gravity for the force-directed layout",
"Possible values": ["number"]
},
{
"Property": "layout-grid",
"Description": "Determines whether a grid will be shown",
"Possible values": ["on", "off"]
},
{
"Property": "layout-grid-color",
"Description": "Sets the color of the grid",
"Possible values": ["color"]
},
{
"Property": "layout-grid-offset",
"Description": "Sets the space between grid lines",
"Possible values": ["number"]
},
{
"Property": "layout-grid-width",
"Description": "Sets the thickness of grid lines",
"Possible values": ["number"]
},
{
"Property": "layout-guide-color",
"Description": "Sets the color of guide lines",
"Possible values": ["color"]
},
{
"Property": "layout-guide-width",
"Description": "Sets the thickness of guide lines",
"Possible values": ["number"]
},
{
"Property": "layout-guides",
"Description": "Sets the x or y coordinate for each guide line, or the origin and radius of a circle",
"Possible values": ["x(number)", "y(number)", "circle(x, y, r)", "circle(r)"]
},
{
"Property": "layout-particle-charge",
"Description": "Sets the particle charge for the force-directed layout",
"Possible values": ["number"]
},
{
"Property": "layout-preset",
"Description": "Chooses a preset version of the force-directed layout",
"Possible values": ["auto", "dense", "hairball"]
},
{
"Property": "layout-spring-length",
"Description": "Sets the spring length for the force-directed layout",
"Possible values": ["number"]
},
{
"Property": "layout-spring-strength",
"Description": "Sets the spring strength for the force-directed layout",
"Possible values": ["number"]
},
{
"Property": "layout-x",
"Description": "Sets the field used to determine elements' x coordinate in the scatter layout",
"Possible values": ["'field name'"]
},
{
"Property": "layout-x-multiplier",
"Description": "Sets a number that will be multiplied by each elements layout-x field to determine their final x coordinate",
"Possible values": ["number"]
},
{
"Property": "layout-y",
"Description": "Sets the field used to determine elements' x coordinate in the scatter layout",
"Possible values": ["'field name'"]
},
{
"Property": "layout-y-multiplier",
"Description": "Sets a number that will be multiplied by each elements layout-y field to determine their final y coordinate",
"Possible values": ["number"]
},
{
"Property": "notification-color",
"Description": "Sets the color of asterisks created by Issues",
"Possible values": ["color"]
},
{
"Property": "profile",
"Description": "Controls whether or not profiles can be opened",
"Possible values": ["on", "off"]
},
{
"Property": "quality",
"Description": "Sets the render quality",
"Possible values": ["fast", "best"]
},
{
"Property": "radar",
"Description": "Determines whether a radar will be shown",
"Possible values": ["on", "off"]
},
{
"Property": "radar-axes",
"Description": "Sets the labels for radar axes",
"Possible values": ["Axis 1, Axis 2, Axis 3..."]
},
{
"Property": "radar-font-color",
"Description": "Sets the color of radar labels",
"Possible values": ["color"]
},
{
"Property": "radar-font-family",
"Description": "Sets the font family of radar labels",
"Possible values": ["family-name", "generic-family"]
},
{
"Property": "radar-font-size",
"Description": "Sets the font size for radar labels",
"Possible values": ["number"]
},
{
"Property": "radar-ring-color",
"Description": "Sets the color between radar rings",
"Possible values": ["color"]
},
{
"Property": "radar-ring-opacity",
"Description": "Sets the opacity of radar rings",
"Possible values": ["0..1"]
},
{
"Property": "radar-ring-size",
"Description": "Sets the distance between radar rings",
"Possible values": ["number"]
},
{
"Property": "radar-ring-size-inner",
"Description": "Sets the radius of the inner radar ring",
"Possible values": ["number"]
},
{
"Property": "radar-rings",
"Description": "Sets the labels for radar rings",
"Possible values": ["Ring 1, Ring 2, Ring 3..."]
},
{
"Property": "renderer",
"Description": "Chooses which rendered will be used",
"Possible values": ["canvas", "webgl"]
},
{
"Property": "scale-max",
"Description": "Sets the maximum allowed zoom level",
"Possible values": ["number"]
},
{
"Property": "scale-min",
"Description": "Sets the minimum allowed zoom level",
"Possible values": ["number"]
},
{
"Property": "selection-color",
"Description": "Sets the color of the ring that appears around selected elements",
"Possible values": ["color"]
},
{
"Property": "showcase",
"Description": "Activates showcase. See the showcase guide for more information.",
"Possible values": ["selector"]
},
{
"Property": "template",
"Description": "Chooses a template",
"Possible values": ["causal-loop", "custom", "geo", "sna", "stakeholder", "stock-and-flow", "systems", "systems-leverage"]
},
{
"Property": "theme",
"Description": "Sets the view's overall theme",
"Possible values": ["light", "dark"]
}
]
KumuDocsExtracted.appendTable(
{ id: 'settings-reference-table', reference: settingsReference },
{
transforms: {
'Possible values': values =>
Array.isArray(values)
? values.map(value => `${value}