Data

All components can work with data from different sources. All data is recived and prechecked by the model and bound to the components by the bind. SWAC automatically searches an datasource for the given source expression after the keyword FROM.
Components may expect some attributes in the data. You can see this expectations in the components documentation.

Datasources

SWAC can handle data from a varitie of datasources.

Global variable

SWAC can use every object that is available as global variable as a data source. It even has not to be specially written for SWAC. This allows you to quickly view data from other client side scripts with SWAC components.
For example lets use the browsers information stored in the global available navigator object.


<div id="data_example1" swa="Present FROM navigator"></div>
            
See working example here

JSON file

As easy as you can use javascript objects as datasource, as easy it is to use a json file.


<div id="data_example2" swa="Present FROM ../../data/concepts/data_example2.json"></div>
            
See working example here

REST resources

You can simply use REST resources as datasource, as long as they return JSON formatted data.


<div id="data_example3" swa="Present FROM /SmartData/smartdata/records/tbl_observedobject"></div>
            
See working example here

RSS feed

As easy as you can use javascript objects as datasource, as easy it is to use a json file.


<div id="data_example4" swa="Present FROM ../../data/concepts/data_example4.xml"></div>
            
See working example here

ICAL calender

SWAC supports useage of ical calendars.


<div id="data_example5" swa="Present FROM ../../data/concepts/ical.ics"></div>
            
See working example here

Useing configured datasources

Datasource configuration

Datasources can be configured globaly in the configuration.js file. Add as many datasources as you want.
On those way you get some advantages:

Matching datasource detection
SWAC uses the first datasource the path can be found on
Redundance specification
If one source is not reachable the others will be searched for the data
Less path writing
No longer need to fully specify the part at each component
Automatic create / update / delete support
Components can translate the once given path for all CRUD operations

The part of your swa after FROM keyword is the datasource name. The rest of the URL and the HTTP-operation comes from configuration.
You can specify which resource is used for reciving a single dataset or a list of datasets and on which endpoint youre REST interface can create or delete objects.


SWAC_config.datasources = [
    {
        // Simple path as source for all CRUD operations, may a simple docroot path
        url: "/SWAC/data/[fromName]",
        // Exclude names that should never tried to fiend on this resource
        exclude: ['name_of_dbtable','name_of_rest_api']
    },
    {
        // Complex configuration, may a REST interface path
        url: "/SmartData/smartdata/[iface]/[fromName]?storage=smartmonitoring",
        interfaces: {
            get: ['GET','records'],         // When fetch a single dataset use method GET and replace [iface] with records
            list: ['GET','records'],        // When fetch a list of datasets use method GET and replace [iface] with records
            defs: ['GET','collection'],     // Get definitions on the data from collection interface (special of SmartData)
            create: ['POST','records'],     // Create new datasets useing POST on the records path
            update: ['PUT','records'],
            delete: ['DELETE','records']
        }
    }
];
            

<div id="data_example10" swa="Present FROM tbl_observedobject"></div>
            
See working example here

Get data with parameters

If you want to use a REST interface and give there options with it simply add an WHERE clause to your swa statement.


<div id="data_example11" swa="Present FROM tbl_observedobject WHERE filter=id,eq,1"></div>
            
See working example here

Excursion: Parameters into URL

All parameters after the WHERE clause are puted into the data requestion URL as URL parameter.


                WHERE filter=id,eq,1 AND size=4
becomes

                ?filter=id,eq,1&size=4

Use parameter from page URL

If your option comes from the url you can simply use an placeholder.


<div id="data_example12" swa="Present FROM observedobject WHERE filter=id,eq,{{id}}"></div>
            
See working example here

Excursion: Use parameters on page

Beside the useage in WHERE, parameters from URL can replace placeholder marks everywhere on page, too.
Note that placeholders in PRE-Elements are not replaced unless you added the attribute 'swac_allowReplace' to the element.


<span title="Also in title: {{id}}">You have inserted id: {{id}}</span>
            
You have inserted id: {{id}}
Not seeing an id? Click here!

Use multiple parameters

You can use multiple parameters by listing them with the AND clause.


<div id="data_example13" swa="Present FROM tbl_observedobject WHERE filter=id,gt,5 AND filter=id,lt,10"></div>
            
See working example here

Parameter from Configuration

You can define global parameters in the configuration file, that will take place if there is no parameter given by url.

Value from configuration.js: {{exampleglobal}}

SWAC_config.globalparams = {
    exampleglobal: 2
};
            

Use special parameters

There are some usefull build in parameters. Those replace placeholders with calculated values.
See the network requests in your browsers development tools to see the effect on request uri.


<div id="data_example_15" swa="Present FROM ../../data/exampledata_object.json WHERE filter=ts,gt,{{date:m-1442}‌} AND filter=ts,lt,{{date:m-1438}‌}"></div>
            
ParameterExampleExplanation
{{date:now}‌}{{date:min-30}}Replaced by the current date and time.
{{date:min-X}‌}{{date:min-30}}Replaced by the current date substracted with X minutes.
{{date:min+X}‌}{{date:min+30}}Replaced by the current date added with X minutes.
{{date:h-X}‌}{{date:h-12}}Replaced by the current date substracted with X hours.
{{date:h+X}‌}{{date:h+12}}Replaced by the current date added with X hours.
{{date:day-X}‌}{{date:day-14}}Replaced by the current date substracted with X days.
{{date:day+X}‌}{{date:day+14}}Replaced by the current date added with X days.
{{date:mon-X}‌}{{date:mon-12}}Replaced by the current date substracted with X month.
{{date:mon+X}‌}{{date:mon+12}}Replaced by the current date added with X month.

Global filtering

Additional to the coded and predefined parameters and placeholders for parameters on the swa statement users can allways filter sets to their needs by useing the filter parameter in URL.
Note that this filter can only narrow the datasets, never get more datasets than specified in the SWA statement.
To prevent from filterein on all components, you can use a fourth attribute in the filter statement, so filter only apply on the component with the given id.

Without URL filter
Open map with data
Useing URL filter
&filter=id,eq,181
Use URL filter only on requestor with id example
&filter=id,eq,181,comps:example

Datastructures

We are useing data in different forms and variations inprogramming. SWAC aims to make it easy to reuse data that was builded with other tools.
It does not depend on the datasource.
This chapter descripes which datastructures SWAC supports.

Object / Dataset

In web programming the simplest datastructure is a object. A object consits of a number of attributes. SWAC treats a object as "dataset". Every attribute is one value of this dataset. SWAC makes every attribute useable in it's components. You can refer to an attribut by simply name it.
Below is a very simple example of one dataset. Once as javascript array and once as json.


<div id="data_example17" swa="Present FROM example_object"></div>
        
See working example here

Array of objects / Datasets

Most SWAC components do not only support single datasets but also a collection of datasets. You can simply create a collection of datasets by useing a javascript array or JSON array structure.


<div id="data_example18" swa="Present FROM example_list"></div>
        
See working example here

Metalists

Sometimes you want to deliver some meta information for your datasets. For this purpose SWAC supports the list datalayout. Here you put your datasets into an attribute named "list". Also the TreeQL default identifier "records" is supported.


<div id="data_example19" swa="Present FROM exampledata_metalist"></div>
        
See working example here

Databinding

SWAC uses the concept of databinding not only for attributes but also on datasets and datasources. All datasets requested are automatically stored in WatchableSources and WatchableSets and all values displayed by a component are bound to these by a BindPoint.
This has the effect, that values are consistent over any component.


<div id="data_example13" swa="Edit FROM ../../data/routes.json"></div>
            
See working example here

Useing databinding in your code

If you need values in your own code, request the data as WatchableSource. Then you can simply modify the attributes as allways but you will have the advantage of databinding.
Modify in your code - automatic see results in components. See details

Advanced topics when working with data

In this section some advanced functions described for working with data.

Metadata

SWAC creates some metadata information. This is available in the components too. For a full list of available metadata refere to the design page

Default values for missing attributes

You can specify default values that will apply if there are attributes missing on some datasets. Defaults are defined per datasource.
If you want to have a default over all datasources use * as datasource name.

See working example here

Calculated default values

Default values can also be calculated from the other values of the set.

See working example here

Renameing attributes

Sometimes you want the data show up with another name in frontend as it is named in the database. Or you just have an attribute that is required by an component, but its wrong named.
For this cases you can rename attributes by simple configuration.
In the above example doubleval and intval attribute are renamed.

See working example here

Use data only within time bounds

You can use the special attributes "swac_from" and "swac_until" in your datasets to specify when datasets should be used by any component.
In this example an dataset is only visible, when the computers clock is on the 01.10.2021.


{
    "list": [
        {
            "id": 1,
            "title": "This is only shown before 01.10.2021",
            "swac_until": "2021-10-01T00:00:00",
            "swac_from": "2021-10-02T00:00:00"
        }
    ]
}
            
See working example here

Automatic reload component and data

When reloading the component in an fixed interval the data is completely loaded new.

See working example here

Automatic load new datasets

Components can use a live mode, where they automatically fetch new data from their known sources. This will not reload the whole component but only request and add new datasets.

See working example here

Add data per interface

By activateing the showAddDataInput function a input field is shown where users can add an URL to a datasource file and add the data to the component.

See working example here

Automatic datavolume saveing

SWAC components can use the same data. In those cases SWAC automatically detect the same useage and shares the one time fetsched data over all components. This avoids uneccessery network requests and ensures that all components show the actual data.

CORS roundtrip

SWACs components are universal tools to show and manipulate data. So you can use many datasources from anywhere on the web. But not all sources are directly accessable because of CORS.
You can avoid CORS problems by useing a proxy.
Build in php proxy
SWAC delivers a simple proxy php script in /swac/api/php/proxy.php.
SmartFile
SmartFile is a java based File downloader and manager you can use with JavaEE servers.

With configuration of the proxy option. The proxy is automatically used if a cors error is detected.
Of caouse you can use the proxy directly in FROM clause if you know your datasource is CORS activated.


var SWAC_config = {
    // ...
    datasources: [
        {
            url: "/SWAC/data/[fromName]"
        }
    ],
    proxy: 'http://localhost:8080/SmartFile/smartfile/file/download?filespace=[FILESPACENAME]&url=%url%',
    // ...
};
            

Accessing data programaticly

If you need to access the components data from a custom script, have a look at the Low Level API >