Base

Base abstract component.

This is just an abstract object that all other tiles will extended

Name	Description
component	the type of component, e.g. grid, text, etc
condition	rule configuration
span	number of grid space to consume, e.g. "span": "expanded", "span": 1
styles	see styles
classes (or classes-css)	css classes, ignored by flutter
options	A map of options for this tile, e.g. "options": { "query": "current user" }, each tiles will implement this options accordingly
onClick	action to perform when user tap/click on the button, this can be text such as close and platform will implement the action or an action object. Some valid actions are createDispatch, viewDispatch, messageEvent, etc, with each action provided proper params
onLongPress	action to perform and user perform a long press gesture (e.g. launch bottomActions)
onInit	action to execute before action is executed
onSuccess	action to execute AFTER action is executed
options.listen.id	subscribed to change event and listen for options.listen.id to change, if it happened, a redraw will occurred
child	a tile to be wrapped by this component. This is optional, some tile will have child, some will have children, some will have none

Actions

Name	Description
close	close the current screen
object	if object is a json object that has target attribute, will invoke the target (see Actions targets below)

Action targets

Name	Description
invokeScript	invoke a script with options as jsonParams
options attribute
payment	process payment

Rule configuraiton

"condition": {
  "rule": "$source.myReview.data.score undefined"
}

Action options

Options for the specific target (see examples below). To skip page refresh after an action is performed (e.g. if action target is createDispatch or editDispatch, set refreshPage option to false)

Actions that notify a particular event

We can target the action to trigger an event along with any data associated with it. This can be usedful when an action in a layout required us to refresh the screen.

{
  "ux": {
    "component": "button",
    "onClick": {
      "target": "messageEvent",
      "options": {
        "eventName": "dispatchForum",
        "category": "{data.id}"
      }
    },
    "child": {
      "component": "box",
      "elevation": 1,
      "child": {
        "component": "center",
        "child": {
          "component": "text",
          "text": "{data.name}"
        }
      }
    }
  }
}

Payment example

"onClick": {
  "target": "payment",
  "options": {
    "title": "Checkout",
    "message": {
      "confirmTitle": "Confirm your order",
      "confirmBody": "Subtotal: {values.total|numeral:$0.00}",
      "thankyou": "Payment is processed!"
    },
    "data": {
      "amount": "{values.total}",
      "ccy": "USD",
      "symbol": "$"
    },
    "save": {
      "tracker": "6a8a5db9-ab7d-4b5a-b488-38458cd21c71",
      "body": "Your order is submitted!",
      "description": "The glam daily cart checkout"
    },
    "providers": [
      {
        "providerName": "Stripe",
        "key": "pk_test_CyocRGjl6i8mTTpydniZVujq",
        "handle": "stripe-test"
      }
    ]
  }
}

Conditional action

"onClick": {
  "doA": {
    "condition": {
      "rule": "$source.myReview.data.score exists"
    },
    "onClick": {
      "target": "viewDispatch",
      "options": {
        "dispatchId": "{dispatch.id}"
      }
    }
  },
  "doB": {
    "condition": {
      "rule": "$source.myReview.data.score undefined"
    },
    "onClick": {
      "target": createDispatch",
      "options": {
        "tracker": "1234....."
      }
    }
  }
}

Create dispatch action

"onClick": {
  "target": "createDispatch",
  "options": {
    "tracker": "product-review",
    "refreshPage": false
  }
}

Examples

Subscribe to changes example

{
  "component": "button",
  "options": {
    "listen": {
      "id": "select-waypoint"
    }
  }
}