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

[Michelle_Valent]

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!

[Matthew_Thomas]

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!

[kuovonne]

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.

[kuovonne]

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.

[Kamille_Parks]

kuovonne:

Is this possible with Custom Blocks? If so, how?

Already possible:

New! Integrate your block with the new button field Custom Apps

Update (June 25, 2020): The button field is now available for all users — read more in our launch blog post: https://blog.airtable.com/now-available-button-field Hello! We recently announced the public beta of the button field (New beta: button field), a new field type that allows you to trigger customizable actions with a button. It allows you to perform actions in several blocks, including “Send email with Sendgrid” and “Run script”. These actions use the record that the button was clicked …

[Kamille_Parks]

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?

[Kirill_Madorin]

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?

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

[Janine_Co]

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?

[Kamille_Parks]

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.

[kuovonne]

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?