How to use the Data Powered List Directory and Detail screen templates

The Data Powered List Directory and Detail screen templates provides a powerful way to create searchable directories with dynamic profile views. Ideal for staff directories, service listings, or contact databases, these templates are powered by Fliplet’s Data Powered list component

Get started

1. Add the screen templates
2. Connect the screens
3. Connect or change your data source
4. Match your data source columns to the template
5. Preview and test

Step 1 – Add the screen templates

1. Add the Data Powered List – Directory list and the Data Powered List – Directory profile screen templates to your app by clicking the “add screens” button inside your app
2. Select both screens and choose “add 2 new screens”
3. This creates your Directory screen (list view) and your Detail screen (profile view)
   

Step 2 – Connect the screens

1. First, open the Directory screen
2. Select the Data container component to open the Settings panel on the right-hand side
3. Under Click Action, select “display another screen” and chose the Detail Screen (e.g., “Data Powered List – Directory profile”)
   
4. This allows tapping a record in the Directory Screen to open its corresponding Detail Screen.

Step 3 – Connect or change your data source

1. Click the Data Container on each screen to open the Settings panel
2. Use the dropdown to select your desired data source

Note: If you’re using your own data source, be sure to use the same one for both screens.

Step 4 – Match your data source columns to the template

If you’re using a custom data source, ensure your column names match what the templates expect.

Data Image Components

1. Click on an image component
2. Open the Settings panel
3. Check the column it’s connected to (e.g., “Image”)

Update this if your column uses a different name (e.g., “ProfilePhoto”)

Data Text Components (e.g., First Name, Role)

1. Click on the text component to open the Settings panel on the right hand side
2. Confirm the column name (e.g., “first name”)
3. Update the reference if your column uses a different name (e.g., “FullName”)

Step 5 – Preview and test

1. To test and preview your list, switch to preview mode by selecting Preview in the top right hand corner
2. Tap a record in the directory Screen to confirm it opens the correct detail Screen
3. Review all dynamic content (images, text, contact info)
4. Test on various devices (mobile, tablet, desktop) to confirm responsiveness

✅ When to use this template

The Data Powered List Directory and Detail screen templates are ideal for:

• Staff directories
• Healthcare professionals
• Event speakers
• Support team listings
• Facility directories
• Location-based service providers

Want more flexibility? You can also use Data Powered List components individually to build fully customized screens.