‍

In this tutorial, you will learn how to setup an employee directory app using Glide.

What you'll need

• Glide
• Google Sheets

Estimated time to complete

• 20 minutes

‍

‍

Open a blank Google Sheet. Add the following columns: Name, Title, Email, Phone Number, Photo, Location. Name the tab 'Employees.'

Create an additional tab called 'Locations'. Create the following columns: Name, Address, Phone Number, and Photo.

Fill out the info but do not insert photos into the Photo columns just yet.

Next, fill out which location each employee is located at.

‍

Open Glide and crate a new app. Pick the file you just created in Google Sheets. Click on Layout from the left hand navigation. The first tab should be a List style.

Drag and drop photos. Or, you can upload to Google Drive then make the image shareable, copy the share link, and paste this link into the Google Sheet.

If you are having problems dragging and dropping photos, make sure that the Image Data point is set to Photo and not blank.

On the Employees tab, click into a record. Click on the Basic Text - Phone Number component and set the Action to 'Dial Phone Number.'

Delete the Basic Text Photo component and add a new component — the Image component. Or, you can set the photo within the Title component.

On the Locations tab, set the style to Map. Click within a record, and remove the Basic Text - Photo component and set the image on the Title component. Click on the Phone Number component and add an Action to it to 'Dial Phone Number.'

‍

Click on the Data tab in the left hand navigation. Add a  column to the Employees tab (Location Relation). Make sure the type is set to Relation. Set the Location value to match the value in Locations > Name.

On the Locations tab, do the same (add a column), but this time you are relating the Name to the Employees > Location value. Check 'Match Multiple' if you are matching multiple items to one value.

Head back to the Layout tab on the left hand navigation and click on the Employees tab. Remove the Basic Text - Location component. Add a Relation button. Under Data, the Column should be set to the Location Relation column you just set up.

Now, click on the Locations tab and add an Inline List component and make sure the Source value is set to Employee Relation.

‍

Click on Tabs in the left hand navigation. Click into the Employees Tab and Locations Tab to set the icons. This is also where you can create a hamburger menu instead of having tabs at the bottom of your app.

‍

Click on Settings. Here you can change your icon, accent color, or them. On the General tab under Settings, you can set the name of your app and author. On the Privacy tab, set how people can access your app.

Once you are done, click 'Share app' on the left hand navigation menu. Select 'Publish app' and customize your app URL!

I hope you enjoy this tutorial preview, if you have any questions please reach out on Twitter @amiedelisa or @makerpad.

For access to this full tutorial please head over to https://www.makerpad.co