Airtable Tutorial: Individual page per positions
Introduction
This is the last tutorial in order to get all the functionality of the live site for the jobs board.
In this tutorial we are going to add a view and a page to display the details of a job position.
Prerequisites
This is the 3rd tutorial of the Remote Job Board series, make sure to take a look to the previous tutorials before continuing with this one.
Create the view
The first step is to create a view named position, a view is a page element that lets us query data and define a html snip to display it.
You need to define the query to filter one position, we are going to filter the data based on the page parameter :positionid, you can find the sql query here
You can use the UI to setup the parameter values to test the query as in the next screenshot:
The last step to complete the view is to define a html snip to display the data on the page, you can find the html snip for our example here
Now the left side preview should look like this:
Now that we have our data query and display template we can include this view on a page.
The position page
Now all we need to do is to add the view to a page to be displayed.
If you are following the tutorial you should already have a page with the route /position/:companyid/:positionid, if not create a page with this route, you will be able to use the path parameters companyid and positionid.
The next step is to add the position table-view to the page, your preview window should look like the next screenshot
Just like with the view editor you can modify the test parameters on the page to test the behavior of the different pages:
You can reuse your views in any page as long as you provide the required page parameters, in this page we are going to reuse the list of positions per company
You can find the list at the end of the position description, this is the same view that we created in our previous tutorial
Congratulations!
This concludes the tutorial for the job board based on an Airtable base, please let us know any comment or feedback! now your site should looks like the demo page https://jobs.pagews.com
