View

Views are components that present data on the page. Views useing templates with placeholders to present the data. You can choose from templates or create your own design and easyly use it.
SWAC uses UIkit and so can use every UIkit style for coloring.
Each template consits of two parts: The layout and the coloring.
Createing a layout for components uses standard HTML with some additional css classes and placeholders.
A coloring uses css.

Basic layouting

Views default layout

Each view has it's default layout. It's optimized for working with a wide bandwidh of data. Focused on displaying any information given in the dataset. So for special usecases it may not fit or is not very beautifull.
The folowing examples shows example data in a default view with the Present component.

<div id="view_example_1" swa="Present FROM ../../data/concepts/view_example1.json"></div>
                    

Additional predefined layouts

Some views come with more than one layout predefined. You can switch the skin by adding the TEMPLATE section to your swa statement.
The available templates are documented on the components documentation page.

<div id="view_example_2" swa="Present FROM ../../data/concepts/view_example1.json TEMPLATE card_per_dataset"></div>
                    

It's also possible to set the layout in views options.

window['mycomp_options] = {
   templateName: 'mytemplate'
};
                    

Global view options

Views have some global options that are available on each view. These options are setable like the component options.

Custom layouts

Basic layouting

To layout a view instance just place HTML code inside the div tag, that holds your swa-attribute.
Use the names of the attributes in brackets as placeholders for data and repeat any tag and it's contents for each dataset by useing the swac_repeatForSet class.
Lets use the present view as an example. Maybe we want to list out data inside a table.

<div id="view_example3" swa="Present FROM ../../data/concepts/view_example1.json">
    <table class="uk-table">
        <thead>
            <tr><th>Id</th><th>Name</th><th>Double value</th></tr>
        </thead>
        <tr class="swac_repeatForSet">
            <td>{id}</td>
            <td>{name}</td>
            <td>{doubleval}</td>
        </tr>
    </table>
</div>  
            

The class swac_repeatForSet declares the tag as beeing rendered for each dataset.
The placeolders {id}, {name} and {doubleval} are replaced by the datasets attributes.
The rest is normal HTML code as you would write for a table.

Layout for variable number of attributes

Don't know how many attributes your data will have? No problem! Useing the swac_repeatForValue class you can define elements that are repeated for every attribute. With the askerik placeholder {*} you mark the place where attributes value should be inserted and with {attrName} you can place the attributes name as well.

            <div id="view_example4" swa="Present FROM ../../data/concepts/view_example1.json">
                <table class="uk-table">
                    <tr class="swac_repeatForSet">
                        <td class="swac_repeatForValue" swac_id="{id}">
                            <span uk-tooltip="title: {attrName}">{*}</span>
                        </td>
                    </tr>
               </table>
            </div>
                    

Placeholders

We've seen the {attributename}, {*} and {attrName} placeholders as placeholders for inserting data.
{id} is a attribute placeholder. It will be filled with the value that is deliverd within the dataset as attribute "id".
{*} is the askerik placeholder. It will be filled with any available value that is available through the dataset.
Finally {attrName} is a metadata placeholder. It will be filled whith the name of the attribute which is handled inside the block. All metadata placeholders will be generated from SWAC.
Placeholder inside of PRE and CODE element are not converted to bindpoints unless you add the attribute swac_parseBindPoints.
The folowing table contains all available metadata plceholders.

Placeholders for sub objects

Your data contains subobjects with data? This data can be displayed as single values, too. Look at the last column of the above example you see the subobject from attribute "object" displayed as json.
To get the "name" and "value" information from that subobject use dot catination.

<div id="myskinnedlist_3" swa="Present FROM exampledata_list">
    <table class="uk-table">
        <thead>
            <tr><th>Id</th><th>Subs Name</th><th>Subs value</th></tr>
        </thead>
        <tr class="swac_repeatForSet">
            <td>{id}</td>
            <td>{object.name}</td>
            <td>{object.value}</td>
        </tr>
    </table>
</div>  
            

Inserting media files

Path to media files can be used the same way like other data attributes. But to prevent uneccessery requests to the placeholder mark, place the url inside the data-src attribut instead of src. SWAC than lazy loads the media files.

<div id="view_example6" swa="Present FROM ../../data/concepts/view_example6.json">
    <div class="swac_repeatForSet">
        <b>Image</b>
        <br><picture>
            <img data-src="{image}" height="200" width="200" alt="Image not loaded">
        </picture>
        <br><b>Audio</b>
        <br><audio controls>
            <source src="{audio}" type="audio/mp3">
        </audio>
        <br><b>Video</b>
        <br><video controls>
            <source src="{video}" type="video/mp4">
                    </video>
        </div>
</div>  
            

Hierarchical ordering

SWAC has the ability to order outputs from datasets hierarchcally.
To activate this functionality there are four components needed.
1. swac_id attribute. This attribute must be noted at the tag that can be the parent. It contains the id of the dataset.
2. swac_parent. This attribute must be noted at the tag. It contains the id of the parent dataset.
3. swac_forChilds. This class declears an element as "use this if there are childs and put the childs into there"
4. swac_child. This class declares an element as "use this tag as representation, if the set is used as child".
Best example is the nav view.

            <nav class="uk-navbar-container uk-box-shadow-medium uk-visible@s" uk-navbar>
                <div class="uk-navbar-default">
                    <ul class="uk-navbar-nav">
                        <li class="swac_repeatForSet">
                            <a href="{rto}" swac_id="{id}" swac_parent="{parent}">{name}</a>
                            <div class="uk-navbar-dropdown swac_forChilds">
                                <ul class="uk-nav uk-navbar-dropdown-nav">
                                    <li class="swac_child"><a href="{rto}">{name}</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
                    

Formating

Control view of layout parts

With SWAC it's easy to control the view of your layout parts. Don't want to show up empty table cells? Hide buttons that are not applicable, because data is missing? Want to display a hyperlink only on screen? Want to add a watermark at print? All this and more is done quickly with SWAC layout classes.
The folowing table contains all available layout classes:

Value depending formatting

Data can be formatted by value. For example all hight numbers in a table could be highlighted red. For this purpose use the Datadescription component.

Language depending formatting

Some formatting depends on the users language. For example numbers and dates. Data can be formatted language depending. For more info see Multilanguage support

Share layouts

If you create a layout that you want to use on more than one place, you can add your layout to the components layout. Simply copy your layout html and css files to the components folder and add an styles-entry at the top of the component.
Css classes are automatically documented on the documentation page. For this you need to add reqPerTpl oder optPerTpl descriptions in the components "desc" attribute. See example at the Sample Component. If you have style instructions that are only with visual effects you should name them with prefix "swac_format". Then you don't need a desc entry.

Next

Have a look at how to nest components together.