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:
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.
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.
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 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!
@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)
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
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.
