Modules in your Composer apps (05:49)

Use Modules to include complete features like Chat or Tasks into your app. Learn how Modules function differently depending on the page type they are on, and how you can configure them to change how they work.

Video Transcript

Welcome to this core skills video on Modules. To make sure you get the most out of this video, watch the core skills video on the Interface Builder.

In this episode we’ll learn about using modules, why they’re foundational to your app, how they can enrich your connected or imported data, and what kind of functionality they can provide.

The first thing you should understand is that almost everything you see in your final Composer app is actually a module. Modules are drag-and-drop features that provide unique ways of displaying and interacting with your data. Like maps that use address information from your data, or calendars, that use dates. They can also simply be used to add complete features to your app.

How modules function is determined by the page they’re on: the same module may work differently on different pages. For example, the Data Form module, which can only be added to a details page would know what fields it needs to display because they’ve been defined by that data resource. Here, I’m viewing the details for an Expenses page, and the Data Form module is displaying the fields I’ve defined for Expenses.

If the same module was added to a different page, say the one for a resource called “Customers”, it would display the data and fields that we’ve configured for our “Customers” resource.

A module doesn’t need to use all the data that’s available. Many have configuration options available that let you determine what data is used, as well as how the module functions in general. As an example, let’s add the Map Marker module to a Customer details page.

The Map Marker module utilizes just a single data field: an address, which is used to show a location marker on an embedded Google Maps view. After dragging it to the page and selecting it, there are a number of options.

At the top is the “Address” drop down, and we can choose which of our Customer resource’s fields to use for the marker location. I’ll choose “Address,” naturally. The map marker then configures itself to show each customer’s location on a map. As we can see, this is in addition to the data displayed by the Details module. By adding multiple modules on a single page, you can greatly enhance the practical uses of your connected data. Back in Composer, there are other options, each of which affects the functionality of the map marker module in some way.

For example, we can choose between road map, satellite and hybrid for the map type, as well as override the initial zoom level. The options are too many to go over in detail now, but they are all covered in our documentation.

Next: not all modules can be added to all pages. For example, a list module can only be added to a List page. This is because pages determine what kind of data is available to them. On any other type of page, the list module would not have access to the data it needs to function: that is, a list of records. Finally, we have modules that can be added to multiple page types, and they function differently on each.

Let’s add Tasks to our Expense Reports. I’ll open the Module browser, which lets us browse through all the different modules available for that particular page type. I’ll select the Tasks module and install it into the project. It then becomes available to use in our app. I’ll drag it under the Details module.

Since the module is added on a Details page, any tasks added using the app become associated with that individual Expense record. If we were to add the Tasks module to a List page, the tasks would be related to all our Expenses.

Blank pages have no data resources tied to them, so the Tasks module there would be app-wide, collecting all the Tasks from every details and list page.

The last thing I’ll cover is the display settings for modules. Just like the module position on a page, the display settings are separate for web and mobile. I can choose to completely disable the module on either side. When I choose “hide chrome around the module”, this is a technical term that reduces the padding around its appearance and removes its title. Think of it as a frame. I can also override the module title with the “override title in chrome” option.

Finally, as an unique option on the mobile side, I can choose to show the module as a link to a separate page, rather than having them all listed under the details of the particular expense report. There’s a lot more to each individual module that we covered here, so check out the Composer Academy for more videos.