New Re-Sizeable Spinner, Radio Buttons, and List Viewer

Thunkable x’s data input controls are somewhat limited. The default font size for the list viewer is rarely the right size for my apps and cannot be changed. Although the switches are great, there are no radio buttons.

Because my app involves a lot of community-based data entry, I needed more component options. Specifically, a combo box/dropdown/spinner style list and radio buttons. So I built my own components that are easily copied from one screen to another and can be added multiple times in a screen without recoding (building new blocks). Although there is no design time component, you can create the list in the Start Event and everything works like a native Thunkable component from there.

20201126_101158

https://x.thunkable.com/copy/6900132e6c92363455d96357f3ed42fd

Here is the breakdown of how it works.

The screen requires 3 functions and 1 event handler. These 3 functions will allow you to create as many lists as you want without re-writing the code. When you add these function to the screen, you will need to change the MyScreen variable in the LIST_PICK and LIST_SELECTION function to the current screen. In this example, the screen is called ListDemo, so the AnyComponent section will contain a block with the name ListDemo.

From the Any Component Section, add an Any Button Click event and include the List_Pick function as shown. If you are using the Any button event for other screen functions, don’t worry, just add this at the top of the event and everything will be fine.

After adding the 3 functions, in the start event for the screen (NOT THE OPEN EVENT), define as many lists as you want. You can set the Name, List Options, Font Size, The location (create AFTER the specified control) and a default value. In this example, I create 2 controls one very small (10pt font) and one very large (50 pt font) with no default values.

To get the currently selected value for the list use the LIST_SELECTION function, just like other built in components, except you need to specify the name of the list as a text box.

That’s it!

Following the same principles, I’ve created radio buttons as well.

Happy Thunking!

P.S. To advanced or curious Thunkers: One note of caution. I overload the Column and Button Properties of Background Picture to store the properties of the control (Component Type, Name, and Element designations). Overloading is a path fraught with peril. If Thunkable ever changes the validation of this property, this could all break.

P.P.S.
I’ve rounded out the group with a list that highlights the selection (unlike the built in thunkable list viewer)
image

6 Likes

Neat! This will definitely come in handy. Why am I able to access the edit feature of your posts? I didn’t read the text properly, and I accidentally hit edit instead of reply. Strangely, it’s allowing me to edit your post(I haven’t touched a word). I had to click save to exit it, and you’ll notice, that if you were the one who made 9 edits, there are now 10. @domhnallohanlon, any idea why I could see this edit button?
Thanks!

I learned you can make “wiki” post that allow others to edit the post. I thought I would try it with a general interest post.

4 Likes

Oh, ok. Thanks! Yes, I just realized that I got a Wiki Editor badge.

I like the idea, congratulations for your work. For me it’s too blocky for a drop-down menu. If thunkable could integrate it, it’s a vital component.

Agreed. The styling could be better.

1 Like