# Dynamically set items in perspective

**URL:** <https://forum.inductiveautomation.com/t/dynamically-set-items-in-perspective/77432>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [August 4, 2023, 12:04pm UTC](https://forum.inductiveautomation.com/t/dynamically-set-items-in-perspective/77432 "2023-08-04T12:04:52Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Priyanka.Khandge](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/priyanka.khandge/32/35989_2.png) [@Priyanka.Khandge](https://forum.inductiveautomation.com/u/Priyanka.Khandge)\
**Post date:** [August 4, 2023, 12:04pm UTC](https://forum.inductiveautomation.com/t/dynamically-set-items-in-perspective/77432/1 "2023-08-04T12:04:52Z")

</div>

Hi guys,

Possible to set dynamic items in perspective flex repeater or any other options?

In my case set instances dynamically and also set instances per row dynamically (get from the database). Here is how many instances set in a per row get from the database. Is it possible in perspective and how?

Any idea?

For more information see below examples:

**1. Here is a total of 36 instances, starting from bottom to top and left to right, and here are the 6 rows and per row 6 instances (here total instance, row, column this information get from database).**

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/7/e79c45c7c5f09b1697bb5d51b823fba3793761e0.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/b/7b066c486776c5ce240c77262c137db298cd390e.png)

**2. Here is a total of 28 instances, starting from bottom to top and left to right, and here are the 3 rows and per row 10 instances (here total instance, row, column this information get from database).**

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/1/61035008c016afcae8047c63f7985a2d4a3556f2.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/c/7c6d6a50402010b842e036d0f8d64e33e2dd2211.png)

Thanks,  
Priyanka

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [August 4, 2023, 1:01pm UTC](https://forum.inductiveautomation.com/t/dynamically-set-items-in-perspective/77432/2 "2023-08-04T13:01:28Z")

</div>

flex can go in reverse direction, you can't really give it a fixed number of columns though...

css has  
`display:grid` which can define column.  
you cant really define the display in perspective i think, unless you use the canvas component (or maybe with !important)

if you use grid you'll also need

grid-template-columns: auto auto auto... (repeat auto for each column you have)  
grid-auto-flow: dense (or something)  
you'll have to look it up

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [August 4, 2023, 2:43pm UTC](https://forum.inductiveautomation.com/t/dynamically-set-items-in-perspective/77432/3 "2023-08-04T14:43:03Z")

</div>

To achieve this you'd have to have a static/unchanging value for the width and height of the "items" (Views). Your Flex Repeater would need to render inside of a Coordinate Container and would need the following settings:

```auto
direction: row
wrap: wrap-reverse
width: repeated_view_width * items_per_row
height: repeated_view_height * (total_items / items_per_row)

```

---

<div class="post-metadata">

**Author:** ![Priyanka.Khandge](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/priyanka.khandge/32/35989_2.png) [@Priyanka.Khandge](https://forum.inductiveautomation.com/u/Priyanka.Khandge)\
**Post date:** [August 4, 2023, 2:48pm UTC](https://forum.inductiveautomation.com/t/dynamically-set-items-in-perspective/77432/4 "2023-08-04T14:48:11Z")

</div>

@cmallonee and @victordcq Thank you so much for your response. I will try.

---

<div class="post-metadata">

**Author:** ![Priyanka.Khandge](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/priyanka.khandge/32/35989_2.png) [@Priyanka.Khandge](https://forum.inductiveautomation.com/u/Priyanka.Khandge)\
**Post date:** [August 4, 2023, 2:56pm UTC](https://forum.inductiveautomation.com/t/dynamically-set-items-in-perspective/77432/5 "2023-08-04T14:56:08Z")

</div>

How to pass an integer value (dynamic) to instances (flex repeater)?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [August 4, 2023, 3:02pm UTC](https://forum.inductiveautomation.com/t/dynamically-set-items-in-perspective/77432/6 "2023-08-04T15:02:19Z")

</div>

You would supply it as a key as you build the instances. If the instances are bound against a query, the keys should automatically be passed to the View being repeated.

If your query returns rows and you want to use the key of 'x' from the row data, the View being repeated needs to have a param of `x`, and then you would bind some component property against `view.params.x`.

---

<div class="post-metadata">

**Author:** ![Tim\_Carlton](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tim_carlton/32/52835_2.png) [@Tim\_Carlton](https://forum.inductiveautomation.com/u/Tim_Carlton)\
**Post date:** [August 4, 2023, 5:51pm UTC](https://forum.inductiveautomation.com/t/dynamically-set-items-in-perspective/77432/7 "2023-08-04T17:51:23Z")

</div>

To make this:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/d/0d43e582d8d7f779240cbc8f0fa7693711d628da.png)

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.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/2/b223c591667dbeeaa5716937a4429338a23463d4.png)

> **view.json**
>
> ```auto
> {
> "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.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/a/da65bb144c591ae8ebbea218d5e820fb7617418b.png)

> **view.json**
>
> ```auto
> {
> "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.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/e/ee9fdf35961222f551b7b018671ee8d4d8f8d911.png)

> **view.json**
>
> ```auto
> {
> "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.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/2/72e4721636d735e9a9c9d5cebf8caac5fb8706cf.png)

The behavior is credible.  
Three rows of four:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/1/c1d24e62ad78a4e8f9ba2999a56cfc2f1e1f9d88.png)

Smaller browser window:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/5/8573d1bba8cfbb719aa8fafd13a2fb383c3ad6ee.png)

Six rows of seven:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/e/cebd2ae8c9405cffdb54e30bdceeff85c8c99922.png)

---

<div class="post-metadata">

**Author:** ![Priyanka.Khandge](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/priyanka.khandge/32/35989_2.png) [@Priyanka.Khandge](https://forum.inductiveautomation.com/u/Priyanka.Khandge)\
**Post date:** [August 4, 2023, 6:13pm UTC](https://forum.inductiveautomation.com/t/dynamically-set-items-in-perspective/77432/8 "2023-08-04T18:13:26Z")

</div>

@Tim_Carlton Thank you so much. Please could you share a backup?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [August 4, 2023, 6:15pm UTC](https://forum.inductiveautomation.com/t/dynamically-set-items-in-perspective/77432/9 "2023-08-04T18:15:11Z")

</div>

@Tim_Carlton How does your example look if entries in the middle of a row are set to not display? Are there gaps or do the later entries shift to fill the gap?

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [August 4, 2023, 6:15pm UTC](https://forum.inductiveautomation.com/t/dynamically-set-items-in-perspective/77432/10 "2023-08-04T18:15:59Z")

</div>

> [@Priyanka.Khandge](#):
>
> Please could you share a backup?

You don't need a backup. You just need the JSON for the view.

---

<div class="post-metadata">

**Author:** ![Tim\_Carlton](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tim_carlton/32/52835_2.png) [@Tim\_Carlton](https://forum.inductiveautomation.com/u/Tim_Carlton)\
**Post date:** [August 4, 2023, 6:19pm UTC](https://forum.inductiveautomation.com/t/dynamically-set-items-in-perspective/77432/11 "2023-08-04T18:19:03Z")

</div>

The posted one does not leave gaps:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/a/da4e672b6beaa4af1cedcce15b580fece84ae628.png)

~~If a whole row is not shown then there is a gap for the row, which surprises me a bit. I left the IsShown property in case I needed it - maybe can bind it somewhere.  
 ~~

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/e/2eb15eb8bd22d1bb70b2837dbef679985eef2db3.png)  
If a whole row is not shown I an save and update everything everywhere then the gap for the row is closed:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/c/8cf512f4880fa608cbcc0393b812d2fadfcd69c3.png)

An early version does, but it is a lot of hardcoded stuff:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/9/09248b38eabfead130a97e1a7f36fe185a3b4670.png)