Data Objects and Binding

You connect to your database by creating javascript "data-objects" and marking up your html elements with data-field attributes. In addition you can execute server stored procedures by configuring a clientside "Stored-Procedure" object and execute it from javascript.

Data-objects are javascript objects that allow your webapp to communicate with an SQL server to get and manipulate data. You add data-objects in the appdesigner. To use the data-object you first need to configure it by connecting to a database view, add columns to fetch and set some other settings concerning updatability, maxrecords etc.

After you have done this you can write markup that references this data-object. When you in the javascript run dsMyDataObject.refreshDataSource(); the data-object will fetch data from the server and execute any bindings that you have set up (including any data-repeats to render lists and tables).


Data-objects points to a server view and includes a collection of fields to fetch. In the data-object you can specify max-records/page-size, and what operations should be allowed (insert/update/delete). To actually get data from the server you have to include a javascript line that inititiate the data-object: dsMyDataObject.refreshDataSource();


To bind your data to elements in your page you first have to set a 'binding-scope'. You do this by setting the data-object-id attribute to the name of a data-object: data-object-id='dsMyDataObject'. This scope is then valid for the element itself and all children elements inside it. This means you can set data-object-id in a table element, and the binding-scope will be valid for all rows in the table.

When you have a binding-scope you can get data into your element by adding the data-field attribute: data-field='MyField'.


To display images that are stored in a varbinary field in the table you specify them using data-field on a img element or else if it is in file store, you should use data-attr="src:/file/view/articleID/dsObejct/<%=PrimKey%>"

Action Buttons

You can easily create action buttons inside a binding-scope. Add attributes according to what action you would like the button to perform. Use data-action='edit' to put the data-object into edit-mode, data-action='save' to save the current record, data-action='delete' or data-action='delete-confirm' to delete the current record and data-action='cancel' to discard changes.

For each record

To get data from more than one record at the time, use the data-repeat attribute. If you mark up your tr element with data-repeat you will get one row in yout table for each record in the data-object.

You can get selection styling on the current record by adding the data-active attribute on the same element as the data-repeat (the class='af-active' will be added to the current record in your page).

If you would like an empty row ready for inputting a new record just use: data-show-new on the same element as your data-repeat.

Combined example


To show hiearchical datastructures in your web apps you first set up master/child bindings in your data objects and after set up data binding as usual. When using data objects with master/child bindings you only need to refresh the master data object as the child data object will automatically refresh based on it’s master.

Recursive data relationships are not supported using templates and data objects.

Data bound attributes

You can use data-attr="someAttr=some bound <%=field%>" to data bind attributes on elements in addition ton their contents. This is often used to create links. A useful technique here can be to create links specifying which record a particular app should filter for.


If you want to show thumbnail for images use the link format /file/view/ARTICLE-ID/DATA-OBJECT-ID/<%=PrimKey%>?width=WIDTH

Custom render function

Sometimes the the standard databinding does not allow you to do what you need when displaying your data. In these cirmustances you can use data-function='myRenderFunction' to point to a javascript function in the global scope that will be called for each record.

  • has characters
function nameCharCount(record) { var nameLength = record.Name.length; $(this).text(nameLength); }

Rememember that using any procedural JavaScript-technique like this as opposed to using declarative markup-based data binding makes apps more difficult to maintain and understand. Only use this technique if you are 100% sure that it cannot be done easily using declarative methods!

This function can refer to objects outside the parameters it gets and be used to do very powerful stuff. This power however, should be used with caution. For easy of maintainability we highly recommend that the function only deals with objects it gets from it’s gets from parameters.