Page Designer with Multiple Records

[Jon_Ma]

Hi Airtable Community! I’m trying to build a market map from my Airtable records like the one below from CB Insights but I’m having trouble figuring out how to include records with multiple columns like logo, location, founding year. Currently, I have an airtable record with name, founding year, logo image and location and created a separate table called categories that links to the previous table and groups the logos into a column.

I’m hoping to do the following architecture so including a company’s logo + total funding + founding year date. Haven’t quite figured out how to group by category and have both the logo + additional columns.

<Category>
    Category name
        <Logo /> Founding Year, Total Funding
        <Logo /> Founding Year, Total Funding
        <Logo /> Founding Year, Total Funding
        <Logo /> Founding Year, Total Funding
</Category>

image|700x415

[Billy_Littlefie]

Hey Jon!

I’m not sure if this question is about the functionality of Page Designer block, or if you’re looking to building a custom block to accomplish this, so I’ll answer both! :slightly_smiling_face:

To answer the former –
Our Page Designer block only allows displaying a single record at a time. You can add a linked record field to the layout, and it’ll display information about the linked records in a table format (you can customize which columns get shown in this linked record table as well).

To answer the latter –
This is definitely something that could be built with a custom block!

First, I’d recommend going through the Guides on the custom blocks docs site to get familiar with reading data from the base.

For your outer component (<Category>), it looks like you’ll need access to all the Category records in your base. Inside of that component, you can lookup all the linked Company records, so that you can look up the field values that you care about like founding year, funding, etc.

Very roughly speaking, you could architect the block to look something like this (I didn’t actually run this code, but hopefully it will help demonstrate a high-level React architecture):

import {useBase, useRecords, Box} from '@airtable/blocks/ui';

function MyCoolBlock() {
    const base = useBase();
    const categoriesTable = base.getTableByNameIfExists('Categories');
    const categories = useRecords(categoriesTable);

    return (
        <Box>
            {categories.map(category => (
                <Category category={category} />
            ))}
        </Box>
    );
}

function Category({category}) {
    const companiesQuery = category.selectLinkedRecordsFromCell('<Company>');
    const companies = useRecords(companiesQuery);

    return (
        <Box>
            {companies.map(company => (
                <Company company={company} />
            ))}
        </Box>
    );
}

function Company({company}) {
    return (
        <Box>
            {company.getCellValue('<Name>')}
            {company.getCellValue('<Founding Year>')}
            {company.getCellValue('<Total funding>')}
        </Box>
    );
}

Hopefully this gets you going in the right direction. As I mentioned before, the Guides are a great place to start getting familiar with how to build blocks. Similarly, the API reference is a handy place to look up function signatures, pre-built UI components, etc.

Cheers,
Billy