Developing New Uber Filter Widgets

Uber Filter Widget blocks all follow a common pattern and the code is commented in detail, so with a bit PHP and JavaScript knowledge it is not that difficult to develop new Uber Filter Widget blocks.

Follow the guidance below and I can offer some tips through the addon support. If you need detailed help, I can quote for developing a custom filter widget for you.

The first thing to decide is whether you need to develop a new template for an existing block, or a completely new block.

New block templates

New block templates can be created in the usual concrete5 way, placing the template in your package or in the root /blocks folder.

Reasons for new block templates:

  • You want to keeping the form controls and behaviour, but style the widget differently. Create a template and edit the classes and/or view.css. For example, a horizontal list of checkboxes or a custom loading overlay.
  • You want to make minor changes to the behaviour and can do so by adapting the javascript in the block view. For example, changing a multi-select into a chosen or select2. 

Package elements for loading Chosen or Select2 from a block view are already included with Uber Filter should you need to use them, or follow a similar pattern for loading other custom view assets.

New Uber FIlter Widget Blocks

New Uber Filter Widget blocks generally extend their controllers from the text block controller. The text block declares many utility classes and already handles validation and save logic for most common edit elements. 

Some blocks extend from the other existing widgets, which in turn extend the text block. Key blocks here are the checkbox widgets.

Reasons for new blocks:

  • You have additional or different block data items and consequently need sections in the edit dialog to work with the block data. For example, a map with clickable regions.
  • You are creating a completely new type of widget. For example, the sticky widget or the loading overlay.

In each case, you should build as much of your edit dialog as possible by assembling the dialog elements already provided. These dialog elements are self contained with the PHP, HTML and JavaScript for part of the edit form and are already validated and saved by the controller.

I gave the map with clickable regions as an example because that is a custom filter widget I have already developed for a UK user of Uber Filter. My reason for a new widget rather than a custom view was the map required css and JavaScript assets, some of which were generated on-the-fly from PHP, all a bit more complicated than could be conveniently constructed in a custom view.

I started by copying the checkbox widget. The new block controller built and loaded the necessary assets using data constructed in a series of dashboard pages. The edit dialog connected it to a region field in the index data. In the view the list of checkboxes was hidden and some JavaScript added to draw the SVG map of UK regions. When a map region is clicked, the corresponding checkbox is toggled and a change event triggered. The JavaScript also contains a modified filter comparison callback function to handle inter-region dependencies.

Please see the Filter Widget Documentation for details of each of the Uber Filter blocks.

Last updated: over a year ago