You are here : Resources > How-to Guides
  Register        Login
There are no categories in this blog.
More Info

Actravia is an innovative web based platform for Training and Event organizers. Actravia brings online marketing, registration, enrollment, administration and payment processing into a single online center of operations.


Actravia developed by 3rd i

How to Guides
Jul 5

Written by: howto
7/5/2012 9:57 AM  RssIcon

Four Neat Data Accessing & Binding techniques to use with ActraviaML (Version 3.8+)

 

With Actravia we have always tried to provide ways of further developing and extending the functionality so that developers can build their own custom applications on the platform. With version 3.8 we have introduced more ways for developers to customize the entire process. This article describes some of the data binding techniques that are now possible with Actravia.

Tokens

Tokens are an intrinsic part of Actravia and can be used throughout the system in the screen definitions and email templates as well as inside the ActraviaML templates.

All tokens are bound with square “[]“ brackets and are replaced at run time. The token replacement covers static items, properties defined for system entities, data collected during the booking process, data and session values etc.

Controls in Actravia templates can use tokens in a variety of ways including setting attributes of controls as well as display values.

More examples of the tokens available in Actravia can be found in the user manual, as well as in the other samples in this article.

Loading Data into Session and binding to controls

When a template is being rendered, sometime you might want to get some data from another source and bind it to a control. A good example is a drop down user list where you may want to do something with the user details. It is possible to create an instruction with ActraviaML to retrieve details via the data layer and make this available for the template. The “data” element is used as a member of the “ParticipantForm” element to achieve this.

Consider the following example:

        <data id="TokenBalance" type="Scalar" name="3rdi_GetUserCreditsByUsers">

            <parameter name="@userid" type="int">[user:userid]</parameter>

        </data>

        <data id="UserList" type="DataSet" name="GetUsers">

            <parameter name="@portalid" type="int">[portal:portalid]</parameter>

        </data>

In this case we are collecting data using stored procedures. The first case we are retrieving a single value from the database and storing it to the Session variable indicated by the id “TokenBalance”.  The parameter list is variable length and allows for int, float, string and date which maps to the corresponding database data type.

 In the second case we are retrieving a user list which will comprise of a dataset. Note that the type is “DataSet”. When this is executed the actual returned dataset will be stored to the Session variable “UserList” to be used when binding on the form.

Note the use of tokens in the parameters. This enables you to configure forms to pre-populate with details from the database. (Note, you can also use tokens to do this but this method provides for a much wider range of data that can be retrieved.)

You can then use these values to bind to a control. For example:

  <control id="user_list" class="user_list" type="dropdownlist" bind="[data:UserList]" mapfield=”username” datatextfield="DisplayName" datavaluefield="UserID" ko_databind="value: selectedUserID" >

<listoption text="---please select---" value="-1"></listoption>

<style name="font-size" value="18px"/></control>

The relevant attributes here are bind, datatextfield and datavaluefield. Note that the field ko_databind refers to knockout.js which handles client side binding which we will come to next.

The listoption values will be populated before the list is bound so that they will appear at the end of the list. Note that the use of this method involves a server side databinding in asp.net BEFORE the template is rendered.

For scalar values, you can simply return the value in line with a token.

For example:

                <control id="tokBalance" type="label" text="Your Credit Balance:[data:TokenBalance]" >

                    <style name="font-size" value="18px"/>

                </control>

 

In this case the token [data:TokenBalance] will simply replace the text at runtime.

Control Binding with Knockout.js

 

Knockout.js provides a great facility to us to bind values to client elements. Actravia now supports the knockout attribute “data-bind” which allows the knockout viewmodel to bind values to a control.

Here for example is a ActraviaML control bound to a viewmodel:

<control type="textbox" id="txtFirstName" class="txtFirstName" participantgroupid="0"   mapfield="firstname" ko_databind="value: firstname"></control>

 

The ActraviaML attribute “ko_databind “ sets the data-bind attribute in the underlying control. The value “value: firstname” refers to the variable in the viewmodel to be bound to the text of the control. Use the ActraviaML script control to create the viewmodel. A comprehensive example follows when we discuss using jQuery & AJAX to retrieve data from the server to bind client side. See http://knockoutjs.com/ for more information about knockout.

 

 

Json Service Dataloading using jQuery & AJAX

 

Actravia provides a facility to return a dataset via using parameters related to the event. Consider the following example :

                <control type="script">

                    <![CDATA[

                           var jsonQuery = {

                                    "type" : "Dataset",

                                    "procedure" : "GetUser",

                                    "params" : [ [PORTALID] , parseInt(selectedID ) ],

                                    "templateid" : [TEMPLATEID],

                                    "eventid" : [EVENTID]

                            };

                            var resJSON;

 

                            jQuery.ajax({

                            type: "POST",

                            async: false,

                            url: location.href,

                            dataType: "text",

                            data: ({ 'FUNCTION': 'JsonService', 'param0': JSON.stringify(jsonQuery) }),

                            success: function (data) {

                                                       

                                                        resJSON = JSON.parse(data);

 

                                                        },

                            error: function (XMLHttpRequest, textStatus, errorThrown) {},

                            beforeSend: function (xhr) {xhr.setRequestHeader("X-OFFICIAL-REQUEST", "TRUE");},

                            complete: function (XMLHttpRequest, textStatus) {}

});

                ]]>

                </control>

 

First we create the query to use using the jsonQuery var.  The ‘type’ key can be ‘Scalar’ or ‘Dataset’ depending on the type of value you are looking to retrieve. The ‘procedure’ key refers to the database stored procedure you wish to execute. The ‘params’ key contains an array of paramaters. The ‘templateid’ and ‘eventid’ parameters need to be provided so that the server side process understands the context of the request.

Note that the entire script is processed for tokens so therefore the parameters can be provided as tokens.

 

The actual server side call should be called as shown in the jQuery.ajax call. The data will be returned and can be parsed as shown in the success section.

Note that the JSON.parse will not work in all browsers unless the JSON2.js library is loaded. You can do this by adding the following to your template:

<control type="html">

<![CDATA[<scriptsrc="[VIRTUALAPPPATH]/desktopmodules/ThirdI.Eventbooking/json2.js" type="text/javascript"></script>]]></control>

 

Putting it all together.

 

In this example we are going to use an ActraviaML script control to load some script. The script will create a Knockout.js viewmodel which uses observables to retrieve server data using an jQuery AJAX call when a drop down list selection has changed. This is down via the Knockout subscribe function on the selectedUserID value which will be bound to the drop down list. The drop down list will be populated with a data set which is loaded when the template is loaded. When the data is returned from the subscription, it is assigned to Knockout observables and therefore is rendered on the bound controls.

<control type="script">

<![CDATA[

 

jQuery(document).ready( function()

{

    function UserViewModel()

    {

        var self = this;

        self.selectedUserID = ko.observable("");

        self.creditBalanceActual = ko.observable("");

        self.firstname = ko.observable("");

        self.lastname = ko.observable("");

        self.email = ko.observable("");

        self.creditBalance = ko.computed ( 

                   function() { return "Member Credit Balance:" +  self.creditBalanceActual(); }

                    ,self   );

 

        self.selectedUserID.subscribe(function(selectedID) {

                            var returnvalue='*****************';

                            var jsonQuery = {

                                    "type" : "Scalar",

                                    "procedure" : "3rdi_GetUserCreditsByUsers",

                                    "params" : [ parseInt(selectedID ) ],

                                    "templateid" : [TEMPLATEID],

                                    "eventid" : [EVENTID]

                            };

 

                           

                              jQuery.ajax({

                            type: "POST",

                            async: false,

                            url: location.href,

                            dataType: "text",

                            data: ({ 'FUNCTION': 'JsonService', 'param0': JSON.stringify(jsonQuery) }),

                            success: function (data) {

                                                       

                                                        var jsonobj = JSON.parse(data);

                                                        if (jsonobj.value != null)

                                                            returnvalue = jsonobj.value;

                                                        else

                                                            returnvalue = 0;

                                                        },

                            error: function (XMLHttpRequest, textStatus, errorThrown) {alert(errorThrown);},

                            beforeSend: function (xhr) {xhr.setRequestHeader("X-OFFICIAL-REQUEST", "TRUE");},

                            complete: function (XMLHttpRequest, textStatus) {}

});

 

                            var jsonQuery = {

                                    "type" : "Dataset",

                                    "procedure" : "GetUser",

                                    "params" : [ [PORTALID] , parseInt(selectedID ) ],

                                    "templateid" : [TEMPLATEID],

                                    "eventid" : [EVENTID]

                            };

                            var resJSON;

 

                            jQuery.ajax({

                            type: "POST",

                            async: false,

                            url: location.href,

                            dataType: "text",

                            data: ({ 'FUNCTION': 'JsonService', 'param0': JSON.stringify(jsonQuery) }),

                            success: function (data) {

                                                        

                                                        resJSON = JSON.parse(data);

 

                                                        },

                            error: function (XMLHttpRequest, textStatus, errorThrown) {},

                            beforeSend: function (xhr) {xhr.setRequestHeader("X-OFFICIAL-REQUEST", "TRUE");},

                            complete: function (XMLHttpRequest, textStatus) {}

});

 

 

        if(typeof returnvalue != 'undefined') self.creditBalanceActual(returnvalue);

        if(typeof resJSON.Tables[0].Rows[0] != 'undefined'){

            if(typeof resJSON.Tables[0].Rows[0].FirstName != 'undefined') self.firstname(resJSON.Tables[0].Rows[0].FirstName);

            if(typeof resJSON.Tables[0].Rows[0].LastName != 'undefined') self.lastname(resJSON.Tables[0].Rows[0].LastName);

            if(typeof resJSON.Tables[0].Rows[0].Email != 'undefined') self.email(resJSON.Tables[0].Rows[0].Email);

        }

 

        }.bind(self));

     } 

 

    

     ko.applyBindings(new UserViewModel());

});             

  ]]>

 

To create the userlist you will need to load the data into session by adding the following directive to the ActraviaML template (within the ParticipantForm element)

        <data id="UserList" type="DataSet" name="GetUsers">

            <parameter name="@portalid" type="int">[portal:portalid]</parameter>

        </data>

 

This calls the DNN stored procedure “GetUsers” with the portalid as a parameter. This in turn will be bound to a drop down list as follows:

<control id="user_list" class="user_list" type="dropdownlist" bind="[data:UserList]" mapfield datatextfield="DisplayName" datavaluefield="UserID" ko_databind="value: selectedUserID" >

                    <listoption text="---please select---" value="-1"></listoption>

                    <style name="font-size" value="18px"/>

                </control>

 

Note here that the bind attribute references the id of the data directive and that the fields are referenced by name in the datatext and datavaluefield attributes. The ko_databind is what is needed to bind the selected value to the Knockout viewmodel, where the subscribe function will handle the client side value change event.

Other than than this, the rest is fairly straightforward. You will bind the other field controls that have been changed during the subscription event to the controls on the form. For example:

<control type="textbox" id="txtFirstName" class="txtFirstName" participantgroupid="0" mapfield="firstname" ko_databind="value: firstname"></control>

 

As this control has a knockout binding to an observable, when the value changes inside the subscribe function, the form will automatically be updated with the new value.

 

Tags:
Categories: Actravia Templates
Location: Blogs Parent Separator How to Guides

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Please email support[at]actravia.com for pre-sales assistance & support. 
Contact support [@] actravia.com for assistance.