Draftbit updates
Draftbit updates
draftbit.com

πŸ“± PWA Install, Auto-update, and Wrapper

We've added two new features to make your Draftbit publications better.

First, published apps now support offline installation with service workers! This additional PWA support provides a more integrated offline experience on iOS, Android, and desktop (via Chromium Browsers like Google Chrome, Microsoft Edge, and Brave).

1.gif 2.gif

As part of this update, we also added support for background updates. If you are using or developing the app in a browser or desktop installation, you will see a small notification when the new version of the app is ready to be installed:

3.png

On mobile, any new version will be downloaded in the background the next time you use the app, and installed and available once you close and reopen the app:

4.png

Second, when you view a published app on a non-mobile screen, your (usable) app will be wrapped in a phone frame, along with a name, description, and social links to help spread the word about what you've made!

5.png

Don't worry! You'll have the same experience as before when viewing the app on mobile screens.

✏️ Edit Data via Tooltip

When users double click on components in the builder, the data options for the selected component appear as a tooltip directly above the component (or below, depending on the component's location on the screen).

text-data.png

Using this tooltip users can now edit data properties directly in the screen preview without needing to go to the properties panel.

🎚️ Custom Border Radius

We've added the ability to set a custom border radius on components. You'll now see a third option called "Custom". Selecting that will show you an input slider that goes all the way up to 64.

border.gif

If you're looking to use a complete circle, make sure to check out the "Circle" and "Circle Image" components.

🧡 Nested Strings in Arrays

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!

nested-strings-in-array.png

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.

πŸ”Œ Component Source Type

We've made it easier for you to edit both text and images. You'll now have different, context-specific dropdowns for static and data-driven fields.

text.png

Text components now have a large text area when applying static fields and a dropdown for when you have Fetch or Firebase data connected.

source.png

With Image, you'll now have the ability to set both local and remote url's, too!

image.png

πŸ“¦οΈ App Store Publishing

If you're done building your app and are now ready to publish it in the App Store or Google Play β€” congratulations β€” we can help. Under the Publish button in then builder, you'll now see a link asking you if you're β€œReady for the App Stores?”

app-stores.png

This feature is still in beta. If you're okay being a beta tester, go ahead, click the link, answer a few questions, and we'll get back to you with next steps.

πŸ—‘οΈ Delete & Restore

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.

delete-restore.png

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.

keyboard-shortcuts.png

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.

✏️ Double-Click to Rename Components

Double click any screen or component to rename it inline!

CleanShot 2021-02-12 at 12.25.29.gif

A couple of weeks ago we announced Double Click to Edit a text component in the builder. We wanted you to stay in the flow and focus on your content. For the same reasons, we are releasing Double Click to Rename today. If you want to change the name of a screen or a component, just double click on it. No need to go all the way to the configs panel anymore.

πŸͺ› Introducing Simple Components

We're introducing several new components that make building your screens easier and faster. They're meant to do one thing very well (and hopefully named this way!)

These new components come with a simplified properties panel that gets rid of any advanced settings and focuses on the most important part. Check out the full documentation here.

  • Row: Places your content in a horizontal row and allows you to control how they're distributed along the x-axis.
  • Stack: Places all your content vertically and allows you to set how they're distributed along the y-axis. The stack is only as tall as the content inside.
  • Center: Places all your content in the absolute center, no matter what width and height you set.
  • Square & Circle: These work just like Center, except they're fixed to always be a perfect square or round circle.

Here's a video that will explain how to use simple components πŸ‘‡

✏️ Double Click to Edit

Now you can double click on text components to edit the text quickly!

When you're creating an app visually, shortcuts are essential to preserving your momentum. At Draftbit, we always look for places where we can make your building experience faster. For example, you can now double click any Text component to edit it right away.

CleanShot 2021-01-29 at 14.08.22.gif