Adding components to Interface dynamically after onInit()

[oskarsh]

Hey, I am working on a feature where you can list all samples that are located on your hard drive.

I want to add a new panel for every file (sample) the user has installed, however these samples will be served by an API so the samples are not known onInit()
I am getting this error:
Tried to add a component after onInit()

One possible solution I was thinking off was adding all the necessary panels on the onInit() and just render them empty. Then once they are needed I can fill them with the sample names. I could also add pagination if needed, however I was wondering if there is a better solution for my problem? I will also need to register callback listeners for mouse events for each panel.

Is there a good solution to dynamically add panels?

[d.healey]

The only controls that can be added outside of on init are child panels.

A better solution is probably just to have one panel and make its content dynamic.

[oskarsh]

@d-healey Thanks for the help! Really appreciate that. I will be using child panels.

When using only one Panel with dynamic content I would need to deal with getting the click position, mapping that to a file name also stuff like hover states get more tedious. In terms of performance wise however one panel would be better but since I am not rendering anything other than that file browser it should be fine.

[Christoph Hart]

@oskarsh Try using a viewport in table mode, this is exactly the intended use case for it.

Start reading here:

HISE | Docs

(docs.hise.audio)

until here:

HISE | Docs

(docs.hise.audio)

[oskarsh]

@Christoph-Hart Amazing exactly what I was looking for, much cleaner than handling all the child panels! Thank you.

I've created a snippet for everyone who is interested using some minor custom LAF.

HiseSnippet 1196.3ocsV01SabDDdOfCU69hZp5OfU9CIGRtVlDZZTQzBXvMnvaESRqTUUzxciOuk810Zu0.VQHUo9Wo+.6+.5L2c19L3R.KU+A31YmmYelYmYm4XqIDRSMVlWkSG1GXdelemgZWuV8DRMaucXdeg+ohyTvtWIR5q.11C6KRSgHlm2h+DoiWkkXY+9mebagRnCgIhXr2Yjgv9xDoahzi27MRkpsHBNUlTR601buPitkQYFf7YQ+lr9hvyEwvgBRsE7YdKuajzYrcbBGjh5rsIZXmdlK045+NYpD4JsXUVGzP4hYs5IUQGOxWSYLukNdhmuXtm+09GHijikOIB7kYavmfnbLvag6iRq9HnjWIJsTNkdhemPqruaxNDe9T+8zNv1UDN80QttrE9Ke+VFTCsqQh3bnsEWLFQvKa1rNG+yJqWsJFtSc7KDV96jvk8MV2p7M3i.GCtVlj9FMtHn1XMpgHuKv82pcIngV.CG6aBEp8Mly2RG0F.U.clk.zvBwxTjXsGnCcRiNnVjUbYV9VKPopUmiZMB.IAMfTqjZf2s.xs0HHtN2b1erR0OTshhNet.4EJog.4z5UqD2Hk7KJIKH+eoMtrmzAqjsIQfsTxXMDcJbkKfP5vOpyE04OSAccOCU75GjeXhiUv1CbNidZWIW186L45Lxc3OJ+I1BCI2oZEYWdlKXt.rqvQaLS8iD1yGg4ZBVbitXI5IPnKPLs6tJA+NWrkBFkuiyTN657.SDDfGesSLW9ZPF2yU664Oes5njWC3KA1wBaV85YaBjrCRzoA+FEJps2Nnt0ZKsoN7SxNTICIit1xD7KxHWOTxKdEZy5kP0Av72naAaz8DIhr.J5n2juL6dDEzUnRgorLZ3p+9roK5n6HbBjtb9GlvT53MI.Omkk3Rg4QhNS8Mtdf8+DEGgkwiamPYz4wNgRcF9XZvnRCY2rzBx44arAuVKkL77ZqTsBkhfUwoFEznuURU9Y6AQns3TkPswYIEF4BgZ.ve5S4SYwh34G0jizKynWO6a9wreZuYk0K4mGZbvQ5fLuCuU32dqtcm4dzKVViRA1YtM0gxde.CzCRNCr04YQgwJhOgOcegkeX8EBye.sjhF8dZo6n9Pw51FUD8dO88c6hvJdAl5mTvPTUWV2jupnaBDMJDyjQT6jwQbVlSTtkN6s6QYwiLGZY7z5CVmjbJucfKv964Mqp3uCjdtyzOS2h9Fn3G7ge03C9O+4MGNgE+vlWR0aLOeu+1iw5k8RAsxhqRCoausE1S6goTZLNTdfB7Y8jQCTTYYF6laH4mEWVF6s4SkbmtuXeeSz.kvM8v.zTOEafYBS0Al5xpSktgkCgOhIDZduSH7Po3S7OV5B6MaNtvL3Hd69+AGKlq5y82saWrSxDBtje6ecdGh5ib7mXF3j53CDNqDym7ObPRG7lNDvSWqAUJk2r.UmjutIslh.c.cT1haveEatJs1qXyUGsIKQf4buOLu5hlb6SxjfbRmMnZE+Cn07wkS99MazjkfCQ99vPx8+Frzc1Xd9bf4EyAl0lCLe6bf4kyAluaNv7p6ECM+9VCblj7xATvw6l8rlm2tZpiRVVH6eAXVf5JL