In this tutorial, we’re going to learn how to build a portal for your community with step by step instructions on how to use data from Airtable and Pory for building the interface for the portal.
Tutorial Overview
The Greek life community portal helps greek organizations track all aspects of their organization including member information, event lists, member attendance, contacts, community service initiatives, new member recruitment, alumni association contacts, and more.
By the end of this tutorial, you'll be able to:
- Create and manage listings e.g. members directory, events and applications
- Create different user groups for the community e.g. member, recruitment
- Invite members to sign up to the community (data will be synced to Airtable)
- Allow members to RSVP for events
Demo
Here's a demo of the final product 👀
User part of the recruitment team:
- Username: dominica.mirelez@example.edu
- Password: Pory123!
User as a member:
- Username: edward.coe@example.edu
- Password: Pory123!
How much does it cost?
- Airtable has a free tier for up to 1,200 records per base
- This Portal uses Pory’s Professional plan ($49/mo)
Step 1: Using Airtable
New to Airtable? No worries, create a free account first. Airtable is a visual database with the familiarity of a spreadsheet, which makes it perfect for building apps!
All the data for the community portal will be stored in the following Airtable base which you can follow along by copying this base into your account or by using your own.
Step 2: Creating an App
Now that we have our data ready to go, we'll be creating our portal on Pory. Pory is a platform for creating applications on top of Airtable visually using drag and drop blocks. It also provides your members with user accounts and the ability to edit their own information. All the information is connected and synced to your Airtable, so you’ll never have to worry about creating islands of isolated data.
New to Pory? Sign up for a 14 day free trial.
- Log in or sign up to Pory
- Select Create App from your workspace.
- Give your app a name
- Click Create App
Step 3: Creating a Landing Page
Let’s begin by creating a landing page for your community portal. You can skip this step if you plan to subdomain your portal to an existing website i.e. https://community.pory.io
- Click on Add Section and choose from a collection of blocks to build out your home page (example uses hero and feature blocks)
- Click on Settings > Appearance to customize your app colors and fonts
- Click on Settings > Assets to upload a logo and favicon
Step 4: Setting up User Accounts
Let’s now set up user accounts by connecting your user table from Airtable. Users will be able to update their own information, keeping your data up to date.
- Click on Users from the left navigation sidebar
- Click on Set Up User Accounts to set up user accounts
Step 4.1: Users Table
- Select a base: The based used for storing your users. E.g. Community Tutorial App (Airtable base embedded above)
- Select a table: The user table in the base E.g. Members
- Where is the email stored?: The field for collecting emails E.g Email. This is used by the user to log in so it should be unique. You can ensure this by using the first field in your table.
Step 4.2: Default Group
- Group Name: Used to identify who the user is. E.g. Members
- Group Description: To help you remember what this group is about
Step 4.3: User Account Page
This is a user’s “My Account” page containing their profile and their information that’s linked to them via the field type linked records i.e. Their mentee
Profile View
- Select the fields you want to display in the Profile tab. Users will be able view and update these fields.
Related information
In some scenarios, you may want a user to also access and update records that are linked to them. You can do that by:
- Click on Add linked record (next to Profile)
In our Greek Life Community, we do not need to display any of the information above in a user’s account page. We will instead create a page listing for each linked record later.
Step 4.4: Email Setup
- Reply to email: Users will reply to you via this email
- Compose email: This is sent out when a new user signs up
Step 4.5: User Flows
User Flows determines where to take your users after an event occurs.
- After logging in: Home page
- When user is not logged in: Login page
- After logging out: Home page
Step 5: First App User
Once you set up user accounts, you will be taken to the Account page builder. Here you can select different user groups and view as different members to see what each user can view, create, edit and remove in your Airtable.
Since we have no users signed up to our app, there’s no one to view as. Let’s create a new user for testing.
- Click on View As
- Create a test user. This will add the user to your members table and assign it to the user group Members (default group).
Now we can see the sam’s Profile . Let’s update what actions a user who belongs to the group Members can do.
Step 6: Creating Pages
Now that we have our users table connected, let’s turn the data stored in the tables into the following pages: Members Directory, Events, Attendance and Recruitment.
Members Directory
The members directory is a place where members can view who’s part of the Greek Life community.
Creating the Page
- Create a new page
- Name the page Members Directory
- Select the user group “Members” to restrict access from the public
Creating the Members Listing
- Click on Add Section to create a data listing
- Select a listing layout for your members
- Hover over the new section and select Edit Listing
- Select Anyone for who you’re creating the listing for (members should be able to access the same list)
Connecting Members Table
- Select your Airtable base and table for the listing i.e. Greek Life Community Base and the Members table
- Switch to Permissions and add the View Only permission for the Members user group. We do not want members to be able to create, edit or remove members from the directory. We can create another user group later called admin with more permissions.
- Switch to View Settings and select an Airtable view from your table (optional).
- Switch to Filters Settings and create filters using Select Fields (optional)
- Switch to Search Settings and select which fields are searchable
- Save and continue
Creating the Members Listing Card View
- Select the fields to use for the listing’s card view. Learn more about updating the appearance detailed view and card template options here.
- Select Save and Continue when you’re ready.
Creating the Members Listing Detailed View
- Build our your detailed view using a collection of blocks
- Select fields to display in the block similar to the card view.
- Click Save when you’re ready.
That’s it your Members directory is now ready!
Events Page
The Events page is a place where members can view events in the community. Similar to the Members Directory. Let’s create an Events listing where members can RSVP for events.
- Create a form view in the Attendance table. This table is used to store all the members that are attending an event.
- Click on share form
- Select embed this form on your app
- Copy just the url part from the iframe
- Create a new field in the Events table called RSVP and paste the form url
Creating the Events Page
- Create a new page and call it Events
- Add a new section for the Events listing
- Hover over the listing and select Editing Listing
- Select Anyone for the type of listing (everyone should see the same list of events)
Connecting Events Table
- Select the Events table and the field connected to the user to look up
- Switch to Permissions and allow the member to view events only.
- Switch to View Settings to use an Airtable view (optional). Tip: Create a Airtable view for upcoming events only.
- Switch to Filter Settings to create filters (optional)
- Switch to Search Settings to set up search bar (optional)
- Click Save and Continue
Events Listing Card View
- Select which fields to display for the event
- Click Save and Continue
Events Listing Detailed View
- Select the embed blocks to add an Airtable form for members to RSVP for the event
- Select the RSVP field to display as the embed block
- Click Save
My Events Page
Members of the community should also be able to view all the events that they’re attending. Similar to the Events page, let’s create a listing that only displays the events that belong to a member.
- Follow the steps above, but select the type My Users
Applications Page
Create a page for viewing new community applications that are only visible by members who are part of the recruitment team. You can lookup a member’s position by looking at the Current Position field.
Let’s start by creating a new user group
- Go to the Users Group page
- Click Create User Group and create a user group called Recruiter
- Create a page called Applications and restrict access to the user group Recruiter
- Similar to the other pages, create a new listing to display member applications (make sure to select the type “My Users”)
Step 6: Invite Only App
Greek Life is a safe space and therefore does not allow anyone from the public to create accounts and gain access to the community. To make your app invite only, follow the guide here.
Step 7: Inviting Users
Since we have members in Airtable already, we can also create invitation links using an Airtable formula to invite them using automation! To do so, follow the guide here.
Step 8: Publishing your App!
3, 2, 1 publish! 🚀 Congrats - you now have a working community Portal!
Try it out!
Here's a demo of the final product 👀
User part of the recruitment team:
- Username: dominica.mirelez@example.edu
- Password: Pory123!
User as a member:
- Username: edward.coe@example.edu
- Password: Pory123!
What’s next?
- Give your community a free .pory.app domain or;
- Embed your job board into an existing site or;
- connect a subdomain i.e. https://careers.company.com or;
- Connect a domain i.e. https://company.com.
That's it! Let us know how you go and reach out if you have any questions. Hope you enjoyed the tutorial! ✨
Need Help?
We’re here to help! Join our Slack Community