Layout and Widgets

Layout

The layout of your folder has to follow a specific structure.

<category>
├───activity
│   └───<activity name>
└───connector
│   └───<connector name>
└───trigger
|    └───<trigger name>
└───contribution.json

The category you want your activities to be in should be the name of your top level folder. Your activities will be in separate folders under the activity folder and your connectors will be subfolders of the connector folder and the triggers will be under the trigger folder.

Please note that names of activities, triggers and connectors should be in lowercase

So an example, where we create a AWSSQS category, with activity,trigger and a connector called AWSSQS would have a complete structure like below

AWSSQS
├───activity
│   └───sqssendmessage
│       ├───descriptor.json
│       |───activity.go
│       |───activity_test.go
│       |───activity.ts
│       |───activity.module.ts
│       └───sqssendmessage.png
│───connector
│    └───sqs
│        ├───descriptor.json
│        ├───connection.go
│        |───connector.ts
│        |───connector.module.ts
│        └───sqs.png
│        └───connector
│───trigger
│    └───sqsreceivemessage
│        ├───descriptor.json
│        ├───trigger.go
│        ├───metadata.go
│        |───trigger.ts
│        |───trigger.module.ts
│        └───sqsreceivemessage.png
│───contribution.json

The code in this section is available on GitHub!

Note

Please note here and be more careful about below items

  • All category name in trigger, activity or connector must match
  • All ref in decriptor.json must have the same prefix before category name: such as: github.com/TIBCOSoftware/tci-flogo/samples/extensions/AWSSQS
  • For local Go code testing purpose, please create ref dir under your ${GOPATH}/src/${ref}, such as: github.com/TIBCOSoftware/tci-flogo/samples/extensions/AWSSQS/activity/sqssendmessage/

##Supporting types and widgets

Types

Each display element has a type associated with it. The below table displays the types you can use and the Go type column shows how that translates into Go data types you can use in your activity.go file

Type Go type Description
string string A string
integer int64 A 64-bit integer
boolean bool A boolean
number float64 A 64-bit float
array []interface A JSON array value like '[{"a":"1", "b":"2"},{"a":"2", "b":"3"},{"a":"4", "b":"5"}]' can be set to array field.
object map[string]interface{} A JSON object
connection connection Flogo Connection Object

Special types

There are a few special types that you can use in your activity.json and connector.json files to enhance the user experience even further. These special types drive the user interface and are “translated” to the type you selected for it during runtime.

UI supported widgets

Widget Description Model Configuration Example(s)
Text Render as text box field x {“name”:“host”,“type”:“string”}
Integer Render as number field x {“name”:“host”,“type”:“integer”}
Dropdown Render field as a dropdown list.The field type must be a string. {“display”: {“name”: ,“description”:,“type”: “dropdown”},“allowed”:[“one or more items”]} {“name”:“method”,“type”:“string”,“required”:true,“display”:{“name”:“Method”,“description”:“The REST method used for the requests”,“type”:“dropdown”,“selection”:“single”},“allowed”:[“GET”,“POST”,“PUT”,“DELETE”],“value”:“GET”}
File Selector Render field as a file selector.The field type must be a string. {“display”: {“name”: ,“description”:,“type”: “fileselector”, “fileExtensions”:[]} {“name”: “certificate”,“type”: “string”,“required”: true,“display”: {“name”: “Server Certificate”,“description”: “Self-signed PEM certificate for secure connection”,“type”: “fileselector”,“selection”: “single”,“fileExtensions”: [".pem",".cert",".cer",".crt"]}}
Table Render field as a table.The field type must be array or param or object. {“display”: {“name”: ,“description”:,“type”: “table”, “schema”:, “value”:} {“name”: “headers”,“type”: “param”,“display”: {“name”: “Request Headers”,“description”: “The headers you want to send”,“type”: “params”,“schema”: “{"type":"array","items":{"type":"object","properties":{"parameterName":{"type":"string"},"type":{"type":{"enum":["string","number","boolean"]}},"repeating":{"type":{"enum":["true","false"]}},"required":{"type":{"enum":["true","false"]}}}}}”,“mappable”: true},“value”: “[{"parameterName":"Accept","type":"string","repeating":"false","required":"false","visible":false},{"parameterName":"Accept-Charset","type":"string","repeating":"false","required":"false","visible":false},{"parameterName":"Accept-Encoding","type":"string","repeating":"false","required":"false","visible":false},{"parameterName":"Content-Type","type":"string","repeating":"false","required":"false","visible":false},{"parameterName":"Content-Length","type":"string","repeating":"false","required":"false","visible":false},{"parameterName":"Connection","type":"string","repeating":"false","required":"false","visible":false},{"parameterName":"Cookie","type":"string","repeating":"false","required":"false","visible":false},{"parameterName":"Pragma","type":"string","repeating":"false","required":"false","visible":false}]"}
Password Render field as a password type.The field type must be a string. {“display”: {“name”: ,“description”:,“type”: “password”,} {“name”: “password”,“type”: “string”,“required”: true,“display”: {“name”: “Password”,“description”: “Password for xxxxx”,“type”: “password”}}
Text Editor Render field as a text editor with given syntax.The field type must be object {“display”: {“name”: ,“description”:,“type”: “texteditor”, “syntax”:“json”} {“name”: “body”,“type”: “object”,“required”: true,“display”: {“name”: “Schema”,“description”: “An example JSON data or schema”,“type”: “texteditor”,“syntax”: “json”}}
Checkbox Render field as a checkbox field.The field type must be string.Update: The field value will be a stringified array, with each value enclosed by escaped double-quotes. {“display”: {“name”: ,“description”:,“type”: “checkbox”} {“name”: “ssl”,“type”: “boolean”,“required”: true,“display”: {“name”: “Enable SSL”,“description”: “Enable SSL xxxxxxx”,}}

Note All fields value can be overwritten or set through TypeScript UI contribution code base on UI logic.

For each field it has display section to set visibility/Readability etc

AttributeName Description Model Configuration Example(s)
visibility Setting visibility in UI “display”: {    “visible”: false} {“name”:“method”,“type”:“string”,“required”:true,“display”:{   “visible”:false}, “value”:“GET”}
Readonly Make field readonly in UI “display”: {    “readonly”: true} {“name”:“method”,“type”:“string”,“required”:true,“display”:{   “readonly”:true}, “value”:“GET”}
Exportable Make field exportable in UI. This flag is to determine if this field can be exported to flogo.json and app.json. Mainly the fields which are also not visible i.e. Access Tokens. “display”: {    “exportable”: true} {“name”:“method”,“type”:“string”,“required”:true,“display”:{   “exportable”:true}, “value”:“GET”}
Encryptable Make field encrypt able in UI. This flag is to determine if a field needs to be encrypted. Mostly fields which are of type password are encrypted by default, however invisible fields which are text fields holding access token data needs to be protected also. “display”: {    “encryptable”: true} {“name”:“method”,“type”:“string”,“required”:true,“display”:{   “encryptable”:true}, “value”:“GET”}

Note All field’s visibility, readability can be set through UI contribution TypeScript code.