@Lindon The list is dynamic and I can change the number of items and their labels with a single variable in the panel's paint routine. The controls (knobs/buttons) for each item are manually positioned in the interface designer but it would be possible to add/position them dynamically too.
Here's the code for it (including the styling)
//GUI const var pnlArticulations = Content.getComponent("pnlArticulations"); pnlArticulations.setPaintRoutine(function(g) { reg text = ["Live", "Sustain", "Staccato", "Releases"]; for (i = 0; i < text.length; i++) { //Paint background if (i == Articulations.current) g.setColour(0xFFDED7CA); else g.setColour(0xFFCEC9BD); g.fillRoundedRectangle([0, i*55, 316, 50], 5.0); //Draw text g.setColour(0xFF000000); g.setFont("Arial", 18); g.drawAlignedText(text[i], [10, i*54, 316, 50], "left"); } //Set panel height this.set("height", i*55); this.data.numRows = i; }); pnlArticulations.setMouseCallback(function(event) { if (event.clicked) { var value = parseInt(event.y / this.getHeight() * this.data.numRows); Articulations.changeArticulation(value); } });