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, 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.

Tuesday, November 27, 2012PrintSubscribe
Advanced User Manager for Custom Membership and Role Provider: Adding “Roles” Tab

Let’s add a “Roles” tab on the Users page to allow management of roles. When a role is selected, users corresponding to the role will be displayed below. In order to create this “implied” master-detail relationship, a “UsersInRole” view must be created that will use a custom command to extract the RoleID.

Creating “Users In Role” View

Right-click on Users / Views / grid1 view node, and press Copy.

Copying 'grid1' view of Users controller.

Right-click on Users / Views node, and press Paste. A duplicate of the view will be created.

Pasting a view onto Users controller.     A duplicate of 'grid1' called 'v100' has been created.

Double-click on Users / Views / v100 node. Next to the Command property, select the New Command icon.

Creating a new command.

Assign these values.

Property Value
Id command2
Text
select
    "Users"."UserID" "UserID"
    ,"Users"."UserName" "UserName"
    ,"Users"."Password" "Password"
    ,"Users"."Email" "Email"
    ,"Users"."Comment" "Comment"
    ,"Users"."PasswordQuestion" "PasswordQuestion"
    ,"Users"."PasswordAnswer" "PasswordAnswer"
    ,"Users"."IsApproved" "IsApproved"
    ,"Users"."LastActivityDate" "LastActivityDate"
    ,"Users"."LastLoginDate" "LastLoginDate"
    ,"Users"."LastPasswordChangedDate" "LastPasswordChangedDate"
    ,"Users"."CreationDate" "CreationDate"
    ,"Users"."IsLockedOut" "IsLockedOut"
    ,"Users"."LastLockedOutDate" "LastLockedOutDate"
    ,"Users"."FailedPasswordAttemptCount" "FailedPasswordAttemptCount"
    ,"Users"."FailedPasswordAttemptWindowStart" 
        "FailedPasswordAttemptWindowStart"
    ,"Users"."FailedPasswordAnswerAttemptCount" 
        "FailedPasswordAnswerAttemptCount"
    ,"Users"."FailedPasswordAnswerAttemptWindowStart" 
        "FailedPasswordAnswerAttemptWindowStart"
    ,UserRoles.RoleID RoleID
from "dbo"."Users" "Users"
left join UserRoles on Users.UserID = UserRoles.UserID
Type Text
Event Select

Press OK to create the command and insert it into the property. Also make the following changes:

Property Value
Label Users In Role
Show In View Selector false

Press OK to save. In the Project Explorer, right-click on Users / Views / v100 and press Rename.

Renaming the view 'v100' using the context menu option.

Change the name to “UsersInRole” and press Enter on your keyboard to save.

View ID has been changed to 'UsersInRole'.

Adding “RoleID” Field

Right-click on Users / Fields node, and press New Field.

New Field context menu option for Users controller.

Assign the following properties:

Property Value
Name RoleID
Type Int32
The field is hidden from users. true
Label Role ID
Allow Query-by-Example true

Press OK to save the field. Drop Users / Fields / RoleID field node onto Users / Views / UsersInRole to create a data field and append it to the view.

Dropping RoleID field onto view 'UsersInRole'.     'RoleID' data field created in view 'UsersInRole'.

Adding Roles Tab to Users Page

Switch to the Controllers tab in the Project Explorer. While holding Ctrl key, click on Roles and Users controller nodes in that order. Right-click and press Copy.

Copying the Roles and Users controllers.

Switch back to the Pages tab. Right-click on Users / container1 node, and press Paste. The controllers will be instantiated as views in the container.

Pasting onto 'container1' of Users page.      The copied controllers have been instantiated as views in the container.

Double-click on Users / container1 / view1 (Users) data view node.

Selecting 'view1' on the Users page.

Change the following properties.

Property New Value
Activator Tab
Text Users
Search By First Letter true

Press OK to save. Double-click on Users / container1 / view2 (Roles) node.

Selecting 'view2' on the Users page.

Make the following changes.

Property New Value
Activator Tab
Text Roles

Save the data view. Double-click on Users / container1 / view3 (Users) node.

Selecting 'view3' on the Users page.

Make these changes:

Property New Value
View UsersInRole
Activator Tab
Text Roles

Save the data view. Expand Users / container1 / view3 (Users, UsersInRole) / UsersInRole node. Drop RoleID data field node onto Users / container1 / view2 (Roles) to establish a master-detail relationship.

Dropping 'RoleID' data field of UsersInRole view onto 'view2' in Users page.      A master-detail relationship has been created between 'view3' and 'view2'.

Tuesday, November 27, 2012PrintSubscribe
Advanced User Manager for Custom Membership and Role Provider: Adding “Roles” and “Confirm Password” Fields

Let’s add two calculated fields to Users controller. Roles field will allow app users to change role assignments for a user. Confirm Password field will require the app user to write the password twice when creating a user.

Adding “Roles”

In the Project Explorer, switch to the Controllers tab. Right-click on Users / Fields node, and press New Field.

'New Field' context menu option for Users controller.

Assign the following values:

Property Value
Name Roles
Type String
Length 255
Allow null values. true
The value of this field is computed at run-time by SQL expression. true
Label Roles
Items Style Check Box List
Items Data Controller Roles
Data Value Field RoleName
Data Text Field RoleName

Press OK to save the field.

Drop Users / Fields /Roles (String(255)) –> Roles: RoleName / RoleName field node onto Users / Views / editForm1 / c1 – User Information category node to create a data field at the end.

Dropping 'Roles' field onto a category in 'editForm1' to create a data field.     'Roles' data field created in 'editForm1' view.

Drop Roles data field node on the right side of UserName node to place it after UserName.

Dropping Roles data field on the right side of UserName to place it second in the category.     Roles data field is now second in the category.

Drop Users / Fields / Roles (String(255)) –> Roles: RoleName / RoleName node onto Users / Views / createForm1 / c2 – Roles category node.

Dropping 'Roles' field onto a category in 'createForm1' to create a data field.     'Roles' data field created in 'createForm1' view.

Handling Roles Field

The Roles field has been added to the form, but it will not be populated. Let’s create a business rule to populate values. In the Project Explorer, right-click on Users / Business Rules node, and press New Business Rule.

Creating a new business rule for Users controller.

Property Value
Type C# / Visual Basic
Command Name Select
View editForm1
Phase Execute

Save the rule. On the toolbar, press Browse to regenerate the web app and create the business rule file. When finished, right-click on Users / Business Rules / Select (Code / Before) – r100 node and press Edit Rule in Visual Studio.

Context menu option 'Edit Rule in Visual Studio' for a business rule.

Replace the code with the following.

C#:

using System;
using System.Data;
using System.Text;
using MyCompany.Data;

namespace MyCompany.Rules
{
    public partial class UsersBusinessRules : MyCompany.Data.BusinessRules
    {

        /// <summary>
        /// This method will execute in the view with id matching "editForm1" for an action
        /// with a command name that matches "Select".
        /// </summary>
        [Rule("r100")]
        public void r100Implementation(
                    FieldValue userID,
                    string userName,
                    string password,
                    string email,
                    string comment,
                    string passwordQuestion,
                    string passwordAnswer,
                    bool? isApproved,
                    DateTime? lastActivityDate,
                    DateTime? lastLoginDate,
                    DateTime? lastPasswordChangedDate,
                    DateTime? creationDate,
                    bool? isLockedOut,
                    DateTime? lastLockedOutDate,
                    int? failedPasswordAttemptCount,
                    DateTime? failedPasswordAttemptWindowStart,
                    int? failedPasswordAnswerAttemptCount,
                    DateTime? failedPasswordAnswerAttemptWindowStart,
                    string confirmPassword,
                    string roles)
        {
            // concatenate user roles in comma-separated list
            StringBuilder sb = new StringBuilder();
            foreach (string role in System.Web.Security.Roles.GetRolesForUser(userName))
            {
                if (sb.Length > 0)
                    sb.Append(',');
                sb.Append(role);
            }
            // store the list of roles to the "Roles" field
            UpdateFieldValue("Roles", sb.ToString());
        }
    }
}

Visual Basic:

Imports MyCompany.Data
Imports System
Imports System.Linq

Namespace MyCompany.Rules
    
    Partial Public Class UsersBusinessRules
        Inherits MyCompany.Data.BusinessRules
        
        ''' <summary>
        ''' This method will execute in any view before an action
        ''' with a command name that matches "Select" and argument that matches "editForm1".
        ''' </summary>
        <Rule("r100")> _
        Public Sub r100Implementation( _
                    ByVal userID As FieldValue, _
                    ByVal userName As String, _
                    ByVal password As String, _
                    ByVal email As String, _
                    ByVal comment As String, _
                    ByVal passwordQuestion As String, _
                    ByVal passwordAnswer As String, _
                    ByVal isApproved As Nullable(Of Boolean), _
                    ByVal lastActivityDate As Nullable(Of DateTime), _
                    ByVal lastLoginDate As Nullable(Of DateTime), _
                    ByVal lastPasswordChangedDate As Nullable(Of DateTime), _
                    ByVal creationDate As Nullable(Of DateTime), _
                    ByVal isLockedOut As Nullable(Of Boolean), _
                    ByVal lastLockedOutDate As Nullable(Of DateTime), _
                    ByVal failedPasswordAttemptCount As Nullable(Of Integer), _
                    ByVal failedPasswordAttemptWindowStart As Nullable(Of DateTime), _
                    ByVal failedPasswordAnswerAttemptCount As Nullable(Of Integer), _
                    ByVal failedPasswordAnswerAttemptWindowStart As Nullable(Of DateTime), _
                    ByVal roles As String, _
                    ByVal confirmPassword As String, _
                    ByVal roleID As Nullable(Of Integer))
            ' concatenate user roles in comma-separated list
            Dim sb As New StringBuilder()
            For Each role As String In System.Web.Security.Roles.GetRolesForUser(userName)
                If (sb.Length > 0) Then
                    sb.Append(",")
                End If
                sb.Append(role)
            Next
            ' store the list of roles to the "Roles" field
            UpdateFieldValue("Roles", sb.ToString())
        End Sub
    End Class
End Namespace

Save the business rule file.

Adding “Confirm Password”

Right-click on Users / Fields node, and press New Field.

Creating a new field in Users controller.

Assign the following:

Property Value
Name ConfirmPassword
Type String
Length 40
The value of this field is calculated by a business rule expression. true
Label Confirm Password

Press OK to save the field. Drop Users / Fields / ConfirmPassword* (String(40)) onto Users / Views / createForm1 / c1 – New User Information category node to create a data field.

Dropping 'ConfirmPassword' field onto a category in 'createForm1' to create a data field.     'ConfirmPassword' data field created in 'createForm1' view.

Drop ConfirmPassword data field on the right side of Password to place it in the third position in the category.

Dropping ConfirmPassword data field node on the right side of Password.    ConfirmPassword data field is now in the third position.

Double-click on Users / Views / createForm1 / c1 – New User Information / ConfirmPassword data field node. Make the following change:

Property New Value
Text Mode Password

Press OK to save.