So, in this tutorial I will talk about how can we create a dynamic shayari or jokes app with Kodular, using Airtable Spreadsheet.
First of all I created a Splash Screen like other apps. If you don’t know how to make a splash screen then follow my past post about this first. After that I have created 2 screens, Home and Main. In this app there will be category wise posts, so Home screen will display different Categories. It will be dynamic so you can add unlimited Categories after you publish the app. So now let’s start the design and Blocks

Home Screen

Design

Here I give the Title Visible and Title’s text as Categories after that just made 1 percent of Space. Then Drag a ListView component from User Interface. In ListView make Background colour White, Divider colour Black, Divider Height 5, Width 95 percent and Text Colour as Red (I set this format, you can set whatever you want). Now drag a Spreadsheet from Storage and set your own API Key, Base Id and Table Name. I will show how I set the Spreadsheet at the end of this Post.

Blocks

here you can see I first called Spreadsheet’s Category Table’s Category column (where only Category names is stored). then after got column ListView will show all the available Categories in List. when an user click on a Category from the list then it will go to another screen that is Main with start value i.e. the Category Name (e.g. Love Shayari)

Main Screen

Design

First I have downloaded some images and uploaded to ASSETS of the app. When Love Shayari will be clicked then a Love type image will be the background image, when Sad Shayari will be clicked then Sad type of image will be at background. And when other Shayari will show then another image will be at background. You can add other images also. Also set Text Colour as background image (e.g. background image is white colour type then you can set text colour as Black, otherwise shayari will not be visible to the users)
Here I set a simple interface where index (or numbering) and total number of shayari will be display into a Horizontal Arrangement and also after this the main Shayari willbe display at the center of the app. I set the shayari label’s width as 80 percent and font size as 20 and make Shayari label Clickable. After this I dragged another Horizontal Arrangement and there I set 3 label button, remember to make all Labels Clickable. I set these Label’s font style to Material Icons and set 3 Material Icons for Next, Back and Share button. Here drag Spreadsheet and set API Key and Base Id, do not add any Table Name, as it will be the Start Value of Home screen, drag Sharing(for sharing shayari) and Device Tools(to copy the shayari when long clicked on Shayari).

Blocks

here you can see 3 global initialize variables for index, total shayari number and shayari list. you can see the Spreadsheet’s Table name is StartValue, so when you create a new category you also have to create a new Table with exactly same name. also you can see I set the background image here for different categories

here you can see after Spreadsheet got Shayaries it will start showing to Shayari Label after the Show procedure

functions for Back button and Next button

sharing and long click to copy functions

Spreadsheet

it is the Category Table where all categories will be stored.

this is the Shayari Table under Love Shayari category, where all Love Shayaries will be stored.

When you add a new Category at Category Table (suppose Birthday Wish) then create another Table as exactly same name (i.e. Birthday Wish) and then just create one Column into that Table i.e. Shayari and under that column just write all Shayari.
You can use my existing Table to get idea : https://airtable.com/techstudyinvite

Video Tutorial

Download