Blog

Labels
AJAX(112) App Studio(9) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(178) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(184) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(3) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Monday, September 15, 2008PrintSubscribe
Custom Templates for AJAX Grids in Data Aquarium Framework Applications

Data Aquarium Framework and Aquarium Express provide excellent support for custom form templates.

New feature in Data Aquarium Framework allows to create inline form templates for rows of grid views in edit mode.

See live demo of this feature now.

Generate  a Data Aquarium project from Northwind database. Create a new form with name GridTemplate.aspx based on MasterPage.master. Enter the following markup.

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false"
    CodeFile="GridTemplate.aspx.vb" Inherits="GridTemplate" Title="Grid Template" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Header1Placeholder" runat="Server">
    Grid Template
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Header2Placeholder" runat="Server">
    Northwind
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="BodyPlaceholder" runat="Server">
    <div id="Products" runat="server" />
    <aquarium:DataViewExtender ID="ProductsExtender" runat="server" Controller="Products"
        TargetControlID="Products" />
</asp:Content>

View this page in a web browser. It will look like the one in the next illustration.

image

Change ~/Controllers/Products.aspx data controller descriptor by moving action with Edit command to be the first action in the scope of grid.

<actionGroup scope="Grid">
  <action commandName="Edit" />
  <action commandName="Select" commandArgument="editForm1" />
  <action commandName="Delete" confirmation="Delete?" />
  <action whenLastCommandName="Edit" commandName="Update" headerText="Save" />
  <action whenLastCommandName="Edit" commandName="Cancel" />
</actionGroup>

Refresh the page and click on any link in the first column. This will force the grid view to display all fields in selected row to present the edit mode user interface.

image

This works well for most applications. Sometimes you may need to display just a few columns when user browses through records but would rather have more fields available for editing without leaving the grid view.

Enter the following HTML fragment right after the DataViewExtender in GridTemplate.aspx page.

<div id="Products_grid1" style="display: none">
    <table style="border: solid 1px silver; margin: 4px">
        <tr>
            <td valign="top">
                <div style="margin-bottom: 4px">
                    {ProductName}</div>
                <div style="margin-bottom: 4px">
                    {SupplierID}</div>
                <div>
                    {CategoryID}</div>
            </td>
            <td valign="top">
                <div style="margin-bottom: 4px">
                    {QuantityPerUnit}</div>
                <div style="margin-bottom: 4px">
                    {UnitPrice}</div>
                <div>
                    {Discontinued}</div>
            </td>
            <td valign="top">
                <div style="margin-bottom: 4px">
                    {UnitsInStock}</div>
                <div style="margin-bottom: 4px">
                    {UnitsOnOrder}</div>
                <div>
                    {ReorderLevel}</div>
            </td>
        </tr>
    </table>
</div>

Refresh the page in a web browser and click on any product link in the first column of the grid view.

image

Your template will be displayed in place of the selected row. The template definition technique is equivalent to the one that you would use with custom form templates. The popup menu on the action bar allows user to save or cancel changes. All controls behave in the same way as they do in a regular form view rendered by framework.

From user's perspective such grid is a lot like an accordion view, which expands the row when you edit the record. You can further enhance the presentation of inline form by introducing custom Save and Cancel buttons. Add a second table row to the table in the template Products_grid1.

<tr>
    <td colspan="3" align="right" style="border-top: solid 1px silver; padding: 4px;">
        <button onclick="Web.DataView.find('ProductsExtender').executeAction('ActionBar', 0, null, 0)">
            Save</button>
        <button onclick="Web.DataView.find('ProductsExtender').executeAction('ActionBar', 1, null, 0)">
            Close</button>
    </td>
</tr>

The novelty here is onclick event handler that executes the same actions that are available in the Record menu on action bar. This code is written in java script and is executed in a browser when user clicks on a button.

The first argument of executeAction method defines the action scope. The second one is the action index. Third argument represents the row in the grid. You don't know, which row is selected, but Web.DataView component does. That is why we are passing null here. The last argument defines the index of action group in the scope, which is handy if you have more than one action available on action bar in edit mode.

This is how you template looks if you are trying it out.

image

Notice that this sample shows an invalid Units On Order value entered, which is detected when you click on Save button.

If you want to display more fields then there are columns in the view then make sure to define all data fields in grid view and simply add  hidden attribute set to true for each data field, which is not supposed to be displayed as a grid view column but should be available in an inline form.

Monday, September 15, 2008PrintSubscribe
Server-Side Data Filters

Data Aquarium Framework and Aquarium Express applications are featuring user-defined adaptive filtering. Users can select any combination of field values in dynamic menus of grid view columns to find the data they need.

Take a look at a live example of Northwind database web application available at http://dev.codeontime.com/demo/northwind. The screen shot displays a list of orders filtered down to employee with last name Fuller. User is about to apply an additional filter to the column Ship Via Company Name.

image

If you want your users to see only a subset of data then define alternative data views based on queries that are limiting data in the SQL query in the foundation of each views.  The advantage of this approach is an ability to quickly define a data subset limited by a known criteria. Dynamic parameter values are not allowed in the query.

What if you want to limit the list of orders to those placed by currently signed-in employee only?

New feature available in Data Aquarium Framework allows to define a reusable data filter class used by linked data controllers automatically whenever a corresponding data retrieval operation requires a  filter. Let's see how it works.

Generate a web site code with Data Aquarium Framework project  and Northwind database.  Open this web site in Visual Studio 2008 or free Visual Web Developer 2008 Express Edition. Add Class1 to App_Code folder and enter the following code.

Data filter written in C#:

using System;
using System.Collections.Generic;
using MyCompany.Data;

public class Class1 : IDataFilter
{
    void IDataFilter.Filter(SortedDictionary<string, object> filter)
    {
        filter.Add("EmployeeID", new int[] { 2, 1 });
        filter.Add("ShipVia", 1);
    }
}

Here is VB.NET version of this class:

Imports System.Collections.Generic
Imports MyCompany.Data

Public Class Class1
    Implements IDataFilter

    Public Sub Filter(ByVal filter As SortedDictionary(Of String, Object)) _
        Implements MyCompany.Data.IDataFilter.Filter
        filter.Add("EmployeeID", New Object() {2, 1})
        filter.Add("ShipVia", 1)
    End Sub
End Class

Open data controller descriptor ~/Controllers/Orders.xml and  add an attribute dataFilterType as shown below:

<dataController 
  name="Orders" conflictDetection="overwriteChanges" 
  label="Orders" xmlns="urn:schemas-codeontime-com:data-aquarium" 
  dataFilterType="Class1">

If you run the web site and select Orders in the drop down of the default page then a view like the one below is displayed.

image

Only eight pages of orders are available. All of them are limited to those placed by employees Fuller and Davolio. All of these orders were shipped via Speedy Express.  If you look at the sample code then you will notice that we are supplying filter values for EmployeeID field as an array with two values, while the ShipVia field is filtered by a single value only.

A quick and easy enhancement will make your view less busy. In our example only one shipper is displayed. You can hide this column from user interface by adding an additional hidden attribute to dataField element in the data controller descriptor ~/Controllers/Orders.xml.

<dataField fieldName="ShipVia" aliasFieldName="ShipViaCompanyName"  hidden="true"/>

In a real-world scenario you will likely use HttpContext.Current.User.Identity property or HttpContext.Current.User.IsInRole method to determine the scope of data that you want to include in the result set displayed to a currently signed in user. Make sure to add System.Web namespace to the list of namespaces in your data filter to get access to HttpContext.Current property.

What do you do if the number of filter values is greater than just a few? In this case you might want to consider creating a database table that holds sets of filter values matched with user identities or roles and then join this table into SQL queries defined in corresponding data controller descriptors. Implement a server-side data filter to provide an ID or a role of current user.

If the name of the data filter field is not matched with any of the fields in the result set then the value is ignored. You can link the same filter to multiple data controllers to take advantage of centralized processing architecture of Data Aquarium Framework.

Sunday, September 14, 2008PrintSubscribe
Microsoft SQL Server 2008 Support

Several users have reported the following error when trying to generate a project with Microsoft SQL Server 2008.

System.InvalidOperationException
The Writer is closed or in error state.

The exception has been raised by ADO.NET when trying to extract user-defined types from the database. File [My Documents]\Code OnTime\Library\CodeOnTime.ModelMap.xml defines a collection of queries that are extracting database information and storing it in the PROJECTTYPE.Metadata.xml file in the root of your project. We have changed SQL Server data discovery entry to exclude UserDefinedTypes as shown in this snippet.

<modelMap>
  <provider providerName="System.Data.SqlClient">
    <collection name="*" exclude="Users,Databases,UserDefinedTypes"/>
    <collection name="$TableSchemas"/>
    <query name="Tables">select * from information_schema.tables</query>
    <query name="Columns">select * from information_schema.columns</query>
    .......

This has eliminated the problem. The fix has been deployed and will be automatically downloaded when you start Code OnTime Generator. None of the current projects is supporting user-defined types and this does not affect any of the available features.

If you are creating a brand new project with Microsoft SQL Server 2008 then metadata discovery should work fine if you have installed the update or downloaded the code generator after the publication of this post.

If you did experience this problem then please click on open link next to the name of your project on the main page of code generator. Delete Error.PROJECTTYPE.Metadata.xml and PROJECTTYPE.Metadata.xml files and generate the project again. If you project type is Aquarium Express then the metadata file is DataAquarium.Metadata.xml.

Alternatively you can open your project and navigate to Database Connection page where the error message is displayed. Click on the link 'Click here if your database has changed and you would like to refresh the cached metadata'. This will delete the file with meta data and will guarantee that your project has been generated with the latest database changes.

Please report any errors or suggestions at http://codeontime.com/contactus.aspx. You can download Code OnTime Generator at http://codeontime.com/download.aspx.