Creating a user profile page

In this example we will be creating a user profile page for a company called Trunkify.

Use case

  • Allow their technicians to see list of jobs they have to do.

  • Write a summary report once the job is complete.

  • Submit invoices and see when their payments will be made.

You can view the Airtable base used for the portal here.

Once we have connected our base to Stacker it looks like this:

The four tables we have in our base appear at the top of the page in the Nav bar.

We want our users to land on the home page which will also be their profile page when they log in.

To set this up we can configure our navigation by moving Technicians to be the Homepage and changing the name of this to 'My Profile'

To edit the 'My Profile' page, go to the edit pencil located on the right of the Nav bar.

Change the display settings to 'One record only'

The layout shown is the default layout. You will be able to customise this by using the layout widgets on the right.

For Trunkify we deleted the default layout shown and started off with the Highlight widget.

Drag the highlight widget over to the layout and select the fields that you want to show for that section by toggling this on.

Next we wanted an 'add new job' button to the new job field, so our user can add a new job.

To achieve this we created a formula in our technicians table under new job field.

After toggling this on in our highlights section it needs to be edited to look like a button.

If you hover over the fields a pencil will appear for you to edit this.

Next use the banner widget to create a welcome section, to let the user know what they need to do etc.

Then drag over the field widget for the main profile section and toggle on the information we want the users to see.

Edit the section by hovering over this, you can change the title, move the sections around, add new ones or change how many columns are displayed.

Next add a banner to create an alert section to bring users attention - in the example we wanted the users to be aware of overdue invoices by user the banner widget.

Finally the last three sections are related lists. Select the relevant related fields and change the title.

The Permissions for this table have been set up so that when the user logs in they can only see records that match them.

And the filter condition on the edit layout has been set to - is current user.