Skip to content

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
span number of grid space to consume, for platform specific, add suffix, e.g. "span-flutter": "expanded"
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
action 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
preAction action to execute before action is executed
postAction action to execute AFTER action is executed
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

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",
    "action": {
      "target": "messageEvent",
      "options": {
        "eventName": "dispatchForum",
        "category": "{data.id}"
      }
    },
    "child": {
      "component": "box",
      "elevation": 1,
      "child": {
        "component": "center",
        "child": {
          "component": "text",
          "text": "{data.name}"
        }
      }
    }
  }
}

Payment example

"action": {
  "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

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