AMA Custom Blocks Contest Edition #2 - Prototyping and Polishing with the Airtable Design Team

Are you looking for feedback on usability or design best practices for your Custom Block? As part of the ongoing Custom Blocks contest, we’re hosting a live Ask Me Anything (AMA) session in this thread on Wednesday (6/17) at 11am PT .

Jay Ransijn and Stephen Suen from our platform engineering team have designed and built countless blocks. They will be available to answer any design-related questions you have.

The top 3 upvoted questions (or solutions from the community!!) will win a $40 Amazon gift card. You can even start posting your questions now, and we’ll be answering questions live from 11am - 11:30am PT on Wednesday. See you there!

4 Likes

Hello Airtable team!

One design area I’ve been thinking a lot about since the last AMA is the concept of composable blocks that treat the bases themselves as the source of truth. There have been a few related threads about how best to go about this, where to store configuration data, and more.

My question for Jay and Stephen is: what do you find is the best way to store configuration info, or does it depend on the type of block? The user interface guidelines is a terrific read and provides a lot to think about. A few ideas come to mind about how to translate this to a block:

  • Have an onboarding screen that stores info in the global config
  • Have an onboarding screen that writes into to a “config” Table within the Base (could be easier for users to see/modify later)
  • Have a “settings” screen a user can visit whenever (populated with sensible defaults)

Obviously there’s a few ways to go about this. I’m trying to think of a use case where blocks are used by multiple users (so should be open to preference modification), but can be understood by people without a lot of coding experience.

Love to hear what you all have tried!

1 Like

I noticed that the Blocks API Reference has multiple functions for permission checks. In particular, I noticed that there are different permission checks for operations on a single record versus batch operations for multiple records.

Is this an indication that you are looking into more granular permissions for batch operations in Airtable? Would these permissions for batch operations also apply to the Scripting API, the Standard REST API, and native UI?

Also, what do you think of having permissions that allow changes (create, delete, update) only through code (scripting block or custom blocks)? In this use case, a low-level user could still create, delete, and update data when using a custom block that enforces business logic, but wouldn’t be able to make changes to data directly that doesn’t have any code protecting business logic.

I like how the Buttons beta allows someone to launch a block with a specific record pre-loaded. For example, the Buttons beta lets someone launch Scripting block with a specific record pre-loaded. Is this possible with Custom Blocks? If so, how?

Currently, it looks like a Custom Block can useCursor to tell what the currently selected record is, and act on that record. However, it would be nice to be able to invoke a Custom Block with a record level button instead of having to open the Custom Block and then go back and select the desired record.

Already possible:

2 Likes

Will developers have access to UI elements not used in blocks? For instance, if our custom block included a calendar or a date picker, will we have access to the same calendar used for Calendar Views and the same date picker used in date fields?

Will other UI decisions which are determined by CSS classes be available to the blocks UI elements? For example, throughout Airtable’s interface, overflow text is hidden using the CSS class .truncate, could the Text/Heading block elements have a property to turn on or off the truncate class to match?

Hello Airtable team!

Could you answer these questions?

  1. I’m trying to implement image an Image annotation block from the list of possible use cases. Screenshot 2020-06-16 at 22.50.27|700x389

Could you suggest any ideas on how to implement this layout? I’ve managed to do it only by setting the fixed height for the wrapper block for now. Otherwise a scroll appears because of the overflow:auto property on body element in the iframe. Current code is here:

<Box width={'100%'} height={362} display='flex'>
	<Box width={'70%'} height={'100%'} display={"flex"} flexDirection={"column"} justifyContent={"stretch"}>
		<Box overflow={'auto'} border={'1px solid red'} flexGrow={1}>
			<Text size={"xlarge"}>Big images are possible here. This block should be with overflow: auto</Text>
			{/*<ImageFromRecord*/}
		    {/*	activeTable={activeTable} selectedRecordId={selectedRecordId} selectedFieldId={selectedFieldId}*/}
		    {/*	annotations={getAnnotationsShapes()}*/}
		    {/*	onAnnotationAdding={handleAnnotationAdding}*/}
		    {/*/>*/}
		</Box>
		<Box border={'1px solid blue'}>
			<Text size={"xlarge"}>Annotation form here.</Text>
			{/*<AnnotationForm onSubmit={handleAnnotationSubmit} onChange={handleAnnotationFormChange}/>*/}
		</Box>
	</Box>
	<Box as={'aside'} width={'30%'} border={'1px solid green'}>
		<Text size={"xlarge"}>List of annotations here</Text>
		{/*<AnnotationsList annotations={annotations}/>*/}
	</Box>
</Box>

I can set height for the wrapper based on window.innerHeight and add change it on resize. But maybe you can give me an advice on better solution?

  1. The second question is about UX. Does it make sense to make the image annotation block available only in FullScreen mode?

Hi Airtable Team, I’ve been trying to install the Airtable Blocks command line tool by pasting npm install -g @airtable/blocks-cli then hitting the enter key. However, it kept resulting into an error. Any advice?

You have to run npm install as an administrator. Try:
sudo npm install -g @airtable/blocks-cli
You’ll be asked to type in your computer’s password, then it should install.

2 Likes

For the purposes of the contest, can a block submitted to the contest use the button beta, or do entries need to use only released features (other than custom blocks itself)?

For example, I wrote a block that is invoked by a button field (thanks Kamille!), because I prefer that workflow. If I want to submit my block for the contest, should I re-write it to have a different method of launching?

1 Like

Can you tell us a little more about the decision to host this contest on devpost.com versus how you hosted the contests for scripting block?

Is it possible to submit one block as part of a team, and another block as a solo entry? How would one go about that?

If I have a set of blocks that are meant to be used together in a workflow, would that be two separate entries? Or would they each be independent entries? Each block would have its own repository, and each block could be used independently. However the value of the two blocks is enhanced when they are used in conjunction with each other.

If I use a module from npm with an “MIT” license, is that fair game for the contest? Do I need to do anything for the purposes of the contest to document that I use the module? The module won’t appear in the git repository by default. By default, it will simply be listed in package.json. Is that enough?

Kind of building off of a part of @kuovonne’s latest question

I’ve written some Custom Block-specific helper functions to do some common operations like batch operations. These live in a helpers.js file in the same directory as my custom block. If however, I have an idea for how multiple blocks can operate together, moving the helpers.js file to a common parent directory the blocks will not find the code. Say I have a parent blocks directory, inside of which I have block_1 and block_2 directories with the code for my two custom blocks. Importing the helper file (two dirs up in the tree, hence ../../) results in an error message like the following:

Updating bundle...
Bundle Error: Cannot find module '../../helpers' from '~/blocks/block_1/build/development/transpiled/user/frontend'

Is/will importing local modules be supported by custom blocks? Would it make more sense to package-ify my helper files, or is there another solution so I don’t have to copy/paste the file to each block after I make changes?

In the future, could you please convert this to a random drawing? Picking the top upvoted questions (as indicated by “likes”) actually provides a dis-incentive for people to like other developer’s posts. Upvoting someone else’s question or solution automatically reduces one’s own chance of winning.

The date picker provided in the INPUT component works quite well. It doesn’t look the same as the date picture in the native interface, but it provides the functionality.

 <Input type="date" />
 <Input type="datetime-local" />

I’ve had trouble setting CSS that isn’t listed in the API reference. I wasn’t able to set visibility to hidden. I had to resort to setting opacity to 0 instead.

Hi Airtable Team,

Many thanks to Kamille! Inserting sudo worked.

I just wanted to follow up with another question - I’ve been working on the “Hello World” tutorial, but I’ve been encountering issues with the command “block run.” It seems that this command doesn’t exist for me, and as a result, I’m unable to find the block url. Any advice?

:wave: We’re now live! We’ll be answering your questions over the next half hour — keep asking your questions!

1 Like

The hello_world is, in this case, the name of the block.

The first step, which you do, is change into that directory (the cd hello_world). Once you’re in the block’s directory, you can just execute block run (no hello_world at the beginning needed)!

3 Likes

Awesome, thank you Matthew! It worked!

It looks like Stephen and Jay are typing, but I’m not seeing any posts from them. Does anyone else see posts from them?