Hi, please i need help, i m almost finishing my app but it is very slowly, i need to know if there is a way to reduce the number of blocks with functions lists or something, (Slowly buttons, slowly when i navigate screens, everything slowly)
here is a photo, i would like to know the better way to solve this, creating more screens? or with functions and lists and how can i do that I m learning, thanks and sory for my bad english
1 Like
You have a huge no. of blocks… 
I think you should try using any_component blocks & functions…
Thanks a lot!
2 Likes
Thanks for the screenshot @Leito - generally anywhere you see repetition like this, there’s usually room for some optimization.
Can you share a screenshot of your UI too and a brief explanation of what you’re trying to build?
Thanks!
2 Likes
Thanks both! i tried with any components but its slowly too, I need to visibilize false and true diferent columns and rows in a same screen or should i create different screens?
here i let you an example
What do you mean with room of some optimization?
1 Like
I see something like 18 button click event handler (perhaps more that were not in the frame of the screen capture), but only see 8 buttons in your primary UI (although the “+” could bring more), and I assume that the ‘down’ and ‘up’ buttons are duplicated for each of the selections.
Each of your click event is about making one label visible and one invisible; clearly you have different “pages” of instructions that are statically defined, which is perhaps not the better way to do this.
Essentially, you should try to only have one UP and one DOWN button, and use them for each cases.
Have your text elements defined in a list of list instead. Selecting one of the category determines which sub-list to access. The up and down button will then set a counter that will increment with sub-element of the sub-list to display.
I mean, you have this structure:
{MainList:
{SubListA:
pageA1
pageA2}
{SubListB:
pageB1
pageB2
pageB3}
(…)
{SubListZ:
pageZ1
pageZ2}
}
Like so:
So, you make each of your primary button set up a specific component of the ‘rules’ list, which will be a list of the various pages (which I didn’t bother typing at length, “text text text” is good enough for illustration).
All you have to do then is to copy the content of the page to a SINGLE label, that will be good enough for every cases (you can also do the same thing for the title that is written in larger font, the same principle applies except that you do not need page scroll).
When page 1 is displayed, you can hide the UP button. Likewise when the index in the list of page being displayed is the size of the sub-list, that means you are on the last page and the DOWN button can be hidden.
Now, you only need to monitor one UP and one DOWN button in all cases. So you only need TWO buttons total on the second screen.
And if you even need to expand and add, or correct something, the only one place that needs updating is the “rules” list of list of text.
Makes sense?
3 Likes
I dont have words to say thanks you for the time you took explaining to me! really thanks you very much
i m tryng to understand, i understand the idea but i dont know how to do that
i initialize the variable rules, and then how can i show or hide each one of them with the same buttons
2 Likes
You don’t need to show or hide ANYTHING.
You simply make one label take a changing value of text.
You only need one label (OK, two if you count the one with the larger text title). So you do not need to show or hide it, it is always shown. It simply contains a different text.
Just try it, you will likely see it is a lot simpler than you think.
Make sure that you have your program talk back to you; that is have “alert” messages that will show the values the program is handling at the time. Too many people take the ‘black box’ approach, where they only look at the final result. When the program fails, they know something is wrong, but have no idea where. Have your code issue warnings “doing this with input X” and “done doing this and passing result Y” so you know how things progress.
2 Likes
I m testing with this, but really i dont know how can i pick an specific list of list when the user clicks down or up
1 Like
Without loss of generality, here is how it roughly could be set up:
There would be some function ‘do something2’ that is called to select the current ‘chapter’ (it could be anything, including a bunch of buttons event for each category; all that is needed is that ‘chapterindex’ is set – you will also need provisions to cater for the initial condition where nothing yet has been set up, but those are details that you are probably aware of).
That function can either extract the whole chapter into a work list, or set an index (which will be used in a index of indexed sub-list construct not illustrated here – I use the more wordy intermediate ‘currentchapter’ instead).
Then, if you click the UP or DOWN button, the index into that specific ‘currentchapter’ list is updated and the ‘setdisplay’ function is called, extracting the required indexed entry for assigning to the label.
Of course, many details are not present, like the making of the UP or DOWN button visible/invisible, but that can easily be added somewhere, like in the test for buttonUP or buttonDOWN, since if the index is at 1 (which is the else condition of the ButtonUP test) that is where a UP button should be hidden.
You of course would need to have the logic to make the buttons be visible if they are pertinent, as well as setting the initial conditions when a chapter is selected. You just complete the logic as needed.
3 Likes
Thanks again, i really admire you , as you see, i am a newbie in this. i would never get that without your help. it is embarrasing but now i m still lost
i did this, i dont know how what to do:sob:
2 Likes
My brain will explote but i m tryng and tryng now i need to get “alfajor1” /“oblea1” when i open the specific column and hide or unhide the button up or down in super specific cases
1 Like
The ButtonDOWN function should change PageIndex by -1, not by 1.
And the Dosomething2 (rename it something more pertinent) should be called by the various ButtonBanana, ButtonAlfajor etc, that should also set the value of ChapterIndex.
Note also that since all 3 ButtonBanana, ButtonAlfajor ButtonOblea ALL perform the same column4 visible false ; column3 visible true, you could put that in a single function called by all 3 button event.
But why stop there?
Your 3 functions firspageAlfajor firstpageObela and firstpageBanana also do the exact same thing of setting Label2, so each can call a single function FirstPageAny with an argument, set to 1, 2 or 3.
The idea is that you have ONE generic function that does something for all cases, instead of 3 overly specialized functions.
Click on the blue gear icon in the function, and add an argument, like so:
Note that ‘head’ is a single ‘layer’ list, the construct that you put there to assign a value to Label2 should not extract the element of a list of head. That setting is done by the DoSomething2 and SetDisplay
2 Likes
You are overthinking the problem.
You need to have far fewer functions, but they should be generic, using arguments.
If you need to compute the square root of values, you do not make a function for square root of 4, one for square root of 9, and one for root of 16. You make ONE square root function and pass it the value “x”.
Same here.
One function to set the title, one function to set the page. You just need to have a call to those functions that specify the parameter it should be acting on.
1 Like
CBVG! Today believe or not i learned a lot with your advices, i said a lot of times but thanks again! really i couldnt have done this without you. Here is a picture of the tester, now i will try to do this in the original app, it will take a while but the important is that now i have an idea about what i have to do
(i made the tittles with buttons with the background image of that typography) but i try to use all possible functions to reduce blocks i dont know how to make a function for that
2 Likes
Glad to hear that.
here is another tip.
Look at your ButtonUP.Click event handler.
You have “If PageIndex > 1” to enact a change of page.
Then you test it again to control the visibility of the button.
The point is that you do not need to test it again.
If “If PageIndex > 1” is false, then it must be because PageIndex is 1.
So you can remove the second test, and expand the first one with an “else” clause. Just click on the blue gear of the “If” block and drag an “else” in the scope. Then make the visibility control the result of the ‘else’ clause.
Same thing with the ButtonDOWN; only one test is needed.
Likewise, you only need one “FirstPage” function. The ButtonBanana.Click simply needs to call “FristPage(3)” (and first page using the argument to set ChapterIndex accordingly).
A generic FirstPage could also set the background picture, if the various background pictures are ALSO organized in a list.
Note that right now, only your FirstPageAlfajor is setting Label2 Visible to true. If you regroup everything in a generic function, then you would not likely have discrepancy, and they would all word the same, as I assume clicking ‘banana’ should ALSO make Label2 visible. Right?
2 Likes
I won’t get tired of saying thanks!! I tried to work everything you said. I started to work in the original app! 
How can i call firstpage(3) to set a only generic “FirstPage” Function and also set the background pictures got from lists??
1.000.000 Thanks!
1 Like
Generic function would look like the one I indicated before
The call to them would look like
You simply need to specify which value you pass as index so that they match the index in the list.
You could even specify it using a name, but that makes it a bit more complicated because you would then need to match the names using text function, and that would be to return a numerical index anyway.
For the image control, it is a bit more complicated. I was hoping that perhaps the name of the image files could simply be bundled in a list, but X apparently does not allow to dissociate an image control from the image setting. So, we have to do it the brute force way, using “if then else” construct, like so:
It is always the same image component, it simply loads a different image file as a function of the index.
Again, that means you keep all the image reference in a single block, as opposed to have them scattered around the program (when your app gets bigger, keeping things tidy is a challenge).
If you want to make the text of the label skip a line to separate paragraph, put a “\n” (escape new line) where you need to skip.
i.e.:
Hello\nHow are you?
would appear as:
Hello
How are you?
You can also skip multiple lines
Hello\n\nHow are you?
would appear as
Hello
How are you?
You can stop tanking me. When you become an expert yourself, just remember to pay it forward.
3 Likes
Thanks for the amazing answers above @CBVG - definitely something that a lot of Thunkers will appreciate.
One small thing…
Thunkable X doesn’t support escape characters so we have a dedicated new line block for these scenarios.
1 Like
Amazing is little, Really i learnead more these 2 days than all the previuos weeks,
Dom, i tried to use “\n” and its functions well,
Here i could do it but in a different way. Dom, CBVG should be part of the Staff of Thunkable!
I could speed up the app with all these tips, i m working very hard! other problem that i couldnt resolve yet is that when i navigate to other screen, the i see like a flash (I set te background picture in a column instead of the screen, i dont know if that is fine, is bad or i should set an specific condition
1 Like