How to Build a No-Code Dashboard in 3 Steps (Practical Guide)

January 12, 2023
•
5
min read
By:
Lizzie Davis, Growth Marketer, Stacker

In this post, we’ll show you exactly how to create a no-code dashboard with Stacker — our tool for building no-code apps powered by your data — in three simple steps:

  1. Connect your dashboard’s data source (like Airtable or Google Sheets) or use Stacker to house your data.
    ‍
  2. Build your dashboard’s user interface (UI) by dragging and dropping design elements, adding buttons, and much more.
    ‍
  3. Invite users (like teammates, company stakeholders, or clients) and set permissions (decide what information they can see and edit).

Additionally, we’ll also cover two other tools for building no-code dashboards — Dezbor and Caspio — so you can make a well-rounded decision.

Stacker lets you build dashboards, as well as other useful web apps, without writing a single line of code. Start a free 30-day Stacker trial today.

How to Build No-Code Dashboards in 3 Simple Steps with Stacker

Stacker is our no-code web app builder, which lets you create CRMs, client portals, project trackers, internal tools, and much more — all without writing a single line of code.

Thanks to its versatility, Stacker can also be used to build no-code dashboards, powered by your data, that can exist as standalone web apps or be just one part of larger apps.

In the next sections, we’ll show you the exact three-step process for building a no-code dashboard with Stacker.

Step 1: Connect to a Data Source or Upload Your Dashboard Data Into Stacker

Because dashboards are visual representations of data, the first step in building one is choosing a data source. 

With Stacker, you can utilize a wide array of data sources by:

  • Syncing to Airtable or Google Sheets. After syncing to these two data sources, Stacker automatically builds a working app for you. You can then use Stacker’s layout customization and permission options to create a useful dashboard, as we’ll see in the next sections. Any changes made on the dashboard’s front end are automatically reflected on the back end (i.e., in Airtable or Google Sheets). For example, say you build a dashboard with information about your team’s projected monthly expenses —  when your team leader approves an expense, that change is automatically reflected in the original data source.
    ‍
  • Using Stacker as your data source. Stacker Tables can also house the data for your dashboard, so you don’t have to juggle multiple tools. You can simply enter your data by hand or import it from an Excel spreadsheet by uploading a CSV file. This is a great option if your dashboard data is already stored in another system since many tools allow you to export data in a CSV file. 
    ‍
  • Bring in data from 60+ different sources (with our Enterprise plan). Stacker supports many read-only data sources, including project management tools (e.g., Asana, Jira, Mavenlink), CRMs (e.g., HubSpot, Salesforce, Pipedrive), databases (e.g., MySQL, MongoDB, MariaDB), and much more. However, because these sources are read-only, any changes made on the dashboard’s front end won’t be reflected in the original data source automatically.

Step 2: Build Your Dashboard’s User Interface (UI)

Once you’ve connected to your data source or housed your data in Stacker, it’s time to create a presentation layer (or UI) that makes relevant information easy to digest.

With Stacker, you can build a UI for your dashboard, without worrying about pixels, aspect ratios, or other frontend development and design issues.

For example, you can:

  • Add Stacker charts. Stacker’s charts feature (in beta – but available on request from the support team) allows colleagues and stakeholders to evaluate contacts and used platforms at a glance. 
Stacker Charts: All Media Contacts
  • Add buttons for important functions like edit, save, delete, approve, and mark as read.
    ‍
  • Drag and drop design elements such as widgets, banners, headers, and pipelines.
    ‍
  • Change your dashboard’s color and add your logo (or your clients’ logos).
    ‍
  • Customize how the data is presented to users by choosing which fields from your data source are displayed, using filters, sorting records by a specific order, and much more.
Edit Layout Fields and Views in Stacker

Again, when syncing to Airtable and Google Sheets, our tool automatically builds a web app based on how your data is organized. However, you can use all of the customization options above to create the dashboards you need.

Step 3: Invite Users and Decide What Information They Can See and Edit

Stacker makes it easy to add users to your dashboard by:

  • Entering their email address.
    ‍
  • Connecting to a user table from your data source.
    ‍
  • Using Open Signup to create a link that lets anyone register and access your dashboard.
Add and Manage Users in Stacker

With Stacker, you also can set granular Permission Rules and create different User Roles. 

These two capabilities make it possible to share dashboards with different users — e.g., internal teams, company stakeholders, or external clients — while ensuring everyone only has access to the data that’s relevant to them.

To create a new permission rule, click on “Permissions”, find the table for which you’d like to create a new rule, and click on “Add permission”.  

Add Permission Sharing and Filters in Stacker

For example, you can choose which fields users can read or update by simply toggling checkboxes, as shown in the screenshot below.

Field Access Parameters: Choose exactly which fields your users can read and modify.

You can also create different User Roles and assign permission rules to them. 

To do so, click on “Roles” and then on “Enable roles”.

App Settings and Roles in Stacker

This will let you add new roles, name them, and decide what permissions they have.

App Settings, Roles, and Approver in Stacker

For example, say you have a dashboard used by your team and your clients. Your team members can have a role with permissions that lets them see the dashboard, update certain parts of it, add new charts, and so on. Clients can have a different role that only lets them see the dashboard, without being able to change its data or design.

Bonus: Build Useful Web Apps Without Coding

As we said, Stacker is more than a tool for building no-code dashboards. You can use it to create entire web apps, without writing a single line of code.

Here are a few examples:

  • Segment’s app, used by over 15,000 startups. Segment uses a Stacker app to run its program that supports early-stage startups with software deals, resources, and credits. The data for this app is housed in Airtable, while the UI customizations and granular permissions are handled by Stacker. Thanks to Stacker, Segment gives members of the program a way to log in, track their deals, and access a useful resource hub.
    ‍
  • Growth Collective’s workflow management app. Growth Collective is a platform that connects clients with pre-vetted marketing experts. At first, they used Airtable to store their data, which meant they lacked an interface that allowed clients and freelancers to only access data relevant to them. But once they set up Stacker, they create multiple portals, which clients and freelancers can both use to login and view their matches, without having access to each others’ data.
    ‍
  • Zapier’s app for tracking employee budget spending. Zapier’s accounting team used Stacker to build a tool that lets employees track their budget spending and gives them access to a playbook with resources about life at the company. This app helps the accounting staff manage their work efficiently, save time and effort, and provide transparency to team members. 

To start building no-code dashboards, as well as all sorts of other useful web apps without coding, start a free 30-day Stacker trial today.

Visit our Template Library

Get started today with fully customizable Project Trackers, CRMs, Portals, Deal Trackers and more
See template library