# Create components dynamically

**URL:** <https://forum.inductiveautomation.com/t/create-components-dynamically/99854>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [December 15, 2024, 4:59pm UTC](https://forum.inductiveautomation.com/t/create-components-dynamically/99854 "2024-12-15T16:59:52Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Farhan\_Basheer](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/farhan_basheer/32/66759_2.png) [@Farhan\_Basheer](https://forum.inductiveautomation.com/u/Farhan_Basheer)\
**Post date:** [December 15, 2024, 4:59pm UTC](https://forum.inductiveautomation.com/t/create-components-dynamically/99854/1 "2024-12-15T16:59:52Z")

</div>

Can we create the components dynamically using script in ignition?

I have a tab container and I can generate tabs dynamically but I also want to create a table component in this newly created tab.  
Is it even possible in ignition?

Script to create the tabs

```python
def runAction(self, event):
	tabs = self.parent.props.tabs
	tab_name = "ABC200"
	updated_tabs = append_to_tabs(tabs, tab_name )
		
    	
    	
def append_to_tabs(tabs, tab_name ):
    # Create the new object
    new_object = {
        "disabled": False,
        "text": "Tab Details (" + tab_name + ")"
    }
    
    # Append the new object to the tabs array
    tabs.append(new_object)
    
    return tabs

```

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [December 15, 2024, 10:59pm UTC](https://forum.inductiveautomation.com/t/create-components-dynamically/99854/2 "2024-12-15T22:59:41Z")

</div>

I don't believe you can actually inject components into the view config(almost 100% positive)

I normally just use an embedded view and then change the viewPath based on the selected tab.

If its supposed to allow the user to be able to configure this then you would need to save the updated tabs and viewPaths externally from the view. I.e Database or Tags.

---

<div class="post-metadata">

**Author:** ![Farhan\_Basheer](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/farhan_basheer/32/66759_2.png) [@Farhan\_Basheer](https://forum.inductiveautomation.com/u/Farhan_Basheer)\
**Post date:** [December 16, 2024, 2:20pm UTC](https://forum.inductiveautomation.com/t/create-components-dynamically/99854/3 "2024-12-16T14:20:40Z")

</div>

Could you please elaborate the scenario?  
Will it work if I need new tab on each click?

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [December 16, 2024, 2:32pm UTC](https://forum.inductiveautomation.com/t/create-components-dynamically/99854/4 "2024-12-16T14:32:40Z")

</div>

So as an example that is somewhat the same I have a dynamic faceplate view for a high performance HMI. These view paths are preconfigured per device type but the concept is the same:

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

So if you notice I have an array of objects, and the objects have `label` and `viewPath` as properties. Then based on the selected index of the tabs I have the embeded view path bound  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/3/230b611199e51104eaec528d62efedaedfb3fe28.png)

This can be scripted by adding to the property of tabs. If you want to save this between sessions you would need to store it somewhere such as a database,file,or tag.

One question I do have is what is the use case? There may be a better solution or easier one depending on what you are trying to accomplish.

---

<div class="post-metadata">

**Author:** ![Farhan\_Basheer](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/farhan_basheer/32/66759_2.png) [@Farhan\_Basheer](https://forum.inductiveautomation.com/u/Farhan_Basheer)\
**Post date:** [December 16, 2024, 2:43pm UTC](https://forum.inductiveautomation.com/t/create-components-dynamically/99854/5 "2024-12-16T14:43:43Z")

</div>

The Use case is, I have a column with around 30 rows, and what I need to do is when User clicks on the row I want to open a new tab, with a Table and some data that is relevant to that clicked row from DB.

The issue is, number of rows are variable, not fixed.

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [December 16, 2024, 2:45pm UTC](https://forum.inductiveautomation.com/t/create-components-dynamically/99854/6 "2024-12-16T14:45:19Z")

</div>

Would a popup maybe be a better option?

---

<div class="post-metadata">

**Author:** ![Farhan\_Basheer](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/farhan_basheer/32/66759_2.png) [@Farhan\_Basheer](https://forum.inductiveautomation.com/u/Farhan_Basheer)\
**Post date:** [December 16, 2024, 2:47pm UTC](https://forum.inductiveautomation.com/t/create-components-dynamically/99854/7 "2024-12-16T14:47:09Z")

</div>

I also want to compare the data by navigating between the tabs that's why can't use the popup.

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [December 16, 2024, 4:36pm UTC](https://forum.inductiveautomation.com/t/create-components-dynamically/99854/8 "2024-12-16T16:36:59Z")

</div>

Could you supply some screenshots of your layout?

---

<div class="post-metadata">

**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\
**Post date:** [December 16, 2024, 6:12pm UTC](https://forum.inductiveautomation.com/t/create-components-dynamically/99854/9 "2024-12-16T18:12:14Z")

</div>

You might be able to use a flex repeater to repeat instances of a custom template that represents 1 row of data. That's one of the more customizable approaches for adding dynamic content. All of the bindings on the template instance should be indirect bindings based on the path passed in.

You can generate instances programmatically on a script transform of the template repeater so it can generate instances as needed.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [December 17, 2024, 8:30am UTC](https://forum.inductiveautomation.com/t/create-components-dynamically/99854/10 "2024-12-17T08:30:55Z")

</div>

If you want to compare data, popups are perfectly good at this, unless the data you're talking about takes a whole page, in which case you can still use them but it may not be the best option.  
Remember, you can have as many popups as you want, and you can make them movable and resizable.

---

<div class="post-metadata">

**Author:** ![Farhan\_Basheer](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/farhan_basheer/32/66759_2.png) [@Farhan\_Basheer](https://forum.inductiveautomation.com/u/Farhan_Basheer)\
**Post date:** [December 18, 2024, 4:41pm UTC](https://forum.inductiveautomation.com/t/create-components-dynamically/99854/11 "2024-12-18T16:41:33Z")

</div>

How can a popup server this purpose?  
When I will open one popup it will take the whole screen. To open another popup I have to close the first one then can open the second one.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [December 18, 2024, 4:57pm UTC](https://forum.inductiveautomation.com/t/create-components-dynamically/99854/12 "2024-12-18T16:57:55Z")

</div>

You're describing modals. Popups don't have to take the whole page, and you can absolutely open more than one:

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

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [December 18, 2024, 5:00pm UTC](https://forum.inductiveautomation.com/t/create-components-dynamically/99854/13 "2024-12-18T17:00:37Z")

</div>

As long as you don't select the modal option and make them draggable it is a perfect fit in my opinion.

---

<div class="post-metadata">

**Author:** ![Farhan\_Basheer](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/farhan_basheer/32/66759_2.png) [@Farhan\_Basheer](https://forum.inductiveautomation.com/u/Farhan_Basheer)\
**Post date:** [December 18, 2024, 5:14pm UTC](https://forum.inductiveautomation.com/t/create-components-dynamically/99854/14 "2024-12-18T17:14:54Z")

</div>

seems like a solution to my problem, but if want to open like 10,20 at the same time with table of 10 - 12 columns then it won't be a good choice or is it?

I also have to keep the mobile view in view.

That's why tabs container was the perfect solution for me. 🙁

---

<div class="post-metadata">

**Author:** ![Farhan\_Basheer](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/farhan_basheer/32/66759_2.png) [@Farhan\_Basheer](https://forum.inductiveautomation.com/u/Farhan_Basheer)\
**Post date:** [December 18, 2024, 5:15pm UTC](https://forum.inductiveautomation.com/t/create-components-dynamically/99854/15 "2024-12-18T17:15:13Z")

</div>

at least learned something new

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [December 18, 2024, 5:43pm UTC](https://forum.inductiveautomation.com/t/create-components-dynamically/99854/16 "2024-12-18T17:43:19Z")

</div>

> [@Farhan\_Basheer](#):
>
> but if want to open like 10,20 at the same time with table of 10 - 12 columns then it won't be a good choice or is it?

This would be unreasonable to expect any human to be able to compare and contrast that many datapoints at once. It simply isn't possible. At that point utilize the dataset export to excel and download a file to look at it in excel... consuming over 200 columns \* whatever number of rows you may have per dataset is too much at once.

---

<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:** [December 18, 2024, 6:35pm UTC](https://forum.inductiveautomation.com/t/create-components-dynamically/99854/17 "2024-12-18T18:35:11Z")

</div>

> [@Farhan\_Basheer](#):
>
> I also want to compare the data by navigating between the tabs...

That sounds like you could use a "compare" checkbox on any columns to be compared - rather like many websites do to allow feature comparisons between products. Would that work for you?

Can you give us a screengrab?

---

<div class="post-metadata">

**Author:** ![Chris\_Bingham](https://avatars.discourse-cdn.com/v4/letter/c/e5b9ba/32.png) [@Chris\_Bingham](https://forum.inductiveautomation.com/u/Chris_Bingham)\
**Post date:** [December 18, 2024, 6:48pm UTC](https://forum.inductiveautomation.com/t/create-components-dynamically/99854/18 "2024-12-18T18:48:58Z")

</div>

The entire column can be cells of [Embedded Views](https://www.docs.inductiveautomation.com/docs/8.1/appendix/components/perspective-components/perspective-display-palette/perspective-table/table-column-configurations#embedding-a-view-in-a-table-cell), each which could call a popup, or add another 'column of data' by way of an update to a session custom property - which could be referenced in a view on any other screen / tab...

A table can also contain a [Sub View](https://www.docs.inductiveautomation.com/docs/8.1/appendix/components/perspective-components/perspective-display-palette/perspective-table/displaying-a-subview-in-a-table-row) for the entire row, of which could display a table of dynamic rows / columns.

---

<div class="post-metadata">

**Author:** ![Farhan\_Basheer](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/farhan_basheer/32/66759_2.png) [@Farhan\_Basheer](https://forum.inductiveautomation.com/u/Farhan_Basheer)\
**Post date:** [December 26, 2024, 10:18am UTC](https://forum.inductiveautomation.com/t/create-components-dynamically/99854/19 "2024-12-26T10:18:49Z")

</div>

I am sorry I am not allowed to share the SS of the project. But I think if I want to use the tab and tables then there is no other solution than manually create few tabs and tables, then hide them and show them with script.  
I have to use some kind of logic to show/hide the tabs and assign the relevant data to the tables as per their visibility.

---

<div class="post-metadata">

**Author:** ![Chris\_Bingham](https://avatars.discourse-cdn.com/v4/letter/c/e5b9ba/32.png) [@Chris\_Bingham](https://forum.inductiveautomation.com/u/Chris_Bingham)\
**Post date:** [December 26, 2024, 5:07pm UTC](https://forum.inductiveautomation.com/t/create-components-dynamically/99854/20 "2024-12-26T17:07:48Z")

</div>

> [@Farhan\_Basheer](#):
>
> I also want to compare the data by navigating between the tabs

With your data, is it possible to create a **single** (dynamic) table, containing relevant bits from the would-be multiple tabs? If the goal is to compare data from multiple rows, I'm hopeful this approach could enhance the experience.

I'm envisioning a UI where there are **always** two tabs:

- Tab 1 = "All Data": Table with several rows, several columns. Column 1 contains a "Select" button, if user clicks the button (i.e. 'while selected'), a subset of that data appears on Tab 2. If user clicks the button again, data is removed from Tab 2.
- Tab 2 = "Selected Data": Table with "No Data" populated by default. If user selects a (or multiple) row(s) from Tab 1, then this table populates with that filtered data.

[Next page](https://forum.inductiveautomation.com/t/create-components-dynamically/99854.md?page=2)
