Total.js Flow Components

This repository contains all Total.js Flow components.

Requirements:

• install Node.js platform +v10
• install Total.js framework $ npm install total4
• important Flow 6.0

Creating own components

• clone an existing component
• keep unique identificators
• each component has to contain a test file YOURCOMPONENTNAME-run.js
• keep readme 1:1 with readme in the component declaration

How to install a component to my Total.js Flow?

• choose your component from this repository
• upload componentname.js (via database icon in designer)
• don't upload readme.md and componentname-run.js

---

Component API

• IMPORTANT: exports.id can contain a-z0-9 chars only.

// {String}, IMPORTANT a component versionexports.version='0.0.1';// {String}, IMPORTANT (lower case without diacritics)exports.id='component';// {String}, optional (default: "component name")exports.title='A component name (for human)';// {String}, optional (default: "#656D78")exports.color='#656D78';// use darker colors because the font color is "white"// {Boolean}, optional (default: false)exports.click=true;// {Number}, optional (default: 0)// +v3.0.0exports.input=0;// or {Array of Colors}, input will have 2 inputs (red and blue)// +v3.0.0exports.input=['red','blue'];// {Number}, optional (default: 0)exports.output=1;// or {Array of Colors}, output will have 2 outputs (red and blue)exports.output=['red','blue'];// {String}, optional (default: "Common")exports.group='Common';// {String}, optional (default: "Unknown")exports.author='Peter Širka';// {String}, optional (default: "")// Font-Awesome icon without "fa-"exports.icon='home';// {String or Object}, optional (default: undefined)exports.status='DEFAULT STATUS TEXT';// orexports.status={text: 'DEFAULT STATUS TEXT',color: 'red'};// {String Array}// optional (default: undefined), NPM dependenciesexports.npm=['sqlagent','mqtt'];// {Object}, optional (default "undefined")// Default options for new and existing instancesexports.options={enabled: true};// Disables data cloningexports.cloning=false;// {Boolean}, optional (default: true)// +v4.0.0// hides stats under component box in designer UIexports.traffic=false;// {String}, optional (format: 'yyyy-MM-dd HH:mm')// +v4.0.0// Updated dateexports.dateupdated='2017-17-10';exports.install=function(component){// =====================// DELEGATES// =====================// A close delegate (optional)// - "callback" argument must be executed!component.close=function(callback){// This instance will be killed.// use this if some asyncronous work needs to be done// alternatively use component.on('close',...};// =====================// EVENTS// =====================component.on('click',function(){// optional// the component was clicked on in the designer// usefull for enabling/disabling some behavior or triggering some actions});component.on('data',function(message){// RAW DATA// returns {Object}message.data;// Write value to data repository// returns {Message}message.set('key','value');// Read value from data repository// returns {Object}message.get('key');// Remove value from data repository// returns {Message}message.rem('key');// {Object Array} Array of all components the message has passed through (previous components)message.tracking;// {Object} Parent component (first component which started the flow)message.parent;// {Boolean} Is completed?message.completed;// {DateTime}message.begin;// How can I modify data?message.data={newdata: true};// send this message :-)component.send(message);});component.on('<input-number>',function(message){// message as specified above in 'data' event// input 0 to event '0' and so on});component.on('options',function(new_options,old_options){// optional// options have changed in the designer// instance.options holds the new_options already});component.on('variables',function(variables){// +v3.0.0// optional// global variables have been changed// instance.variable(key)});component.on('close',function(){// optional// This instance will be killed});component.on('reinit',function(){// optional// Designer has been updated, but this instance still persists// This instance can have new connections.});component.on('signal',function(data,parent){// optional// Captured signal// @data {Object} - optional, can be "null", or "undefined"// @parent {Component} - a component which created this signal});component.on('service',function(counter){// optional// Service called each 1 minute});// =====================// METHODS// =====================component.status(message,[color]);// Sends a status to designer// @message: {String/Object} - string will be formatted as markdown and object as JSON// color: {String} - "black" (default: "gray")component.debug(message,[style]);// Sends a debug message// @message: {String/Object} - string will be formatted as markdown and object as JSON// style: {String} - "info", "warning", "error" (default: "info")component.hasConnection(index);// Calculates connections// @index: {Number}// returns {Number}varmessage=component.send([index],data);message.set('repositorykey','value');console.log(message.get('repositorykey'));// Sends data// @index: {Number} - optional, the output index (otherwise all outputs)// @data: {String/Object}// returns Message;varmessage=component.send2([index],data);if(message){// message will be sent}else{// no connections}// +v3.0.0// Alias for component.send() but with a check of connectionscomponent.set(key,value);// Writes a value to a private key-value store (data are stored on HDD)// @key {String}// @value {Object}// returns {Component}component.get(key);// Reads a value from a private key-value store (data are stored on HDD)// @key {String}// returns {Object}component.make(data);// Creates a new FlowData/Message instance.// @data {Object}// returns {Message}component.rem(key);// Removes a value from a private key-value store (data are stored on HDD)// @key {String}// returns {Component}component.variable(key);// +v3.0.0// Reads a value from global variables// @key {String}// returns {Object}component.signal([index],[data]);// Sends a signal to first connection (it emits "signal" event in target connection)// @index {Number} - optional, an output index (default: "undefined" --> all connections)// @data {Object} - optional, an additional data// returns {Component}component.click();// Performs click event.// returns {Component}component.log([a],[b],[c],[d]);// Writes some info into the log file// returns {Component}component.error(err,[parent|response|component]);// Creates error// returns {Component}component.save();// Saves current options, useful when options are changed internally. Options from settings form are saved automatically// returns {Component}component.reconfig();// If the component options changes on the server (not by recieving new options from designer) then use this to update options in designer// =====================// PROPERTIES// =====================component.custom;// {Object} - empty object for custom variables and methodscomponent.name;// {String} - readonly, a component name (USER-DEFINED)component.reference;// {String} - readonly, a component reference (USER-DEFINED)component.options;// {Object} - readonly, custom settingscomponent.state;// {Object} - readonly, latest statecomponent.connections;// {Object} - readonly, all connections};exports.uninstall=function(){// OPTIONAL};

Message

When is the message instance created?

// FIRST CASE:component.on('data',function(message){// Properties:message.id;// {Number} A message identificatormessage.index;// {Number} An input numbermessage.begin;// {Date} when it startedmessage.data;// {Anything} user defined datamessage.completed;// {Boolean} is sending completed?message.tracking;// {Array of Instances} all instances in order which they modified datamessage.parent;// {Component} a parent instance// Methods (private message repository):message.set(key,value);// Sets a key-value to message repository (doesn't modify data)message.get(key);// Gets a key-value (doesn't read data from "data")message.rem(key);// Removes a key-value (doesn't read data from "data")message.rewrite(data);// Rewrites the current with new});// SECOND CASEvarmessage=component.send('YOUR-DATA-TO-CHILD-CONNECTIONS');

Multiple inputs

// data from all inputs go to 'data' eventcomponent.on('data',function(message){// message as specified abovemessage.index;// Input number});// data from specific input go also to the corresponding event -> input 0 to event '0'component.on('0',function(message){// message as specified above});

---

Client-Side

Events

ON('open.componentname',function(component,options){// Settings will be open});ON('save.componentname',function(component,options){// Settings will be save});ON('select.componentname',function(component){// A component has been selected in designer.});ON('click.componentname',function(component){// Performed "click"});ON('add.componentname',function(component){// A component has been added.});ON('rem.componentname',function(component){// A component has been removed.});ON('apply',function(){// Designer will be sent to server and then will be applied});

Good to know

How to change count of outputs/inputs dynamically?

v3.0.0 This is possible on client-side only.

ON('save.componentname',function(component,options){component.output=5;// component.input = 3;// orcomponent.output=['green','red','blue'];// component.input = ['green', 'red', 'blue'];// or set output to defaultcomponent.output=null;// component.input = null;});

Components: jComponent +v17.0.0

Bellow jComponents can be used in Settings form:

• autocomplete (declared body)
• binder (declared in body)
• calendar (declared in body)
• checkbox
• checkboxlist
• codemirror
• colorpicker (declared in body)
• confirm (declared in body)
• contextmenu (declared in body)
• datepicker (declared in body)
• directory
• dragdropfiles
• dropdown
• dropdowncheckbox
• error
• exec (declared in body)
• filereader
• form
• importer
• input
• keyvalue
• loading
• menu (declared in body)
• timepicker (declared in body)
• message (declared in body)
• multioptions
• nosqlcounter
• repeater
• repeater-group
• shorcuts (declared in body)
• search
• selectbox
• textbox
• textboxlist
• validation
• visible

References:

• Componentator.com
• jComponents on Github

---

Support

Total.js Support is applied for components which are from developers: Peter Širka and Martin Smola. Do you want own components? Contact us.

Contact

• contact form https://www.totaljs.com/contact/
• info@totaljs.com