NoCode Workshop 2 - Interfaces

Turning data into tools — building your first custom app interface with Stacker.

In this workshop, we will:

• Recap experience of building with Airtable

• Explore different interface builders

• Create our first app(s)

• Limit access to data via permissions

1.1 What is Stacker?

Stacker is a nocode interface builder. It’s great for quickly building internal tools and portals.

• Internal tools are the kinds of things you use internally to manage your business - eg expenses, annual leave, project management.

• Portals are apps where your customers / clients / users can login to access data - for instance, students accessing learning materials, or when you login to make an insurance claim.

1.2 Setting up Stacker

Stacker has two versions available to sign up to - we’re going to sign up to the Classic verson today, just as it’s a bit more straightforward to use. When signing up, make sure you don’t use a template for your first app - just skip through until you’re in the app builder.

⚠️ Once you’ve made your Stacker account, you’ll be on a one-month free trial for it. After that, your access will end.

One cool hack you can do to “extend” free trials like this is to sign up again with a plus in your email. EG if you signed up with oli@gmail.com, you can also sign up with oli+1@gmail.com, and all those emails will go to your main inbox.

1.3 Adding our data source

Now, we’re going to connect Stacker to our premade Airtable.

If you haven’t already, copy this database to your Airtable account - use the “Copy base” button at the top of the screen and choose a workspace to add it to. This will be the database structure + data we’ll be working off!

Click the small “Add a data source” at the bottom of the created splash screen. And select Airtable. Go to the table in Airtable and click the Share button at the top right.

Click the Share to web tab, which should give you a link to copy.

Then copy that link into Stacker and press the Grant access button

You’ll see it automatically generates 3 views within our app, one for each table in Airtable. It generates both a list view (ie showing all the items on the table) and the detail view when you click through. This is how most marketplace type apps work! Think about AirBnB, Deliveroo,

List view + Detail view compared

On the right hand side we can edit the app - the five symbols are

• Edit layout - how does the app look

• Manage fields - here you can see your data from Airtable

• Users - who can access the app?

• Preview as - this lets you view the app as one of your users (very useful for testing)

• App settings - things like changing the app name, etc.

2.1 Creating our first app - Expenses management. Part 1: List View

Navigate to the “Expenses” page on the left hand side and click the “Edit layout” button on the right. Have a play around with all the “Appearance” settings - you’ll see there’s a few different ways to style your app.

Try adding some Header text to the list view, to explain that the user is looking at an expense management portal. Let’s keep the style as a List view for now, but we can change that later.

You could add an “Inline filter” in, so a user can filter based off a criteria, eg Status.

Under “Advanced options” you can also choose to show / disable the search bar, or allow users to download the data at a .csv. See how this automatically updates the interface when you select them.

Now, at the bottom of the toolbar we can edit the fields being displayed on the list view - this can be a little tricky to find, especially on a small screen, so here’s a video of where they are.

Under “Advanced options” you can also choose to show / disable the search bar, or allow users to download the data at a .csv. See how this automatically updates the interface when you select them.

Now, at the bottom of the toolbar we can edit the fields being displayed on the list view - this can be a little tricky to find, especially on a small screen, so here’s a video of where they are.

Let’s start by clicking the block containing some of the details and deleting it - this will give us a blank canvas to work with. Then, on the right hand side, you can see a list of the types of blocks we can add to a detail page.

We can start by adding a “Highlights” field at the top - these are great for showing key bits of information.

We can add “Amount” and “Date” so the person can see the key information at a glance.

Next, let’s add the “Fields” block and add information about the User and their receipt

Finally, let’s add a Pipeline widget that will allow the accounts team to quickly update the status of an invoice. Select “Status’ as the field, and add all the stages. You can also uncheck “Mark read only” to allow people to update the status by clicking on the widget.

Finally, let’s add a bit of text that only displays when the receipt is not there. This is called “conditional visibility” and is an important concept - changing the appearance based off criteria that we set.

Let’s start by adding a “Callout” block at the top of the page (you can drag and drop these blocks!) and give it the Style “Warning” and the Title “Receipt missing!”

With the block selected, at the top right you can see “Set conditional visibility”. Here we want to make it so the block only appears if the Receipt / invoice field is empty.

2.2 Expenses management. Part 3: Form view

There’s one last part of this app we need to set up: How do people add new expenses to the system? For that, we can use a form, that we find by clicking “Add New” on the List view.

Here, we customise the form exactly as we did with the list / detail view.

We can choose which fields we want. But let’s hard code some of them in - IE make it so the user can’t change them.

If we hover over the “Status” field on the right hand side, we can see a little edit button appear. Click on that, and you can make the Default value “Submitted” and it “Read Only” which means users can’t change this.

Within this edit area, you can also decide which fields are Required.

Great! Now we have an app where

1. Users can upload their expenses

2. They can view outstanding expenses

3. They can update their expenses

This is a good start, but it feels a bit odd that everyone can view everyone’s expenses, and can update each other’s expenses too (!) - we’ll come back to this in the second half of the workshop.

2.5 Users

Let’s now give people access to our app. Don’t worry, noone real will be able to login, but you could absolutely enable that if you’d like to!

Head over to the Manage Users section on the right hand side

Stacker can handle our users for us - i.e. it can keep a list of everyone who has access. But since we already have a User table on Airtable, let’s use that. Click “Choose table” at the bottom right, and follow the instructions - we want to set “access to app” to automatic.

You’ll be rewarded with a list of all of the people who can login. If you were to add your email / a friend’s email to the Airtable User’s page now, that person would be able to login to your app at the link in your browser!

⚠️ Stacker handles everything like logging in, password resetting, etc for you so you don’t need to worry about it. You don’t ever store a user’s password for them.

If you’re finished early, here’s a few further things to do:

• Make an employee directory on the users page - pick “cards” as the list view

• Make the user’s details page - try the “Profile” template

• Edit the name of the User’s page to “Team Directory”

• On each Department Detail page, add a “Related record list” to only show the people within that department.

• Click “Add new” at the bottom left and create a “Custom Page” - call it “Welcome” and fill it with information that would be useful for users who just logged into the app.

• Have a look at the “Navigation” and “Appearance” settings in the “App settings” in the right hand toolbar. Play around to change the feel of your app!

⚠️ Take a break!

3.1 - Permissions

Now, let’s talk about permissions. Permissions lets you decide who can access your data, and to what degree. Normally when we talk about accessing data we talk about it in terms of CRUD, by which we mean what can a user

• Create - IE can they add expenses to the app?

• Read - can they view expenses?

• Update - can they update them?

• Delete - can they delete expenses?

And we can decide this both for a row in the database, IE

• User A should only be able to view their own rows on the expenses table - IE they can only view their own expenses

• User B (eg the accounts team) should be able to view all expenses for everyone, but only update the status field.

• User C (the app admin) should be able to view, update, delete, and create whatever they want.

⚠️ Permissions are a different thing to conditional visibility. Conditional visibilty is not a security feature - your users can likely still find that data, if they want to!

3.2 - Creating your first permission

Find permissions by going to App settings → Permissions

Take a look at this table - Departments, Expenses, and Users are all set so users can read, update, create, but NOT delete them. Let’s start by changing the Expenses settings, by clicking the edit button to the right.

Let’s make it so they can only access an expense if they’re the owner of it. To do this, we need to add an “Ownership filter” such that the record matches the User’s profile.

Now, let’s scroll down and change it so in this instance a User can

1. Create a new expense

2. Read their own expenses

3. Update their own expenses, APART from the Status of an expense

4. They can also delete their own expenses

Now, go back to your app and click the “Preview as” button - this is a really neat feature of Stacker that lets you view your app as one of your users. Cycle through the users at the top and you’ll see it gives you a different view each time.

3.3 - Multi layered permissions

We might want to give users different types of access depending on a record. For instance, we might want to say on the Users table that

1. Any user can view another user’s data

2. But they can only update their own

To do this, we want to have two sets of permissions.

First, let’s edit the permission settings we already have in permissions

We’ll rename these permissions to “View all”

Note we can also remove specific fields from being viewable - IE a user’s working hours. This is helpful if you have some information stored that not everyone should see.

Now, back on the main permissions page, click Add permission under users.

Let’s name this new permission set to “update own profile” and make it so it’s only true when a record matches the current user (IE is true for the user’s own profile).

And we’ve given the user the ability to update all their own fields.

Once again, try previewing as a user and click on different people’s profiles. Any user can View everyone’s profiles, but can only Update their own.

⚠️ Worth noting that when you have multiple permissions set up for a table they’re always additive, that is to say they will all be true for a user, and don’t cancel each other out.

3.4 - Roles

Lastly, it’s good to talk about Roles. This is a powerful concept in building software where you can give a group of people the same permissions.

To enable roles, we go to App settings → Roles, and enable them.

Let’s add a role called Operations

Now if you go back to Manage Users and click this cog

You can set it so if a user is tagged as in the “Operations” department they’re given the “Operations” Role

If you do this correctly, you should see some of your user’s role change to Operations.

Now if we head back to Permissions, we can add a new permission for the Expenses table, just for the ops team, where we give them the ability to update the Status of an Expense.

This means that now if you preview as different user types, you’ll see that only Operations team can change the status of an Expense.

4.1 What next?

If you’re looking to continue to expand your skills, here’s a few challenges

• Can you make an Action button in Stacker that updates a record?

• Can you make an automation in Airtable that sends an email to a user when their expense is updated?

• Could you link up Stacker to Zapier to create automations there?

• Try rebuilding your app in Glide to see if you can make a mobile version of the app