Data Object

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'.

Translating data-field

data-translate attribute can be used to use translations and translate field value from database.
This is client side translation, quering data should be in native language, so this should be used on static fields only.
This is not available within data-repeat.


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!. Check af.userSession.formats for suitable formats.

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.

Related articles

Data Object - Binding

Updated: 02.06.2020 08.46.08

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 objec ...


Data Object - Alternative connection

Updated: 28.05.2020 07.16.15

It is possible to setup dataobject to use alternative connection string. It means that you can access data from different servers. You can set alternative connection in appdesigner under dataobject settings.Alternative connection needs to be added to web.config&lt;add name="MMstage" connectionString= ...


Data Object - View model

Updated: 16.04.2020 10.27.07

Data object can be extended and converted to view model. This enables having additional fields which can be set in application and not depend on real view. All these values are dynamic and applies same binding rules as regular fields. It might be helpfull when you want to chage values and do not refr ...


Data Object - Dataobject filtering

Updated: 02.04.2020 06.22.48

Dataobject supports several ways how to query/filter data. Developers can use datobject designer for that. WherClause is typically used only by developers, to initially filter data. Although filter string can be changed by other controls like data field filter and filter builder, it is used b ...


Data Object - Data field formatting & Autonumeric.js

Updated: 01.04.2020 12.55.58

Appframe has formatting option available when displaying and editing values.When working with an app data-format should be specified with data-field.Examples: data-format="Short Date", data-format="1 234.1"List of formatsNote: format values might be different and vary depending on user locale. Locali ...


Data Object - Extended methods/events

Updated: 24.03.2020 12.49.42

Methods dsObject.useOriginalFieldNamesInExport(true) - exporting data to excel column captions will be the same as original column names. dsObject.setExportedFileName(pFileName) - needs to be set before exporting data. File name should be pased without extension. To reset value pass null. E ...


Data Object - Event Cycle

Updated: 13.03.2020 12.20.34

Data-objects Event Cycle @Render("Block", ID: "blockIntro") Single data-object cycle @Render("Block", ID: "blockSingle") Master child data-object cycle @Render("Block", ID: "blockMasterChild") ...


Data Object - Conditionals

Updated: 13.03.2020 12.19.57

Conditionals Use data-if='test' to conditionally display elements. 'Test' refers to any valid javscript expression. There are some handy shortcuts available for you when setting up tests. These are currentRow (as a shortcut for the current row for the data-object in scope), previousRow and i ( ...