Help

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

1900 0
cancel
Showing results for 
Search instead for 
Did you mean: 
Michelle_Valent
7 - App Architect
7 - App Architect

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!

38 Replies 38

What do you find is the best way to store configuration info, or does it depend on the type of block?

You almost always want to store shared configuration in global config, since global config is scoped to a specific block installation. Writing config to a table might clutter the base with additional information that users don’t need to see most of the time, and runs the risk of accidental modification/deletion. It’s also important to consider the scenario where a base has multiple instances of the same block installed — in that situation, you’d have to create separate tables for each installation, which could quickly get out of hand. For user-specific configuration, you can also use local storage.

In terms of UI, it depends on the type of block you’re building. Generally speaking, the recommended pattern is to have a dedicated settings screen (accessed with the useSettingsButton hook) that can be visited whenever. For visualization blocks, consider displaying the settings in a sidebar so that users can tweak settings and see the changes in real-time without switching back and forth between two screens. For wizard blocks where the settings may not change too often, this settings screen might simply be the first screen rendered by the block.

Could you expand a bit more on local storage? Is it unique to the specific user and block? Can it be accessed outside the block? Is it suitable for storing sensitive information such as API keys or passwords? Does it persist after the block is closed? Does it persist after Airtable is closed? Does it persist after the computer is restarted?

Hey Kamille, thanks for your question. I will try to unpack your questions a bit:

Will developers have access to UI elements not used in blocks?

The UI kit we provide for the Blocks SDK is separate from our core product UI for several reasons. We build new components for the Blocks UI kit optimized for the Blocks SDK and developer experience. We prioritize new components based on the needs from the Blocks developer community, and our own needs as well.

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?

More specifically your question about the date picker, we have got some signal on the need for this component and it’s a component on our radar! For now I would recommend using something like http://react-day-picker.js.org/ (which our own core date picker is based on).

Will other UI decisions which are determined by CSS classes be available to the blocks UI elements?

How we deal with CSS and styling is different in our core product than in the Blocks SDK, so we will never be sharing or importing CSS from the core product. We do aim to add new component props or utilities to solve for common pain points!

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?

I will create a note for the team to look into truncating! Thanks for bringing this to our attention. In the mean time you could use a style prop on your component with the following properties:

style={{
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
}}
Janine_Co
5 - Automation Enthusiast
5 - Automation Enthusiast

Hi Airtable Team, I’m following the tutorial for “Hello World” and seems to be getting an error after “block run.” However, I was able to successfully obtain the block url through terminal. Does anyone know how to resolve the error? Thank you in advance! Screen Shot 2020-06-17 at 2.23.39 PM

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.

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

I haven’t worked with local storage extensively, but I believe the answers would be yes, yes, and no.

An example use case I’m trying to think of is one where multiple users want to use the block, calling an external service with their own API keys (so as to keep requests and data manipulation tied to a specific user and not the “global” API key stored in a config). Local storage would solve this problem to make it per-individual, but being wiped on restart is less than ideal.

The cache might only be wiped manually though (clear browser data) instead of on computer restart, but I’m not sure. Definitely something I’ll be looking into!

Could you expand a bit more on local storage? Is it unique to the specific user and block? Can it be accessed outside the block? Is it suitable for storing sensitive information such as API keys or passwords? Does it persist after the block is closed? Does it persist after Airtable is closed? Does it persist after the computer is restarted?

You can read more information about the local storage API here: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

In short, it’s unique to a specific browser for a specific block installation. It cannot be accessed outside the block. It is persisted between sessions unless the user explicitly clears their browser’s local storage. You could store sensitive information there, but it would be accessible by anyone who has physical access to that machine. Also note that anything in local storage won’t be shared between different users of the block (e.g. each user of the block would need to input their own API key).

Has airtable considered offering a way to color a Record using a custom logic that is separate from a View’s or Select Field’s coloring settings?

It would be nice to have a 4th, custom Record Color Mode (Airtable Blocks SDK) where we can just feed a record/list of records a hex value or a standard color.util value.

The cache might only be wiped manually though (clear browser data) instead of on computer restart.

This is correct, local storage is not wiped on restart.

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

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.

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:

image (12)

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

image (13)

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!

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.

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.

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

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.

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

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.

  1. 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
Community Manager
Community Manager

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!