Skip to content

Filter

A floating widget that allow user to tap to create a search filter for a stream. Usually used by dispatch stream and dispatch flow. The child of this widget should hold at least one filterable widgets. Valid filterable widgets are search-box and chooser.

Name Description
positioned see positioned below
filterKey a unique string that will be used to send message to when user applied the filter
options see options below
child a widget that will be use to create a filter result, this widget will open as a popup when the filter button is tap on

Positioned

Where to place the filter button

Name Description
top defined top location where to place the filter button
left same
right same
bottom same

Options

Name Description
icon icon name to be used for the floating button that user can tap on to open a filter popup
color the color of the icon (default to white )
size sized for the icon (default to 24px)
backgroundColor background color of the filter button
elevation double, elevation of the filter button (default to 1)

Example

    {
      "component": "filter",
      "filterKey": "dispatchFlowStream",
      "positioned": {
        "top": "20px",
        "left": "20px"
      },
      "options": {
        "icon": "fa-sliders",
        "color": "#fff",
        "size": "48px",
        "elevation": 1
      },
      "child": {
        "component": "grid",
        "direction": "column",
        "children": [
          {
            "component": "search-box",
            "options": {
              "id": "searchBox",
              "keyword": "body,name,first,last",
              "queryPrefix": "where",
              "operator": "contains"
            }
          },
          {
            "component": "chooser",
            "text": "Media type",
            "hint": "Filter the result by media type",
            "variant": "radio",
            "alignment": "right",
            "justifyContent": "space-between",
            "direction": "column",
            "options": {
              "id": "media",
              "keyword": "attachment",
              "queryPrefix": "where",
              "operator": "is",
              "items": [
                {
                  "text": "Any",
                  "value": ""
                },
                {
                  "text": "Video",
                  "value": "video"
                },
                {
                  "text": "Image",
                  "value": "image"
                }
              ]
            }
          },
          {
            "component": "chooser",
            "text": "Product category",
            "hint": "Filter the result by product categories",
            "variant": "checkbox",
            "alignment": "right",
            "justifyContent": "space-between",
            "direction": "column",
            "options": {
              "id": "product",
              "keyword": "key:product",
              "queryPrefix": "where",
              "operator": "contains",
              "items": [
                {
                  "text": "Skincare",
                  "value": "skincare"
                },
                {
                  "text": "Haircare",
                  "value": "hair"
                },
                {
                  "text": "Cream",
                  "value": "cream"
                }
              ]
            }
          },
          {
            "component": "chooser",
            "text": "Rating",
            "hint": "Star rating",
            "variant": "button-group",
            "options": {
              "id": "starRating",
              "multiSelected": true,
              "keyword": "key:rating",
              "queryPrefix": "where",
              "operator": "is",
              "items": [
                {
                  "text": "5 stars",
                  "value": "5"
                },
                {
                  "text": "4 stars",
                  "value": "4"
                },
                {
                  "text": "3 stars",
                  "value": "3"
                },
                {
                  "text": "2 stars",
                  "value": "2"
                },
                {
                  "text": "1 stars",
                  "value": "1"
                }
              ]
            }
          }
        ]
      }
    }