To make this:
I made a DynamicItem view with two parameters: IsShown and Display. I added a button, with the text bound to the Display property and visible bound to IsShown.
view.json
{
"custom": {},
"params": {
"ColNum": 1,
"Display": "default",
"IsShown": 1,
"RowNum": 1
},
"propConfig": {
"params.ColNum": {
"paramDirection": "input",
"persistent": true
},
"params.Display": {
"paramDirection": "input",
"persistent": true
},
"params.IsShown": {
"paramDirection": "input",
"persistent": true
},
"params.RowNum": {
"paramDirection": "input",
"persistent": true
}
},
"props": {
"defaultSize": {
"height": 81,
"width": 106
}
},
"root": {
"children": [
{
"meta": {
"name": "Button"
},
"position": {
"height": 55,
"width": 80,
"x": 15,
"y": 12
},
"propConfig": {
"meta.visible": {
"binding": {
"config": {
"path": "view.params.IsShown"
},
"type": "property"
}
},
"props.text": {
"binding": {
"config": {
"path": "view.params.Display"
},
"type": "property"
}
}
},
"type": "ia.input.button"
}
],
"meta": {
"name": "root"
},
"type": "ia.container.coord"
}
}
I made view named DynamicFlexRow with one parameter RowNum. I added a flex repeater and made the path DynamicItem. I bound the instances to a named query that returns Display and IsShown for all items that are shown on the RowNum.
view.json
{
"custom": {},
"params": {
"RowNum": 1
},
"propConfig": {
"params.RowNum": {
"paramDirection": "input",
"persistent": true
}
},
"props": {
"defaultSize": {
"height": 98,
"width": 857
}
},
"root": {
"children": [
{
"meta": {
"name": "FlexRepeater"
},
"position": {
"basis": "98px"
},
"propConfig": {
"props.instances": {
"binding": {
"config": {
"parameters": {
"RowNum": "{view.params.RowNum}"
},
"queryPath": "DynamicRowInfo",
"returnFormat": "json"
},
"type": "query"
}
}
},
"props": {
"path": "Page/Embedded/DyamicItem"
},
"type": "ia.display.flex-repeater"
}
],
"meta": {
"name": "root"
},
"props": {
"direction": "column"
},
"type": "ia.container.flex"
}
}
Query
```
SELECT RowNum, ColNum, CHAR(RowNum-1+ASCII('A'))+CONVERT(VARCHAR(2),colnum) as Display, IsShown
FROM DynamicGridDefinition
WHERE RowNum = :RowNum
AND IsShown = 1
```
Then I created a view with a flex repeater. The path is to the DyanmicFlexRow and the instances property is bound to a query that returns the row number for each row that is shown.
view.json
{
"custom": {},
"params": {},
"propConfig": {
"params.feature": {
"paramDirection": "input"
},
"params.key": {
"paramDirection": "input"
},
"params.tier1": {
"paramDirection": "input"
},
"params.tier2": {
"paramDirection": "input"
}
},
"props": {
"defaultSize": {
"width": 886
}
},
"root": {
"children": [
{
"meta": {
"name": "Title"
},
"position": {
"basis": "56px",
"shrink": 0
},
"props": {
"params": {
"icon": "home",
"text": "Home"
},
"path": "Page/Embedded/Title"
},
"type": "ia.display.view"
},
{
"meta": {
"hasDelegate": true,
"name": "Spacer_1"
},
"position": {
"basis": "12px",
"shrink": 0
},
"type": "ia.display.label"
},
{
"meta": {
"hasDelegate": true,
"name": "Welcome"
},
"position": {
"basis": "20px",
"shrink": 0
},
"props": {
"style": {
"classes": "Page/Bold Page/Margins Page/Text"
},
"text": "Dynamic Grid Test - Flex Repeater of Rows"
},
"type": "ia.display.label"
},
{
"meta": {
"hasDelegate": true,
"name": "Spacer_2"
},
"position": {
"basis": "10px",
"shrink": 0
},
"type": "ia.display.label"
},
{
"meta": {
"hasDelegate": true,
"name": "Description"
},
"position": {
"shrink": 0
},
"props": {
"style": {
"classes": "Page/Text Page/Margins"
},
"text": "Flex repeater of rows of flex repeaters"
},
"type": "ia.display.label"
},
{
"meta": {
"hasDelegate": true,
"name": "Spacer_3"
},
"position": {
"basis": "10px",
"shrink": 0
},
"type": "ia.display.label"
},
{
"children": [
{
"meta": {
"name": "FlexRepeater"
},
"position": {
"basis": "200px",
"grow": 1
},
"propConfig": {
"props.instances": {
"binding": {
"config": {
"queryPath": "DynamicRowCount",
"returnFormat": "json"
},
"type": "query"
}
}
},
"props": {
"direction": "column-reverse",
"elementPosition": {
"basis": "100px",
"shrink": 0
},
"path": "Page/Embedded/DynamicFlexRow"
},
"type": "ia.display.flex-repeater"
}
],
"meta": {
"name": "FlexContainer"
},
"position": {
"basis": "100px",
"grow": 1,
"shrink": 0
},
"props": {
"direction": "column"
},
"type": "ia.container.flex"
}
],
"meta": {
"name": "root"
},
"props": {
"direction": "column",
"style": {
"classes": "Page/Page"
}
},
"type": "ia.container.flex"
}
}
Query
```
SELECT DISTINCT RowNum, IsShown
FROM DynamicGridDefinition
WHERE IsShown = 1
```
The actual table is a pegboard instead of the one you defined. It contains a record for each row and column. Note that my query generates the button text based on row/column instead of using the DisplayText because that was easier to test with.
The behavior is credible.
Three rows of four:
Smaller browser window:
Six rows of seven:
