Fundraising/Internal-facing/CiviCRM/Create Custom Formbuilder pages to monitor tables in other WMFF Databases

Having created the custom extension and entity on CiviCRM, the next step to make all that work useful would be to create a page to view the data in the table. CiviCRM allows the combination of Form Builder (Afform) and Searchkit searches to build layouts and forms. Hence, this task is split into two parts, which are:

1. Generating a SearchKit table to query the Database.
2. Creating a FormBuilder page

Generating a SearchKit table to query the Database

Figure 1:Locating SearchKit under the search Options on CiviCRM UI

Figure 2: Locating Table button to customize SearchKit table

Figure 3: CiviCRM SearchKit Advance Table Settings

1. On the top left Navigation bar, select Search and in the dropdown, click on SearchKit. (View image in Figure 1 for guidance)
2. Click on the New Search button to the left of the page.
3. In the Search for dropdown, select the name of the entity this search is for.
4. Add any query conditions/parameters, if any.
5. Add the desired table columns using the Add button on the right side of the table at the bottom. The Add button shows a dropdown of the entity properties.
6. To customise the table further, click on the +Add button on the left side of the page. Note that you'd have to add all the desired columns before navigating to the customisation page.
7. Select Table, this should show more options to add features to the SearchKit table. (View image in Figure 2 for guidance)
8. The Enable Actions checkbox determines if the Actions dropdown shows on the page. This is useful if there is an intention to enable batch actions on the result table, for example batch delete. (View image in Figure 3 for guidance)
9. Selecting either AUTO-RUN or Search button determines if the result list is generated as soon as the page is rendered or if the result is generated on the click of a search button. Default is AUTO-RUN.
10. Selecting the Add New Button would give the user the ability to create a new record on this entity by clicking on Add New.
11. The Table Style and Row Style options set additional styles to the table.
12. The Use Pager determines the pagination features for the result table.
13. Loading placeholders simply determines the number of rows that shows when the table is been loaded.
14. The columns +ADD button adds action buttons for each record in each row.
15. The Preview button shows the state of the table after all the customisations.
16. To save the search table, enter a name for this table in the input on the top left of the page that says "Untitled Search"
17. Click on the Save button located on the top right.

Creating a FormBuilder page

1. On the top right of the Navigation bar, select Administer -> Customize Data and Screens -> Form Builder.
2. Select Search Forms to create a search based form.
3. Click on the New Search Form Button and search for the title of the Searchkit search created earlier.
4. On the loaded page, there are two tabs: Form Settings and a tab with the name of the SearchKit table. The Form Settings is loaded initially.
5. Give the form a Title for reference.
6. Set the form's description, optional.
7. Set the required permission to use this form, the default is CiviCRM: access CIVICRM backend and API - which simply means anyone with complete access to CiviCRM would have access to this form.
8. The page route sets the route to the form. It's usually of the pattern "civicrm/*"
9. The Add to Navigation Menu checkbox adds a shortcut to the form in the navigation bar.
10. Click on Save to save the form settings. On save, a link with text "View Page" is rendered beside the Save (now Saved) button, click on the link to preview the page.

Adding Filters to the FormBuilder page

1. On the Form Builder page, select the Search Form tab and select the desired form from the list.
2. On the loaded page, there are two tabs: Form Settings and a tab with the name of the SearchKit table. Select the tab that corresponds with the name of the SearchKit table.
3. This tab has multiple filter options.
4. The Add Filter dropdown allows the setting of a Fixed value filter or a URL variable filter that would be passed in through the browser.
5. The URL variable' filter enables filtering by URL param. For example, if the id property is set as a URL variable filter where the page route is 'civicrm/damaged', a user can pass in a url param with the id property set to filter the search result like this: 'civicrm/damaged?reset=1&force=1&id=1' note that the 'reset=1&force=1 is mandatory. More information can be found on the official documentation
6. The Fixed value filter enables a default filter value to be added on the form, so the search result is always loaded with this filter value.
7. The Entity fields allows filtering on the UI using any of the entity table columns.
8. To filter using an entity field, pick up the field from the filter list and drop on the desired position in the preview page.
9. Click on the tiny gear icon on the extreme right of the entity field to specify the input type, required, and other input properties.
10. To modify the label of the field simply click on the label text.
11. Click on save and preview the page. If the Search is set to AUTO-RUN, the search result would be filtered as keys are been entered into the filter field.

More about the FormBuilder form configuration page

• Multiple tables can be added to a form builder page, simply click on the + button on the tabs list and select the desired table name. Filters can also be added to the table using the steps above.
• Tables can be deleted by clicking the tiny gear icon on the top right of the table container and selecting Remove Display.
• Additional information on FormBuilder can be found on the official documentation.
• Additional information on SearchKit can be found on the official documentation.

Related Topics

• Exporting FormBuilder Pages into an extension
• Exporting SearchKit Search into an extension
• Creating extensions in Civicrm to manage tables in other WMFF Databases