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

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();

Data-binding

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

Image

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%>"

Formatting

When using [data-field] binding you might one to specify [data-format = "format"] to display or edit field in specific format. Usually it is used on date and number fields.
For example:
[data-format="Short date"] - will format date to short date string
[data-format=""] - will format number to percent.
To get complete list of available formats on your system you can type af.userSession.formats

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

You can also use data-filter='{"af_Selected":true}' to provide JSON filter and filter rendered list.

Combined example

 

Data bound attributes

You can use data-attr="someAttr=some bound <%=field%>" to data-bind attributes on elements in addition to 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.

Custom render function

Sometimes the standard data binding does not allow you to do what you need when displaying your data. In these circumstances, 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.

Function is triggered:

  • onDomLoaded event - only for inside data-repeat, will trigger all items
  • onCurrentIndexChanged - will trigger changed index
  • onCurrentIndexChanging - will trigger previous index and only items inside data-repeat
  • onDomNewItem - will trigger new item, index -1
  • onRecordRefreshed - will trigger current index
  • onAfterSave - will trigger current index

Master/detail


To show hierarchical data structures 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.


Related articles

Placeholder "LocalizeWeb2016" failed