Save the date! Join us on October 16 for our Product Ops launch event. Register here.
Feb 20, 2020 03:17 PM
Hello!
A very belated happy new year, and thank you for participating in the custom blocks beta! We’re excited to share the newest updates to the SDK, CLI and documentation.
One thing before we dive in: we’re looking to feature YOU when we announce custom blocks to the world. As one of our early custom block developers, we’d love to extend an opportunity to highlight a block you built. Please fill out this form by March 9 to be considered. All selected block developers will receive $1,000 worth of Airtable credits!
We’ve updated Cursor
with several new features: the ability to set the current table and view with setActiveTable()
and setActiveView()
, and the ability to watch and read the currently selected field ids with selectedFieldIds
.
We’ve also made a convenience update to our record hooks ( useRecords
, useRecordIds
, useRecordById
😞 they can now accept a Table
, View
, or QueryResult
as previously supported.
We’ve updated the YouTube preview example block to use the new cursor.selectedFieldIds
API and other examples to use useRecords(Table | View)
where appropriate.
To upgrade to the latest version of the SDK, run npm install @airtable/blocks
in your block’s directory. You can find the complete list of changes, including any breaking changes, in the changelog.
Starting from 0.0.43, the CLI will require Node.js 12.14 or higher to run. If you installed Node using nvm, you can upgrade to the latest stable version using nvm install lts/* --reinstall-packages-from=node
.
To upgrade to the latest version of the CLI, run npm install -g @airtable/blocks-cli
.
UI components now have interactive examples: try them out in the API reference!
We’ve also added a page featuring our example blocks and a new guide about reading data from Airtable that covers how to use the different models and hooks in the SDK.
Feb 20, 2020 04:50 PM
Any chance you could share the block script for the little navigation demo you show in this post?
Feb 20, 2020 04:54 PM
Here’s the code!
import {initializeBlock, Box, TablePicker, ViewPicker, Button, useBase} from '@airtable/blocks/ui';
import {cursor} from '@airtable/blocks';
import React, {useState} from 'react';
function CursorDemoBlock() {
const base = useBase();
const [tableId, setTableId] = useState();
const [viewId, setViewId] = useState();
const tableIfExists = base.getTableByIdIfExists(tableId);
const viewIfExists = tableIfExists && tableIfExists.getViewByIdIfExists(viewId);
return (
<Box padding={2}>
<h2>Navigate to a table or view:</h2>
<TablePicker
table={tableIfExists}
onChange={(table) => {
setTableId(table.id);
cursor.setActiveTable(table);
}}
marginBottom={1}
/>
<ViewPicker
table={tableIfExists}
view={viewIfExists}
onChange={(view) => {
setViewId(view.id);
cursor.setActiveView(tableIfExists, view);
}}
/>
</Box>
);
}
initializeBlock(() => <CursorDemoBlock />);
Feb 20, 2020 04:55 PM
Perfect! Thanks! …
Feb 25, 2020 12:23 PM
I think the example for the Link
- styled link React component is pointing at the code for the Input
component instead. It doesn’t seem to be a representation of a styled link.
Feb 25, 2020 12:24 PM
Good catch, thanks! We’ll get it fixed.