Skip to main content

Search

If you are using a tile widget to display details of cases and activities using a repeated template, you may want to provide users with an option to search or filter the items that are displayed.

The best way to do this is using the form search widget. This widget is compatible with the total-count and sort options described on this page. This makes it possible to replace existing search widgets that have been created using templates (as described below) 1-on-1 with a form search widget.

Search (old way via templates)​

A search widget contains a text field and a button with which you can filter a tile widget. For example:

<input type="text" 
        class="form-control grexxsearchattribute" 
        data-grexxsearchcolumn="*" 
        data-grexxsearchoperator="contains" 
        data-grexxsearchclass="i4s-zoeken-voorzieningen-wrapper" 
        data-grexxsearchonchange="submit"          
        placeholder=" I am looking for...">

<button class="btn btn-i4s" 
        data-target=".leefgebieden-select:not(.in)" 
        data-grexxsearchaction="searchcolumns" 
        data-grexxsearchclass="i4s-zoeken-voorzieningen-wrapper" 
        data-grexxsearchconditionroot="AND" 
        data-toggle="collapse">
    <i class="fa fa-search fa-1"></i>Search 
</button>

To search for multiple filter elements at once, use the following structure with data-grexxgroupsearch="true" and data-grexxsearchtype: "caseid/string/integer/etc."

<div id="type" 
    class="grexxsearchattribute" 
    data-grexxsearchcolumn="*" 
    data-grexxsearchoperator="anyin" 
    data-grexxsearchonchange="submit" 
    data-grexxsearchclass="jouw klas" 
    data-grexxgroupsearch="true"
    data-grexxsearchtype="zoek waarde type">
        <input type="checkbox" data-grexxgroupsearchid="zoek waarde" id="" name="">
        <label for=""></label>
</div>

For the iteration function you need to use checkboxes with the following attribute: data-grexxgroupsearchid

Sort​

<div class="pull-right">
    <span>Sort by:</span>
        <select class="grexxsortattribute" data-grexxsearchonchange="submit" data-grexxsearchclass="flowersearch">
                <option selected="" data-grexxsearchcolumn="1:1650:33472" data-grexxsortdirection="asc">Product (A-Z)</option>                                       
                <option data-grexxsearchcolumn="1:1650:33472" data-grexxsortdirection="desc">Product (Z-A)</option> 
                <option data-grexxsearchcolumn="1:1650:33484" data-grexxsortdirection="asc">Price (ascending)</option>
                <option data-grexxsearchcolumn="1:1650:33484" data-grexxsortdirection="desc">Prijs (descending)</option> 
                <option data-grexxsearchcolumn="1:1650:33481" data-grexxsortdirection="asc">Length (ascending)</option>
                <option data-grexxsearchcolumn="1:1650:33481" data-grexxsortdirection="desc">Length (descending)</option>
                <option data-grexxsearchcolumn="1:1650:51903" data-grexxsortdirection="desc">Stars</option>                       
        </select> 
</div>

Search: number of search results​

To display the number of and search, add the grexxsearchcount and grexxsearchcount-total classes. For example:

<span class="grexxsearchcount grexxsearchcount-total" data-grexxsearchclass="">-</span>

Search: save selection​

You can save the selection of a search or case or global. Use data-grexxsearchremember= with the value currentcase (stores the value for the case only) or global (stores the value for each page).

With this template you can search within a predefined dataset. The widget is activated by the following class: grexx-globalsearch. You need the following values:

  • data-dataset: The dataset case ID of the dataset you want to search.
  • data-text-column: The column containing the reference of caseMetaData.
  • data-group-column: The column for the casetype grouping.

For example:

<input class="grexx-globalsearch" 
        type="text" 
        placeholder="Search" 
        data-text-column="bijv.(1:167:43325:1)" 
        data-search-column="bijv.(1:167:43325:1)" 
        data-group-column="bijv.(1:167:43323:1)" 
        data-dataset="bijv.(1:167:43321)">

The default value for the data-search-column is *, which means that all columns are searched OR-wise.

This is possible with a combination of the Grexx click handler. Combine it according to the following scheme:

<!-- input example -->
<input type="text" class="form-control grexxsearchattribute grexxclickhandler-field" 
data-grexxclickhandleractivityfield="{attribute ID}" 
data-grexxclickhandleractivityfieldtag="{unique ID}" 
data-grexxsearchcolumn="*" 
data-grexxsearchoperator="contains" 
data-grexxsearchonchange="submit" 
data-grexxsearchclass="searchClass"
placeholder="Product,type,supplier" /> 

<!-- search button example -->
<span class="input-group-addon primary">
    <span class="grexxclickhandler" 
        data-grexxsearchaction="searchcolumns" 
        data-grexxsearchclass="searchClass" 
        data-grexxsearchconditionroot="AND" 
        data-grexxclickhandlertype="activity"
        data-grexxclickhandleractivitytype="optional"
        data-grexxclickhandleractivityid="{activity ID}"
        data-grexxclickhandleractivityexecution="none"
        data-grexxclickhandleractivityloader="true"
        data-grexxclickhandleractivityreload="no-reload"
        data-loading-text="Loading..."
        data-grexxclickhandleractivityfieldtag="{unique ID}"><i class="fa fa-search"></i></span>
</span>