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]

Fantastic! Didn’t have to look far :laughing:

[Stephen_Suen]

What will happen to questions in this thread that aren’t answered before time runs out?

No worries — we’ll answer any questions that were posted in this thread before 11:30 AM PT.

[Jay_Ransijn]

Hi Kuovonne, thanks for you question!

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?

The Custom Blocks Contest is on a much larger scale than the scripting block contest. Devpost helps us with contest management complexities like prize fulfilment.

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?

Yes, you can submit one block as part of a team, and another block as a solo entry.

To submit multiple blocks, you would just need to create a second submission/ project. You can create a new project page through their portfolio, using the “Add a new project” button, located under your profile picture.

After you fill in all the basic information and save, you would see a prompt asking if you want to submit the project to a hackathon:

Select yes, then scroll through the list and click on the correct hackathon name.

If you’re still having trouble figuring out how to do that, you can email support@devpost.com.

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.

Blocks are designed to work better together, so it’s perceptive that you’ve noticed this opportunity while building blocks! Since the blocks work independently, I would suggest you submit them as separate entries. We expect blocks to enhance each other anyways.

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?

To your question about using a package with a MIT license: yes, you can use open source packages in the contest as long as you are using it in accordance with the license. You can refer to our contest rules if you have any further queries!

Airtable Blocks Contest

Airtable Blocks Contest

Introducing a completely new way to build apps with Airtable. We’re giving away $100,000!

[Stephen_Suen]

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)?

Yes, it’s fine for your submission to use the button beta. However, the block should not rely on the existence of a button field and there should be an alternative way to launch the block. As an example, you can run the scripting block from a button field but you can also run it directly from within the block.

[Stephen_Suen]

Matthew_Thomas:

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?

This is something the team is thinking about, but in the meantime, your best bets are the options you called out — either copy-paste the code between your blocks or host the shared code online e.g. in a GitHub repository or npm package.

[Stephen_Suen]

Kamille_Parks:

For that error, make sure you are only trying to run the custom block from the Base you originally set it up in, and on the same computer.

You must run the block in the base it was created in, but you can run it on a different computer as long as it has the same .block/remote.json file (it should contain the block id and base id).

[Stephen_Suen]

kuovonne:

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?

The intent of these APIs was to have a corresponding permissions check method for each mutation method. We’d love to hear about what you’d be trying to accomplish with granular permissions for batch operations.

kuovonne:

Also, what do you think of having permissions that allow changes (create, delete, update) only through code (scripting block or custom blocks)?

Yes, this is something we’re thinking about — more to come later on this.

[Jay_Ransijn]

Hi Kirill, thanks for your question.

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.

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?

I believe what you want is for the wrapper box to be position="absolute" and have left/top/right/bottom properties set to 0, here is an example:

<Box position="absolute" top={0} bottom={0} left={0} right={0} display="flex">{...}</Box>

The panels within will have to be constructed with the right flex child properties and to achieve scrolling/overflow you will add overflow="auto" on the desired box.

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

Good question, in general we like to think more about the size of the block instead of fullscreen or not. We have some utilities to enforce a min size of the block through the ViewportConstraint component. You would end up with something like the following,

<ViewportConstraint minSize={{width: 400, height: 400}}>
   {...}
</ViewportConstraint>

[Stephen_Suen]

Thank you to everyone for participating in today’s AMA. As always, feel free to leave any additional questions you have in the Custom Blocks Beta forum.

We’ll be awarding gift cards to @Kamille_Parks, @Matthew_Thomas, and @kuovonne. Look out for another AMA same time next week!