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-z 0-9 chars only.

// {String}, IMPORTANT a component version
exports.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.0
exports.input = 0;

// or {Array of Colors}, input will have 2 inputs (red and blue)
// +v3.0.0
exports.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';
// or
exports.status = { text: 'DEFAULT STATUS TEXT', color: 'red' };

// {String Array}
// optional (default: undefined), NPM dependencies
exports.npm = ['sqlagent', 'mqtt'];

// {Object}, optional (default "undefined")
// Default options for new and existing instances
exports.options = { enabled: true };

// Disables data cloning
exports.cloning = false;

// {Boolean}, optional (default: true)
// +v4.0.0
// hides stats under component box in designer UI
exports.traffic = false;

// {String}, optional (format: 'yyyy-MM-dd HH:mm')
// +v4.0.0
// Updated date
exports.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}

	var message = 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;

	var message = 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 connections

	component.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 methods

	component.name;
	// {String} - readonly, a component name (USER-DEFINED)

	component.reference;
	// {String} - readonly, a component reference (USER-DEFINED)

	component.options;
	// {Object} - readonly, custom settings

	component.state;
	// {Object} - readonly, latest state

	component.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 identificator
	message.index;            // {Number} An input number
	message.begin;            // {Date} when it started
	message.data;             // {Anything} user defined data
	message.completed;        // {Boolean} is sending completed?
	message.tracking;         // {Array of Instances} all instances in order which they modified data
	message.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 CASE
var message = component.send('YOUR-DATA-TO-CHILD-CONNECTIONS');

Multiple inputs

// data from all inputs go to 'data' event
component.on('data', function(message) {
	// message as specified above
	message.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;

	// or
	component.output = ['green', 'red', 'blue'];
	// component.input = ['green', 'red', 'blue'];

	// or set output to default
	component.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/
• [email protected]