New

👋 Hello Draftbit community,

We continue our quest to empower you to create those most advanced app functionalities possible. With these updates, reset text input fields when a screen is unfocused, or build a data-enabled list-within-a-list screen (e.g. display list items' "tags" arrays). We've gone deeper with Xano. And we've made working with variable options easier than ever.

Here's a complete list of the product updates that landed on Draftbit over the past week!

🚀 What's New?

• Deeper integration with Xano: Add your Xano APIs directly from the Data panel. And we added a guide on Authentication (create user, log in user, log out user) with Xano.

  • 📝 For integrating Xano APIs directly, check out the official Draftbit documentation here.
  • 🔗 Check out the guide for Low-code Authentication with Xano REST API.
  • 🎥 Or you can also follow the steps described in Draftbit's Office Hours Video to implement the Email/Password sign-in with Xano and Draftbit. 

• You can now have a nested List component inside a parent List.

• Using low-code Custom Functions, now you can use pre-defined hooks such as useFocus, useFocusEffect and useScrollToTop.

  • Check out guide we wrote on Resetting a TextInput field after a screen is unfocused.

• The type of a variable from a REST API endpoint is now shown in the Variables option. A type here can represent a string, number, etc., of the field of data in the endpoint. 

  

♻️ What's changed?

• The format of showing "SERVICE // ENDPOINT" text in the variable options list has been removed. The UI in the builder now groups all the variables by the endpoint name.

• We've renamed the option "Submit Data" to "API Request". You can find this action option in the Interactions tab > Action on a Touchable or a Button component.

  

🔧 What's fixed?

• The Center component can have custom width and height.

  • Did you know that Draftbit comes with a pre-built component called Center. It automatically centers anything you place inside of it. You can control its width, height, and background color.

  

  
  

• Radio button has a couple of fixes. The color selection property and the changing the size of the button are now working as expected.

Until next week, The Draftbit Team

New

New feature: Dynamic Input Defaults

What is it?

• Input components (like TextInput and Checkbox) are now data-enabled
• To control state of input components, map data variables to these components in the Data tab, just like you would any other data-enabled component

What is now possible?

• Great for things like Edit User Profile where you might want to change only 1 or 2 items within a larger set of record data
• Your app can "remember" saved items, such as Saved Filters
• Really, the possibilities are endless!

Watch the tutorial video above for a simple implementation

New

Introducing: Conditional Display in Draftbit

What is Conditional Display?

A way to control the state of Draftbit components with logic.

What can I do with Conditional Display?

The first version of Conditional Display is pretty basic. Right now, you can control the visibility of a component based on the truthiness of a variable. For example, you could hide items in a list that have NULL values in them. Or you could not render a button on the screen until some variable exists.

What's next for Conditional Display?

We are spec'ing out enhancements to Conditional Display right now! If you have any requests, please post them in the comments. Right now, we are thinking through:

• More complex logic (beyond simple true/false)
• More complex behaviors (beyond simple render/don't render)

Important note

The type of variable you use with Conditional Display matters. For example, a String variable with value "false" still evaluates to TRUE. If you are experiencing unexpected results from Conditional Display, start here.

New

It's now possible to install 3rd-party packages, write custom functions, and build custom components and insert them into your Draftbit apps.

What's possible with Custom Code? Short answer: A LOT! In fact, we've created a new channel dedicated to Custom Code tutorials: ✂️ Code Snippets. In this channel, you can find things like:

• Take & save photos with the device camera
• Trigger a custom SMS
• Create a functional "bookmark/favorite" icon

Have a use-case for Custom Code? Request a tutorial here

🚨 Caution: Custom Code is an Advanced feature. There are no restrictions on what you can import. Invalid code could cause your app to error.

Go deeper:

• Custom Functions Documentation
• Code Component Documentation
• Imported Packages Documentation
• Custom Code Tutorials (aka "Code Snippets")
• Request a Custom Code Tutorial
• Custom Code Discussion

New

What's new:

• Enter static, data-enabled, or a combination of both text sources in one text component
• You no longer have to select the Source Type for Text components

What's now possible:

• Complex text components, e.g. 'Book Author: {{authorName}}'

How to use:

• With your cursor in the Input Text field, type static text as you normally would.
• For dynamic text, create a variable name by typing '{{' and then map the variable to a data field.
• Your Text component needs to fed by an external data source. Otherwise, this won't work.

New

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

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:

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:

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!

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

New

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

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

New

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.

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

New

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.

New

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 components now have a large text area when applying static fields and a dropdown for when you have Fetch or Firebase data connected.

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