flowblocks-ui-toolbar v1.1.11

Flowblocks - Reusable flow diagram blocks

Building flow diagrams

Flowblocks - Reusable flow diagram blocks

• General info
• Building blocks
  • TypeDefinition
  • PortTemplates
  • Block
    • Properties
    • Validations
• API
  • Flowblocks
    • getDefinition(typeName)
  • Flowblocks.Block
    • block.getConfigurable(name)
    • block.getConfigurables()
    • block.getStatus()
    • block.setConfigurable(name, value)
    • block.setConfigurables(configurablesArray)

General info

Building blocks

TypeDefinition

Specifies block attributes and behaviour

In Flowblocks each block that is created in the diagram is a block of a given type. Types allow to specify all attributes and block behaviour, they are like a template from which all blocks of given type are created.

PortTemplates

Specifies input and output port for a block

Block

Block represents a single element on a flow diagram

Each block is represented by inputs and outputs (connections with other blocks) as well as block parameters that can be configured by user.

Each block has its state (valid/invalid). Each time block is changed (either connection is added or configurable value is changed) validation is triggered and block state is updated accordingly.

Each block has a definition of parameters that can be configured on the block. The definition defines the name, type and mandatory of the configurable.

Properties

Validations

When block is updated validations are triggered. There are two types of validations for each block.

Built in validations

These include

• checking that all ports (input/output) are connected
• checking that all configurables markes as required are provided

Custom validations

Each block can have its custom validations. Configuration of the custom validation is by providing custom validation function for block:

function (blockData) {
    var errors = [];   
                
    var item = blockData.configurable('units');
                
    if(item && (isNaN(Number(item))||Number(item)<0 ||!Number.isInteger(Number(item)))){
        errors.push({ code: 'P_UNITS', cId: 'Units', msg: 'Units must be a positive integer' })
    }                     
                
    return errors;
}

Each custom validation functions takes blockData as its input and is expected to return array of errors. When there are no errors (validation successfull) then error array must be empty, when there are any validation errors then these errors must be put into the resulting error array.

API

Flowblocks

getDefinition(typeName)

Returns type definition registered with given name

var typeDefinition = flowblocks.getDefinition('myType');

Flowblocks.Block

block.getConfigurable(name)

Returns configurable value with given name

var units = block.getConfigurable('units');

block.getConfigurables()

Returns block configurables array

var configurables = block.getConfigurables();
configurables.forEach(configurable=>{
    var idName = configurable.i;
    var value = configurable.v;
})

|Kind| Parameter | Type | Description |
| :--- | :--- | :--- | :--- |
|Returns|   | `array<{i, v}>` | Array of block configurable items |

#### block.getStatus()
> Returns validation status of block
```javascript
var status = block.getStatus();
var isValid = status.valid;
var errors = status.errors;
errors.forEach(error=>{
    var errorCode  = error.code; // 'FIELD_REQUIRED',
    var errorAttributeId = error.cId;
    var errorMessage = error.msg// 'Field ['+requiredItem.id+'] is required'
})

block.setConfigurable(name, value)

Sets/updates configurable with given name. Revalidation is performed.

block.setConfigurable('units',7);

block.setConfigurables(configurablesArray)

Sets/updates configurables. Revalidation is performed.

var configurables = [
    {i: 'name1', v: '7'},{i: 'name2', v: 'something'},
]
block.setConfigurables(configurables);