Help

Seeking help creating a custom Airtable Web Page View

10651 9
cancel
Showing results for 
Search instead for 
Did you mean: 
BenInDallas
7 - App Architect
7 - App Architect

I’d like help creating a web page that displays data from a given Airtable View that provides me more robust control of page content and styling than is currently possible through the “share view” and “print view” commands.

Requirements:

  • The data on the web page must be synced with my base so that any changes (new records or updated records) are updated on the page. Preferably, these updates would be automatic, but a “refresh” button would be workable.
  • We must have complete control of object styling, via HTML/CSS. I’m fine with manually editing the HTML/CSS; no CMS required.
  • We need some basic controls for conditional formatting (e.g.; if a date is i the past, it is displayed in red; color-coding of particular values in a field; etc.)
  • We must be able to host the page on our current web server, with minimal fuss. And I’m hoping it would not require any third-party licenses or subscriptions.

Let me know what additional info you need.

9 Replies 9
Mario_Stevenson
5 - Automation Enthusiast
5 - Automation Enthusiast

DTS-07242017

Hello,

RE: Seeking help creating a custom Airtable Web Page View

You can use the Gallery view. I would advise creating a new Gallery view. Click share. You’ll want to choose the embed. Preview before finalizing the code. You can choose to embed via the “embed” link or choose to code the embed into a web page. The database will update automatically when new items are placed into the table. I have found with Airtable orders are taken via form as Purchase Orders; in essence you’ll need to receive the PO via a input form then, process the order either by physical or virtual terminal. Otherwise, like every e-commerce platform you’ll need to build the site as either a search engine or page-by-page. Be advised that, Wiki embeds are extremely easy, buy very clumsy.

Thank you,

Mario Stevenson

MFAS

BenInDallas
7 - App Architect
7 - App Architect

Thanks, Mario. I’m aware of the embed features, but I don’t think that helps with my particular problem. Here’s a better illustration of what I’m trying to achieve:

I’d like to take a table view like this:
Screen Shot 2017-07-20 at 10.55.12 AM.jpg

… and push that data into a web page that looks something like this:
Screen Shot 2017-07-25 at 9.18.32 AM.jpg

In other words, I need something far beyond an iframe. I want a web page with content pulled from Airtable, but with design (down to the cell level) determined by the page’s code.

Make sense?

Pierce_Baugh
5 - Automation Enthusiast
5 - Automation Enthusiast

Hi BenLnDallas,
You’ll want to use the Airtable API and pull down a JSON object which you can then use to build your table. From there formatting should be straightforward, it sounds like you’re comfortable with HTML/CSS. DM me if you’d like to discuss further.
Thanks
Pierce

DTS-07272017

In response @BenInDallas

RE: Seeking help creating a custom Airtable Web Page View

I read over the generalized API documentation for Airtable. You may or may know that, Airtable API is specific for each account > base > table. In general your request is that, you’re wanting a dashboard created. It also depends on the OS of your webserver. I would presume it’s LinuxOS.

Providing information on your request Airtable API uses Node.js or Curl. View the Airtable API documentation for the target >base > table. On the right it will begin displaying API for the selected >base > table. API calls are push and pull and Airtable has a 30 sec minimum delay between calls. Which means your speed and reliability is strictly on Airtable and not MY/SQL; MariaDB; Protege; etc.

The view you wish must match the table or the API will appear different.; this is what Airtable is explaining. You cannot just code it. Create the view first then, extract the code shown. I don’t see a problem with the CSS if you know where the data will load. It would be a nice artifact per se, but according to Airtable API documentation if the specific table or view structure is altered (not data) - you break your API.

Study your needs and be sure it’s not a dashboard application needed which can pull from Airtable. The above is only my opinion.

Thank you,

Mario F A Stevenson
MFAS

Vernon_Fowler
7 - App Architect
7 - App Architect

If your web CMS is WordPress, then Airpress - A WordPress plugin might do the job. :grinning:

DTS-07272017

In response @Vernon_Fowler,

Hm, indeed Airpress is interesting. I wouldn’t support it for OpenSource; I would require monetary contributions. It seems it can offer an opportunity for what @BenInDallas is seeking.

Thank you,

MFAS

Scot_Rumery
5 - Automation Enthusiast
5 - Automation Enthusiast

I created something similar to what you are looking for and I just wrote a post about it.

PageMonk
6 - Interface Innovator
6 - Interface Innovator

I can do almost all of it, using drag and drop, in https://www.pagemonk.com . Only the change of colors based on value is not possible yet. Please ping me if you would like me to build it for you.

Mac
8 - Airtable Astronomer
8 - Airtable Astronomer

This is amazing! Thank you for creating this!