Blog: Posts from September, 2012

Labels
AJAX(112) App Studio(7) 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(177) 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(183) 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(2) 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
Posts from September, 2012
Saturday, September 29, 2012PrintSubscribe
Changing the Number of Columns of a Check Box List

The Columns property can be used on a Check Box List lookup data field in order to change the number of columns that the check boxes will be presented in.

The Employees edit form below contains the Territories many-to-many field.

Territories Check Box List on the Employees form rendered in a single column

Note that all 53 Territories check boxes are presented in a single column – the form is excessively long. Let’s change the presentation into multiple columns.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab and double-click on Employees / Views / editForm1 / c1 – Employees / Territories data field node.

Territories data field in 'editForm1' view of Employees controller.

Change the Columns property:

Property Value
Columns 5

Press OK to save. On the toolbar, press Browse.

Navigate to the Employees page, and edit a record.

Territories Check Box List on the Employees form rendered in 5 columns

The Territories check box list is now displayed in 5 columns flowing vertically. The presentation is more compact.

Saturday, September 29, 2012PrintSubscribe
Changing the Width of a Data Field

The Columns property allows specifying the width of a data field.

For example, the Employee Last Name field in Orders edit form has been configured as an Auto Complete lookup. Note that the field takes up a lot of horizontal space.

Employee Last Name field takes up a lot of horizontal space.

Let’s reduce the width of the field.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab and double-click on Orders / Views / editForm1 / c1 – Orders / EmployeeID data field node.

EmployeeID data field node in 'editForm1' view of Orders controller.

Change the Columns property:

Property New Value
Columns 15

Press OK to save the data field. On the toolbar, press Browse.

Navigate to the Orders page and edit an order. The Employee Last Name field will take up the specified number of logical columns.

Employee Last Name field takes less horizontal space.

Saturday, September 29, 2012PrintSubscribe
Extending Web Apps with REST and jQuery

Code On Time creates web apps with sophisticated pages composed of data views that allow searching, filtering, sorting, and browsing large data sets. The data views are driven by data controllers constructed by application generator for each database table and view included in a project. Developers customize their apps by changing properties of data controller configuration elements.

One can think of application data controllers as blocks of a LEGO kit that are custom-maid for a database project. Sometimes the built-in functionality of a data controller may not meet your presentation requirements. You want to build a LEGO model of a medieval castle  but the rooftops don’t look the right way!

This is where the REST APIs of data controllers come handy. Developers can create a custom presentation with jQuery or any other popular JavaScript client library while taking advantage of a REST-enabled application server built in a generated web app.

Application pages can be extended with custom user controls hosting any HTML content and server-side ASP.NET components. Let’s implement a custom user control that will provide an alternative method of browsing the product catalog in Northwind sample.

Enabling REST for “Products” Data Controller

Begin with enabling REST for the data controller Products. Programmatic access to data controllers via REST is disabled by default. A developer can configure a data controller in Designer to allow REST. Developers can also write code to allow REST for data controllers based on arbitrary conditions.

Start Project Designer, select Products node on the Controllers tab of Project Explorer.

Activating properties of a data controller in Project Designer of Code On Time web application generator

Configure the data controller:

Property Value
Representational State Transfer (REST) Configuration Uri: .
Users: *

Click OK button to save the changes.

The built-in application server will allow access to any URI that targets the Products data controller if a user is authenticated. The “URI” parameter is a regular expression that matches any URI as defined. The “Users” parameter allows only authenticated users to access Products data controller via the application server.

For example, the following URI of MyProducts data controller will require a valid application user name and password to return a list of products sorted in descending order of UnitPrice. Click on the link and enter admin/admin123% or user/user123% when a login prompt is displayed.

http://demo.codeontime.com/northwind/appservices/MyProducts?_sortExpression=UnitPrice%20desc

Creating a User Control

Activate Pages tab of Project Explorer and choose “New Page” option on the toolbar.

Creating a new page in Project Designer of Code On Time web application generator

Enter the following properties and click OK to save the page.

Property Value
Name DemoPage
Index 1005
Roles ?

The page is configured to be accessible to all users including those visiting the site anonymously.

Select User Controls tab at the bottom of Project Explorer and choose New User Control button on the toolbar.

Creating a new user control in a Code On Time web application

Enter “ProductBrowserControl” in the name and save. Right-click the new user control node in Project Explorer and select Copy.

Copying a user control to Clipboard in Code On Time Project Designer

Activate Pages tab of Project Explorer, right-click Demo Page node and choose Paste.

Adding an existing custom user control to a page in web app created with Code On Time application generator

Click Browse button on the Project Designer toolbar. The application generator will produce the user control files and launch a default web browser. Switch back to the generator window.

Right-click the Demo Page / c101/ control1 – ProductBrowserControl node and choose Edit in Visual Studio option.

Activating Visual Studio to modify the markup of a user control instance placed in a page container

The definition of the user control will be displayed in Visual Studio. If you do not have Visual Studio installed, then open the file ~/Controls/ProductBrowserControl.ascx in Notepad.


Implementing Product Catalog Browser with jQuery and REST

Replace the markup of the user control with the following definition and save the file.

<%@ Control Language="C#" AutoEventWireup="true" %>
<!-- this tag is needed to enable jQuery IntelliSense only -->
<script src="../Scripts/_System.js" type="text/javascript"></script>
<!-- the user interface of the control -->
<input id="Query" type="text" />
<button id="FindButton">
    Find</button>
<div id="ProductListPanel">
    <select id="ProductList" size="15">
    </select>
</div>
<!-- the implementation of the product catalog -->
<script type="text/javascript">
    $(document).ready(function () {
        $('#ProductListPanel').hide();
        setTimeout(function () {
            $('#Query').focus();
        }, 10);
        $('#FindButton').click(function (e) {
            e.preventDefault();
            var query = '?_sortExpression=ProductName&_q=' +
                    encodeURIComponent($('#Query').val());
            $.ajax({
                url: '../appservices/Products' + query,
                cache: false,
                dataType: 'json',
                success: function (data) {
                    $('#ProductList option').remove();
                    $.each(data.Products, function (index, product) {
                        $('<option>')
                                .text(
                                    product.ProductName + ' / ' +
                                    product.CategoryCategoryName + ' / ' +
                                    product.SupplierCompanyName + ' / ' +
                                    product.UnitPrice)
                                .attr('value', product.ProductID)
                                .appendTo($('#ProductList'));
                    });
                    $('#ProductListPanel').show();
                }
            });
        });
    });
</script>

The first script tag in the user control is optional. It is provided only to enable IntelliSense for jQuery in Visual Studio.

Element ProductList will be populated with the matching products when a user initiates a search operation.

The second script tag defines a script that will execute as soon as a page with the user control has been loaded in a web browser. The script registers an event handler attached to a button. The handler will create an AJAX request to the highlighted application URL. Also note the highlighted data type “json” in the ajax method arguments. Successful response will have matching products displayed in the list box by success method.

Right-click the Demo Page node on the Pages tab of Project Explorer and choose View in Browser option in the context menu.

Browsing a specific page in a project created with Code On Time web application generator

The page will be displayed in a default web browser window. The identity of a user is not know. The login link is displayed in the right top corner of the membership bar.

An instance of 'ProductCatalogBrowser' control displayed on a page in a web browser displayed to an anonymous user

If a user clicks on Find button then a standard browser window requesting user credentials will be displayed. The application server has found out that a user must be authenticated to initiate execution of a service request involving Products data controller. That explains the browser login prompt.

A standard browser login window displayed when a data controller REST resource requires authentication

If a user enters a valid user and password (for example  admin/admin123% or user/user123% ), then a list of matching products is displayed. Note that the user is still not authenticated to access the pages of the web app.

Product Catalog Browser displays a list of products to a user with a known identity

If a user click on the “Login” link of the membership bar and successfully signs in, then an attempt to search for products will not cause additional requests for authentication. The application server detects the user identity and allows access to the requested URI.

Authenticated web app user can interact with custom controls that take advantage of REST APIs of the built-in application server without the need to login