Feature upgrade using CiviCRM’s SearchKit and Form Builder

The National Storytelling Network is a membership organization whose mission is to advance all forms of storytelling through promotion, advocacy, and education. In addition to membership offerings tailored to their constituents’ specific areas of interest, NSN also publishes a directory of members who want to publicize their storytelling practices. The “Hire a Teller” website feature allows visitors to search the CiviCRM member database using various criteria: name, location, type of storytelling, age range of target audience, etc.

The Challenge

NSN needed to modernize their outdated member directory system. Their existing solution, built in 2017, relied on a basic CiviCRM Profile embedded in WordPress. This created two major issues:

Many profile fields changed over the years, so data was not in a consistent format
Search results were incomplete due to the inconsistent use of fields

Burdensome Process for Staff to Maintain

As the directory evolved, it became difficult for NSN to keep both the search form and the update form current and in sync with each other. Eventually, they just took the update form offline and directed members to contact NSN staff when they needed to update their information; a staffer would then make the changes to the individual’s contact record from the CiviCRM back-end admin interface. These manual updates introduced friction to the process. As part of an upgrade to the “Hire a Teller” feature, NSN wanted members to be able to update their own information, including uploading a photo to be displayed in the directory.

Incomplete Search Results

Results for the original directory search could be inconsistent since applying search filters only returned records where data for those fields had been provided by the member. Many fields were not required when members filled out their profile details, so members who opted not to indicate whether they are bi- or multi-lingual, or whether they offer workshops or are willing to travel, would never show up in searches using those criteria.

The Solution

Tadpole leveraged CiviCRM’s SearchKit and Form Builder to create a more robust directory system that:

Displays comprehensive member information with a more modern presentation
Features improved filtering and sorting capabilities
Allows members to self-update their profiles, including photo uploads

Implementation using SearchKit

We started by creating a new custom query in SearchKit, selecting Contacts whose Membership Type entitled them to a directory listing and whose status was one of New, Current or Grace. We also selected Contact Addresses and Contact Websites data in our query because NSN wanted these published and searchable from the front-end. To display the member’s profile photo in the directory, the URL had to be fetched, post-query, from the member’s CiviCRM Contact Record.

Creating a Display Table for the Results

With the SearchKit query crafted and returning the proper data, the next step was to add a Display where the appearance of the results could be modified to the client’s specification. The “Settings” section of the Display provides options for the initial sort, applying odd/even row shading, borders, and pagination, and whether to allow any actions to be taken on the results (for example, downloading as a CSV file).

In the case of NSN’s directory, we wanted more concise column headings and the ability to sort by Name, City, State, and Postal Code columns. This was accomplished by setting options from within the “Columns” section of the Display.

With the Display configured, the last step was to expose the directory data on the front-end and provide filtering options for users.

Using Form Builder to create the UI

CiviCRM’s Form Builder is the mechanism used to create forms associated with a SearchKit Display. The Form Settings tab provides options for setting permissions and making the form accessible on the front-end. The tab for the Display (pictured in the screenshot) includes a canvas for the filter form layout as well as a placeholder for the Display itself. Fields are added to the form by searching or scrolling the list of available fields and dragging and dropping them onto the canvas.

Old School CiviCRM Profile for Directory Updates

We stuck with the tried-and-true CiviCRM Profile for directory updates. NSN members were already familiar with the interface; it was just a matter of simplifying the form and providing them with a link to make the updates.

Results

The new directory system has improved both the user experience and administrative efficiency for NSN. Members can now easily update their own profiles and photos while those browsing or searching the directory enjoy a modern and professional presentation with more comprehensive search capabilities.