AMA Custom Blocks Contest Edition #3 - Releasing your block

[Michelle_Valent]

The Custom Blocks contest deadline is approaching! Do you have questions about releasing or debugging your block? We’re hosting our third live Ask Me Anything (AMA) session in this thread on Wednesday (6/24) at 11am PT.

Billy Littlefield and Tim Deng from our platform engineering team will be ready to answer any development questions you have.

We’ll be picking 3 questions at random to win a $40 Amazon gift card. Any solutions offered by the community will be included in the draw as well. 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!

[Kamille_Parks]

The block I’m building will require an external library’s CSS to be imported/loaded. My original plan was to install Webpack to do this, but there weren’t any Blocks examples that use it. To your knowledge, would I be able to install webpack as I would with any other React app, or would the Custom Blocks setup require a different approach? Does the way Blocks are transpiled interfere with Webpack?

[Yuriy_Klyuch]

I’m aware that there are official airtable widgets for building UI, but can I use 3rd-party UI widgets library? (MIT licensed)

[Matthew_Thomas]

There was some discussion about writing tests for custom blocks a while ago. I’m still finding the most success with the “test mode” that I had suggested to the original poster, but I’m curious if you could expand on Kasra’s second idea:

Writing tests for blocks

Write the block in a way that lets you write unit tests for the logic separate from the blocks environment. For example, a timeline block may have a layout function that takes Array<{recordId, startDate, endDate}> and returns information about how to lay out those items e.g. Array<{recordId, x, y}> . You could write unit tests for this.

If I have a layout function that makes calls to Custom Block APIs, wouldn’t I still need access to those functions outside of the Airtable environment to perform a unit test? Or was Kasra’s suggestion more along the lines of a layout function would be called before passing to an Airtable API and the unit test could be used as a way to ensure valid information is being passed in?

[Matthew_Thomas]

Do you have any advice or guidelines on how to present errors to users? I know some of the examples include permissions and other checks before performing operations for Airtable-specific API calls. More generally though, can you share best practices, UI-wise, on how to present users with error information?

Some ideas I can think of are:

• Yes/no or Ok/cancel dialogs
• “Update settings before continuing…” (require a ‘re-run’)
• In-line option to dynamically change a setting that automatically re-tries
• Attempt to process all “requests” and provide a list of successes/errors at the end

Obviously, some/all/none of these might work for different use cases. I’m trying to see if there’s any built-in UI components (I don’t think so?) or best ways to incorporate custom components (like react-bootstrap).

[Kirill_Madorin]

Hi

I’ve just finished a very first version of Image Annotation block. Here is a demo: https://www.youtube.com/watch?v=1O6hSDny2TA. Could you give me some feedback on what to improve before releasing it?

And some more quesitons:

1. Is it possible to specify not only fields, but also field values in RecordQueryResultOpts? For example, to get only records which have a specific value in a specific field?
2. How can I create a table with a field that will be linked to another table? What options should I use when calling 'base.unstable_createTableAsync`
3. Is it possible to import a css file in the component? Can I extend the build/dev configs somehow?
4. Do you provide some tools to log errors in Custom Blocks or it will be better to use something like Sentry for now?

[Kamille_Parks]

I have a button that creates a new record using createRecordAsync() when clicked. I would like to open the newly created record once this is done using expandRecord(), but createRecordAsync() only provides the record ID and not the record object. Loading the new record using useRecordById() seems to break hook rules; this is all in an async function. Any advice?

[Jeremy_Oglesby]

@Kamille_Parks
I think you’ll need to do those as separate actions. So create the record and close out that async action. You have your recordID, so in a new action use that record to expand it. Trying to access a newly created record within the same async block that it is being created generally isn’t going to work because you aren’t guaranteed to have the record available yet. But once you’ve awaited the return of the async function, you can be guaranteed to have that recordID to work with.

It’s also just generally good practice to segment out actions like this. It’s the universal temptation for developers to get as much done in a single go or block of code as possible. It feels more efficient, and it feels quicker, like you can get more done with fewer lines of code. That’s probably true; but in the long run, using more lines of code, and more tedious-feeling cycles of “doing an action --> saving the result --> doing some new action on that result” will result in generally more resilient and easier to understand/modify/expand code.

[kuovonne]

Michelle_Valentine:

We’ll be picking 3 questions at random to win a $40 Amazon gift card.

Thank you for implementing my suggestion use a random drawing for awarding the gift card!

[kuovonne]

Is there a way for a block to put up an alert outside the context of the block itself?

For example, if a block is monitoring a table and notices an error condition, is there some way for the block to notify the user, even if the user does not look at the block? Modal dialog boxes seem to work only in the context of the block, and alert is very ugly and probably best for debugging purposes.