Ajax Support for Tables

General Challenges­ implementing AJAX tables   ­

• Depending deployment environment  and feature sets required AJAX libs to be used might vary
• Server side vs. Client side programming skill sets of ]po[/OpenACS developers
  
• AJAX/JS implementations contain special characters that would need to be escaped in .tcl files and impair readability of code 
  

Challenges­ transforming traditional tables to tables with AJAX support ­

• General "Send/Update" button might becomes obsolete
  
• Check boxes in tables usually become buttons
• Providing Ajax support for tables created with List Builder
• How to handle im_view_columns::column_render_tcl ?
  
• How to handle single cells that are different from the column type ?
  (see: /intranet-translation/trans-tasks/task-list?view_name=trans_tasks&project_id=[PROJECT_ID] )
• Some of the ]po[ tables extract data from several db tables based on complex business logic (WF)
  It should be avoided to add another layer of complexity    

Objectives

• Follow common design patterns to separate layout from business logic
  
• Keep options open to support various AJAX libraries
• Hide DHTML/Ajax implementation from tcl developers (like: .adp vs. .tcl files) 
• Pave the way to support other end user devices than a browser
• Allow smooth transition from current tables to AJAX supported tables with a transition period that allow usage of both variants
  
  

]po[ meta-format for tables 

set aj_table_layout {
    <table_class> <table_view_id>
}

<table_class> ::= string   (table class as defined in style.[SKIN_NAME].css or style.default.css)
<table_view_id> ::= integer -> refers to im_view_columns

Table description

set aj_table_definition {
    <table_columns>
}

<table_columns> ::=  <column_type> <key> <formatter> <sortable> | <table_columns>

<column_type> ::= <field> | <date> | <button> | <checkbox> | <radio> | <select> | <multiselect>
<key> ::= string
<formatter>  ::= string (used in YUI libs to define formatting)a
<editable_p> ::= 0 | 1 (Can table cell in this column be edited?)
<sortable> ::= 0 | 1 (Should column be sortable?)

<field> ::= "field" <editable_p>
<date> ::= "date" <editable_p>
<button> ::=  "button" <label> 
<label> ::= string
<checkbox> ::= "checkbox" <editable_p>
<radio> ::= "radio" <editable_p>

<select> ::= "select" <select_options>
<multiselect> ::= "multiselect" <select_options>
<select_options> ::=  string | <select_options>

 

set aj_table_title {
    { <title_col1> <title_col2> <title_col3> ... }
} 

set aj_table_content {
    { <object_id_line1> <line1_cell1> <line1_cell2> <line1_cell3> ... }
    { <object_id_line2> <line2_cell1> <line2_cell2> <line2_cell3> ... }
    { ... }
}

<line[x]_cell1[y]> :== string when column_type="field" , empty-string when column_type != "field"
<object_id_line[x]> :== integer -> usually object_id of record shown 

Sample code YUI tables

These samples illustrate AJAX support to ]po[ tables using YUI DataTable Control http://developer.yahoo.com/yui/datatable/  

Set data

YAHOO.example.Data = {
    formatting: {
        items: [
            {field1: "bananas", field2:new Date(2007, 1, 1), field3:111, field4:"23.4", field5:"bob", field6:"http://www.yahoo.com"},
            {field1: undefined, field2:new Date(2006, 1, 1), field3:12.3, field4:"35.12", field5:"ann", field6:"http://www.yahoo.com"}
        ]
    }
}

Set column definitions

        var myColumnDefs = [
            {key:"flag", formatter:"myCustom"}, // use custom shortcut
            {key:"button", label:"Show record data", formatter:YAHOO.widget.DataTable.formatButton}, // use the built-in button formatter
            {key:"field1", formatter:"dropdown", dropdownOptions:["apples","bananas","cherries"],sortable:true}
        ];

Using YUI Inline Cell Editing

Button

Definition

        var myColumnDefs = [
            {key:"button", label:"Show record data", formatter:YAHOO.widget.DataTable.formatButton}, // use the built-in button formatter
        ];

Setting action 

        this.myDataTable.subscribe("buttonClickEvent", function(oArgs){
            var oRecord = this.getRecord(oArgs.target);
            alert(YAHOO.lang.dump(oRecord.getData()));
        });
­

Check Box

        var myColumnDefs = [
            {key:"check", formatter:"checkbox"}, // use the built-in checkbox formatter (shortcut)
        ];

Drop down lists:

        var myColumnDefs = [
            {key:"field1", formatter:"dropdown", dropdownOptions:["apples","bananas","cherries"],sortable:true}
        ];

Radio Button

        var myColumnDefs = [
            {key:"radio", formatter:"radio"}, // use the built-in radio formatter
        ];