User Interface

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
User Interface
Wednesday, December 26, 2012PrintSubscribe
Web Transactions with “Status” Field

A dedicated “Status” field in a database table is a simple and easy to implement method of separating “draft” and “committed” data. For example, orders stored in a database will be explicitly marked with a status of “Committed” if no changes are allowed to them. Orders still being composed will be marked with a status of “Draft”. The application must ignore draft data and have it visible only on the order entry page.

Adding the “Status” Column

Start SQL Server Management Studio. In the Object Explorer, right-click on Databases / Northwind and press New Query.

Creating a new query for Northwind database.

Paste in the following script to add the table column and mark all existing orders as “Committed”.

alter table Orders
add Status nvarchar(50) default 'Draft'
go

update Orders
set Status = 'Committed'
go

On the toolbar, press Execute to run the query.

Controlling Display of Draft Orders

Start the web application generator. Select the project name and click Settings. Press Business Logic Layer and enable shared business rules. Click Finish and regenerate the project.

Enabling shared business rules.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on Orders controller node, and press Edit Handler in Visual Studio.

Using the context menu action to edit the handler in Visual Studio.

The shared business rule file will open in Visual Studio. Replace the file with the following code:

C#:

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

namespace MyCompany.Rules
{
    public partial class SharedBusinessRules : MyCompany.Data.BusinessRules
    {
        
        public SharedBusinessRules()
        {
        }

        protected override void EnumerateDynamicAccessControlRules(string controllerName)
        {
            if (Context.Request.UrlReferrer != null)
            {
                if (Context.Request.UrlReferrer.ToString().ToLower().Contains("orderform.aspx"))
                    RegisterAccessControlRule("OrderID", 
                        "select OrderID from Orders where Status = 'Draft'", 
                        AccessPermission.Allow);
                else
                    RegisterAccessControlRule("OrderID", 
                        "select OrderID from Orders where Status = 'Committed'", 
                        AccessPermission.Allow);
            }
        }
    }
}

Visual Basic:

Imports MyCompany.Data
Imports System
Imports System.Collections.Generic
Imports System.Data
Imports System.Linq

Namespace MyCompany.Rules

    Partial Public Class SharedBusinessRules
        Inherits MyCompany.Data.BusinessRules

        Public Sub New()
            MyBase.New()
        End Sub

        Protected Overrides Sub EnumerateDynamicAccessControlRules(controllerName As String)
            If Context.Request.UrlReferrer <> Nothing Then
                If Context.Request.UrlReferrer.ToString().ToLower().Contains("orderform.aspx") Then
                    RegisterAccessControlRule("OrderID",
                                            "select OrderID from Orders where Status = 'Draft'",
                                            AccessPermission.Allow)
                Else
                    RegisterAccessControlRule("OrderID",
                                            "select OrderID from Orders where Status = 'Committed'",
                                            AccessPermission.Allow)
                End If
            End If
        End Sub
    End Class
End Namespace

The implementation will conditionally register a dynamic access control rule that will apply to a view of any data controller with an OrderID data field. If the user is interacting with an application page ~/Pages/OrderForm.aspx, then only data that matches orders with a status of “Draft” is allowed. Otherwise, only data that matches orders with a status of “Committed” is included in the returned data set.

Adding “Submit Order” Action

In the Project Explorer, right-click on Orders / Actions / ag2 (Form) node, and press New Action.

Context menu option 'New Action' for action group 'ag2'.

Assign the following values:

Property Value
Command Name Custom
Command Argument SubmitOrder
Header Text Submit Order

Press OK to save the action. Drop Orders / Actions / ag2 (Form) / a101 – Custom, SubmitOrder | Submit Order node on the left side of a100 – Report | Order Report to place it first.

Dropping action 'a101' on the left side of 'a100'.     Action 'a101' has been placed first in the form.

Adding Business Rule

Right-click on Orders / Business Rules node, and press New Business Rule.

Creating a new business rule for Orders controller.

Assign these values:

Property Value
Type SQL
Command Name Custom
Command Argument SubmitOrder
Phase Execute
Script
update Orders
set Status = 'Committed'
where OrderID = @OrderID

set @Result_NavigateUrl = 'OrderForm.aspx'

The business rule will set Status column of the selected order to “Committed” and refresh the page loaded in the web browser. Press OK to save.

Testing the Results

On the toolbar, press Browse. Navigate to the Order Form page. Create a new order and return to the grid. Note that only a single draft order is listed.

A single draft order is displayed in the Order Form list.

Navigate to the Orders page. Note that the all of the orders are displayed except for the draft order.

Orders page only displays committed orders.

The draft order will also not be visible in any data controllers based on database views if they relate to orders. For example, page Reports | Order Subtotals will not display the new order. The dynamic access control rule explained above filters the order out.

Other views and reports will not display draft reports.

Go back to the Order Form page, and select the draft order. Click on the “Submit Order” button.

Clicking on the 'Submit Order' button in the Order Form.

The browser will refresh the page and display an empty list of orders.

The Order Form grid does not display any records.

The order will now be displayed on Orders page.

The committed order is now displayed on Orders page.

It will also be displayed on Order Subtotals page that can be found under the Reports option in the application navigation menu.

Committed order displayed on Order Subtotals page.

Sunday, December 23, 2012PrintSubscribe
Multi-Purpose Reports

The Order Report with multi-level grouping no longer requires filtering by OrderID. It will correctly render order details if multiple orders are included in the data set. Let’s add an action to Customers data controller that will print all orders of a specific customer.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on Customers / Actions / ag2 (Form) node, and select New Action.

Creating a new action for Customers controller.

Assign the following values:

Property Value
Command Name Report
Header Text Print All Customer Orders
Data

_controller=OrderDetails
_view=editForm1
_template=OrderDetails_report1.rdlc
_sortExpression=OrderID,ProductProductName
OrderCustomerID=CustomerID

When Key Selected Yes

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

Navigate to the Customers page, and select a record. Click on Print All Customer Orders to download the report.

Printing a report of orders filtered by the current customer.

The report will include orders of the selected customer.

PDF report displaying orders of the specific customer.

Thursday, December 20, 2012PrintSubscribe
Order Form Sample–Part 37

A new Report action must be configured in the Orders data controller. The action will produce a PDF output using the custom report template from the “order details” data set filtered by a selected order ID.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on Orders / Actions / ag2 (Form) and press New Action.

Creating a new action in 'ag2' of Orders controller.

Assign the following values:

Property Value
Command Name Report
Header Text Order Report
Data

_controller=OrderDetails
_view=editForm1
_template=OrderDetails_report1.rdlc
_sortExpression=OrderID,ProductProductName
OrderID=OrderID

When Key Selected Yes

Press OK to save.

The highlighted parameters will instruct the reporting engine of application framework to use a specific data controller and report template.

The last expression is the filter that will limit  OrderDetails data set by the order ID that was selected on the client in the data view of Orders when action has been activated.

In the Project Explorer, drop Orders / Actions / ag2 (Form) / a100 – Report | Order Report to the left side of a1 – Edit action node to place it first in the action group.

Dropping action 'a100' on the left side of 'a1'.     Action 'a100' placed first in the heirarchy.

On the toolbar, press Browse. Navigate to the Order Form page, and select an order. Click on Order Report button to see the printable report with a content formatted according to the template.

'Order Report' action is now present on the order form

If you were to click on the Print icon in the top or bottom row of action buttons, then a standard report with a list of order fields will be produced on the server.

Click on the Edit button. Notice that the Order Report button disappears.

'Order Report' action is not present in 'edit' mode.

Let’s make sure that a click on the Print icon will yield the customized Order Report, and that the same report is also accessible in edit mode.

Configuring “Print” Icon

The Print icon always activates the first “Report” action in any group with “Action Bar” scope.

In the Project Explorer, hold down Ctrl key and drop a100 – Report | Order Report node onto Orders / Actions / ag7 (ActionBar) – Report action group node.

Copying action 'a100' into action group 'ag7'.     Action 'a100' duplicated in action group 'ag7'.

Next, drop a100 – Report | Order Report node on the left side of a1 – ReportAsPdf action node to place it first.

Dropping 'a100' action on the left side of action 'a1'.     Action 'a100' placed first in action group 'a100'.

The Print icon will now trigger Orders / Actions / ag7 (ActionBar) – Report / a100 – Report | Order Report action.

Order Report Action in Edit Mode

While holding Ctrl key, drop Orders / Actions / ag2 (Form) / a100 – Report | Order Report onto ag2 (Form) action group node to duplicate the action.

Duplicating action 'a100' in the same action group.    Duplicate of 'a100' created.

Drag a101 – Report | Order Report on the left side of a4 – Update when Edit to place it before the target.

Dropping action 'a101' before action 'a4'.     Action 'a101' placed before action 'a4'.

Double-click on a101 – Report | Order Report node, and make the following change:

Property New Value
When Last Command Name Edit

Press OK to save. This action button Order Report will now appear when the form is in edit mode.