Donald Hruska

Cofounder & VP Engineering, Draftbit
๐Ÿ‘‹

Custom Code Kickoff Recording

admin ๐Ÿ‘‹
Thanks to those of you initial beta testers that were able to join us this morning. For those of you that weren't available or have joined the beta testing program since, we have a recording of the session available here, with the passcode S&.0ZuX5

You can find the code for the finished Camera component we built in the session at the end of this guide.
Like Comment

Welcome, โš›๏ธ Custom Code beta testers!

admin ๐Ÿ‘‹
Hey everyone, we're excited to have you helping us get Custom Code ready for primetime!

Please use this private channel to ask each other (and our team) for help, to give feedback, and any other general discussion about the feature.

If you are seeing this message, you should have access to the new Custom Code features in Draftbit (regular Draftbit users don't have this). If you don't have access, let me know ASAP.

The Custom Code feature will change rapidly over the coming weeks as we improve it. That means that some of your in-progress code may break! It is not recommended that you use this feature with anything that is business- or client-critical, for this reason.

How do I use this?

Custom Code Component
This is a new component that allows you to inject custom JSX. You can find it in the component picker Blocks tab, or by searching for "Custom Code". Typically, you will probably just use this to reference a component exported in your Components file (see below). You can reference a component like so:๏ปฟ
๏ปฟ
Custom Components File
Within the custom code settings, there is a new option - Components. This is a file that ships alongside your screen if it has any Custom Code components present. You can create whatever you want inside this file, and use any packages defined in the Packages setting (see below). You can create and export a component like so:๏ปฟ
๏ปฟ
Packages
You can define any packages you'd like to use here.

FAQ

Q: How do I preview my custom components?
A: Custom components do not work in web preview "single screen" mode. Click the third tab (Preview), or the Preview button at the top to preview on your device.

Q: Can I talk publicly about my involvement in the beta test?
A: Yes! This feature is far enough along that we're ok talking about it. If you want to tell others about it, we would love that :)

Q: I did something cool with Custom Code. Should I make a write-up?
A: First of all, awesome! Second of all, we would love to have you contribute guides to the community.

Like Comment

๐Ÿงต Nested Strings in Arrays

admin ๐Ÿ‘‹
Some APIs return data nested as the first item in an array. We've added the ability to map fields nested in arrays to components within Draftbit. Airtable is one API that uses this pattern. Now, "Link to another record" and "Lookup" Airtable fields work within Draftbit!
๏ปฟ
๏ปฟ
When using record linking in Airtable, the id of another table can now be used in a Fetch response. Those ids can be passed as navigation params, which then in turn can be used as variables into subsequent Fetch requests on other screens. This is an important step in creating apps with "list" screens that navigate to "detail" screens.
With Airtable lookup fields, data from linked records can be displayed and fetched in a single Airtable table and request, simplifying the Rest API setup required within Draftbit.
Like Comment

๐Ÿ—‘๏ธ Delete & Restore

admin ๐Ÿ‘‹
๏ปฟ ๏ปฟ

When screens and components are deleted in Draftbit, historically, those actions have been permanent. Losing work unintentionally can be very frustrating, so we sought a way to allow recovering deleted screens and components.
This feature introduces a few things. First, we now have a new section in the screens and components lists showing recently deleted items. The items can be restored with as little as a button click.
๏ปฟ
๏ปฟ
We also sought to streamline our users workflow further by introducing a variety of keyboard shortcuts. CTRL+Z is now a shortcut for undoing component deletion or any other component tree-related actions โ€” component adds, deletes, and movements. Arrow keys can now be used to navigate around the tree, and components can be copied and pasted with CTRL+C and CTRL+V.
๏ปฟ
๏ปฟ
Finally, we tackled overall performance of the tree itself. Actions such as deleting components should now feel significantly faster, leading to a smoother overall experience.