Easy to use

SWAC is designed to ease the creation of web applications, speed up development but also leave all possibilities where they belong: Functionalities to the programmers and design to the designers.

Step 1: Include SWAC javascript

Start by simply adding the swac.js file and uikit libs to your webpage. You only need to include these files, all other files are loaded by the script dynamically if they are needed.
The icons.min.js you only need if you want to use the uikit icons.

<link rel="stylesheet" type="text/css" href="/SWAC/swac/libs/uikit/css/uikit.min.css">
<script src="/SWAC/swac/libs/uikit/js/uikit.min.js"></script>
<script src="/SWAC/swac/libs/uikit/js/uikit-icons.min.js"></script>
<script src="/SWAC/swac/swac.js" type="module"></script>

Step 2: Add your datasource

SWAC displays data on your page from datasources. Those datasources can be files or REST-interfaces. You add a datasource by adding the path to the datasources-configuration.

Open the configuration.js
Add an object to SWAC_config.datasources. It must contain an attribute url, which specifies the path to your API or file directory. SWAC is often used in combination with SmartData.
If your API uses different HTTP-Methods and path parts for requests you can specify these in the interface object.


SWAC_config.datasources = [
    // Load data from files
    {
        url: "/SWAC/data/[fromName]"
    },
    // Load data from SmartData REST-interface
    {
        url: "/SmartData/smartdata/[iface]/[fromName]?storage=smartmonitoring",
        interfaces: {
            get: ['GET','records'],
            list: ['GET','records'],
            defs: ['GET','collection'],
            create: ['POST','records'],
            update: ['PUT','records'],
            delete: ['DELETE','records']
        }
    }
];

Explanaition:

The [fromName] will be replaced by the name of the datasource, you use at the components declaration.
The [iface] will be replaced by the interface path part depending on the type of request.
Types of request are: get (get a single dataset), list (get more than one dataset), defs (get data definition), create (create one or more datasets), update (update one or more datasets), delete
First value in each interface entry, is the HTTP-Method to use. Second one is the path part to use.
Components choose the type of request automatically.

Step 3: Choose your component

First step is to decide what you want. For example you want to show an list of available books on your page. So simply have a look at the present component.
All available components are found in the site menue.

Component	Description
Present	Component for presenting data
Edit	Component for editing data
Navigation	Create a navigation menue from data
...	...

Step 4: Bring your data in form

SWAC components work with every data that is object-property noted. This means you just have to deliver your data in the attributes of an object.
The data can be given by json-file, javascript-file or rest-interface with json support. See datasources for more information.
Some components have special data requirements:

Component	Description
Present	Has no requirements to the data.
Edit	Every dataset must have the id attribute, if the dataset should be editable.
Navigation	A dataset must contain a name attribute for nameing the menue entry...
...	...


var exampledata_list = [
    {
        id: 1,
        name: "Datensatz 1",
        doubleval: 12.0123,
        intval: 1234,
        boolval: true,
        stringval: 'string',
        ts: '28.10.2019 7:46:59',
        dateval: '28.10.2019',
        refval: 'ref://exampledata/2',
        mimetype: 'audio/mp3',
        colval: 'blue',
        urlval: 'https://somesite',
        emailval: 'support@swac.de',
        passwordval: 'MyUnsecurePwd',
        icopath: '../../swac/components/Icon/imgs/book_checked.svg'
    }, {
        id: 2,
        name: "Datensatz 2",
        doubleval: 19.0234,
        intval: 2345,
        boolval: false,
        stringval: 'string2',
        ts: '29.10.2019 7:47:59',
        dateval: '29.10.2019',
        refval: 'ref://exampledata/2',
        mimetype: 'audio/ogg',
        colval: '#ffffff',
        urlval: 'https://somesite',
        emailval: 'support@swac.de',
        passwordval: 'MyUnsecurePwd',
        icopath: '../../swac/components/Icon/imgs/book_star.svg'
    }, {
        id: 3,
        name: "Datensatz 3",
        doubleval: 42.0345,
        intval: 3456,
        boolval: true,
        stringval: 'string',
        ts: '30.10.2019 7:48:59',
        dateval: '30.10.2019',
        refval: 'ref://exampledata/2',
        mimetype: 'video/mpeg',
        colval: '#000000',
        urlval: 'https://someothersite',
        emailval: 'support@swac.de',
        passwordval: 'MyUnsecurePwd',
        icopath: '../../swac/components/Icon/imgs/book_fail.svg'
    }
];

Step 5: Define a SWAC requestor

A SWAC requestor is an div tag with the swa attribute. The swa attribute contains a short statement with the name of the component you want to use and the datasource name.

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

Will create a list that shows you all objects and their attribute values.

Step 6: Change to your need

Every component has a set of standard functions. Some more functions can be activated by specific attributes in the data and / or configuration.
Greater functional enhancements are activateable by plugins.
Have a look at the present component page to learn more about

Dig deeper into components at the component page.