User Interface

Labels
AJAX(112) App Studio(8) 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(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(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
User Interface
Thursday, January 17, 2013PrintSubscribe
Conditional Data Editing

The When Client Script property allows controlling the display of an action based on a JavaScript expression. When the expression evaluates to true, the action is displayed. When it evaluates to false, the action is hidden. This property can be used to prevent users from editing a record based on certain conditions.

The property may be manually set in the Project Designer for every action that needs to be hidden. However, this may result in a large number of changes to be made. If the requirements of the web application were to change, all actions would need to be modified.

A simpler method would be to use virtualization node set plugins. The data controllers will be virtualized to conditionally add a When Client Script parameter for a subset of actions. When project requirements change, the virtualization code can be modified once.

For example, suppose that the web application described in the When Client Script tutorial has been created. The three Edit actions in the Orders controller are not displayed when the Status field of the order is set to “Committed”.

Edit actions removed from the Orders controller.

However, orders may still be deleted and order details can be modified. Let’s implement virtualization node set plugins to ensure that the user cannot make any changes to committed orders.

First, make sure to clear any When Client Script values that have been set previously.

Including Status Field in Order Details Controller

In order to prevent order details from being edited, the Status field must be included in the Order Details controller using denormalization.

Start the web application generator. Click on the project name, select Settings, and activate Business Logic Layer. Select Denormalization Map from the list, and make the highlighted addition:

dbo.Order Details => dbo.Orders
OrderDate
RequiredDate
ShippedDate
ShipVia
Freight
ShipName
ShipAddress
ShipCity
ShipRegion
ShipPostalCode
ShipCountry
Status

dbo.Orders => dbo.Employees
FirstName

Press Finish to navigate to the Summary page. Click on Refresh, and check the box next to OrderDetails controller. Press Refresh and confirm.

Refreshing the OrderDetails controller.

On the Summary page, press Design to activate the Project Designer. In the Project Explorer, switch to the Controllers tab. Double-click on OrderDetails / Fields node.

'OrderStatus' field of OrderDetails controller.

Mark the field as hidden.

Property New Value
The field is hidden from users. true

Press OK to save. Drop OrderStatus (String(50), read-only) field node onto OrderDetails / Views / grid1 node.

Dropping field 'OrdersStatus' onto 'grid1' view.     'OrderStatus' data field instantiated.

Adding Business Rule

Right-click on Orders controller node and press Edit Handler in Visual Studio.

Using the context menu option 'Edit Handler in Visual Studio'.

The handler file will open in Visual Studio. Append the SharedBusinessRules class with the two highlighted methods:

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);
            }
        }

        public override bool SupportsVirtualization(string controllerName)
        {
            if (controllerName == "Orders" || controllerName == "OrderDetails")
                return true;
            else
                return false;
        }
protected override void VirtualizeController(string controllerName) { if (controllerName == "Orders") NodeSet().SelectActions("Edit", "Delete") .WhenClientScript("[Status] != 'Committed'"); else if (controllerName == "OrderDetails") NodeSet().SelectActions("Edit", "Delete", "New", "Duplicate") .WhenClientScript("[OrderStatus] != 'Committed'"); } } }

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

        Public Overrides Function SupportsVirtualization(controllerName As String) As Boolean
            If controllerName = "Orders" Or controllerName = "OrderDetails" Then
                Return True
            Else
                Return False
            End If
        End Function
Protected Overrides Sub VirtualizeController(controllerName As String) If controllerName = "Orders" Then NodeSet().SelectActions("Edit", "Delete").WhenClientScript( "[Status] != 'Committed'") ElseIf controllerName = "OrderDetails" Then NodeSet().SelectActions("Edit", "Delete", "New", "Duplicate").WhenClientScript( "[OrderStatus] != 'Committed'") End If End Sub End Class End Namespace

The business rule will virtualize the Orders and OrderDetails controllers. For Orders, all Edit and Delete actions will be selected. For OrderDetails, all Edit, Delete, New, and Duplicate actions will be selected. Then, a When Client Script parameter will be assigned to hide the actions when the Status field is equal to “Committed”.

Viewing the Results

Save the file, and run the web application in your browser. Navigate to the Orders page. The Edit and Delete actions are no longer available in the user interface.

All Edit and Delete actions on Orders controller are unavailable.

Select an order to view the order details. All Edit, Delete, New, and Duplicate actions will not be available.

image

Wednesday, January 16, 2013PrintSubscribe
“When Client Script” Property for Actions

Suppose that you have implemented the Order Form Sample with transactions using a “Status” field. The Status will partition “draft” orders from “committed” orders. However, the user may still navigate to the Orders page and change the values and details of a committed order.

Committed order values can be changed on the 'Orders' page.

Let’s prevent users from activating any Edit action when the Status field is set to “Committed”. This will be implemented with the help of “When Client Script” property. When the specified JavaScript expression evaluates to true, the action will be displayed. When it evaluates to false, the action will be hidden.

Adding Status Field

First, the Status field must be added to the controller so that the field value can be used in the JavaScript expression. Start the web application generator, and click on the project name. Press Refresh, and check the box next to Orders controller. Press Refresh, and confirm.

Refreshing the Orders controller.

On the Summary page, click on Design to activate the Project Designer. In the Project Explorer, switch to the Controllers tab and expand Orders / Fields node. Drop Status (String(50)) node onto Orders / Views / grid1. The field will be instantiated as a data field in the view.

Dropping 'Status' field onto 'grid1' view of Orders controller.     Data field for 'Status' created in 'grid1' view.

Double-click on Orders / Fields / Status (String(50)) node.

Status field of Orders controller.

Mark the field as hidden.

Property New Value
The field is hidden from users. true

Press OK to save.

Hiding Edit Fields

In the Project Explorer, double-click on Orders / Actions / ag1 (Grid) / a2 – Edit action node.

Action 'a2 - Edit' of action group 'ag1'.

Make the following change:

Property New Value
When Client Script
[Status] != 'Committed'

Press OK to save.

Make the same change to Orders / Actions / ag2 (Form) / a1 – Edit action node, and Orders / Actions / ag4 (ActionBar) – Edit/Delete / a1 – Edit, editForm1 action node.

Two Edit actions highlighted in Orders controller.

Viewing the Results

On the Project Explorer toolbar, press Browse. Navigate to Customers | Orders page.

Note that the Edit action is no longer available on the action bar or in the row context menu.

Edit actions on context menu and action bar are no longer available.

In addition, the form will no longer have an Edit button.

Edit button is no longer present in the form.

Saturday, January 5, 2013PrintSubscribe
Interacting with the Client Library

Server-side code can take advantage of the application client library by registering snippets of JavaScript rendered on the server.

Let’s set up a user control with a button. When the button is pressed, an alert will be shown and a message displayed in the message bar at the top of the page.

Creating User Control

Start the Project Designer. On the Project Explorer toolbar, click on the New Page icon.

Creating a new page using the icon on the Project Explorer toolbar.

Assign a name:

Property Value
Name Test

Press OK to save. Drop Test page node on the right side of Home page node to place it second in the hierarchy.

Dropping 'Test' page node on the right side of 'Home' page node.     Page 'Test' has been placed second in the hierarchy.

Right-click on the page, and press New Container.

Creating a new container for page 'Test'.

Preserve the default values and press OK to save.

Right-click on the new container, and press New Control.

Creating a new control.

Next to the User Control lookup in the Project Browser, click on the New User Control icon.

Creating a new user control using the 'New User Control' icon.

Assign the user control a name:

Property Value
Name DisplayAlert

Press OK to save the user control and insert it. Press OK again to save the control.

Modifying the User Control

On the toolbar, press Browse to generate the user control file. When complete, right-click on Test / c101 / control1 – DisplayAlert node, and press Edit in Visual Studio.

Editing the user control in Visual Studio.

The user control will open in Visual Studio. Press Ctrl+K, Ctrl+D keyboard shortcut to format. Replace the code after the <%@ Control %> element with the following:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div style="margin: 2px; border: solid 1px silver; padding: 8px;">
            <asp:Button ID="Button1" runat="server" 
                OnClick="Button1_Click" Text="Button" />
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

The user control will display a button that will perform the “Button1_Click” method handler when pressed. In the Solution Explorer, double-click on ~\Controls\DisplayAlert.ascx\DisplayAlert.ascx.cs file. Add the following method to the file:

C#:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Controls_DisplayAlert : System.Web.UI.UserControl
{
    
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(this.Page,
            this.Page.GetType(), "test1",
            "alert('hello')", true);
        ScriptManager.RegisterStartupScript(this.Page,
            this.Page.GetType(), "test2",
            "Web.DataView.showMessage('hello')", true);
    }
}

Visual Basic:

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text.RegularExpressions
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls


Partial Public Class Controls_DisplayAlert
    Inherits Global.System.Web.UI.UserControl
    
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    End Sub
    Protected Sub Button1_Click(ByVal sender As Object,
                                ByVal e As EventArgs)
        ScriptManager.RegisterStartupScript(Me.Page, Me.Page.GetType(),
                                            "test1", "alert('hello')", True)
        ScriptManager.RegisterStartupScript(Me.Page, Me.Page.GetType(),
                                            "test2", "Web.DataView.showMessage('hello')", True)
    End Sub
End Class

The method will show an alert using the standard alert method. A message is shown at the top of the page with the help of the client library method Web.DataView.showMessage. Save the file, and switch to the web application.

Viewing the Results

Navigate to the Test page. Click on the button in the center of the page. An alert will open with the text “hello”.

image

Press OK to dismiss the alert. A message will be displayed at the top of the page with the text “hello”.

image