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>
Parameter | Example | Explanation |
---|---|---|
{{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.
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.
Calculated default values
Default values can also be calculated from the other values of the set.
See working example hereRenameing 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.
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 hereAutomatic 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 hereAdd 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 hereAutomatic 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 >