There are many ways you can construct a search. For something like this, I might do a search feature, as well as a filter system. It actually begins at the creation of a new listing, where we’re going to create the necessary data for both a search and filters. So, in your “create a listing group” like my example popup, we’re going to create the fields we need:
You’ll note that I actually changed the field in data type “listing” for the images. In my earlier example, I used “image” as the field type. I wasn’t thinking ahead to uploading multiple files at once. It should actually be of type “file” and be a list of files. That’s because we’re going to use the multifile uploader element to allow the user to upload multiple images into the listing. This requires a slight tweak to the elements of your repeating groups that I showed you earlier. Sorry for this. I just wasn’t thinking about the listing creation when I did the example. Moving on.
When your agent creates his/her listing, here is the workflow:
You’ll note that we’re using the “extract” function to fill the fields for City, State, and Zip. This will be used in the filters for the search.
Now, in the editor, we’re going to do some work to make our listings more informative, and to set up a search box. First, direct your attention to the Listing repeating group. You will see that we’ve added a map element, to show where the listing is located. We’ve also broken it up into two different group. One for the primary information, and one for listing details. This isn’t necessary. It’s just a cool function, and you’ll see the purpose of it for the end user.
The purpose of the split has to do with the little arrow icon. This can also be a button, or whatever else. It’s a toggle switch for “View More”. Here is how our list of listings looks, first.
And when the user clicks the toggle, the lower group slides into view, revealing more details.
Clicking the toggle again will hide the details, and collapse the group. This is done by selecting the “collapse this elements height when hidden” option in the group properties.
And the workflow is just toggle an element.
We then set a condition on the icon, so that when the hidden group is visible, it becomes an up arrow, prompting the user to hide the group.
Next, we’re adding a popup to display thumbnail images as a larger image. Purely a user experience thing. We’re going to make the popup’s data type “file” since we’re displaying the image file in the group. The only other thing in the group is a large image element, with a data source of “Parent group’s file”.
This way, when one of the thumbnails is clicked in this group, you get a big image popup.
Here is the workflow on click:
And the result for the user:
Now, the search group. There are a lot of ways to build a search. You can use the search box element, but I find it kind of limiting as it only searches one field. What if the user wants to search for a price, or “ranch home” or “two story in Michigan”? What I suggest is just using an input, and a Group Focus element. We’re also going to add filters, so our user can narrow down the search by things like price, city, state, zip, or availability.
First, let’s create our group focus, and set its “reference element” to be the search input box. We’re going to add a repeating group into group focus, and set its data source as “do a search for listings” and add constraint “any field contains Input search’s value”. This will display listings, in which any data field matches the search, and they will show in the repeating group of the search results. Don’t forget to add some text elements, or whatever, to display the data from the listings.
Next, we need a workflow to show the search results when data is entered into the search box. Set the workflow off of “when search box’s value is changed” and the action will be “show group focus”
The result is a dropdown that shows the search results
But, now we need to be able to act on the results, so let’s create a workflow so that when the user clicks the title of the listing in the results, it shows the data in list of Listings". You can do this from any element. I just used the title as the trigger. All we’re going to do it display a list in the repeating group of listings, and constrain it to show only listings in which “any field contains search input’s value”.
The result:
Next, we’re going to create filters that use the data from the create a listing step.
All of them are pretty self-explanatory. Just make sure you set the field type to match the field type of your data. So, address input should be an address, city is text, state is text, zip is text (numbers only). You can also limit these to only allow 2 characters for state, and 5 for zip. The only one we’re doing something special with is the “price” dropdown. We’re going to make it show only prices of available listings, rather than a range. Just a personal choice.
To do this, we’re going to have it group our listings by price.
Next, we’ll create a workflow for the “apply filters” button. This will display a list in the listings repeating group that matches the filter criteria.
And the result:
Finally, we’re going to add a “new search” button that resets the search and erases the fields.
This just displays the original search for listings in the repeating group, and resets the “search group” Here is the workflow:
That should cover it, and I hope this helps you keep moving!
