If you have any experience with coding, you may already know what a variable is. It’s okay if you don’t, the concept is easy once you get the hang of it! A variable is used in coding to store information. You can think of it as a box where you can store a piece of information to be taken out later, and the name of the variable as the label on that box. 

Every screen in your Thunkable app has different code, so if you want to transfer values and information between screens, you will need to use a variable.

In this lesson, we are going to combine the code in the past two lessons, by using variables. The app will ask for input in the form of the user’s name. When they will press a button, they will be taken to the next screen where “Welcome, (name)” is displayed on the screen. The start of this code will be mostly the same as the code from the text input lesson, but for in case you don’t have that code anymore, we will run through it again:

First, rename Screen1 to “Start Screen”. Then, drag a button onto this screen. In the properties column, change Text to “Press to start!”

Next, drag a text input component onto the start screen. It should appear above the button. Navigate to the properties column, and set Hint to “Enter your name here:”

You may notice that the text input component sits very close to the button, so we will create some space by again going to the properties column, and finding the Margin property. Set the bottom margin to 10px, as shown in the image below:

Now, add a second screen, and name it “Welcome Screen”. Drag a label onto it, and delete the text in the properties column so it reads “Empty String”. Use a font size of around 25 to make the text easier to read.

Feel free to change the background colour of the welcome screen so we can confirm the app switched screens. 

Here is where the variables come in. Select Start Screen, and then go onto the blocks tab. Under the “Variables” section, drag the “initialise app variable name to” block onto your screen. This creates a variable called “name”, and sets it to the value at the end of the block, which will be empty by default.

If you are curious what the app drop down is for, this is the different types of variable storage:

• If you store with “app”, it will store in the app and delete when the app closes.
• If you store with “store”, then it will be stored in your device and be readable even if the app closes!
• The “Cloud” is like “store” except it is stored in an online storage.

Since we want to replace the variable later with the text input, you can just go into the “Text” blocks and grab an empty “” block and put it at the end of the variable block, so it looks like this:

Now, drag a “When Block1 click” event onto the screen, from under the “Button1” blocks. 

When the button is clicked, we want it to set the variable to whatever is in the text input component. We do this by using a block under the “Variables” tab that looks like this:

This block allows us to change the information stored in the variable, or the “box”. Drag that into the existing “When” block. Under the Text_Input1 tab, grab a “from Text_Input1 get Text”, and drag onto the end of the block above, forming this:

Now that we have set the variable, all that’s left is to switch screens. Under the “Control” tab, grab a “Navigate to” block, put it under the “set app name” block, and change the drop-down menu to “Welcome Screen”

That’s all the code done for the Start Screen. Now, press the “Welcome Screen” title at the top of the page, and you should be taken to a blank page of code. This is the code for the welcome screen.

We want the welcome screen to change its label to “Welcome, (name)” when the user gets to the screen. For this, we will use a “when Welcome Screen Opens” event block, found under the “Welcome Screen” tab on the left-hand side of the screen. 

We will drag into this, a ‘from Label1 set text to” block, found under the Label1 tab. We will replace the “label” block at the end of it with a join block (found under “Text”), forming this block below:

Edit the text in the first join block to read “Welcome, “ (notice the space), and replace the second block with an “app name” block, found under “Variables”.

Your app is now done! Preview it in your browser or on your Thunkable live app.