Your projects Page

You can find your projects page at x.thunkable.com/projects. This is the first page you see when you sign in.

Viewing your projects

Thunkable lets you choose between viewing your projects in List View or Grid View.

You can decide whether to view your projects in List View or Grid View in the upper right corner of the page.

Filtering your projects

Search Bar

You can use the search bar to filter your projects by name

Filter public/private projects

PRO Thunkable creators are able to create private projects. You can use the Public and Private checkboxes to filter your projects, showing only public projects or only private projects.

Your Project Menu - Delete, Duplicate, and more

When you click on the 3 dots on a project card (Grid View) or list item (List View), you can see some project options.

You can delete your project, duplicate your project, or see your Project detail page.

Your Project Detail Page

On the Project Detail page, you can test out your app, similar to when it has been published as a mobile web app.

You can also view information about the project, such as its name, creator, project size, and how many times it has been remixed or favorited.

If the project is a remix of another project, the name and creator of the original project will be displayed.

One Product, Two Interfaces

The first thing you need to know as we welcome you to our Thunkable Docs is that we have two libraries of documents. One for each of the interfaces we currently offer:

Drag and Drop

Drag and Drop is our new platform interface that took our Creator's favorite features and functions from the previous interface (Snap to Place) and improved on them.

You'll know if you're looking for support with the Drag and Drop interface if your screen looks like this:

The Thunkable Docs to support users of the Drag and Drop interface are available here: Drag and Drop docs

Snap to Place

Snap to Place was our first foray into cross-platform app development. It is our old platform interface.

You'll know if you're looking for support with the Snap to Place interface if your screen looks like this:

You're in the right place if you're looking for the Thunkable Docs supporting our Snap to Place interface.

Additional Support Options

In addition to our Thunkable Docs, we are also proud to offer you the following resources:

1. Thunkable Academy Not sure where to get started with the Drag and Drop interface? Check out the Thunkable Academy!

2. Community Want to connect with other Thunkable Creators? Ask a question and join the conversation in the Community!

3. Instructional Videos Enjoy instructional videos? Check out our library of tutorials available on YouTube.

4. Contact our Support Team Creators on our Pro, Business, and Team plans can click the chat icon in the upper right of a Thunkable Project page to connect with our team.

Pricing and Membership

You can get started building with Thunkable today for free. As you progress as a developer with Thunkable, we offer different membership tiers that allow you to build more and do more. This includes:

🖥️ Publishing web apps 💰 Showing AdMob ads in your app 🙈 Making private apps ⚡ Expedited publishing 📢 Adding push notifications to your app 📱 Creating a personalized splash screen and more!

Thunkable offers plans to suit individual and business needs. Read more about the memberships Thunkable offers.

In-platform Tutorials

To learn how to use Thunkable, try our in-platform tutorials. Click on the expand arrow on the left to open the tutorials panel. Click on a tutorial name to launch the video in a modal you can resize and move anywhere on the screen.

Video Tutorials

Follow step-by-step app-building instructions with our video tutorials on YouTube.

Community Tutorials

The Thunkable Community is where Thunkers share their ideas with the world. You can find a wide selection of staff and community-written guides and tutorials in the Thunkable Tutorials section.

Step 1. Sign in to Thunkable

Thunkable gives you a variety of ways to create your very own cross platform apps. To learn how to set up a Thunkable account, please read our article on signing in.

Step 2. Check out your Thunkable Projects page

Choose how you want your projects to be laid out. Search and filter your projects.

Step 3. Try Our Tutorials

They exist! They are helpful! Thunkable tutorials cover both basic concepts and advanced features.

Step 4. Download the Thunkable Mobile App

With the Thunkable Live mobile app, you can preview your apps directly on your personal devices. To learn more, please click below.

Click on one of the links below to download the Thunkable mobile app.

If you don't have an iOS or Android device, you can set up an emulator on your computer that will display your apps.

Step 5. Components

We have custom components and third-party integrations that you can drop directly into your projects. These components will allow you to build more advanced features.

Step 6. Blocks

The language of blocks is a visible programming language. By dragging and dropping blocks together, you can program your app.

What is the Thunkable Live App?

The Thunkable Live app connects the projects in your web browser directly to your mobile device. It allows you to do two things:

1. You can Live Test your project. Any changes you make in your browser are displayed on your device immediately.

2. You can Live Preview any of your projects, directly on your device, without the need to be logged in to your computer.

Download the Thunkable Live App

The Thunkable Live app allows you to live test your app on your device, in real-time, while you are building it. Not even hard core developers have this super power. You can also preview all your app projects from the comfort of your mobile device.

If you don't have an iOS or Android device, you can also set up an emulator on your computer that will mimic what you would see on an actual device.‌

With Thunkable Live installed on your device, you are now ready to live test or to live preview.‌

Live Test

While live testing, any changes that you make to your project should be reflected in your app. Bear in mind that the Thunkable Live app doesn't check your project for errors. Some changes that you make may crash the app. If this happens simply exit out of the app and re-open it.

Getting started

From any of your Thunkable projects, click on the Live Test button at the top of the screen to begin live testing.

‌The next pop-up you see depends on whether you select to sign in with Google or to sign in by email.‌

If you select to sign in with Google:

Clicking on the Live Test button will remind you to open Thunkable Live on your device.

Sign in with the same Google account in Thunkable Live to preview your projects directly on your device.

If you select to sign in by Email:

When you click the Live Test button you will be prompted to enter a code into your computer.

To find this code, open Thunkable Live on your device and click Email sign in - Generate Test Code.

Enter this code into the first prompt and you will be able to live test your app.

Live Preview

For the first time, you can live preview all your app projects from the comfort of your mobile device. Simply login and you should see a list of all your projects on your Thunkable Live app.

Troubleshooting

Common issues with the Thunkable Live app

You see a blank / white screen when you live test (even if there are items in your app)

• If you have a Navigator as the first item in your tree, make sure your screen is dropped within it

• You have unconnected blocks

• You have an event triggered by a Screen. Start which may be causing the screen to crash

• Your app and desktop may not be logged into the same account

App is crashing because of a bug on our end; we are trying to fix it as soon as we can

• (Android only) You are trying to set the value of a Slider in your blocks

• (Android only) You are trying to set the latitude and longitude of a Map in your blocks

Image is not showing up on your phone

• The height or width of the image may be set to 'Fit contents'

Preview your App on the Web

Preview on the Web allows you to live preview your own project directly from your browser. Simply click on "Live Test" to preview your own app in a pop-up window.

You can also preview any public app, directly from the Project Detail Page. Here's one example, but you can find thousands of others in the public gallery.

Web Preview

You can test and preview your project directly within your browser. This is a great option when designing your app's user interface and building out the app's functionality with blocks.

It is important to note, however, that Web Preview does not support some app features. This is because some app features require functionality only available on a mobile device, such as push notifications, accelerometer, and Bluetooth low energy. For a full list of features that cannot be tested with Web Preview, please see here: Publish as a Web App.

Unsupported Components

Not all components are supported on the web at this time so please see the list below of components that are not supported:

A project is a place where your designs, files and blocks come together to create Android and iOS apps. There are three different types of project in Thunkable.

1. Public Projects

2. Private Projects

3. Read-Only Projects

When you first sign in to Thunkable you will be prompted to create a project. To learn more about the maximum size your projects can be, please see our article about the minimum requirements for apps.

Other articles in this section

Public Projects

Public projects are included in the Thunkable Public Gallery for anyone to preview, download or remix. If you create a public project, please know that it can be viewed by anyone in the Thunkable community.

Private Projects

Private projects are just that, private. They can only be seen by their app creator and do not get included in the Thunkable Public Gallery. Only Thunkable users with a paid plan can create and share private projects.

Learn more about Thunkable Plans.

Making Projects Public or Private

To make your projects public or private, clicking the vertical ellipsis associated with a project reveals its project menu. You can then select Project Detail Page and switch to change who can view your project.

You can also click into your app settings in your project and toggle the switch to set your project to public or private.

Read-Only projects

Private projects become Read-Only projects when a Thunker's paid membership expires. Read-Only projects remain private and are not included in the Thunkable Gallery.

You can only preview Read-Only. Once a project has been switched to Public, you cannot switch it back to Read-Only.

Sign Up

If you've never used Thunkable before then you should visit our sign up page. The sign up page gives you two options. You can either sign up with a Google account or an Apple account and sign in immediately, or you can enter your email address and to be sent a magic sign-in link. We recommend using a Google or Apple account, as it will make testing your app a little easier.

The email will look something like the image below. Pressing the Click to Sign In button will open your new Thunkable account and keep you signed in for 30 days, unless you choose to sign out sooner.

Sign in‌

Returning users can go directly to our sign in page to sign back into their Thunkable account. You can Sign in with Google, Sign in with Apple or Sign in with email.

Sign in with Google

This button will sign you in automatically with your Google account. For most users this will be a Gmail address but if your school or work email is powered by Google then that will work too.

Sign in with Apple

This button will sign you in automatically with your Apple account.‌

Sign in with Email

If you click Sign in with email you will be invited to type you email address in a text input.

When you click Email me the link we will send you a link that will sign you back into your account.

Next Steps

To learn more about using Thunkable, take a look at some of our tutorials.

Once you're ready to try out your app, we have a helpful guide for live testing.

What's a Component?

Apps contain many different features.

On Thunkable, you get to drag & drop which features - which we call components - go into your app.

Some features you can see. Let's call these features visible components. Examples include buttons, loading icons, and images.

Some features you can't see. Let's call these features invisible components. Examples include sounds, timers, and databases.

Visible Components

To put it simply, visible components are features that you can see on your app screen - like the ones pictured above.

Visible components can be styled by size, text, space, and location.

When adding visible components into your app, please note that they can only exist on one screen at a time. For example, if you want to add a button to three different screens, each screen will require its own button.

Invisible Components

Invisible components are features on your app that you can't see.

They often relate to your app's functionality, and are quietly running in the background. When you add an invisible component to your app, that component can work on any screen.

For example, if you add a database component to your app, the database can be accessed from any screen. You do not need to add a database component to each screen.

Invisible components are displayed underneath the mobile device on the Thunkable app builder.

Finding Components

Components are organized into 10 different categories. For a more detailed description of each category and an outline of the components they contain, click on one of the pages below.

To find a component, you can manually scroll through the components section on the Thunkable app builder. You can also expand and collapse categories depending on your needs.

The quickest way to find a component is by searching for it in the search bar. Any matching components will also be displayed as you type.

The Component Tree

The component tree can be found at the top left corner of your screen, just below your project name. The component tree contains a list of the visible and invisible components in your app.

You can move components around on the component tree to change the location of a component in your app.

Components that are nested can also be expanded and collapsed by clicking on the ▾ icon.

The User Interface (UI) category is a collection of all the components you need to design the look and feel of your app.

UI Components are visible components that users can move, click on, and type in. Each UI component is described in greater detail on its own page.

User Interface Components

Thunkable is building the world's largest gallery of open sourced apps to help inspire you and save you time.

Below are a few of our favorites with more to come. Feel free to customize them for your own use and share them with #MadewithThunkable

Sign In Screens

These Sign In templates can be easily remixed. Click to download!

Neon Sunset Sign In Screen

Mountain Dusk Sign In Screen

Purple Range Sign In Screen

Simple Red Sign In Screen

Simple Blue Sign In Screen

Family & Friends

Since mobile apps are radically easier to make with Thunkable, why not make apps just for the most important people in your life? We've started experimenting with some ways that apps have actually helped us feel closer to the ones we love.

Charlie Checker

Preview | See Inside

For anyone who has a pet (or child) whose care is managed by multiple people, this app helps to coordinate regular meals, treats, walks and poops. This app is powered by a free private Firebase Database that syncs data quickly across devices. This app resets itself every day.

#cloudvariables #firebase #share

(Private) Social Media

Social media was originally invented for people to share things with people they trust. With the evolution of popular platforms today, it's increasingly hard to simply keep our channels private enough so our conversations and photos are less filtered and bringing us all joy (instead of FOMO).

Snap Gram

Preview | See Inside

This app is kind of like an Instagram and Snapchat hybrid and we've created a private version of this app that we are using daily at the Thunk Tank to help our global team feel more connected. To make your app private, simply create a free Cloudinary image account to keep your images within your sights and a free private Firebase Database to host the links to those images. You won't believe what people will share with a little bit of privacy!

#cloudvariables #firebase #mediadb #cloudinary #camera

Color Chat

Preview | See Inside

This is a Slack-like chat app where users pick their own chat bubble colors. You can make the backend private by connecting it to your own Firebase database. This app features the clone and device time blocks.

#cloudvariables #firebase #cloneblocks #devicetime #drawernavigator #slider

City Living

Cities are an increasingly popular place to live and work but navigating them can be a challenge. Here are a few apps that aspire to make that simpler.

Translator

Preview | See Inside

Designed for your work and holiday travel, translator is an app that translates English text and speaks it aloud into 93 languages in the world.

#cloudvariables #firebase #mediadb #cloudinary #camera

High Performing Teams

The highest performing teams are said to be ones full of trust, empathy and psychological safety. Here are a few apps that may help your favorite teams build these important qualities.

Office Weather & Traffic

Preview | See Inside

Designed for teams that are spread out across different parts of the world, this simple app helps you quickly keep track of the external conditions that may be affecting your colleague's work and mood. At the very least, it may enable you to avoid talking about the weather and onto more important things. Customize for your team by editing the information in the OfficeDB component. The app pulls the latest temperature from the Open Weather Map API and as a bonus the latest traffic from Google Maps. There is a limit of 60 calls per minute in the free tier of the Open Weather Map API.

#webapi #openweathermapapi #googlemaps #localdb #camera

Work Credit

Preview | See Inside

Work Credit is a team counting app for thankless tasks. The app shares data for the team in a private Firebase realtime database account so Thunkers looking to create one for their team will need to set one up. Work Credit has really transformed how our office works at Thunkable -- no longer are thankless tasks thankless. The winner each week gets to pick out our lunch destination on Friday (which is quite an honor)

#cloudvariables #firebase

Mark's Guide to 1:1s

Preview | See Inside

For managers out there, here's a helpful set of questions to guide your next 1:1 meeting from Mark, the beloved VP of engineering at Thunkable. For our team, this app is a great way for best practices to quickly spread throughout an organization. You can easily customize the questions by simply editing the question in the local database.

#localdb #accelerometer

Start-Up Hacks

Starting your own business is a gratifying endeavor but most new business don't make it for the long haul. Here are a few apps that can help support the businesses that you love

New Market Goods

Preview | See Inside

Simple website wrapper app with a multi-image branding screen, a social media bar that opens a deep link to a user's installed apps that works across platforms. If you are a PRO member, you can add push notifications to notify app users of ongoing sales. Check out our free tutorial in the Thunkable Community​ to make one for the business that you love. #webviewer #timer #push notifications

Fun & Games

Mobile games and puzzle apps are not just a great form of entertainment in those in between moments but they also great mediums for monetizing your app with ads.

Beaver Bingo

Preview | See Inside

Beaver Bingo is a simple puzzle app that we think is great for parties. Party goers take photos of the items in the nine boxes, which together reveals a hidden message. The app features the Image Recognizer component from Microsoft. No goats were harmed in the making of this app.

#imagerecognizer #microsoft #camera #sound #timer

Shake Dice

Preview | See Inside | Download from Google Play

If you've ever played a board game or an RPG then you know what dice are. You also probably know easy they are to lose or misplace. With this app you can create and customize as many dice and sound effects as you like so that they're never more than a click away. There's a free tutorial in the Thunkable Community all about how this app was made. This app also shows an Interstitial Ad by AdMob every time the dice shows 5.

#accelerometer #admob

Thunkable Public Gallery

The Thunkable Gallery is an app building marketplace where users can find, share and remix existing projects. By default, all public projects built on Thunkable are sent to the Public Gallery.

How to use the Thunkable Gallery

When browsing the Gallery, here are three things that you can do with public projects:

1. View a Project Click to open any project on the Public Gallery to view an app's design or programming blocks.

2. Preview a Project After downloading the Thunkable Live mobile app, you can use the app to preview any public project directly on your mobile device.

3. Remix a Project All projects on the Public Gallery can be remixed. This means that you can customize any app project that you see.

To view or change your project settings, click on the ⚙ icon next to your Project name in the left-hand side bar. Your App Settings will appear on the right-hand side of the screen.

App Description

This is a description of your app and how you intend it to be used. It is not necessary to fill this out in Thunkable. If you publish your app you will need to enter this information, whether on Thunkable or the App Store or Play Store.

App Name

To put it simply, your "app name" is the name of your app. This is the name that will be displayed on the Google Play Store or App Store, and that users see when they install your app on their device. This name is also used to set the page title when you publish as a web app.

Best Practises

Since space is limited, we recommend a short one or two word app name

Avoid using the character "&" in your app name: at the moment, it prevents your app from being installed on your device

Project Name

This is not your app name! This is just the name of your project on Thunkable. When you create a new project, you will be prompted to write in a project name. You can change this name at anytime from your Projects Page.

App (Bundle) ID

A unique identifier for your app on the App Store or Play Store.

This should follow a pattern like com.domain.creatorname.appname

Make sure none of the segments of this package name begins with a number. Make sure none of the letters in this package name has an accent (e vs ë).

Icon

Your app icon is the picture that represents your app on your mobile device. This icon will also appear on your listing in the Google Play Store or App Store, and as your project icon on Thunkable.

Please make sure that the file you upload does not have the same name as another asset that you are using for your app. This will cause an error.

Best Practises

For publishing to the iOS App Store, you will also need an app icon that does not have any transparency or it may cause an error.

For publishing your app to the Play and App stores, you will need to create a separate icon with a higher resolution. For Google Play, the current requirement is 500 x 500 px. For the App Store, it's 1024 x 1024 px.

Public/Private App

Thunkable Creators with a paid plan have the option to set their app to Private. A private app will not be displayed in the Thunkable Public Gallery. Learn more: Thunkable Pricing.​

Auto-increment Version

When you publish to the App Store or the Play Store, you will need to increment (increase) your version number each time. If this switch is set to true, Thunkable will automatically increment your project's version number each time you publish your app (iOS) or download your app (Android).

Play sounds in background

If this switch is set to true, the sound will keep playing even when the app is minimized.

AdMob Settings

iOS App ID

Enter the AdMob app ID for your iOS app. More info from AdMob here.

Android App ID

Enter the AdMob app ID for your Android app. More info from AdMob here.

Tracking Usage Description (iOS only)

Enter a string to explain to the user that a personal advertising identifier may be used to show them ads relevant to their online activity. Read more about tracking permissions for AdMob on iOS.

Default Value: "This identifier will be used to deliver personalized ads to you."

Android

Version Name

Set a version name for this version of your Android app.

Version Code

Set a version code for this version of your Android app.

Keystore

Import and export an Android Keystore to/from your app. Learn more about the Android Keystore here.

iOS

Ignore Notch Area

This property enables you to remove the Safe Area View which Thunkable adds to the app automatically. If you set this property to be true, the screen background color will extend to full screen and there won’t be any white area. However, you need to manually take care of the notch in your app design, like adding extra space, in order to avoid the app element being blocked by the notch.

Notch Area Background Color

This property enables you to set the safe area view color. With this, you can customize the background color of the white area. Please note, this is an app level setting and you won’t be able to customize the color at the screen level.

Version Number

Set a version number for this version of your iOS app.

iOS Permissions

When you add components that require permissions to your app, like the camera, you will need to add purpose strings to your app if you want to publish it to the App Store.

User Tracking If your app or any external service your app interacts with are gathering any kind of identifiable information, this must be explicitly disclosed to the end user of your app using an in-app prompt. If you do not include this and your app engages in tracking, Apple will reject your submission and ask you to resubmit while including an appropriate tracking string. To learn more about when to include a tracking string, click here.

API Keys

If you use blocks for Translating, Image Recognition or Uploading media to the cloud, or use a Firebase database to support your cloud variables or Signing In, you can enter personal API keys for these components in the project settings.

Style the Label

You can customize your label using the following properties:

Properties

• Text: Text that appears on the label

• Font Size: Size of the text that appears on the label

• Custom Font (mobile only): Upload a TTF or OTF font file to use as your Button's font

  Using Custom Fonts may only be available for Creators on certain Thunkable plans. Please refer to our pricing page for more information: .

• Color: Color of the text that appears on the label

• Background Color: Sets the background color of the label

• Text Align

  • Auto - Aligns the text automatically

  • Left - Displays the text starting from the left of the label

  • Right - Displays the text starting from the right of the label

  • Center - Displays the text starting from the middle of the label

  • Justify - Aligns both the right and left side of the text equally

• Font Style

  • Normal: Default text display

  • Italic: Display the text in italics

• Font Weight: Select how bold the text on the label will be

• Number of Lines: set a maximum amount of lines of text that your Label will display

• Background Color: set the color of your Label's background

• Border Width: Enter how wide you want the border outline of the label to be

• Border Radius: Enter how round you want the edges of the border for the label to be

• Border Color: Pick a color for the border of the label

• Border Style: Select if you want the border of the label to be a dotted, dashed or solid line

• Background Color: set the color of your Label's background

• Border Width: Enter how wide you want the border outline of the label to be

• Border Radius: Enter how round you want the edges of the border for the label to be

• Border Color: Pick a color for the border of the label

• Border Style: Select if you want the border of the label to be a dotted, dashed or solid line

Advanced Properties

• Letter Spacing (iOS and web only): increase spacing between letters of your Label

• Text Decoration Line: add a line through, underline, or both with underline line-through

• Text Decoration Style (iOS and web only): set your Text Decoration line to be solid, dotted, dashed, or double

• Text Decoration Color (iOS and web only): set the color of your Text Decoration Line

• Writing Direction (iOS and web only): set the writing direction of your Label's text

• Letter Spacing (iOS and web only): increase spacing between letters of your Label

• Text Decoration Line: add a line through, underline, or both with underline line-through

• Text Decoration Style (iOS and web only): set your Text Decoration line to be solid, dotted, dashed, or double

• Text Decoration Color (iOS and web only): set the color of your Text Decoration Line

• Writing Direction (iOS and web only): set the writing direction of your Label's text

Events

Click

This event will fire when the user clicks on the label.

Properties

Background Color

Color

Font Size

Font Style

Font Weight

Height

The set and get height blocks work with the Height property of the label component. Acceptable input values are:

• Number of Pixels

• Percentage Height

• "Fit Contents"

• "Fill Container"

Number of Lines

The get and set number of lines property is used to work with the maximum number of lines of text that should be displayed in a label before that label starts to scroll.

Text

This property corresponds to the text that is displayed in the label component.

Text Align

Text Align can be any of the following values:

• Auto

• Left

• Right

• Center

• Justify

Visible

• True

• False

Width

The set and get width blocks work with the Width property of the label component.

• Number of Pixels

• Percentage Width

• "Fit Contents"

• "Fill Container"

It's best to keep app sizes as small as possible to preserve space on people's devices. All app projects have a 50MB limit, and free Thunkable accounts have a 100 MB total storage limit. If you need more storage for your account, you can upgrade to our plan to get 1 GB of space for your projects or to to get unlimited space.

Limits

You can view a project's app size on the project's details page:

The main contributor to an app's size are files (also known as assets). To add or delete files, click on the Assets button in the side bar. Then click the "+" icon to manage all the files in your project.

Operating Systems (OS)

Thunkable recommends and actively supports mobile operating systems that receive security updates.

This includes iOS 16+ and Android 12+.

Thunkable apps are often compatible with older OS, but this is not guaranteed.

Account storage limits

You can view your total account storage size in your account settings.

Free Thunkable accounts have 100MB of storage.

Builder Thunkable accounts have 1GB of storage. Advanced Thunkable accounts have unlimited storage.

If you are near the limit, you may be able to create additional storage by removing projects that you no longer need like an old version or copy of a project.

Maximum recommended asset size

We recommend that each of your asset files not exceed 50KB -100KB. Using smaller file sizes in your project will result in faster loading times for your users.

Naming Your Assets

Thunkable recommends using file names that do not contain whitespace characters.

Here are two naming methods we recommend:

1. Snake Case - each space is replaced by an underscore (_) character, and the first letter of each word written in lowercase.

   • example_one.png

   • here_is_another_example.html

2. Camel Case - writing phrases without spaces or punctuation, indicating the separation of words with a single capitalized letter, and the first word starting with either case.

   • exampleOne.png

   • hereIsAnotherExample.html

Set Keyboard type

You can choose from the following types of keyboards:

• Default keyboard: Displays your device’s default keyboard

• Email Address: Displays an alphanumeric keyboard to accept email addresses

• Numeric: Displays a keypad with only numbers; It is similar to the phone pad keyboard

• Phone Pad: Displays a telephone keypad; It is similar to the numeric keyboard

Set up for Passwords

You can also set up Text Input for passwords as shown below using the Secure Text Entry Switch. This switch will replace text with * as users type.

To activate Secure Text Entry, look for the Text Input Style properties and make sure that the Secure Text Entry switch is set to true.

Style the Text Input

You can customize the Text Input component with the following properties:

• Hint: Hint text that disappears when the user starts typing into the Text Input

• Text: Text that appears on the text input

• Visible: To see the text input in your app, set the switch to true

• Border

  • Width: Enter how wide you want the border outline of the text input to be

  • Color: Pick a color for the border of the text input

  • Style: Select if you want the border to be a dotted, dashed or solid line

  • Radius: Enter how round you want the edges of the border for the text input to be

Edit the Text Input size

You can set how tall the text input is using the Height property and set how wide the text input is using the Width property.

Height

• Fill container - The text input fills the entire screen vertically

• Fit contents (Recommended) - The text input’s height changes to fit the contents it contains

• Relative size - The text input fills the specified percentage of the screen

• Absolute size - Sizes the text input to a specified number of pixels

Width

• Fill container - The text input fills the entire screen horizontally

• Fit contents - The text input’s width changes to fit the contents it contains

• Relative size - The text input fills the specified percentage of the screen

• Absolute - Sizes the text input to a specified number of pixels

Add spacing

You change the spacing and positioning of the text input with the Margin and Padding properties. Margin

• You can specify how much space you want between the edges of the text input and the screen using either pixel or percent values.

Padding

• You can specify how much space you want between the border and the contents of the text input using either pixel or percent values.

Events

Click

This event fires when the user clicks on the Text Input component.

Unfocus

This event fires when the component looses focus, i.e the user clicks on another component.

Submit

This event fires when the enter or submit button is pressed on the device keyboard.

Changes

This event fires every time a character is added or removed to the Text Input.

Properties

Border Width

Height

The set and get height blocks work with the Height property of the Text Input component. Acceptable input values are.

• Number of Pixels

• Percentage Height

• "Fit Contents"

• "Fill Container"

The Computed Height block returns the on-screen dimensions of the Text Input, after it has been rendered on the device screen. The value returned is an integer, representing the size of the component, in pixels.

Hint

The set and get hint work with the prompt that is displayed in the Text Input, before the user starts typing. Any string of text or number can be used as the hint.

Keyboard Type

The set and get keyboard type property gives you control over what version of the keyboard is displayed on-screen when the user starts typing. Acceptable values are:

• default

• email address

• numeric

• phone pad

Text

The set and get text property works with the string of text that displayed in the Text Input.

Visible

The set and get visible blocks are used to show or hide the entire Text Input component. Acceptable values are:

• True

• False

Width

The set and get width blocks work with the Width property of the Text Input component. Acceptable values are.‌

• Number of Pixels

• Percentage Width

• "Fit Contents"

• "Fill Container"

The Computed Width block returns the on-screen dimensions of the Text Input, after it has been rendered on the device screen. The value returned is an integer, representing the size of the component, in pixels.

Video Tutorial

A button is just something you can click on to perform an action. This action can be anything from navigating to a different screen, saving information to a database, or playing a sound.

Style the Button

You have many options for styling your button, such as changing the background color or text color. Here are the different options for customization:

• Text: Text that appears on the button

• Text Color: Color of the text that appears on the button

• Background Color: Sets the background color of the button

• Font Size: Size of the text that appears on the button

• Custom Font (mobile only): Upload a TTF or OTF font file to use as your Button's font

• Background Picture: Upload a picture that appears on the button.

• Background Picture Resize Mode

  • Cover: Fills the entire button without changing the height and width ratio of the image

  • Contain: The entire image will be scaled down to fit inside the button, without changing the height and width ratio of the image

  • Stretch: The image's height will change to fill the button length-wise

  • Repeat: Repeat the image to cover the button. The image's height and width ratio will not change

  • Center: Positions the image in the middle of the button

• Visible: To see the button in your app, set the switch to true

• Border

  • Width: Enter how wide you want the border outline of the button to be

  • Color: Pick a color for the border of the button

  • Style: Select if you want the border to be a dotted, dashed or solid line

  • Radius: Enter how round you want the edges of the border for the button to be

• Font Bold: To make the text on the button bold, set the switch to true

• Font Italic: To make the text on the button italic, set the switch to true

• Raised: To cast a shadow around the button, set the switch to true

• Disabled: To prevent the button from performing an option when it is clicked, set the switch to true

Edit the Button size

You can set how tall the button is using the height property and set how wide the button is using the width property.

Height

• Fill container - The button fills the entire screen vertically

• Fit contents - The button’s height changes to be the size of the contents it contains

• Relative size - The button fills the specified percentage of the screen

• Absolute size - Sizes the button to a specified number of pixels

Width

• Fill container - The button fills the entire screen horizontally

• Fit contents - The button’s width changes to be the size of the contents it contains

• Relative size - The button fills the specified percentage of the screen

• Absolute - Sizes the button to a specified number of pixels

Add Spacing

You change the spacing and positioning of the button with the Margin and Padding properties. Margin

• You can specify how much space you want between the edges of the button and the screen using either pixel or percent values.

Padding

• You can specify how much space you want between the border and contents of the button using either pixel or percent values.

Events

You can use the following blocks to listen for when a specific event occurs

Click

Performs an action when the user taps the button.

Long Click

Performs an action when the user holds down the button.

Touch Down

Performs an action when a user pressed down on the button

Touch Up

Performs an action after the user releases the button

Properties

Background Color

Background Picture

Background Picture Resize Mode

The set and get resize mode blocks work with how the background picture is scaled within the button component. Acceptable values are:

• Cover

• Contain

• Stretch

• Repeat

• Center

Disabled

The disabled property is used to set whether or not the button is "clickable". Expected values for this property are:

• True

• False

Font

The font style properties of the button text can be "Bold", "Italic", or Raised. Expected values for each property are:

• True

• False

Font Size

The get and set font size blocks are used to work with the size of the text that is displayed in the button. This value must be a number.

Height

The set and get height blocks work with the Height property of the button component. Acceptable input values are.

• Number of Pixels

• Percentage Height

• "Fit Contents"

• "Fill Container"

The Computed Heightblock returns the on-screen dimensions of the button, after it has been rendered on-screen. The value returned is an integer, representing the size of the button in pixels.

Text

This property corresponds to the text that is displayed in the button component.

Text Color

Visible

The set and get visible blocks are used to show or hide the entire button component. Acceptable values are:

• True

• False

Width

The set and get width blocks work with the Width property of the button component. Acceptable input values are.

• Number of Pixels

• Percentage Width

• "Fit Contents"

• "Fill Container"

The Computed Widthblock returns the on-screen dimensions of the button, after it has been rendered on-screen. The value returned is an integer, representing the size of the button in pixels.

Add Items to a List Viewer

Short Lists

Medium Lists

If you need longer lists of information in your app you can use delimited data. This is very similar to using something like a .csv file. You can have hundreds of items in your list viewer using this method.

Long Lists

1. Local Table

2. Airtable

3. Google Sheets

Choosing Airtable or Google Sheets allows you to create dynamic list viewers. This is where the information displayed to the user changes whenever you change your cloud-based data in Airtable or Google Sheets. Either of these options are ideal for when you need to store thousands of items, or you need to work with items that change frequently.

Select Item from a List Viewer

Style the List Viewer

You can customize the List Viewer with the following properties:

• Text Items Color: Set color of Text Items font

• Text Items Background Color: Set background color for List Viewer

• Text Items Font Size: Set font size of Text Items

• Show Arrow: To see an arrow beside each item in the list, set the switch to true

• Visible: To see the text input in your app, set the switch to true

• Border

  • Width: Enter how wide you want the border outline of the List Viewer to be

  • Color: Pick a color for the border of the List Viewer

  • Style: Select if you want the border to be a dotted, dashed or solid line

  • Radius: Enter how round you want the edges of the border for the List Viewer to be

Edit the ListViewer Height

A List Viewer automatically fill 100% of the Screen width

You can set how tall the List Viewer is using the height property.

Height

• Fill container - The List Viewer fills the entire screen vertically

• Fit contents - The List Viewer’s height changes to fit the contents it contains

• Relative size - The List Viewer fills the specified percentage of the screen

• Absolute size - Sizes the List Viewer to a specified number of pixels

Add Spacing

You change the spacing and positioning of the List Viewer with the Margin and Padding properties.

Margin

• You can specify how much space you want between the border and the contents of List Viewer using either pixel or percent values.

Padding

• You can specify how much space you want between the edges of the List Viewer and the screen using either pixel or percent values.

Events

Performs an action when the user clicks on any one of the list items.

Properties

Height

The set and get height blocks work with the Height property of the list viewer component. Acceptable input values are.

• Number of Pixels

• Percentage Height

• "Fit Contents"

• "Fill Container"

The Computed Heightblock returns the on-screen dimensions of the list viewer, after it has been rendered on-screen. The value returned is an integer, representing the size of the list viewer in pixels.

Show Arrow

Choose whether or not the arrow is displayed next to every item in the list viewer.

Text Items

Visible

The set and get visible blocks are used to show or hide the entire list viewer component. Acceptable values are:

• True

• False

Width

The Computed Widthblock returns the on-screen dimensions of the list viewer, after it has been rendered on-screen. The value returned is an integer, representing the size of the list viewer in pixels.

The list viewer doesn't currently support pixel or percentage values for the width property.

Video Tutorial

Properties

In the Design panel, you can set many properties of the Web Viewer.

Simple

URL: Set initial URL to be displayed in the Web Viewer Height: Set Height of Web Viewer Width: Set Width of Web Viewer Visible: Toggle whether or not the Web Viewer is visible in the app Margin (top, bottom, left, right): Set a defined distance between the Web Viewer and its neighboring components on the Screen Padding (top, bottom, left, right): Set a defined distance between the border of the Web Viewer and its contents Border: Set the width, radius, color and style of a border around the perimeter of the Web Viewer

Set URL

To open up a website in your app, you need to provide the Web Viewer with a URL.

A URL is kind of like a street address - it tells the web viewer the location of the website on the internet.

• URL: Enter in the link to the website or an image. The URL must include https://

Note: Can also accept .html files that have been uploaded to the app (great for offline use).

Go Back/Forward

You can use blocks to navigate back through previously visited web pages. Once you have gone back, you can also use blocks to navigate forward through your visited pages again.

Edit Web Viewer size

You can set how tall the Web Viewer is using the height property and set how wide it is using the width property.

Height

• Fill container - The Web Viewer fills the entire screen vertically

• Fit contents - The Web Viewer’s height changes to fit the contents it contains

• Relative size - The Web Viewer fills the specified percentage of the screen

• Absolute size - Sizes the Web Viewer to a specified number of pixels

Width

• Fill container - The Web Viewer fills the entire screen horizontally

• Fit contents - The Web Viewer’s width changes to fit the contents it contains

• Relative size - The Web Viewer fills the specified percentage of the screen

• Absolute - Sizes the Web Viewer to a specified number of pixels

Add Spacing

You change the spacing and positioning of the Web Viewer with the Margin and Padding properties.

Margin

• You can specify how much space you want between the border and the contents of Web Viewer using either pixel or percent values.

Padding

• You can specify how much space you want between the edges of the Web Viewer and the screen using either pixel or percent values.

Manage Permissions

You can toggle whether the Web Viewer automatically requests the user's location. Some websites require access to the user's location to work. However, if you do not plan on displaying a website that needs this permission in your app, then you may not want your app to request an unnecessary permission.

To set whether or not the Web Viewer requests the user's location, go to the Design tab and click on your Web Viewer. In the panel on the right hand side of the screen, click on the Advanced tab.

Scroll down until you see a switch labeled Geolocation Enabled. Use this switch to toggle whether your Web Viewer requests the user's location.

Post Message/Receive Message

If you own the website being displayed in your Web Viewer, you can send and receive messages between your website and the Web Viewer using Javascript.

See Also

Events

Receives Message

Functions

Back

Go back to the previous page visited.

Forward

Move forward to the next page in your browser history.

Post Message

Post a message.

Reload

Reload the web viewer.

Value from Post

Returns any message that was received after calling the Post Message function.

Properties

Height

The set and get height blocks work with the Height property of the web viewer component. Acceptable input values are.

• Number of Pixels

• Percentage Height

• "Fit Contents"

• "Fill Container"

The Computed Heightblock returns the on-screen dimensions of the web viewer, after it has been rendered on-screen. The value returned is an integer, representing the size of the web viewer in pixels.

Width

The set and get width blocks work with the Width property of the web viewer component. Acceptable input values are.

• Number of Pixels

• Percentage Width

• "Fit Contents"

• "Fill Container"

The Computed Widthblock returns the on-screen dimensions of the web viewer, after it has been rendered on-screen. The value returned is an integer, representing the size of the web viewer in pixels.

Visible

The set and get visible blocks are used to show or hide the entire button component. Acceptable values are:

• True

• False

URL

The get URL block returns the "default" url in your project, i.e the value that you set in the designer. At this time it does not dynamically return the URL of the pages that is currently being displayed.

Switch Overview

A switch is a component that has two settings, true and false. You can get your app to do specific tasks only if the switch is set to true.

Getting Started

Each time the switch is clicked the value will change. The value returned will only ever be true or false. To test this for yourself you can use the following blocks.

In the following example, the user can only advance to Screen2 if the acknowledge they have accepted the terms and conditions by clicking on the switch.

Style the Switch

You can customize the switch with the following properties:

• Tint Color: Color of the switch track when switch is set to off

• On Tint Color: Color of the switch track when switch set to on

• Thumb Tint Color: Color of the switch thumb

Events

On Value Change

This event fires every time the switch is clicked.

Properties

Disabled

The disabled property is used to set whether or not the button is "clickable". Expected values for this property are:

• True

• False

Height

The set and get height blocks work with the Height property of the switch component.

On Tint Color

Change the "active" color of the switch.

Thumb Tint Color

Change the color of the switch

Tint Color

Change the "inactive" color of the switch

Value

Change the state (on or off) of the switch

Visible

Show or hide the switch on the screen.

Width

The set and get height blocks work with the Width property of the switch component.

X

Y

Date Input Overview

A Date Input component is helpful when you want the user of your app to easily select a specific date using the native Android or iOS date picker

Getting Started

The Date Input component needs no set-up (Woohoo!). Just drag and drop the component into your project. As a bonus, the current date will automatically show up as a label.

When a user of your app taps on the Date Input, it will automatically launch the native Android or iOS date pickers.

Set the Date Format

You can set the format of the date by choosing an option from the Style property. Currently supported styles are:

• YYYY-MM-DD

• MM/DD/YYYY

• M/D/YY

• Month Day, Year

• Mth. Day, Year

Save the Date

The date that a user selects will show up automatically in the Date Input label but if you want to save the date somewhere to be uploaded later, you'll need to add a block like the one below.

Events

Date Picked

Functions

Get Date

Get Day

Get Month

Get Year

Launch Picker

Properties

Background Color

Color

Computed Height and Width

Font Size

Font Style

Font Weight

Style

Text Align

Visible

Video Tutorial

Loading Icon Overview

For activities that take more than a few seconds, loading icons can be helpful to tell your app users that an activity is happening in the background, such as retrieving or uploading data.

Style the Loading Icon

Showing and Hiding the Loading Icon

The loading icon should be displayed when the app is performing an activity in the background and hidden when it is not.

One way to show and hide the icon is to use the visible property of the component.

In the following example the loading icon shows up when the app opens but disappears after data is retrieved from Airtable.

When the visibility is set to true, the loading icon will be seen on the app screen. If set to false, the loading icon will not be seen on the app screen.

Properties

Color

Height

Size

Visible

Width

See Also

You can use the Animation component to display a JSON animation from Lottie in your project. Lottie offer a wide range of animations that can be displayed as content in your project loads.

PDF Reader Overview

Allow your users to view your favorite PDFs -- legal contracts, art posters or maybe even a PhD dissertation -- all from the convenience of your app

Upload PDF

Simply upload your PDFs into the File property and voila!

Once you upload the PDF, you will be able to view it in your app and pinch to zoom in.

Properties

Computed Height and Width

File

Visible

Slider Overview

The Slider is a great UI element to enable users easily select a value from a fixed range of values.

Getting Started

To set up a slider, you'll have to first define the minimum and maximum values, the initial value and the incremental steps of the slider

We recommend using a Label with the Slider so that users can get immediate feedback on the value being set.

Style the Slider

• Minimum Track Tint Color: Color of the slider track to the left of the thumb

• Maximum Track Tint Color: Color of the slider track to the right of the thumb

• Thumb Tint Color (Android only): Color of the thumb

• Border:

  • Width: Enter how wide you want the border outline of the Slider to be

  • Color: Pick a color for the border of the Slider

  • Style: Select if you want the border to be a dotted, dashed or solid line

  • Radius: Enter how round you want the edges of the border for the Slider to be

Edit the Slider size

You can set how tall the Slider is using the height property and set how wide it is using the width property.

Height

• Fill container - The Slider fills the entire screen vertically

• Fit contents - The Slider’s height changes to fit the contents it contains

• Relative size - The Slider fills the specified percentage of the screen

• Absolute size - Sizes the Slider to a specified number of pixels

Width

• Fill container - The Slider fills the entire screen horizontally

• Fit contents - The Slider’s width changes to fit the contents it contains

• Relative size - The Slider fills the specified percentage of the screen

• Absolute - Sizes the Slider to a specified number of pixels

Add spacing

You change the spacing and positioning of the Slider with the Margin and Padding properties.

Margin

• You can specify how much space you want between the border and the contents of Slider using either pixel or percent values.

Padding

• You can specify how much space you want between the edges of the Slider and the screen using either pixel or percent values.

Events

On Sliding Complete

When the user takes their finger off the slider. The event returns the value that the slider has settled on.

Please note that the on Sliding Complete event does not work in web preview

On Value Change

This event fires each time the slider moves to a new position. Each time a new values is selected this event will return an updated value.

Properties

Disabled

Height

The set and get height blocks work with the Height property of the slider component. Acceptable input values are.

• Number of Pixels

• Percentage Height

• "Fit Contents"

• "Fill Container"

The Computed Heightblock returns the on-screen dimensions of the slider, after it has been rendered on-screen. The value returned is an integer, representing the size of the slider in pixels.

Maximum Track Tint Color

Set or get the color of the right side of the slider.

Maximum Value

Set or get the biggest value of the slider

Minimum Track Tint Color

Set or get the color of the left side of the slider

Minimum Value

Set or get the smallest value of the slider

Step

Set or get the step-size, also known as the increment, of the slider.

Thumb Tint Color

Change the color of the slider itself.

Value

The set and get value blocks are user to work with the position of the slider.

Visible

The set and get visible blocks are used to show or hide the entire Slider component. Acceptable values are:

• True

• False

Width

The set and get width blocks work with the Width property of the Slider component. Acceptable input values are.

• Number of Pixels

• Percentage Height

• "Fit Contents"

• "Fill Container"

The Computed Widthblock returns the on-screen dimensions of the slider, after it has been rendered on-screen. The value returned is an integer, representing the size of the slider in pixels.

Overview

The data viewer components allow you to create beautiful user interfaces for your data. All of this is done in just 3 steps, no blocks required!

1. Pick your Data Source

2. Choose your Item Layout

3. Set your Data Bindings

You can add additional functionality to the Data Viewer List by using the included component blocks or you can work directly with your raw data by using the Data Sources blocks.

Data Source

To begin using the Data Viewer you need to specify where your data are stored. Thunkable gives you three different storage options.

You can use Google Sheets or Airtable to store data in the cloud. Alternatively, you can create your own table. This is ideal if you want local, offline access to your data. Creating your own table is also the fastest and easiest way to get started with the data viewer.

In the Data_Viewer_List component properties, click the Add button. In the pop-up modal you can choose an existing data source. If this is your first time using the Data Viewer you can create a new one by clicking on the Create New button.

In the next modal, choose between Create your own table, Airtable or Google Sheets as the source of your data.

Create your Own Table

Start by naming your data source.

Next, select the Data Viewer component and click on the link that says Click here to edit the data. This allows you to edit the placeholder data that was automatically generated

The data editor allows you to edit, add, and delete columns of information. To change any of the individual values simply click on the cell and type whatever you like.

Airtable

In Airtable, a base in considered to be the data source. Adding an Airtable DB is really simple.

To start, copy your API key from your Airtable account page. An Airtable API key is a 14 character code that begins with the three letters "key". Paste this key into Thunkable and click the Refresh button to see a list of your Airtable bases.

Choose the base you want to use as your data source and click Create.

Google Sheets

In Google Sheets, the entire document is considered to be the data source.

In order to use a Google Sheet as a Data Source, the first row in your Sheet must be a header row.

To connect a Google Sheet, sign in and grant permission for your Thunkable project to access your Google Drive.

Once you have allowed this, you will see a list of spreadsheets in your Google Drive. If you don't seen the sheet you are looking for you can switch to list view, sort alphabetically or search for the one you need. Click Select to return to your Thunkable project.

At this time, connecting to .xlsx files that are hosted on Google Sheets is not supported. You can convert your .xlsx file to a Google Sheet before connecting it to your Thunkable app project. Simply open your .xlsx file on Google Sheets, then click File > Save as Google Sheets.

List Item Layout

Once you have specified a data source you can choose your List Item Layout. There are 7 options to choose from. Depending on the raw data you have you can choose a layout that best fits your particular needs

Title

Title Subtitle

Image Title

Image Title Subtitle

Image Title Subtitle Text

Image Title Subtitle Secondary Image Description

Image Title Subtitle Description

Custom Layout

You can also design a Custom Data Viewer Layout and save it with the Layout Type 'List' to use it in your Data Viewer List.

Data Bindings

You can now manually specify which columns in your data source correspond with the placeholders in your chosen layout. Each layout will have its own specific set of data bindings. Two examples are included below for reference.

If you use the Title layout, you will only have one data binding, the Title property.

This increases all the way up to five properties, in the case of the Image Title Subtitle Secondary Image Description layout.

Left Swipe

You can set a customizable, clickable button to appear when the list item is swiped to the left. If Left Swipe is set to true you will see additional options to customize the button text, text color and button background color.

When you test this on your phone you will see that each list item can be dragged to the left to reveal a clickable button. The Left Swipe Click event handler controls what happens when this block is clicked.

Right Swipe

You can also set a customizable, clickable button to appear when the list item is swiped to the right.

When you test this on your phone you will see that each list item can be dragged to the right to reveal a clickable button. The Right Swipe Click event handler controls what happens when this block is clicked.

Blocks

Click

The Item Click event is fired when any list item in the Data Viewer is clicked. It returns a row id which corresponds to the unique Thunkable Id of the item that was clicked. The row id is most useful when used with the the Data Source blocks.

Swipe

The left and right swipe click events are fired when these buttons are clicked. Both return a row id to quickly identify which row was clicked when using the Data Source blocks

Height & Width

The following blocks allow you to work with the height and width properties of the Data Viewer.

Visible

The entire Data Viewer can be hidden or shown by setting the Visibleproperty to false or true, respectively.

Refresh

Refresh the Data Viewer List to sync with the Data Source.

Data Source Blocks

When you connect a Data Source to your project you will also have access to a second block drawer. These Data Source blocks allow you to perform a variety of CRUD (Create, Read, Update, Delete) operations on your data.

Click on the link below to learn how to use the Data Sources blocks in your project.

Overview

While the Data Viewer List and Data Viewer Grid have different layout options, you may want to design a custom layout for your data. This can be achieved with Row and Column components.

Video Tutorial

How To Use a Custom Layout in Your App

Design your Custom Layout

Use a Row or Column to create the custom layout you want. We will refer to this as the 'Parent Row/Column' for the rest of this doc.

This layout is a Row that contains two Columns. The first Column contains 3 Labels: TitleLabel, DescriptionLabel, and PriceLabel. The second Column contains an Image, ProductImage, and a Rating, called ProductRating. These components will be referenced in subsequent screenshots in this document.

Save your Custom Layout

Select your Parent Row/Column and click the 'Save as Data Viewer Layout' button.

Basic

When you click Save as Data Viewer Layout, you will see the following dialog:

To save a basic Data Viewer Layout:

• Enter a Layout Name

• Select if your Layout Type is List or Grid

• Let Advanced Binding be set to false

• Click OK

Advanced

To save an advanced Data Viewer Layout:

• Enter a Layout Name

• Select if your Layout Type is List or Grid

• Set Advanced Binding to true

You can now select which properties of the components in your Parents Row/Column you want to bind to the values in your Data Source.

Once you have selected all of the properties that you want bound to the values in your Data Source, click OK to save your custom Data Viewer layout.

Use Your Custom Layout

Once you have saved your custom layout, you can select it as a layout for your Data Viewer. If your layout was saved with the Layout Type List, it can be used with the Data Viewer List. If it was saved with the Layout Type Grid, it can be used with the Data Viewer Grid.

Bind Your Data to Your Custom Layout

You can bind the properties of your data to a Data Source.

Basic

With Basic Data Binding, Thunkable will automatically select basic properties of your components to bind to values in your data source.

Advanced

With Advanced Data Binding, Thunkable will allow you to bind the properties that you specified to your data source:

Managing your Custom Data Viewer Layouts

You can manage your custom data layouts by going to your Thunkable homepage at x.thunkable.com/projects and clicking on the Data Viewer Layouts tab at the left of the page. From here, you can edit and delete your custom data layouts.

Add a Data Viewer List or a Data Viewer Grid to your app in order to connect to your data source:

You can design custom layouts for displaying your data:

You can use blocks to let your user create, read, update and delete information in your data source by interacting with the Data Viewer, using Data Sources blocks:

Video Tutorial

Sample App

Check out our Hockey teams sample app to see the Data Viewer grid in action. Click the "Copy Project" button is you'd like to reuse this open-source sample for yourself.

Overview

The data viewer components allow you to create beautiful user interfaces for your data. All of this is done in just 3 steps, no blocks required!

1. Pick your Data Source

2. Choose your Item Layout

3. Set your Data Bindings

You can add additional functionality to the Data Viewer Grid by using the included component blocks or you can work directly with your raw data by using the Data Sources blocks.

Data Source

To begin using the Data Viewer you need to specify where your data are stored. Thunkable gives you three different storage options.

You can use Google Sheets or Airtable to store data in the cloud. Alternatively, you can create your own table. This is ideal if you want local, offline access to your data. Creating your own table is also the fastest and easiest way to get started with the data viewer.

In the Data_Viewer_List component properties, click the Add button. In the pop-up modal you can choose an existing data source. If this is your first time using the Data Viewer you can create a new one by clicking on the Create New button.

In the next modal, choose between Create your own table, Airtable or Google Sheets as the source of your data.

Create your Own Table

Start by naming your data source.

Next, select the Data Viewer component and click on the link that says Click here to edit the data. This allows you to edit the placeholder data that was automatically generated

The data editor allows you to edit, add, and delete columns of information. To change any of the individual values simply click on the cell and type whatever you like.

Airtable

In Airtable, a base in considered to be the data source. Adding an Airtable is really simple.

To start, copy your API key from your Airtable account page. An Airtable API key is a 14 character code that begins with the three letters "key". Paste this key into Thunkable and click the Refresh button to see a list of your Airtable bases.

Choose the base you want to use as your data source and click Create.

If you're new to Airtable you can read more about it in our Airtable documentation.

Google Sheets

In Google Sheets, the entire document is considered to be the data source.

To connect a Google Sheet, sign in and grant permission for your Thunkable project to access your Google Drive.

Once you have allowed this, you will see a list of spreadsheets in your Google Drive. If you don't seen the sheet you are looking for you can switch to list view, sort alphabetically or search for the one you need. Click Select to return to your Thunkable project.

At this time, connecting to .xlsx files that are hosted on Google Sheets is not supported. You can convert your .xlsx file to a Google Sheet before connecting it to your Thunkable app project. Simply open your .xlsx file on Google Sheets, then click File > Save as Google Sheets.

Layouts

Image with partial Title overlay

Title only

Image Title Subtitle (Left Aligned)

Image and Title

Image Title Subtitle (Centre Aligned)

Circular Image Title Subtitle

Image with Title overlay

Custom Layout

You can also design a Custom Data Viewer Layout and save it with the Layout Type 'Grid' to use it in your Data Viewer Grid.

Data Bindings

Finally, you need to manually specify which columns in your data source correspond with which placeholders in your chosen layout.

Each layout will have its own specific set of data bindings. Here is what your Data Bindings section will look like if your chosen Data Viewer Grid layout has an Image, Title and Subtitle field:

Blocks

Click

The Item Click event is fired when any card in the Data Viewer is clicked. It returns a row id which corresponds to the unique Thunkable Id of the card that was clicked. The row id is particularly useful when used with the the Data Source blocks.

Height & Width

The following blocks allow you to work with the height and width properties of the Data Viewer.

Visible

The entire Data Viewer can be completely hidden or shown by setting the Visibleproperty to false or true, respectively.

Refresh

Refresh the Data Viewer Grid to sync with the Data Source.

Data Sources

When you connect a Data Source to your project you will also have access to a second block drawer. These Data Source blocks allow you to perform a variety of CRUD (Create, Read, Update, Delete) operations on your data.

Click on the link below to learn how to use the Data Sources blocks in your project.

The Data Sources blocks allow you to perform a variety of CRUD (Create, Read, Update, Delete) operations on records that you have stored in Airtable, Google Sheets or Local Tables.

Add a Data Source to your App

To access the Data Sources blocks you need to add a Data Source to your app. There are two ways to do this:

• Add a Data Viewer List or a Data Viewer Grid to your project

• Click on the ⊕ icon in the Data Sources section of your component tree:

In the modal that appears, you can choose a previously connected Data Source, or add a new Data Source.

Adding a New Data Source

When adding a new Data Source, you can choose between Create your own table, Airtable or Google Sheets as the source of your data.

Add Filter View

1. Open a data source.

1. Click Add Filter View.

1. Add one or more filter rules.

1. Click Create Filter View.

1. Select the Filter View in a data viewer's properties panel.

Sort

1. Open a data source.

1. Click on a Filter View.

1. Click Sort icon.

1. Select column.

1. Select Ascending or Descending.

Create your Own Table

Start by naming your data source.

You can now see this Data Source from your Data Sources section. Click on the Data Source name to edit it.

The data editor allows you to edit, add, and delete columns of information. To change any of the individual values simply click on the cell and type whatever you like.

Airtable

Connect Your App to Airtable by OAuth

1. Click Connect to Airtable.

2. In Thunkable, click the data icon in the left side panel to access your data source library.

3. Click the plus sign at the top of the panel.

4. You can select from previously added data sources or add a new data source. Click Create New.

5. Select Airtable.

6. Click the OAuth tab.

7. An Airtable authorization screen opens.

8. Click + Add a base.

9. Select the bases you want to authorize access to.

1. Click Grant access.

1. Select the correct base from the dropdown menu.

2. Indicate if you'd like to use a custom view. Learn more here: Use a Custom View.

3. Click Create.

4. Refresh your page to ensure the data is reflected in web preview or via the Thunkable Live app.

Authorization Header For Block

If your app uses web API blocks to communicate with Airtable, you must also incorporate the "authorization header for" block into your app. This block retrieves a valid token that can be used as the authorization header in web API blocks.

To use the "authorization header for" block:

1. Ensure your project is connected to an Airtable data source by OAuth.

2. Navigate to your project's blocks tab.

3. Under the App Features heading, click Data Sources.

4. Drag and drop the "authorization header for" block into your workspace.

5. Use the block's dropdown menu to ensure the correct data source is selected.

Google Sheets

In Google Sheets, the entire document is considered to be the data source.

In order to use a Google Sheet as a Data Source, the first row in your Sheet must be a header row.

Your Google Sheet must be shareable for Thunkable to access its data.

To connect a Google Sheet, sign in and grant permission for your Thunkable project to access your Google Drive.

Once you have allowed this, you will see a list of spreadsheets in your Google Drive. If you don't seen the sheet you are looking for you can switch to list view, sort alphabetically or search for the one you need. Click Select to return to your Thunkable project.

At this time, connecting to .xlsx files that are hosted on Google Sheets is not supported. You can convert your .xlsx file to a Google Sheet before connecting it to your Thunkable app project. Simply open your .xlsx file on Google Sheets, then click File > Save as Google Sheets.

Data Source blocks

Create

The create row inblock allows you to append new rows to the end of your data tables.

The inputs are dynamic so if you change the name of Column 1 or Column 2 in the designer these changes will be reflected in the block too.

There is a second create row in block which allows you to add a row in your data source using an object. The field is the column name and the cell info is the value you would like to set.

Read

The get value from blocks allows you get read one value from a specific cell in your data table. You can specify the column name and the view in the block itself and pass the unique row id as an input.

Get row object will return the row object of the specified row ID. The row object can be used with Objects blocks.

The get row object from block returns the row object of the first row that meets the specified condition. You can specify the column name and condition in the block itself and pass the value as an input. The row object can be used with Objects Blocks.

The list of values in block allows you to read an entire column of data from a table and returns it as a list that you can then manipulate with the built-in List blocks.

The number of rows in block returns an integer corresponding to how many rows are in a given table.

The columns in block returns the column names of a data source.

Update

The update value in block allows you to modify or update an existing cell in your data source. The column name and view are specified in the block itself. The row id and new value are passed as inputs.

There is a second update row in block which allows you to update a row in your data source using an object. The field is the column name and the cell info is the value you would like to set.

Delete

Delete Row

You can use the Delete Row block to delete a row of data from your Data source. The row id is passed as an input. If there is an error, the error message is passed as an output.

Delete All Rows

You can use the delete all rows block to delete all rows in your data source. If there is an error, the error message is passed as an output.

Filter

Update Filter For Block Overview

The update filter for block allows you to edit the value for each condition within a specific view of your data source.

Rating Overview

The Rating component is a visible component which can be used to display the rating of a product or content in your app, and allow the user to leave their own rating.

A Rating component is made up of 5-10 icons. An icon can be filled, partially filled, or empty, as seen below:

Event Blocks

On Rate

This block fires when a user enters a rating in the Rating component.

Properties

Count

Maximum rating that can be given. Can be an integer between 5 and 10, selected from a drop-down menu.

Direction

Select how the Rating component is displayed: as a row (left-right), row-reverse (right-left), column (top-bottom), or column-reverse (bottom-top).

Font Size

Change the size of the icons that make up the Rating component.

Height

Set or get the height of the rating component in pixels.

Icon Margin

Get or change the size of the margin between the icons of the Rating component.

Icon

You can select an image from the list available. All of the image options are suitable for any platform. You can preview the image options here.

You can upload your own images to be displayed for filled and empty icons.

Read Only

Toggle whether the user can edit the value displayed on the Rating component. If read-only is true, the value cannot be edited. If read-only is false, the value can be edited.

Rating Background Color

Select the color of an unfilled icon.

Rating Color

Select the color of a filled icon.

Value

Initial value displayed on the Rating component. Can be any number between 0 and the maximum value, including decimals.

Visible

Toggle whether your Rating component is visible.

Width

Set or get the width of the rating component. Given in Pixels.

X

Set or get the horizontal position of the rating component on the screen.

Y

Set or get the vertical position of the rating component on the screen.

Adding Navigators

To add a navigator to your app, you will need to drag the navigator component into your component tree, and then drag a screen on top of the navigator component.

Name Your Drawers

To name your drawers, click on each screen and navigate to the Drawer label on the bottom right corner of the properties section.

Drawer Navigator Properties

You have many options for styling your Drawer Navigator, such as changing the background color or tint color. Here are the different options for customization:

• Drawer Width: Width of the Drawer in pixels

• Drawer Position: Position Drawer swipes out from: left or right

• DrawerOptions

  • Active Tint Color: Tint color for selected drawer.

  • Active Background Color: Background color for selected drawer.

  • Inactive Tint Color: Text color for unselected drawers.

  • Inactive Background Color: Background color for unselected drawer.

The Top Tab Navigator is positioned at the top of your app, and allows users to switch between different screens by clicking.

Adding Navigators

To add a navigator to your app, you will need to drag the navigator component into your component tree, and then drag a screen on top of the navigator component.

Tab Navigator Properties

You have many options for styling your Top Tab Navigator, such as changing the background color or tint color. Here are the different options for customization:

Simple Properties

• SwipeEnabled: Allow the user to swipe between screens.

• AnimationEnabled: Select whether to animate the transitions between screens.

• Lazy: If true, tabs are only loaded once the tab is opened. If false, all tabs are loaded when the Tab Navigator is first opened.

• Background Color: Select a color for the top tab navigator.

• Tab Indicator Color: An underline will appear underneath the tab you select. You can select a color for the underline.

• Active Tint Color: Select a font color for the tab currently in use.

• Inactive Tint Color: Select a color for the text of the tabs that are not in use.

• ShowIcon: Toggle whether to show icons in the Tab Navigator.

• ShowLabel: Toggle whether to show tab labels in the Tab Navigator.

Advanced Properties

• Upper Case Label: Make the text for all the tabs upper case.

• PressColor: Color of material ripple as a tab is pressed

• PressOpacity: Opacity of material ripple as a tab is pressed

• ScrollEnabled: Toggle whether to enable scrollable tabs

• Tab Indicator Height: An underline will appear underneath the tab you select. This section will allow you to choose how tall the underline is.

Adding Labels and Icons to Your Tabs

When designing a tab, you can use words or images to guide users to different screens.

Step by Step Instructions

Step 1. Add screens to a Navigator by dragging and dropping them on top of a Navigator.

Step 2. Select the Top Tab Navigator. Decide if you would like to display icons or labels by clicking on these switches:

Step 3. Depending on if you are adding icons or labels, select the screen you would like to style and upload an image or add content:

Additional descriptions are below:

Tab Bar Label -- The name of your tab label

Active Tab Icon -- Icon that appears when tab is selected; You can upload an image for this icon.

Inactive Tab Icon -- Icon that appears when tab is not selected; You can upload an image for this icon.

Enable Swiping

Swiping is a popular way to move through screens and is enabled by the Tab Navigator. You can enable the swipe feature by clicking the "SwipeEnabled' switch.

From Idea to App

To go from an idea to app, we strongly recommend that you sketch out your vision using the below app templates. It's important to first create a roadmap for how people will interact with your app.

Navigator Tutorial

Arrange Screens with Navigators

Here are three examples of navigators that you can use on Thunkable.

Layout Components

Video Tutorials

Appearance and Layout

Space Elements Horizontally

The Horizontal Alignment property allows you to space elements in a Screen horizontally

Space Elements Vertically

The Vertical Alignment property allows you to space elements in a Screen vertically

Add a Background Color or Picture

Background Picture Resize Mode

This determines how to resize the image when the frame doesn't match the raw image dimensions.

• Cover: Fills the entire screen without changing the height and width ratio of the image

• Contain: The entire image will be scaled down to fit inside the screen, without changing the height and width ratio of the image

• Stretch: The image's height will change to fill the screen length-wise

• Repeat: Repeat the image to cover the screen. The image's height and width ratio

  will not change

• Center: Positions the image in the middle of the frame

Enable Scrolling

Set Orientation

Status Bar

Hide (or show) Status Bar

Status Bar Theme

Status Bar Opacity

Status Bar Color

Save Screen

Thunkable allows you to reuse a screen, and its associated blocks, in multiple projects with the "Save to My Screens" feature. You can find the save screen button at the top of the properties for every screen component in your app.

Name Your Screen

It's important that when you save your screen you use a descriptive and memorable name that describes what your screen does. The example below is for a sign in screen, which is something that often get reused across multiple projects.

Add a New Screen

Once you've saved a screen, any time you click the + button to add a new screen you will be given the option to add a blank screen or to "Copy from My Screens".

Choose a Saved Screen

Simply choose the screen that you want to add in and click the "Copy" button to proceed.