Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Build a No-Code Web App with Softr!
You have completed Build a No-Code Web App with Softr!
Preview
In this video, you’ll learn how to sync your data to your Softr application. We’ll demonstrate this with Google Sheets, but you can integrate it with a database of your choosing. You'll discover how to set up user groups, enable sign-ups, and configure data sources for different blocks in your app.
Google Sheet Formulas
For incrementing the ID field I used:
=IF(B2<>"", MAX(A$1:A1)+1, "")
For giving the Membership field a default value of "Free" I used:
=IF(B3<>"", "Free", "")
I used B3 here because I manually gave B2 the value "Admin". You can change this to B2 if you want it to effect that first row.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Welcome back.
0:00
It's time to get our data set up.
0:01
If I scroll down the home page here,
you can see a members
0:04
section was generated, and there are some
placeholder names and emails already.
0:06
Clicking on this block
shows us that we can actually copy
0:12
and use this data if we wanted to.
0:15
So you don't have to have a Google Sheet
document or database already with the data
0:18
you need.
0:22
You can click the Copy
Generated Data button
0:22
and it will get one started for you
with this placeholder data.
0:25
The same goes for my courses page as well.
0:28
I've already created
0:33
a Google Sheets document
with some fake users and courses to use.
0:34
Here I have a simple users table,
and here I have a simple courses table.
0:38
Keep in mind that
0:44
I've implemented some simple functions
into a few of these columns.
0:45
For example, this one on the ID
column will automatically increment
0:49
a new row's ID based on the one above it.
0:53
This helps prevent issues
when new users sign up
0:57
and it mimics what a database
would do automatically for us.
1:00
I added the formula
to the first cell in the first row,
1:04
then clicked and dragged the box down
to apply it to all the cells
1:07
I have a similar function
for the membership column
1:12
which assigns a default value of free
1:15
In the courses table
1:20
I done the same for the ID field
I'll leave these formulas
1:21
in the teacher's notes if you'd to use
and edit them for your own sheets.
1:25
I'll also include
a link to our spreadsheets basics course
1:29
if you're unfamiliar
with working in spreadsheets.
1:32
Back in software,
I'm going to use the users tab and delete
1:35
these generated users
since I won't be needing them.
1:38
Then, I'll click Sync
1:44
with Data Source
to connect to my Google Sheet.
1:45
If you're following along
and using this method,
1:49
make sure to select this Select
All option during the approval process.
1:52
It won't work
if you only select one option below.
1:57
Once the accounts are connected,
2:02
I'll click Add a New File
and select my document.
2:03
It looks something is taking a moment
2:07
to register,
so I'll click the refresh button here.
2:09
There we go.
2:13
Now I can select my document and choose
2:14
the individual sheet inside it.
2:16
I'll leave this option selected
so that if a new user is added
2:19
via the app, it creates
a record in the Google Sheet.
2:23
I also select my email column here to map
2:27
the user fields between the applications
2:29
Since I have a name field
2:34
I select that as well
but this one is optional
2:35
Then, I'll click Save and Sync.
2:39
And there we go.
2:44
My users from the Google Sheet document
are now synced.
2:46
I've noticed that sometimes sheets or new
fields can take a moment to sync up,
2:50
so if you're not seeing what you expect
2:54
right away,
try refreshing after a few moments.
2:56
Next, I'm heading to the User Groups
tab to set them up.
3:00
You can see the default logged in
and non-logged in groups here,
3:04
and just below that,
there are already admin and member groups.
3:08
I'm going to adjust these to match
the membership column in my Google Sheet.
3:12
Clicking the Edit button on the right
opens
3:16
a menu where we can change the name
and how users are assigned.
3:19
I'll keep it condition based,
3:24
but I need to change the condition
to match my sheet.
3:25
So if the user's membership is admin,
3:28
and remember,
you can type anything you in this box.
3:33
You can even add more than one condition.
3:38
I adjust the member group to be paid
member
3:42
adjust the condition
3:45
and create a third one for free members
3:49
Just keep in mind
that these conditions are case
3:53
sensitive
so they need to match your data exactly.
3:55
Now, I'm going to the authentication
tab and enabling sign-ups,
4:00
so that anyone visiting
the app can create an account.
4:03
Notice
that currently, there's no sign-up page.
4:07
But, as soon as I enable this option,
4:11
One appears for us, ready to use.
4:17
To use our synced data in the app,
let's test this on our members
4:20
block on the home page.
4:23
Now if I click
4:26
on it, you'll see a new source option.
4:27
I'll select my Google Sheets account,
then my software data document,
4:30
and finally my user's sheet.
4:34
And there we go.
4:37
I'll quickly do the same for my courses
page.
4:38
I just need to select the source,
4:45
document, and sheet.
4:47
And just that, we've
4:51
synced our data source to our app,
and it's rendering on the page.
4:53
Awesome!
4:57
In the next video,
I'll start adjusting the pages
4:58
that the AI generated
for me to better fit my needs.
5:01
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up