How to use component functions

Under Components you learned how to set options for a component. On this page i will show you how to use component functions in your own JavaScript code.

Finding functions

On the page of each component you find a documentation section for functions. There are all functions listed that the component supports.
Some functions are globally available on all components. We will use the Present component and some global available functions for example.

Getting the component

You can get the component object by getting the components container element. (id "present_example1" in this example) Note that the component must be completely loaded before you can access it.
Use Reactions to wait for the component.

// Wait for component to be ready
window.swac.reactions.addReaction(function (requestors) {
    // Get the component element
    let mycompelem = document.querySelector('#mycomp');
    // If you are inside a reaction, you can use also use the requestors parameter
    mycompelem = requestors["present_example1"];
    // Access the component object
    console.log(mycompelem.swac_comp);
}, "present_example1");
        

Calling a function

You call a function on the swac component object like you call any of your own functions.
The following example calls the removeAllData() function an a component. Data is than remove from component storage and view.

let removedataBtn = document.querySelector('#example_removealldata');
removedataBtn.addEventListener('click', function () {
    // Get the component element
    let mycompelem = document.querySelector('#present_example1');
    mycompelem.swac_comp.removeAllData();
});
        

Calling functions with parameter

Calling functions with parameter is the same.
The folowing example calls the addDataFromReference() function. This is used to add datasets that can be loaded by SWAC with a reference.

let newdataBtn = document.querySelector('#example_addnewdata');
newdataBtn.addEventListener('click', function () {
    // Get the component element
    let mycompelem = document.querySelector('#present_example1');
    mycompelem.swac_comp.addDataFromReference("ref://exampledata_timed.json");
    // You can also add data from REST interfaces, the datasource must be configured
    // in configuration.js
    //mycompelem.swac_comp.addDataFromReference("ref://collection/data_11/getAttributes?storage=smartmonitoring");
});