New

👋 Hello Draftbit community,

We're back this week with more upgrades in our quest to empower you to create the most advanced apps possible.

But first…

📣 Shoutout to David Searle for sharing how to implement Low-code inline form validation. Watch on YouTube 📺 or if you prefer written content, Read more ↗️.

👀 What's upcoming?

This Friday (July 30th - 10:30am CDT, 15:30 GMT), during Draftbit Office Hours, we will chat with Marianna Kerppola, CEO of Poisera (poisera.com).

Marianna is building her app-based support system for moms using Draftbit, Airtable, AWS Amplify and Cognito, among other low-code tools. Read More ↗️

🔔 Set a reminder or subscribe to Draftbit's YouTube channel and hit that notification bell.

🚀 What's New?

🔥 New Feature: Stopping the execution of Stacked Actions

• We've introduced a new action type called Conditional Stop. You can use it to stop the series of actions that your app screen is executing on Touchable or a Button component with your own business logic.

🚀 New Tutorial: Displaying Recommend Results Before Search

In this tutorial, Nick shows you how to display a supplemental list of results on a Search screen when the search bar is empty. Watch now 📺

♻️ What's Updated, Fixed, or Improved?

• More customization options are available on Input components like TextInput, TextField, Picker, etc.
• Improved components: Switch.

New

👋 Hello Draftbit community,

We're back this week with more upgrades in our quest to empower you to create the most advanced apps possible.

🚀 What's New?

🔥 FEATURE: Nested Firebase Document/Collection components

• We released new functionality in Draftbit to use nested Firebase documents and collections
• To learn more, watch the latest Office Hours ↗️ on YouTube

🚀 CODE SNIPPET: Creating Modals with Custom Components

Modal is a common way to present content above an enclosing view. React Native does come with a built-in component by the same name. It works on both iOS and Android. Unfortunately, the Modal component from React Native isn’t supported on the web, so if you need your app to work in PWA, you’ll need another way and this guide will help you to implement it. Read more ↗️

♻️ What's Updated, Fixed, or Improved?

• The Navigation tree (under the Navigation tab) is improved. Adding and removing navigators is a smooth process now. We are still in the process of making Navigation more seamless.
• Components like Picker and Checkbox are now improved.

Until next week,

The Draftbit team

New

👋 Hello Draftbit community,

We're back this week with more upgrades in our quest to empower you to create the most advanced apps possible.

But first… 🥁

📣 Shoutout to Justin Slabbert, who wrote an awesome guide on How to convert Date from Firebase Into Draftbit Readable ➡️ Learn more

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

🚀 What's New?

• We released a new series of videos on cloning the "Les Puces" app, the No Code way in Draftbit. It's in French 🇫🇷 ➡️ Watch Now

• We published a guide on SMS one-time-password Authentication with Xano(create user, log in user, log out user) ➡️ Learn more

When you are done with this guide, you will be able to:

• Create a New User with a mobile number and one-time password sent via SMS
• Log In an existing user with their mobile number and one-time password via SMS that generates an auth token
• Save the auth token in the Draftbit app using Device Variables
• Sign Out users and delete auth token

📝 For integrating Xano APIs directly, check out the official Draftbit documentation ➡️ Go Deeper

♻️ What's updated?

• Video component is improved and now supports size property. Using it, you can now set the appropriate width and height.

• New and Improved API responses, FlatList, and ScrollView components.

Until next week,

The Draftbit Team

New

👋 Hello, Draftbit community!

We're back this week with more upgrades in our quest to empower you to create the most advanced apps possible. With these updates, you can now add an initial value to an input field (or any other input component) either from your data source or a navigation parameter or view the outlines of components on an app screen clearly.

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

🚀 What's New?

• All components under Inputs & Controls are now data enabled. It means an input component can now have an initial value. For example, consider the list of items on the screen below.



• Notice how the second item in the list is misspelled. Let's change that by clicking on the edit button (with the pencil icon). The example below shows that TextInput is already pre-filled with the value when navigated to the edit form screen.

• This is possible because of a property called initial value. On an Input component, you will find this property in Data Tabs (of Properties panel). The value for this property is used to initialize with a value from a data source or navigation parameter. In the current example, the initial value is passed as a navigation parameter from the list screen.

• Transform Data with Custom Functions
  • Do you have data in your back-end that's formatted differently from how you want it displayed in your app's UI? Now you have different ways to transform data variables in Draftbit.

➡️ Check out the video on our YouTube channel or read the guide here to learn more.

♻️ What's changed?

• In the Web Preview (Single Screen mode), all components on a screen now have added surrounding blue dotted lines to indicate the space they are taking on the screen and their exact position. We've added this feature to improve your experience inside the Draftbit Builder ➡️ Learn more.

• New and improved components: Checkbox, Switch, and Slider.

Until next week,

The Draftbit Team

New

👋 Hello, Draftbit community!

In our quest to empower you to create advanced app functionalities, we are back with fixes and updates.

With these updates, you can now add more customization on components like Picker and Radio Button. The Date Picker component is new and improved. You can also add support for Landscape orientation for the app screens.

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

🚀 What's New?

• We released a new video tutorial on how to update a Firebase Document from a Draftbit app ➡️ Watch now.

• Customizing a Picker component has got better. Try setting the custom values on properties like background color, border color, etc.

• More customization abilities on the Radio Button Row component.
  • You can set color for both selected and unselected properties.

♻️ What's updated?

• The Radio Button Group component has improved. Try nesting labels via Text components either horizontally or vertically based on your app design.

• The Date Picker component (both variants Solid and Underline) is new and improved.

• Switch component is new and improved.

• Did you know that all Draftbit apps support Device Orientation in three modes?

  • Modes: Default, Portrait, and Landscape

Until next week,

The Draftbit Team

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 ➡️ Go Deeper
  • 🔗 Check out the guide for Low-code Authentication with Xano REST API ➡️ Learn more
  • 🎥 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. ➡️ Watch Now 

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

• On that note, we wrote on Resetting a TextInput field after a screen is unfocused ➡️ Learn more

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