Guide to Modules

There are a number of ways that Modules can speed up app development or enhance apps themselves.

• Reusable designs and functionality. Creators can use Modules to help them avoid repeating designs and blocks across multiple screens. Today, when copying sets of components, the associated blocks will not copy. However, when copying Modules that contain components, not only are the designs preserved but also the associated Blocks and functionality.

• Blocks organization. While today you can visually collapse certain Block clusters, you may still have many blocks for variables, functions, or other blocks. By compartmentalizing them to just the components where they’re needed, you can keep your Blocks workspace more tidy and easier to understand.

• Easier updates. Have a change for a common feature across your app? Now you can just update the Module once and it will update everywhere the feature exists within the project.

• Shared advanced capabilities. Sometimes you want functionality that you’re unable to build or are unfamiliar with. Through Module publishing and importing, Creators will be able to share what they’ve built with one another.

Sample Modules

To help you get started on building Modules, we’ve assembled a small list of samples you can use directly or even remix and make your own. To view the samples, click the plus icon next to the Add Components library on the project’s Design tab.

• Stepper. A simple user interface (UI) element that allows users to easily increment or decrement the value within a Text Input. Using its associated blocks, you can obtain the value whenever it changes or directly set the value when you need to reset it. (Demo project)

• Sign-In/Up. When paired with a valid Firebase account, app users can create accounts and sign into the app. Simply use the Module’s “successful sign up” and “successful sign in” blocks to return the new or returning user’s Firebase UUID. (Demo Project)

• User Profile. This is a design template for displaying different app users’ details. You can remix this module and apply your own stylings. Once added to your project, you can set the profile fields directly using the available blocks or change multiple fields at once using the “set profile” block. Note that if left empty, a field will display the default value from its parameters. (Demo Project)

• In-App Notification. Customize an in-app notification to match your app's stylings. Note that in order to use this Module, you will need to place it within a Group and toggle its visibility based on when you want the notification displayed or not. (Demo Project)