📱

Get Our Mobile App

Take your business learning on the go!

Download on the App StoreGet it on Google Play

Connecting and using Google Sheets as a Data Source in Softr

Softr10:11

Transcription

Recently, Softer launched its amazing Google Sheets integration. In today's video, I'm going to dive into how you can connect to it with ease.

In this video, I'm going to show you how to build this, whether you're starting with a new system that you're making from scratch or whether you're using a template. I'll even show you how to add multiple data sources to one app.

So, first of all, you're going to sign into your account and then make sure you're on the All Apps section here. If you're starting from a new application, we can first go here to a new application, and then let's just start from a blank application right here.

Now, for this video, we are going into the Google Sheets integration, so click on this. You'll note here that it says, "Please give Softer both Google Drive and Google Sheets permissions in the next step," so we can continue. Then, all you need to do is press allow here.

Then, you're just able to add a few pre-built pages here. Some examples are like the home page, some different dynamic blocks, and details blocks that you can put here. So, I'm just going to press create application.

Now, I'm going to select this list one right here, and what we're going to have here is essentially a dynamic block that allows us to connect to a specific data source. In this spot right here, we can press select data source, and then you'll see my Dimitri ad software account, which is the one I just authorized, can be selected.

Not only that, but you see that it allows me to choose which specific document. Now, in this case, I'm going to choose the property management document that I've created.

Even more so than that, obviously, Google Sheets have various sheets within them. Let me explain. So, in here, you can see that the entire document itself is this property management document, but on the bottom here, we have a contractors and landlord sheet.

If we go back into my software account, we can select either contractors or landlords. So, I'm going to pick the contractors sheet, and based on the information within this Google Sheet, first of all, you see that it's synced to it with the software record ID.

Now, we're able to basically pull this information into the software app. So, let's go to the content tab here, and we have the specific default item fields that auto pull in and can be hidden or stylized. Then, we're able to add additional fields.

So, we're not going to have any images for this one, but we can hide this. For heading 3, we do have the ability to choose, for example, change it, but I want to keep it as heading 3 and then pick the name here, the name of these different contractors.

You have the option to, in this circumstance, leave the name or label that's here, and then I can pick some example fields as well from here. For example, I can pick the phone number, just leave it as text.

Like I said earlier, you can put a field here, so if I want to point out that it's a phone number, then as well, I can put another text field, for example, for the email and then put email.

Pro tip: If you wanted to organize this a little bit better, what you can do is go to the divider section and separate these in half, but you kind of have the name and then like the contact info under there.

Now, you can obviously do this exact same thing through a template. For example, let's pick this template client portal right here and go to use template and go through the exact same process.

So, if we press Google Sheets here, then go to continue, and obviously in this circumstance, it's going to have all this different data right here that it's going to bring in. Then we can go to the application.

So, let's go to one of these example pages here. On the clients page, if we click on this, you see that my account ends up copying the client portal by a software document and brings it into my Google Sheets.

If we click on this little symbol right here, we can actually get brought to this Softer client portal document, which is really convenient. Thank you, Softer, for making it so convenient for me to actually click on this.

Another pro tip: If you want to find where that is in your Google Drive, I'd recommend you click right here and then click on this little open folder in a new tab to find exactly where it is in your account.

Similar to what we have in Airtable, this sheet can be changed to different tabs or sheets that are on the bottom right here. If for any reason we wanted to change these here, you can see that the content is obviously going to pull in through the different columns within this Google Sheet.

If you'll notice right here, these are hyperlinking to different images, and if I click on one of these, you'll see that it is a .webp version of this file. Pro tip: If you're going to make a column in Google Sheets, you're going to want to make sure that you have a linked item here because you can't embed images within these cells in order to make them show up.

So, obviously, it does work a little bit different than Airtable. Speaking of Airtable, what if I wanted to add any extra data source here? What I can do is, in the source section, I can actually press add data source.

Now, when I click add data source, it's going to bring me through this same prompt sequence. However, we're going to have to go and find the Airtable API key that is on our account.

So, if I click right here, it'll bring me to the Airtable help doc on how to do this. But lucky for you, I'm here to help. If I go into my Airtable account, all I need to do is click on my profile right here and then click on developer hub.

On developer hub, then I'm going to be brought to a page that shows me this API key. Copy this and make sure you keep it private. Go back into your Softer account and then paste this API key in there.

Then we're going to connect to Airtable, and after we connect to Airtable, we could then go and pick any of these different Airtable bases and then pick the specific table that we'd want, the exact same way that we would with Google Sheets, just bringing in a different data source.

Now, I've gone back to that original data set that I was building from scratch with the contractor Google Sheet, and there are two different ways that we could filter this data in order for it to make more sense.

So, for example, if we go first to conditional filters, what this essentially does is takes that base level of data and filters it down in the experience.

Say, for example, I were to filter this to, as you can see in the data set, there is a column for status. I could set it to status is, and then it's going to ask you to please enter a value. So, I'm going to just put active right here.

Now, you'll notice here that it says editing mode doesn't show accurate filtered results. To check whether your filters work, go to preview mode, which is exactly what I'm going to do because this is a tutorial.

I'm going to press preview here, and according to my table, I should see eight active items. Let's open this up, and you'll see, lucky for me, I can count, and I counted to eight. So, it's trimmed off the two inactive contractors here.

Now, taking it one step further, what we can do is utilize these inline filters that can be put on the top or the side in order to make more granular decisions when interacting with it.

So, let's go to the content section, and then what we can do here is pick whether we want this to be a different name. So, I'm just going to put categories, and then we're going to actually have to select what field it's pulling from.

So, I'm going to select the service type. Now, you can manually change these tags, but I'm personally going to showcase how in this one we can do a drop-down here.

So, when I press drop-down, you see it goes from that whole tag situation up here to changing into this compact view. If you want to see it from the side, we can do the same thing over here and change this to a drop-down.

Then we can actually allow multi-select. Obviously, we can change this name to just categories as well or pick another field of your choosing. But I'm going to go into preview here, and you'll see then when I click on these, essentially it allows me to pick between these different items, but you'll see that they're called tags here.

Now, what I'm going to do is remove these options and essentially go to here with the service type, and I can input these specific options here. So, I can copy and paste, and let's just put a couple of them in here.

So, if I put preview, then if I go to right here and press sewer and septic, it'll only showcase that one once it's filtered. I can also, if I were to use this from an Airtable base, if I were to add my Airtable data for my contractors and go through that same filtering process.

If I were to go into here, you'll see that I now have this option to sync options with data source. So, when I sync the options with the data source, I can then set it to the tags option.

You'll see here that we can change it from single to as defined in data source, and then it ends up syncing up with your Airtable base to have the same colors there.

By having it as tags, you can select multi-select as well, and then when I press preview here, I have a litany of colorful options to choose from. So, I can press plumbers, and then I can also be like, "All right, I need the carpenters," and I also need an accountant, and then all these would pop up.

Now we're done having fun with filters. Thank you so much for learning how to connect and use Google Sheets with me, and also how to connect multiple data sources and how to filter within Softer.

Thanks so much for watching, and we'll see you in the next one.