Directory

Directory is a list of records that visitors can browse alongside your map. Use it to show offices, stores, properties, service areas, or other information in a convenient list. Each row represents a record and can display its name, address, description, images, or other fields.

For example, an office locator can show markers on the map and a Directory of those offices beside it. Visitors can browse the list, use filters to find suitable offices, and click a row to zoom to its marker or open a popover.

Directory connects to one of the data sources added to the current Page. You can choose the source it lists, combine it with Filters, and enable pagination for longer lists. The Directory module must be installed to use this component.

Add Directory and choose its data

1. Open the App panel and select Directory.
2. Open Settings and choose Page binding. This selects which of the current Page’s data sources the list will display:
   • Objects: records such as offices, stores, properties, or WordPress posts.
   • Regions: records attached to SVG regions, such as states or service areas.
3. Use Layout to place Directory beside, above, or below the map. See Responsive Layout.
4. Check its size and visibility on Desktop, Tablet, and Mobile.

Configure the available data sources in Page settings. For example, you could add an offices Query to Objects and a states Query to Regions, then choose which one Directory should show. To use a different Collection or a WordPress source, select its Query in the Page settings first. See Queries and Page bindings.

The selected source determines which records and fields are available. Its Query supplies the default sorting and page size. Use the Page’s Edit query shortcut when you need to change that Query.

Combine Directory with Filters

Add Filters when visitors should be able to narrow down the list by category, text, or another supported search control.

Choose the same Page binding in Filters and Directory settings. For an office locator, select Objects in both components. When a visitor chooses “Regional office”, the list shows matching offices and the map shows their markers.

You can also connect both components to Regions to search or filter a list of states or service areas. Each source has its own results, so components connected to different sources work independently.

See Filters and the form editor for setup, including marking Collection fields Searchable when adding text search.

Show distance after an address search

Combine Directory with an address/distance field in Filters to help visitors find nearby places. Both components should use the same Objects source, with Location data for each place.

After a visitor enters an address and applies the distance filter, the matching results are automatically sorted by distance, with the nearest places first.

You can also display the distance from each place to the entered address in its Directory row. Open Directory → Code → Templates → directoryItem and add the distance helper, for example:

<h3>{{title}}</h3>
<p>{{distanceTo location}}</p>

Replace location if your Location field has another name. The helper shows the distance in the filter’s configured units, such as kilometers or miles, once an address search is active. {{distanceFrom location}} gives the same result.

See Search near an address for filter setup and Distance in templates for the helper details.

Add pagination

For a long list, enable pagination so visitors can browse a manageable number of records at a time.

1. Open Directory → Settings.
2. Enable Show pagination to display the navigation controls below the list.
3. In Page settings, find the source used by Directory and set Items per page, or leave it to use the Query’s page-size setting.

For example, a source with 60 offices and a page size of 10 lets visitors browse six pages. When combined with Filters, pagination follows the matching results.

The Show pagination checkbox controls whether navigation is visible. The number of records loaded per page is configured on the data source. If navigation is hidden while the source is paginated, visitors will only see the current page of results.

Choose what each row shows

With the Code editor module, open Directory → Code. The source picker groups Templates, JS, and CSS. Directory has three template sources:

• directory: the overall list.
• directoryItem: the content of each record’s row.
• categoryItem: a category heading.

Start with a field you know exists, such as {{title}}, then add the address, description, images, or other fields you need. The selected source’s Query must include those fields. See Templates for examples and formatting.

To organize the list under category headings, enable Categories in Directory settings and choose Group by. For example, group offices by office type. Category headings group the records on the current results page. Configure the record order separately in the source’s Query or Page settings.

Choose what happens on click

Open Directory → Interactions to configure row clicks. Depending on the source, you can zoom to the associated marker or Region, select a Region, show a popover, or use another supported action.

Test with Preview and Arrow. Click several rows and check that the intended record is shown on the map. For these examples, use Popover for additional content; the current Details View limitation still applies to the Show details view action.

Try the filters and pagination together, check the mobile layout, and Publish the App when the list works as intended.