Create components dynamically

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

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

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.

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

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:

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

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.

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.

Would a popup maybe be a better option?

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

Could you supply some screenshots of your layout?

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.

3 Likes

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.

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.

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

3 Likes

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

1 Like

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. :slightly_frowning_face:

at least learned something new

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.

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?

1 Like

The entire column can be cells of Embedded Views, 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 for the entire row, of which could display a table of dynamic rows / columns.