Links

Web Component Factory links allow to connect any component attribute to any attribute from another component, including the variant.

When a link between two components is established, it changes the attribute of the source component, which also changes the attribute of the destination component without needing to take further action.

An unlimited number of links can be established, including multiple links for the same attribute, multiple links between two components and Cascade links: the source component attribute modifies the attribute of the destination component, which in turn is the source of a new link that modifies a third component.

Links are an extremely simple and efficient way to generate sophisticated behavior based on components created with Web Component Factory.

setLinkData(tagId, linkData)

This Web Component Factory API function allows establishing a set of relations between attributes of a source component at once, with the attributes of one or more destination components. As it is part of the API, it must be called as a method of the global variable wcf_allInstances.

Parameters:

• tagId: el id de la instancia del componente
• linkData: data for the link, as described in the following section.

Returns: true if linkData is an array and there is an instance with that id. False in any other case.

linkData

linkData is an array of objects, each containing the information for a specific link. Properties of each object conforming the array are the following:

• oriAttr: attribute of the source instance that, when modified, triggers the link
• oriValue: value of the oriAttr attribute that, when modified, triggers the link.
• destTagId: id of the destination component instance of the link (it can be the same as the original, as long as the destination attribute is different from oriAttr).
• destAttr: attribute that will receive the link
• destValue: value to be assigned to the destination attribute destAttr. It can be any value, unrelated to the value of the source attribute

For instance, the code below establishes a simple link between the variants of two components, so that when the source component takes value 1, the destination component takes value 2.

let linkData = [{oriAttr:'variant'  , oriValue:'1'  , destTagId:'comp-destino', destAttr:'variant', destValue:'2'}];
wcf_allInstances.setLinkData('comp-subpie-chat', linkData);

In this example, a component uses links to connect two switches, in a way that turning on the source turns off the destination, and vice versa, turning off the source turns on the destination.

let linkData = [{oriAttr:'estadoactivo'  , oriValue:'on'  , destTagId:'comp-de-origen', destAttr:'estadoinactivo', destValue:'off'}];
linkData[1] = {oriAttr:'estadoactivo'  , oriValue:'off'  , destTagId:'comp-de-origen', destAttr:'estadoinactivo', destValue:'on'};
wcf_allInstances.setLinkData('comp-de-origen', linkData);

Loops

Loops are a powerful tool because an array can configure the entire behavior of a component set. However, link chains where component 1 modifies component 2 and component 2 modifies component 3 can have a specification where component 3 modifies component 1, causing the chain to restart and create an infinite loop.

The WCF API detects simple loops where a component mistakenly modifies itself but does not check if link chains generate loops, so the programmer must verify, when generating dataLinks, that they do not include conditions that create infinite loops.