Skip to content

Dispatch flow

Display a stream of dispatches as dispatch flow (full screen). Dispatches must contains media attachment which will be used to display in fullscreen. The child widget will be stacked on top of the fullscreen media attachment that the dispatch flow will rendered. Use a stack component along with positioned component to place things as needed.

Name Description
component dispatch-flow
query used use to query for dispatches
filterKey a unique string key used to identify a filter popup that we listened to that would allow user to filter the result
floatingAction a widget that appear as a floating action button (usually this is a filter/setting button)
options options for the dispatch flow
child a widget that will be used to layout on top of each dispatch flow

Options

Name Description
autoPlayVideo boolean, if true will auto play any videos
showVideoControls boolean, if true, will displayed the video controls
loop boolean, if true will play video in a loop

Example

{
  "ux": {
    "component": "dispatch-flow",
    "query": "given tracker [media]",
    "filterKey": "dispatchFlowStream",
    "options": {
      "autoPlayVideo": false,
      "showVideoControls": false
    },
    "floatingAction": {
      "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"
                }
              ]
            }
          }
        ]
      }
    },
    "child": {
      "component": "stack",
      "children": [
        {
          "component": "positioned",
          "top": "20px",
          "right": "20px",
          "child": {
            "component": "profile",
            "value": "{dispatch.authorId}",
            "options": {
              "size": "48px"
            }
          }
        },
        {
          "component": "positioned",
          "bottom": "20px",
          "left": "20px",
          "child": {
            "component": "grid",
            "direction": "column",
            "children": [
              {
                "component": "text",
                "text": "any widgets here",
                "styles": {
                  "root": {
                    "color": "#fff",
                    "padding": "0px 0px 20px 0px"
                  }
                }
              },
              {
                "component": "grid",
                "direction": "row",
                "children": [
                  {
                    "component": "dispatch-action",
                    "options": {
                      "kind": "like",
                      "dispatchId": "{dispatch.id}",
                      "color": "#fff",
                      "size": "24px"
                    }
                  },
                  {
                    "component": "dispatch-action",
                    "options": {
                      "kind": "bookmark",
                      "dispatchId": "{dispatch.id}",
                      "color": "#fff",
                      "size": "24px"
                    }
                  },
                  {
                    "component": "dispatch-action",
                    "options": {
                      "kind": "share",
                      "dispatchId": "{dispatch.id}",
                      "color": "#fff",
                      "size": "24px"
                    }
                  }
                ]
              }
            ]
          }
        }
      ]
    }
  }
}