The datasink type allows the user to link a data source file with the app and makes it available to be rendered as HTML5. This type is one of the most complex, in which is possible to feed the app with user`s own data or highly menageable third party data.
The Data Source is file where will be possible to manage the data available to the app throw the datasink. The data in this file, can be inserted by the user, or came from another source like a RSS, Instagram or Facebook. Every entry in the Data Source file is totally manageable by the user, it can by accepted, refused, deleted or even modified.
| Attribute | Description |
|---|---|
name |
Name of the data source variable. |
label |
A label that will be shown to the end-user to aid the filling of the form. |
help |
Text containing further instructions on how to fill this value. |
| Attribute | Description |
|---|---|
name |
Variable name of the field |
type |
Type of the field. Allows types are text, date, url or image. |
label |
A label that will be shown to the end-user to aid the filling of the form. |
optional |
By default the end-user is required to link a data source field to this field, except when this attribute is true. |
help |
Text containing further instructions on how to fill this value. |
How to use:
<!DOCTYPE html>
<html>
<head lang="en">
<title>News App with Datasink</title>
{{
__datasink__('news', 'News Source with Image', 'Text to help fill this field',
_field(name='title', type='text', label='Headline', help='Keep under 150 characters'),
_field(name='image', type='image', label='Image'),
_field(name='published_at', type='date', label='Date of Publication', optional=true),
)
}}
</head>
<script>
function handleData(data) {
for (var i = 0; i < data.source.length; i++) {
console.log(data.source[i].title);
console.log(data.source[i].image.url);
console.log(data.source[i].published_at);
}
data.update.then(handleData);
}
window.addEventListener('DOMContentLoaded', function() {
window.news.then(handleData);
});
</script>
</html>The number of _field functions called inside the __datasink__ function will be based on the data required by the developer.
This datasink will shown to the user a data source picker like this:
The data will be available for the developer in the following format:
{
'fields': {<field_name> : <boolean>, ... }, // for every field, if the field is link with a data source column it will be true
'source': [{<field_name> : <data>, ...}, ...], // every entry in the data source will be a object with the field and column values
'update': <promisse>, // this promisse will update the d ata
}
Image data is the most diferent one, it will be in the following format:
<field_image_name>: {'url' : <url>, 'width' : <width>, 'height' : <height>}