Create UI Elements based on variable input

Hello,

How can I create UI Components that are dependent on the inputs from another component?

For example, if I have a Pulldown menu that says ‘5’, I want to create 5 Text Boxes below. If the pulldown menu changes to ‘2’, only create 2 Text boxes, etc.

I’ve tried using the Duplicate Data component to duplicate the Text Box UI element, and Create Stack components, but it only ever creates only one text box regardless of what the input variable is.

Thanks!

Don’t repeat the element itself, but instead the parameter used to create the element. In other words, repeat the input to the component that makes a text 5 times instead of repeating the output element from the component 5 times. This will give you a warning about plugging elements into other elements, but I’ve never found it to be a problem.


multiitem_ch_01.gh (9.8 KB)

Perfect thank you that worked! I appreciate the quick response.

An additional follow-up question, how would I get the text boxes to be organised into 2 columns? I’ve tried using the Create Simple Grid component but i always run into trouble.

The simple grid component expects a GH Tree where the branches form the columns and the items in the branches correspond to form the rows (the first items from each branch will form the first row, with the item from column one being the first item in the row). To arrange the text boxes into columns, you need some additional logic.

I’m assuming you need n rows of text boxes with 2 textboxes per column, so 2n textboxes. We thus double our input data and partition it based on a size of 2, so each text box is next to it’s pair in the window and in the script. This partitioned our data into what would be our rows, so we need to transpose the tree, or “flip the matrix” in GH terms, to get our columns.

We can generalize this by replacing 2 with some variable, which I’ve done in the script attached. If you wanted to add some other control next to the textboxes, you would either need to weave textbox list and control list and then partition the woven list, or you would need to graft both the textbox list and control list and then merge them in the order you want them to appear from left to right. Let me know if you need anything else.

multiitem_ch_02.gh (18.5 KB)

1 Like

Thank you for your response.

Is it possible to create multiple grids from a single Simple Grid component? Basically I have a variable that I want to determine how many separate Grids to create. Each grid will have different Rows & Columns and are not the same. I then want each of these Grids to be in their own separate expander with their own headings, so each component needs to be dynamic.

I’m trying to play around with the data using different data structures and paths but am struggling to find a solution. Any help would be greatly appreciated.

Unfortunately, the simple grid component ignores branch hierarchy - it is a simple grid component, after all. The next best option would be to look at the other grid component. It requests a list of items for its contents with corresponding lists for each elements x and y positions, so you can create n lists with r x c UI elements (n is the number of grids, r is number of rows and c is number of columns), then create lists of series of numbers that determine which grid cell each element is supposed to occupy. You can modify the previous logic to create this, but without knowing what you need it for, I can’t build the solution for you.

For instance, the difference between having each grid on it’s own tab or on the same tab is surprisingly vast. The answer is equally complex depending on if you want each item to be it’s own arbitrary grid, and especially so if you want this nesting to be arbitrarily deep. Hopefully this helps you with moving forward - if not, post an image of what you’re aiming for and I’ll see what I can do from there.

Noted, I understand it can be difficult to recommend a solution without much details.

The Grasshopper script I have is quite large with hundreds of components, so rather than send it I think it’ll be clearer to explain what I’m trying to do below. I’ve included a screenshot from Excel as a visual representation of what I’m trying to make.

The script I’m working on is to create a bridge analysis model. One of the main variables is the number of spans of the bridge. This can be any positive integer. Another variable is the number of beams per span. Again, this can be any positive integer. I want to create an Expander for each Span (E.g. 5 spans = 5 separate Expanders). One of the items I want to put in each Expander is a table. This table is to contain the Beam numbers as column headings, and the Row labels as ‘Overhang x’ and ‘Overhang y’. Each Table will have the same 2 rows, but the no. of columns may be different (as the no. of beams can vary between each span). See screenshot below.

Any assistance would be much appreciated.