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

drted
Thu, 26 Nov 2020 18:38:40 +0000
Questions about Thunkable

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.

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)

7 posts - 4 participants