Dynamic menus and "Single select" as buttons


When building apps that includes selecting from an array of choices we can use the single select to dynamically obtain options and then show either as a dropdown or classic radio button list. In some cases it works well, but in other cases the selections will feel more user friendly when presented as buttons. Navigating a menu is one of these use cases.


There is not an option to present choices as buttons. I played around with custom widget to produce a different way to work presenting options to the end user.

It builds on a table of parent child relationships & includes a possible app to open. It would allow to divide the plant set up freely and our project don’t have to remodel the app steps for the menu with trigger management on each button. Result looks like this:

Dymanic menu 2

The timing of the custom widget loading and ensuring it has up to date data to work with is really fiddly but overall it accomplish the task. The underlying table looks like shown below and if “App to open” is filled out the test app will navigate to that app. The last piece of the puzzle is to use an app transition trigger called “Complete App Then Go To First Step Of App By Name”, which is only available in r269 and potentially LTS12. Otherwise the end use see the green “Begin” button.

Have other met the same challenge and done something similar?

All of above is basically all workarounds to not being able to show a single select choice list as buttons :slight_smile:

thx and regards


This is a very interesting concept. Could this widget be shared so i can download it to my instance?

I am not sure how sharing would be done.
Maybe we could convince Tulip to formalize the concept in a general custom widget available to all or even better as a general type choice similar to “Menu” and “Dropdown”. I also avoided creating configuration object with font, color etc. That could be added similar to the Snackbar Widget.
Dynamic sizing based on the canvas available would probably a nice next step.

@ASharp-J - If you are open to sharing your work with others there are a few options. You can export the widget and upload or just share the code directly in a post.

For import / export instructions see here - Custom Widgets Overview - You can upload the file to a post like this one - Case Convertor Custom Widget

Or could just paste the code here.

1 Like

Yeah uploading I have no problem with. It was just if people were expecting some shared polished downloadable object with a Tulip stamp of approval :smiley: That I cant provide obviously, but below is the custom widget json file. It was subsequently tweaked to allow for 7-12 choices to appear as slightly smaller buttons. But concept is the same.
If it helps anybody please reuse, and upload improved versions in this chat! :nerd_face:

customWidget-Show menu as buttons.json (4.0 KB)


@ASharp-J This is great. Already implementing this into an app! Would it be possible for the button to change color when it is selected? That’s beyond my skillset.

I updated to allow for more buttons(up to 21 I think), and another smaller button size when there are above 12 buttons.
customWidget-Show menu as buttons (1).json (3.2 KB)

1 Like


You just extend the button:active part of the CSS definition to define how the button should look like when selected. I only include a background color similar to the selected color of standard buttons in the Tulip application.


you can define whatever appearance you want. Color change. Button changing size or growing or shrinking. But I guess it should aesthetically match the general nature of your app design :slight_smile: