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)
indicatorColor	color of filter indicator (default to red)
indicatorRadius	double, radius of the filter indicator (default to 5)
indicatorBorderColor	color of filter indicator border (default to white)

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"
                }
              ]
            }
          }
        ]
      }
    }