How to create a dashboard integrated with Airtable in UI Bakery

Check a step-by-step guide to see how you can connect your Airtable data to your UI Bakery project without leaving the platform.

To start, create a new project and set its name. You can use a blank page to start, or you can build your project based on one of the ready-made UI Bakery templates.

Let's create your UI first.

Click on "Structure", select a Layout tab, and choose the third one (with a header only).

How to create a dashboard integrated with Airtable in the UI Bakery web app builder

Select the Header space, call for a Component picker pressing a grey plus in the center, and find a Button component here.

How to build a dashboard connected to Airtable without coding

Let's now customize the button. 

Click on it, go to the configuration panel on the right sidebar, and set the following settings:

  • Status – "primary".
  • Size – "medium".
  • Appearance – "ghost".
  • Icon placement – "icon only".
  • Icon name – "menu".
How to create a dashboard with Airtable data in the UI Bakery low-code development tool

Now, copy the button using Cmd(Ctrl)+C, and paste it into the Header space using Cmd(Ctrl)+V.

Configure the settings of the button:

  • Status – "basic".
  • Icon name – "log-out".
Learn how to create a dashboard integrated with Airtable step-by-step

Add a Text component, and type a name here ("Steve", for example).

How to build a dashboard integrated with the Airtable real data using the UI Bakery web apps builder

Add an Image into the Header with the following parameters: width – 48px, height – 48px.

Upload an image you want to use.

How to use the UI Bakery web app builder to build a dashboard and integrate it with Airtable

Use a drag-n-drop feature to change the component place like in the screenshot below.

How to create a dashboard connected to Airtable data using the UI Bakery low-code tool

Now, you content is aligned to the left side. Let's align your Text, Image, and Button to the opposite side: 

  • Select your Image.
  • Set the left margin as "auto" using the configuration panel on the right sidebar.
How to create a dashboard without coding and integrate it with Airtable using UI Bakery

Add a few margins on the right between your components to make the UI look better.

Learn how to build a dashboard and connect it to Airtable using the UI Bakery web apps builder

Now, let's create 3 cards and put some real data there.

Click on a grey plus in the center of the root space, and add a Space with 4-column width.

How to create a dashboard integrated with the data from Airtable tables using the UI Bakery low-code development tool

Add a Card into the created Space.

Creating a dashboard connected to Airtable without coding

Delete the Header and the Footer of the Card.

Building a dashboard integrated with Airtable using the UI Bakery app building tool

Add 2 components inside the card:

  • Image with a 60px-width and a 60px-height.
  • Space with an auto width.
How to build a dashboard integrated with Airtable using the UI Bakery low-code development platform

Upload an Image, and change the Background color of the Card to "success".

Step-by-step guide on how to create a dashboard and integrate it with Airtable using the UI Bakery apps builder

Add a Heading into the space on the right side of your Image.

Step-by-step how-to guide on creating a dashboard and connecting it to Airtable using the UI Bakery web app builder

Customize the Heading in the following way:

  • Color – "alternate".
  • Type – H5.
  • Text – "Total opportunities" (or any text you need).
Creating a dashboard integrated with Airtable using the UI Bakery low-code builder

Add a Heading, a Progress bar, and a Text under "Total opportunities".

Don't forget to set a proper direction of the space containing all the headings and texts components – it should be "from the top to the bottom".

How to create a dashboard integrated with Airtable with the UI Bakery low-code development solution

Customize the components as below, i.e. change the text, add margins, set an alignment.

How to create a dashboard for any industry and connect it to Airtable using the UI Bakery web app builder

Select the Space where the Card is placed, and add a 16px-padding on the right side.

How to create a dashboard to digitize a business and integrate dashboard with Airtable using the UI Bakery low-code tool

Copy and paste the cards using Cmd(Ctrl)+C and Cmd(Ctrl)+V.

How to create a dashboard and integrate it with Airtable with the UI Bakery visual app builder

Place the images as you need, and change the background colors of the copied cards.

How to create a dashboard and integrate it with Airtable using the UI Bakery visual web app builder

Select the parent space where all the cards are placed, and add paddings on the left, on the right, and on the top.

How the UI Bakery visual web app maker allows you to create a dashboard and integrate it with Airtable data with no coding

Let's finally get down to connecting Airtable data!

In our example, we use a Sales CRM from Airtable.

Open the Builder and create an Action.

How to create a dashboard and connect it to Airtable using the UI Bakery visual web app creator

Name it somehow, e.g. "load opportunities".

Create the first step – "HTTP request" with GET method. We've used this URL: 

Airtable requires authentication, so to get the needed data, you'll have to use a key.

We keep our key inside the App State Manger as a variable – {{state.API_TOKEN}} – with a "string" type. The key value is: keyN2bJNIXYeDCU9t.

How to create a dashboard and connect it with Airtable data using the UI Bakery visual development tool
How to guide on building a dashboard and integrating it with Airtable using the UI Bakery app development platform

Now, save the data received from Airtable in a variable.

Add the next step – "Save Data to App State".

Step by step guide on how to create a dashboard and integrate it with the data from Airtable using the UI Bakery web app building platform

Create a variable:

  • Name – "opportunities".
  • Type – "array".
How to create a dashboard and connect it to Airtable in the UI Bakery web app development platform without coding

If you open the URL provided by Airtable in your browser and replace {{state.API_TOKEN}} with keyN2bJNIXYeDCU9t, you'll see the real data.

How to create a dashboard integrated with Airtable using the UI Bakery app creator without code

You can see that all the data's placed in the "records". To get this data, add ".records" to the Value field in the "Save Data to App State" step.

Once done, you'll see this result: "{{data.records}}".

How to build a dashboard and connect it to Airtable with the use of the UI Bakery web app maker

Great, you've loaded and saved the data in UI Bakery. Time to use it!

Open the Builder and select the Root space. Go the Root space data settings and set a "load opportunnities" action in the "On Init" field.

Learn how to create a dashboard and integrate it with the Airtable data right in the UI Bakery web app development platform without coding

Select the "smth" text, and replace it with the "opportunities" variable. Use Ctrl+Space inside the "text" field in the general settings of the Heading. This shortcut opens the list of variables. Choose the "opportunities" variable from the list.

How to create a dashboard and integrate it with Airtable using the UI Bakery low-code development tool with no coding

Click on the Preview button to see the result.

How-to step-by-step guide on how to create a dashboard and integrate it with Airtable using the UI Bakery low-code builder

No panic! Yes, our variable contains a number of objects (elements), so let's calculate them.

There is a property length in JS that returns the number of elements in that array. To use the length, add ".length" at the end of the variable name.

How-to guide on creating a dashboard connected to the Airtable data using the UI Bakery web app builder without coding skills

Click on the Preview button to check what you've got.

How to create a dashboard integrated with Airtable and getting Airtable data in real time using the UI Bakery web apps builder

Since we have the "opportunities" variable containing all the Airtable data, we can use different JS functions and methods to parse this variable.

Now, let's get an Estimated value from the "opportunities" variable. Open the Data tool, and add a new action with a "Code" step.

How to create a dashboard integrated with Airtable without coding using the UI Baker web app builder

Use this code snippet to get an Estimated value from the variable:

Save the result to App State Manager by adding the second step.

How to build a dashboard and use the data connection feature to connect Airtable data using the UI Bakery web app creator

Create a variable:

  • Name – "opportunitiesValue".
  • Type – "number".
How-to guide on building a dashboard connected to Airtable without coding using the UI Bakery web app builder

As you may know, to execute an action, you need to set this action on a UI element. Moreover, UI Bakery allows you to execute an action via another action.

Select the first action – "load opportunities", and add one more step – "Execute Action". Inside this step, select an action – "calculate opportunities value".

How to create a dashboard connected to the Airtable tables using the data connection feature available in the UI Bakery web app builder

Now, let's replace the text on a blue card.

Open the Builder, and type "Total opportunities" instead of "Estimated Value". Select "smth", and delete it. Use Ctrl+Space to open the list of variables, and select "opportunitiesValue".

How to create a dashboard and integrate it with Airtable data using the UI Bakery web app creator

Click the Preview button to see the result.

How to build a dashboard integrated with Airtable using the UI Bakery visual development platform

Add a $ symbol before the "opportunitiesValue" variable.

How to create a dashboard and integrate it with Airtable using the UI Bakery web app builder almost without coding

One more feature you can try – using different libraries. Open http://numeraljs.com/, and copy a URL below:

Open the Project settings.

How to create a dashboard visually and integrate it with your Airtable data using UI Bakery and a low-code development approach

Paste the copied URL inside the "Code" tab, save the changes, and go back to the Builder.

How to create a dashboard and integrate it with Airtable data using the UI Bakery low-code app development tool

Perfect! Now, you can use Numeral JS in UI Bakery.

Select "opportunitiesValue" in the Builder, and replace it with:

Let's check the result.

How to create a dashboard and integrate it with your Airtable tables without code using the UI Bakery low-code development platform

Finally, let's configure a yellow card. We need to calculate the closed opportunities.

Open the Data tool, and add a new action – "calculate closed opportunities" with a "Code" step.

How to create a dashboard and integrate it with Airtable data visually using the UI Bakery web app builder

Use this code snippet:

Save the result to the App State Manager, create a variable:

  • Name – "opportunitiesClosed".
  • Type – "number".
How to create a dashboard and connect it to Airtable using the UI Bakery web app building platform

Replace the text in the yellow card. Open the Builder, type "Closed opportunities" instead of "Total opportunities". Delete "smth".

Use Ctrl+Space to open the list of variables, and select "opportunitiesClosed".

Guide on how to create a dashboard and integrate it with Airtable tables with data using the UI Bakery web app maker

To make your action work, execute it via "load opportunities" action.

Guide on creating a dashboard and integrating it with Airtable with low code using the UI Bakery web apps builder

Click on the Preview button to see what you've built!

How-to article on how to create a dashboard and connect it to Airtable using the UI Bakery low-code development platform

That's it!

Hope this guide was helpful. Do not hesitate to check the other how-to articles available in the UI Bakery academy.

To see how it works:

  1. Register, or log in UI Bakery.
  2. Create a new project, or open the existing one.
  3. Follow the steps in the guide above to get the result.