Business Rules/Logic

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
Business Rules/Logic
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

Tuesday, September 25, 2012PrintSubscribe
jQuery Cross-Domain Dynamic Client of a Web App

A fictitious company Northwind Traders had a fair amount of success with the statically exposed product catalog that allows third parties to display the catalog on their own web sites. An exceptionally small amount of code is required to create a jQuery cross-domain static client of the back office web app created with Code On Time.

Northwind Traders have decided to offer search capabilities of the back office web app to their premium integration partners.

A possible implementation of a search client is shown next.

If a user clicks Find without entering a search sample,  then the first one hundred products are retrieved in alphabetical order.

The search result displayed in jQuery cross-domain dynamic client of the demo web app when a search criteria is not specified

This is the result that matches “40 biscuit” search criteria.

The search result displayed in jQuery cross-domain dynamic client of the demo web app with '40 biscuit' search sample

The back office web app at http://demo.codeontime.com/northwind/pages/products.aspx displays the same exact result as follows.

The 'Quick Find' result for '40 biscuit' search sample in the demo web app created with Code On Time

The HTML page implementing a sample search client works across domains in any web browser.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Cross-Domain Client</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#ProductListPanel').hide();
            $('#Query').focus();
            $('#FindButton').click(function (e) {
                e.preventDefault();
                var query = '?_sortExpression=ProductName&_q=' +
                    encodeURIComponent($('#Query').val());
                $.ajax({
                    url: 'http://demo.codeontime.com/northwind/appservices/Products' + query,
                    cache: false,
                    dataType: 'jsonp',
                    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>
</head>
<body>
    <input id="Query" type="text" />
    <button id="FindButton">
        Find</button>
    <div id="ProductListPanel">
        <select id="ProductList" size="10">
        </select>
    </div>
</body>
</html>

The page statically links jQuery library from CDN provided by Google.

The search starts when a user clicks on the Find button.

The “click” handler declares a query variable that contains “_sortExpression” and “_q” parameters. The first parameter specifies the sort order of returned products. The search parameter “_q” is the sample for the Quick Find feature of the web app.

Next, the “click” handler invokes ajax method to retrieve data from the web app. The key parameters of the method are url and dataType. The first parameter defines the REST URI of Products data controller. The second parameter indicates that a cross-domain web request must be executed by jQuery library.

If the request is successful, then a list of products populates the list box.

Monday, September 24, 2012PrintSubscribe
Your Own Personal Application Server

Code On Time release 7.0.2.0 introduces a built-in application sever in web apps created with Unlimited edition. Developers are creating modern user interface forms based on the data controllers using drag & drop and cut/copy/paste. Customized data controllers provide powerful REST APIs that allow extending web apps created with Code On Time to any platform supporting REST, JSON, JSONP, and XML.

See an example of HTML form that allows submitting data to the web app database without a single line of code. Learn how to create a native Windows Client for your web app. More examples covering development of cross-domain and embedded jQuery scripts are coming soon. It is now possible to create custom user controls that take a full advantage of data controllers with the help of jQuery.

The following features, enhancements, and bug fixes are included in this release:

  • REST APIs allow extending web apps with no-code html forms, native clients, and jQuery scripts.
     
  • Parameters can be referenced in the SQL Formula definition of a field.
     
  • Web Site Factory projects include the app generator version number in JavaScript and CSS references.
     
  • Many-to-many business rules work correctly when removing data rows from tables with surrogate primary keys.
     
  • Method BusinessRules.Result.RefreshChildren will correctly refresh the child views.
     
  • The category of annotations remains invisible until activatied by the end user.
     
  • Data sheet view will correctly size the columns in "new" mode when annotations are enabled.
     
  • Adaptive filter dialog window will correctly handle Enter key to prevent re-submission of the page.
     
  • The selected row is correctly "forgotten" by a data view when it is not in the filtered set of data rows.
     
  • Inline lookup record creation will correctly reference the Data Value Field and Data Text Field of the lookup field when figuring the value and text that must be selected in the lookup.
     
  • The controller configuration caching is now performed to improve performance. Only once instance of a data controller configuration is customized when processing  a server request.
     
  • Designer maintains "collapsed" state of nodes in Project Explorer during drag & drop operations.
     
  • Designer correctly saves changed to the "Group" property of views.
     
  • DataViewExtender class is now declared as a partial class derived from DataViewExtenderBase, which makes it possible to override CSS and JavaScript registration.
     
  • Many-to-many field values (without aliases are displayed on reports. We are still working on making possible display of of alias values.
     
  • Blob handler sets HTTP status code to 404 if the blob stream length is zero.