If you only have 9 Service Providers, you do not really need a custom search engine. But if you will eventually have more than one thousand Service Providers grouped into 9 cities – each with more than 20 categories – then a search engine becomes essential. For example, imagine there are more than 200 Service Providers in Bellingham. If your Member can search for a particular category, this would narrow their list down to only 10 or 20 service providers. The member can then View the Details for these providers and choose 2 or 3 as final candidates to contact directly for more information.
Add a Fabrik Search Engine to your Service Provider List
To add a Fabrik Search Engine to the top of your list, go to the Service Provider Info List Details Screen and click on the Filters Tab:
Filters are fields that are used by the search engine to help your members find what they are looking for by filtering the list's data based on the data values. The filter trigger determines when the filter is applied. Leave it set for on change. Leave the location at Above.
Benefits of the Fabrik Advanced Search Option
Fabrik offers at least four kinds of search engines. The two shown on the List Details Filters Tab are called Advanced Search and Search All. The Search All engine works well in the Joomla administrator Control Panel View Data screen. But Search All does not work on our front end List page. This is likely because Search All has a conflict with some setting on our Helix template.
Thankfully, the Fabrik Advanced Search option displays well and works well on the front end of our website. Advanced Search also has a setting in each element in the List View Settings screen Filters tab to precisely define what elements appear in the Advanced Search options. So we will use the Advanced Search option on the front of our website and Search All on the back end of our website.
There are also several other types of search options mentioned in Fabrik Tutorials and on the Fabrik forum. These include using a Fabrik Search plugin to access the Joomla standard search function or the Joomla Smart Search function. Neither of these worked with my template and the current version of Fabrik. This may change in the future. Finally, there is also an option called Related Data. We will look at this option later. But for now, we will just stick with the Fabrik Advanced Search option. To turn on Advanced Search, change the setting to Yes. Then click Save and Close. Then view the Advanced Search tool as a logged in Member.
Click on Advanced Search to open the tool:
Click on Where Please Select to see a mountain of confusing options:
The only options we want members so search by are the Service Service Provider Category and City. Click Service Category. Then for Value, use the drop down to click Carpentry.
Then click Apply.
Our Member can now see that the list has one carpenter each in Bellingham and Ferndale. What we have learned from this exercise is that we should add instructions at the top of the list to explain to members how to use the Advanced Search tool.
The second lesson is that we need to limit the number of elements shown in the Advanced Search tool. We will do that next.
Limit the Elements Shown in the Advanced Search Tool
To limit which fields or elements are shown in Advanced Search, go to the Elements screen. Set the form filter for Service Provider. Then one by one, select each element and go to the List View Settings screen Filters tab. Then click on the Filters tab. Then change Include in Advanced Search setting from Yes to No for every element except Service Provider Category and Provider City.
Repeat to exclude all elements on the Job Provider form except Job Provider Category and Job Provider City.
Then go to your website front end and click on your List page. Then click Advanced Search to see the result.
Now that we have simplified the Advanced Search filter, let’s create some instructions on how to use it.
Improve the Front End Service Provider List Page
We need to fix some problems with our Service Provider page. First, the title of the page is Provider Info which is the same as the title of our Provider Info Signup form page. But this is a List of Service Providers. We need to leave the list name as provider_info. But we can change the Label of the list to Service Provider List. Click on the Service Provider list to edit it. Then change the label to Service Provider List. Then click Save. This will change the label of the list. But it will not change the name of the database.
We also need to add some instructions on how to use the Advanced Search function. To do this, we begin by getting a screen shot of the Advanced Search tool in action:
Copy and paste the above image into a Libre Writer document. Then right click on the image and click on 150 DPI resolution.
Then click OK. This will reduce the file size of the image to under 100 KB which means it is suitable to add to our website. Then right click on the image again and save it to your website images folder with the file name advanced-search-image.
Repeat these steps to add an image of a search by category and by city:
Then go to the back end of your website and open the Content, Media screen. Then click Upload, Browse. Then navigate to your File Manager website images folder.
Select the advanced-search-image and search-with-city files and click OK. Then click Start Upload. Then click Components, Fabrik, Lists and click on Service Provider List open your list to the Details screen. Then in the Introduction box, copy paste the following:
This is a list of all of our Demo Service Providers. Above this list is a search tool to allow you to search this list by Provider Categories as well as by City. Just click on Advanced Search to filter open this tool:
advanced-search-image
In the element box, select the Service Provider Category. Then in the value box, select the category you are interested in. The only categories that will show are categories for which there is at least one provider.
To also search by City, click ADD. Then filter for City and type in the name of the City.
search-with-city
Then click Apply. This will show the number of providers for this category in your city. Click on a City to see the names of providers in that city. Then click on View for any provider to see the contact details and additional information for that provider!
Place your cursor in the Introduction workspace. Then right click and click Paste. This will bring up a popup. Select and Copy the above text. Then click Control plus V to paste the above text into the popup screen:
Then click Insert to insert the text into the workspace:
Then select all of the text and change the font family to Arial and the Font Size to 14. Then delete the line advanced-search-image. Then click on the Image Icon in the Editor second row on the right. Select the advanced-search-image. Then click Insert:
Next delete the search-with-city placeholder and click on the Image Icon in the Editor second row on the right. Select the search-with-city mage. Then click Insert:
Then click Save and Close.
Then view the Service Provider List page at the front of our website:
The Provider List is now much easier for Members to search.
Add Validation Rules to Make Some Elements on our Service Provider Required
We have nearly completed all three of our forms. But unfortunately, by default, none of our Service or Job Provider field elements are required. Thus, Providers can submit forms with incomplete data. The way to make a Fabrik element required is to add a validation rule for the element. We have previously added Validation Rules to our Member Registration Form. Here, we will add Validation rules to a few of the fields on our Service Provider Form.
Set Required Fields for our Service Provider Form
We will next set the required fields for our Service Provider Form. Click Elements and change the filter to the Service Provider form. The 4 required elements are Service Provider City, Service Provider Name, Service Provider Email and Service Category
Click Service Provider City to edit it. Click Validations Add. For Action, select Not Empty. For ON, change to NEW. For Error Message, copy paste: Please enter a City. Then click Save and Close.
Click the Service Provider Name element. Click Validations Add. For Action, select Not Empty. For Error Message, copy paste: Please enter a Provider Name. Then click Save and Close.
Click Service Provider Email. Click Validations Add. For Action, select IS EMAIL. For Error Message, copy paste: Please enter a valid email address. Then click Save and Close.
Click Service Category to edit it. Click Validations Add. For Action, select Not Empty. For Error Message, copy paste: Please select at least one Category. Then click Save and Close.
Note: There appears to be a bug with some Database Join elements. A message might appear that it wants to Update field structure from VARCHAR(255) to INT(11). Click Cancel. We do not want to change this element to integers. Clicking Cancel will revert the element name and plug-in type to the element's setting previous to being edited. But the validation will remain. Then click Save and Close. Then click Cancel again. This will return you to the Elements screen.
Set Required Fields for our Job Provider Form
The Job Provider required elements are identical to the Service Provider required elements except there is no Date Paid element on the Job Provider Info form. So just repeat the above steps.
Activate AJAX for the Service Provider and Job Provider Forms
To make our validation rules work properly, we need to edit the Service Provider Form. Click on it to edit it. Then click on the Form Processing tab. Change Ajax Validation from No to Yes. Then click Save and Close. Repeat on the Job Provider Form. This change will then run the validation rules as the Member is typing to check that they are entering a correct email address.
Hide the Group by, Add and CSV buttons
Click on the Service Provider List to edit it. Then click on the Navigation tab. Increase the number of rows per page from 10 to 20. Also change Ajaxify from No to Yes. This will eliminate the need for users to refresh the page after filtering. Also change the Show Add button from Yes to No.
Then click Save.
We still need to hide Group by and CSV (which appears when logged in as a Registered Member). Click the Data, Group by tab. Change the Access for who can see the Group by button from Public to Member Coordinator.
Then click the Publishing CSV tab and change the Front End CSV export group from Registered to Member Coordinator. Then click Save and Close and view the list. Sadly, the CSV export icon is still displayed to any registered user. We will therefore need to add this CSS to our custom dot css file to hide it:
.dropdown-toggle.groupBy.btn {display: none;}
We will also add this to increase the font size of Advanced Search:
.advanced-search-link {font-size:24px; color: #111177;}
Here is the result:
Test all three forms
Open each form and try to submit the form with incomplete data for the required elements to see if the required elements block the form from completing and issue the proper Error Messages.
What’s Next?
In the next article, we will turn review how to create a Content Type which will allow us to add any Lists and Forms we make to another website.