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. Niether 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 Avanced 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 Service Provider City and Service Provider Category. Click Service Category. Then for Value, click Carpentry.
Then click Apply.
Our Member can now see that the list has one carpenter each in Bellingham, Ferndale and Lynden. 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 Info. 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 Name, Service Provider City and Service Provider Category.
Repeat to exclude all elements on the Job Provider form except Provider Name, City and Category.
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 Provider Info 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 Proviers. 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 Provider Info list to edit it. Then change the label to Service Provider List. Then click Save. This will change the name of the list on the front end and back end. 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. 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 file 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. Then click Apply. This will show the number of providers for this category in each 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 dellete 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:
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 Required
We have nearly completed all three of our forms. But unfortunately, by default, none of our field elements are required. Thus, members can submit forms with incomplete data. The way to make a Fabrik element required is to add a validation rule for the element. We will add validation rules to some elements on all three of our forms.
Install More Validation Plugins
While Fabrik comes with most of the validation plugins we need, we should install two more validation plugins called User Exists and Email Exists. These will check when a person registers to make sure that the username and email address do not already exist in our Network. Both plugins can be downloaded from the Fabrikar.com website. Then click Extensions, Install to install each of them. Then go to Extensions, Plugins, and type Fabrik in the Search box. Then enable both extensions.
Add Validation Rules to our Member Registration Form
We will start with the Registration form. Click Elements and filter for the Registration form. There are 16 elements on this form. The 6 elements we need to make required are: Member First Name, Member Last Name, Member Username, Member Email, Member Password, and Accept Rules.
Click on Member First Name to edit it. Then click on the Validations screen in the left column. Then click ADD.
For the Action, select Not Empty. Then type this error message to display if the element is not completed: Please enter your first name. Then click Save and Close.
Then select the Member Last Name element and repeat these steps. For error message, copy paste: Please enter your last name. Then click Save and Close.
Then select the Member Username. For action, select Not Empty. For error message, copy paste: Please enter a Username.
Then click Add to add a second rule. Assuming you installed and enabled the User Exists Validation plugin, for action, select the User Exists option. Change ON from BOTH to NEW. This validation rule checks the users table and makes sure that each NEW user has a unique username. For error message, copy paste: Sorry, this username is already taken.
Then click Save and Close. Then select Member Email. For Action, select Is Email. For error message, copy paste: Please enter a valid email address. The email validation also checks to make sure the box is not empty. Click Save. Then click Add to add a second validation rule. Assuming you have installed and enabled the email exists plugin, select email exists. Change ON from BOTH to NEW. For Errror message, copy and paste: Sorry, this email is already being used. Then click Save and Close.
Click on Member City to edit it. Then click on the Validations screen in the left column. Then click ADD. For the Action, select Not Empty. Then type this error message to display if the element is not completed: Please enter your member city. Click Save and New.
Click on Member Zip Code to edit it. Then click on the Validations screen in the left column. Then click ADD. For the Action, select Not Empty. Then type this error message to display if the element is not completed: Please enter your member zip code. Click Save and New.
Then click on the Member Password element to edit it. In the Details screen, change Joomla Password Validation from No to Yes. Then click Save and Close. Then to adjust the Joomla Password validation rules, in the Joomla menu, click Users, Manage, Options. Then click on the Password Options tab. Here are the default values.
Increase the minimum length to 6, the minimum upper case letters to one and the minimum lower case letters to 1 and the minimum integers to 1. Then click Save and Close.
Then go back to Components, Fabrik, Elements and click on the Accept Rules element to edit it. Then click Validations Add. For Action, select Not Empty. For Error Message, copy paste: To join our group, please check the box to confirm that you Accept our Rules. Then click Save and Close.
Activate AJAX for this Form and List
To make our validation rules work properly, we need to edit the Member Registration 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. This change will then run the validation rules as the Member is typing to check that they are entering a unique User Name and a correct email address.
Set Required Fields for our Service Provider Info Form
We will next set the required fields for our Service Provider Info Form. Click Elements and change the filter to the Service Provider Info form. The 5 required elements are Service Provider Name, Service Provider Email, Service Category, and Service Provider Date Paid.
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 select a City. Then click Save and Close.
There appears to be a bug with some Database Join elements. A message appears 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.
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.
Click Service Provider Date Paid. Click Validations Add. For Action, select Not Empty. For Error Message, copy paste: Please enter your Service Provider Date Paid. Then click Save and Close.
Set Required Fields for our Job Provider Info 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.
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 our provider VIEW Details pages into customizable Profile pages.