Multi-Column List Module

Multi-Column List Module (02:57)

Show a list where each item displays multiple data fields.

Video Transcript

In this episode I’m going to show you how you use the Multi-Column List module in your apps. For many cases, you’ll want to display more than just a single data field in your lists.

In the example for today, I’ve prepared a simple asset tracking app that lets me list and manage company equipment and attach manuals to each. As it is, the app simply lists the primary data field for each piece of equipment. But what I’d like is to have a bit better of an overview when I’m browsing my list of company assets.

Let’s dive into Composer and I’ll show you how it’s done. So, here we are in the Interface Builder, on the List page for our Equipment Assets. And by default, Composer has added the Single-Column List module on the page. To add the Multi-Column List module, I’ll open up the module browser. Remember that I can only see the modules that are available for my current page type, that is, a List page.I can find the Multi-Column List under the ‘Data Access’ tab.

I’ll click to install it – and now it’s available to be used within my application anywhere I have a List page. In Composer, List-type modules can only be added to List pages. This is because List modules need access to a list of data records to function, and that is only provided by the List page.

Here, when I toggle the page to data mode, I can see which data is connected to that page. As I drag the module onto the canvas, I’m presented with some settings I need to configure first. Here’s where I select which three data fields I’d like to display in my list. Click the plus and choose what you’d like to display first. Once done, note that you can drag the selections around to reorder their presentation, the top option being the first that will be displayed.

Alright. Once I save the page, I can hit publish, and we’re ready to check out the app. While the mobile is publishing, I’m going to head over the the browser app. As you can see, we’ve got the three fields we selected now viewable giving me a much better overview of my equipment. And on the mobile side, we have the same information presented in a card format.

And that sums up the Multi-Column List. Lists, and how you present your data is important for data driven apps. In the near future, you can expect several more modules for data listing and presentation. So stay tuned.

As always, we’d love to hear your feedback. So if you have any questions or comments, drop us a line at composer@appgyver.com. Thanks for watching. If you’re looking for more resources on modules or features, be sure to check out the Academy at academy.appgyver.com.