Powering up airtable — developing customizable invoices and order forms

Focus Advertising

A famous article known among most entrepreneurs and investors is Andreessen Horowitz's article about how "software is eating the world". As true as this was when the piece came out in 2011, it remains true today. Almost everything we know has a digital translation. Think of cars, photos, entertainment, food, presentations, and more.

Ten years later, everyone can agree that digitization did not stop there. A second shift has taken place. In summary? "Services are eating software". SaaS, software-as-a-service, has become omnipresent. You can hardly imagine anything for which a SaaS solution isn't available. Cars, photos, entertainment, food, presentations - you name it, it exists. Think of Uber, Instagram, Netflix, Deliveroo, Strava, Runtastic, Calm, Audible, and Amazon Prime. You pay some pocket money, and you get the full service.

In addition to your personal life, SaaS has helped businesses become more efficient. Now, more custom software solutions have to compete more intelligently. Luckily, we collaborate with TPO Agency's product experts to match the right tool with our clients. In this case, we needed something more... Something on top of SaaS.

The third wave: On-top-of-saas solutions

A third wave hit the landscape recently, namely 'On-Top-of-SaaS-solutions'; solutions that start from a SaaS product and build further on it. We recently developed a case for Focus Advertising with TPO Agency's product experts. For some of their business-critical processes, Focus Advertising uses AirTable, a powerful tool that allows you to structure just about anything in a database format.

They still missed a handy printout function allowing them to create and print fully customizable invoices and order forms within AirTable, where their data already resides. In a successful partnership with TPO Agency, we pushed our JavaScript expertise to the limit to make this happen for Focus Advertising.

Creating something on top of Airtable

We started by checking out the well-written documentation that AirTable provides to the developer community. All their UI Blocks are React Components, and you can receive data from AirTable with the custom React Hooks they provide. At this point, we know we could build everything we wanted.

We created a custom app where Focus Advertising can select a client. At this point, we show all the projects of this client. The user now has to choose a project they want to create an invoice for. When selecting a project, they get an overview of all things Focus Advertising did for this project. Sometimes, you don't want to invoice all of this, so it is possible to select/deselect rows on the invoice. At the bottom of the page is an overview showing the total price, taxes, and production cost.

All this is created with the Blocks SDK of AirTable and custom React Components with our custom styling (using TailwindCSS) to match the Focus Advertising invoice template. When the user validates the invoice/offer, it can create a document printout. This was made by the JavaScript window.print() and using css’s @media print for applying custom print styles.

A new trend

Recently, Airtable offered the possibility to access specific APIs that dive into the core of their software. And they are not the only SaaS company starting to open up their software to the developer community. They recognize that to grow faster and more intelligently, it's advantageous to have more hands on the possibilities of their SaaS.

For us product builders, this is an excellent opportunity to help build products (on top of already existing, great products) that enable customers and users to deploy the software they use for the things they consider important. Would you like us to assess if we can build something on top of a SaaS tool you already love? By combining TPO Agency's expertise in productivity tools and our JavaScript knowledge, we can make your wildest dreams come true.