Examples

Example 1: Present datasets with default template "table_per_dataset"

<div id="present_example1" swa="Present FROM exampledata_list"></div>
        

Example 2: Show datasets with the "table_for_all_datasets" template

<div id="present_example2" swa="Present FROM exampledata_list TEMPLATE table_for_all_datasets"></div>
        

Example 3: Show datasets with the "card_per_dataset" template

<div id="present_example3" swa="Present FROM exampledata_list TEMPLATE card_per_dataset"></div>
        

Example 4: Show datasets with custom template

Custom template gives you full options on what and how to display. More on how to create your own template under skinable

<div id="present_example4" swa="Present FROM exampledata_list">
    <article class="swac_repeatForSet">
        <header><h1>{stringval}</h1></header>
        <p>{doubleval}</p>
    </article>
</div>
        

Example 5: Useing TableFilter plugin

TableFilter plugin adds filter possibility for table based presents.

<div id="present_example5" swa="Present FROM exampledata_list TEMPLATE table_for_all_datasets"></div>
        

var present_example5_options = {
    plugins: new Map()
};
present_example5_options.plugins.set('TableFilter', {
    id: 'TableFilter',
    active: true
});        
        

Example 6: Useing TableSort plugin

TableFilter plugin adds sorting possibility for table based presents.

<div id="present_example6" swa="Present FROM exampledata_list TEMPLATE table_for_all_datasets"></div>
        

var present_example6_options = {
    plugins: new Map()
};
present_example6_options.plugins.set('TableSort', {
    id: 'TableSort',
    active: true
});        
        

Example 7: Useing lazy loading

Present component supports lazy loading of data, as any other component.

<div id="present_example7" swa="Present FROM exampledata_biglist.json TEMPLATE table_for_all_datasets"></div>
        

var present_example7_options = {
    lazyLoading: 5
};

document.addEventListener('swac_present_example7_complete', function (evt) {
    let present_example7_btn = document.querySelector('.present_example7_btn');
    present_example7_btn.addEventListener('click', function (evt) {
        evt.preventDefault();
        let comp = document.querySelector('#present_example7').swac_comp;
        comp.addDataLazy();
    });
});
        

Example 8: Automatic lazy loading

All components can lazyly load new data when the components end comes in the viewport (becomes visible to the user). Be aware, that scince if one component recives data from a datasource that is used on another component too, the other component is updated, too.

<div id="present_example8" swa="Present FROM exampledata_biglist.json TEMPLATE table_for_all_datasets"></div>
        

var present_example8_options = {
    lazyLoading: 5,
    lazyLoadMode: 'end'
};
        

Example 9: Create cells for missing attributes

Sometimes there are datasets where not all attributes are available. To avoid missleading display in those cases, table cells for missing attributes are generated when useing a table template

Example 10: Live adding data over input

View of any data accessable by URL can be allowed by useing the showAddDataInput option.
Once activated a URL input box is displayed below the component and allows the addition of data.
This option is available on all components and allows any datasources SWAC can use as pre configured datasource.

var present_example10_options = {
    showAddDataInput: true
};        
        

Example 11: Show data from source given by URL

The datasource to show can also be given by URL parameter build from the id of the requestor and _data e.g. "present_example10_data". This way calling pages to show data with custom datasources is easy to implement by create to pages with list components.
First one with a list of all datasources, and second one that accepts the datasource by url.

Example 12: Sorting presentation with FilterSort plugin

Useing the FilterSort plugin, users can sort the datasets after each attribute.

window['present_example12_options'] = {
    plugins: new Map()
};
window['present_example12_options'].plugins.set('FilterSort', {
    id: 'FilterSort',
    active: true
});

window['FilterSort_present_example12_options'] = {
    filterable: false
};     
        

Example 13: Filter presentation with FilterSort plugin

Useing the FilterSort plugin, users can filter the datasets.

window['present_example13_options'] = {
    plugins: new Map()
};
window['present_example13_options'].plugins.set('FilterSort', {
    id: 'FilterSort',
    active: true
});

window['FilterSort_present_example13_options'] = {
    sortable: false
};