How to add unknown number of Items to a StackPanel made in the GUI editor?

Questions
6

Hi! There’s a few different questions here, I’ll try to answer each one

  1. getControlByName() returns objects of type Control. StackPanel extends Control and has a children property, and TextBlock extends Control and has a text property, but the parent class doesn’t have either. If your playground uses TypeScript, you can write getControlByName() as StackPanel to tell the type system that you’re actually looking at a StackPanel. Unfortunately, we don’t have a way to do this in JavaScript; all types are inferred in JS. So, feel free to use those properties, but the intellisense will unfortunately not be able to suggest them.
  2. The way I would recommend handling this is to put a single “template” child inside the stack panel in your GUI. You can clone it by serializing it into a string, and then creating new controls which are parsed from that string. (Unfortunately we don’t yet have an easy way to directly clone controls.) Then, you can hide it with isVisible = false or by deleting it.
  3. In order to get children of the newly cloned controls, you’ll want to use getDescendants() rather than getControlByName, because you’re only interested in controls descending from that particular one. I used a filter where we check the control’s name to be sure we’re getting the right one, and then I just grab the first returned element since that function returns an array.

Here’s a PG putting it all together: rendering multiple children to stack panel | Babylon.js Playground (babylonjs.com)

Hope this is helpful! Love that you’re using the GUI editor :slight_smile:

3 Likes