Components

SWAC is component based. Every component has a set of tasks it is intended for. All components share a set of usefull options and functions. There are two main kinds of components: views and algorithms.
Components are bound to data, they work with the data thats given to them. A component can load data at initialisation and has methods for adding and removeing data.

Views

Views representing data and / or allowing user interaction with the data. You can build up web applications useing components without the need of writing javascript code.
Views are created trough Requestor Elements. Those contain a swa attribute that defines the view component.


<div id="components_example1" swa="Present FROM ../../data/concepts/components_example1.json"></div>
            
Will create an presentation of example data.

Useing view functions from custom code

Most functions of views are public accessable and useable from custom code. See details

Algorithms

Algorithms purpose is to serve complex algorithms as standalone accessable parts, that come without predefined userinterface and can be integrated into views or custom code.
Algorithms can share data with views, so that an algorithmical operation on the data is instantly shown to the user.


// Load an algorithm
window.swac.loadAlgorithm('AlgorithmsName','IdYouWantForTheAlgorithmInstance').then(function (requestor) {
    // Get instantiated algorithm object
    let cs = requestor.swac_comp;
    console.log(cs);
    // Here the Algorithm can be used
});
            

Component options

There are many more options available at the components. On each components documentation page all options are listed.

OptionExplanation

Setting options by global object

You just have to put the options into an global javascript object, that is named after the schema YOUR_TAG_ID_options.
You can see a hint on javascript console that says what options are available and where you can put your options.
The available options and a sample of useage you can find with the SWAC Debugger. Simply click on the debugger button and scrol down.

See working example here

Setting options from data

Another way is to use data as options. Simply add the datasource name after the OPTIONS keyword in swa statement. It works the same way as getting data for your component.
In this example we use a javascript file as datasource, but it can be every datasource that is supported as datasource for displaying data.


<div id="components_example4" swa="Present FROM ../../data/concepts/components_example4.json OPTIONS ../../js/concepts/2_components_example4.json"></div>
        
See working example here

Plugins

SWAC components deliver a set of basic features that can be activated by options or automatically acitvated by data in the datasets. There are special sets of features "plugins" that can be activated by the options. See Plugins

Activate or deactivate components on conditions

When you want components only active in your app, when a condition is filled. You can use the activeOn option. It allowes definition of a datarequetor and the component is only is build up, when at least one dataset is returned.

See working example here

Next

See next how to use data with components at the data page.