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
Tuesday, November 27, 2012PrintSubscribe
Advanced User Manager for Custom Membership and Role Provider: Configuring the Views

Let’s customize the Users page and views in order to improve the presentation of the User Management screen.

Moving the Users Page

Start the Project Designer. In the Project Explorer, drag Region / Roles page node onto Region / Users page node to place it underneath Users page.

Dropping Roles page node onto Users page node.      Roles page node has been placed underneath Users page.

Drag Region / Users node on the right side of Reports node to place it at the bottom of the hierarchy.

Dropping Users page node on the right side of Reports page node.      Users page has been placed after Reports.

Right-click on Users / container2 node, and press Delete.

Deleting 'container2' on the Users page.

Configuring grid1

Switch to the Controllers tab and expand to Users / Views / grid1 node. While holding Ctrl key, select the data fields in the following order: UserName, IsApproved, Email, IsLockedOut, CreationDate, LastLoginDate, and Comment. Drop the data fields on Users / Views / grid1 to sort the fields in the selected order.

Dropping several data fields onto 'grid1' view.      The data fields have been rearranged.

Select the data fields LastActivityDate and LastLockedOutDate. Right-click and press Delete.

Deleteing data fields 'LastActivityDate' and 'LastLockedOutDate'.

Configuring editForm1

Double-click on Users / Views / editForm1 / c1 – Users category node.

The category 'c1 - Users' of editForm1 view.

Change the following properties:

Property New Value
Header Text User Information
Description Please select user roles that most closely match user's responsibilities. Roles control access to the areas of this web site. Please contact system administrator if role access restrictions must be changed. Enter any additional comments about this user account. Comment is not visible to the user.

Press OK to save. Right-click on Users / Views / editForm1 node, and press New Category.

New Category context mneu option for editForm1 view.

Assign the following values:

Property New Value
Header Text Password Recovery
Description During the recovery of a forgotten password the user will be asked to enter a user name. If a user account exists then a security question is requested to be answered. A correct answer will trigger an email with a temporary password send to the user. Change locked out flag to 'No' if the user has been locked out after reaching a maximum number of failed login attempts and you want to allow user to login again.

Press OK to save. Expand Users / Views / editForm1 / c1 – User Information category node. While holding Ctrl key, select the following data fields: Email, Password Question, and IsLockedOut. Drop the data fields onto Users / Views / editForm1 / c2 – Password Recovery node.

Dropping several data fields onto category 'c2 - Password Recovery'.      Data fields have been moved to category 'c2 - Password Recovery'.

Press OK to save. Create another category with these properties:

Property New Value
Header Text Activity Statistics
Description Shows statistics of user activity.

Save the category. Drag the data fields CreationDate, LastLoginDate, LastActivityDate, and LastPasswordChangedDate onto Users / Views / editForm1 / c3 – Activity Statistics.

Dropping several data fields onto category 'c3 - Activity Statistics'.      Data fields have been moved to category 'c3 - Activity Statistics'.

Create one more category:

Property New Value
Header Text Login Statistics
Description These are the statistics of failed login attempts by this user. User will be locked out after reaching a maximum number of failed login attempts. Locked out users will be able to login again after the date in Failed Password Attempt Window Start. Users who failed to recover the password will be able to so after the date in Failed Password Answer Attempt Window Start. You can restore user's ability to login by setting Locked Out flag to 'No'.

Save the category. Drag the data fields LastLockedOutDate, FailedPasswordAttemptCount, FailedPasswordAttemptWindowStart, FailedPasswordAnswerAttemptCount, and FailedPasswordAnswerAttemptWindowStart onto Users / Views / editForm1 / c4 – Login Statistics category node.

Dropping several data fields onto category 'c4 - Login Statistics'.      Data fields have been moved to category 'c4 - Login Statistics'.

Select the data fields Password and PasswordAnswer. Right-click, and press Delete.

Deleting the data fields 'Password' and 'PasswordAnswer'.

Configuring createForm1

Double-click on Users / Views / createForm1 / c1 – New Users category node.

Category 'c1 - New Users' of createForm1 view.

Change the following properties:

Property New Value
Header Text New User Information
Description Please enter user name and password. Note that password must be at least 7 characters long and include one non-alphanumeric character. Only approved users will be able to login into the website.

Press OK to save. Right-click on Users / Views / createForm1 node, and press New Category.

New Category context mneu option for 'createForm1' view.

Assign the following values:

Property New Value
Header Text Roles
Description Please select user roles that most closely match user's responsibilities. Roles control access to the areas of this web site. Please contact system administrator if role access restrictions must be changed.

Press OK to save. The Roles field will be added in the next tutorial.

Create another category with these properties:

Property New Value
Header Text Password Recovery
Description These fields are required to help a user to recover a forgotten password. During the recovery process the user will be asked to enter a user name. If a user account exists then a security question is requested to be answered. A correct answer will trigger an email with a temporary password send to the user.

Save the category. Drag the data fields Email, PasswordQuestion, and PasswordAnswer onto Users / Views / createForm1 / c3 – Password Recovery.

Dropping several data fields onto category 'c3 - Password Recovery'.     Data fields moved to category 'c3 - Password Recovery'.

Create one more category:

Property New Value
Header Text Comments
Description Enter any additional comments about this user account. Comment is not visible to the user.

Save the category. Drag the data field Comment onto Users / Views / createForm1 / c4 – Comments category node.

Several data fields dropped onto category 'c4 - Comments'.     Data fields moved to category 'c4 - Comments'.

Click on the data field LastActivityDate. While holding Shift key, click on the data field FailedPasswordAnswerAttemptWindowStart. Right-click, and press Delete.

Deleting the unnecessary data fields from createForm1 view.

Configuring Read-Only Fields and Checkboxes

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

The 'List' option for Fields node of Users controller.

Make the following changes to the list of fields:

Name Read Only Items Style Data Format String
IsApproved   Check Box  
LastActivityDate Yes   g
LastLoginDate Yes   g
LastPasswordChangedDate Yes   g
CreationDate Yes   g
IsLockedOut   Check Box  
LastLockedOutDate Yes   g
FailedPasswordAttemptCount Yes    
FailedPasswordAttemptWindowStart Yes   g
FailedPasswordAnswerAttemptCount Yes    
FailedPasswordAnswerAttemptWindowStart Yes   g

Double-click on Users / Views / editForm1 / c1 – User Information / UserName data field.

UserName data field node of 'editForm1' of Users controller.

Change the Read Only property:

Property New Value
Read Only Yes

Press OK to save. Double-click on Users / Views / editForm1 / c2 – Password Recovery / PasswordQuestion data field.

PasswordQuestion data field node of 'editForm1' of Users controller.

Change the Read Only property:

Property New Value
Read Only Yes

Press OK to save. Double-click on Users / Views / createForm1 / c1 – New User Information / Password data field node. Make the following change:

Property New Value
Text Mode Password

Save the data field.

Wednesday, November 7, 2012PrintSubscribe
Using “Navigation Button” Menu

Web applications may have a large number of pages. Traditional approach is to list the top level pages as menu options on every page.

Here is an example of Adventure Works web app based on the sample database with 91 tables and views. The menu presentation is “Standard Multi-Level”.  The menu option Products / Product / Product Review is selected in the screenshot.

Adventure Works sample with 'Standard Multi-Level' navigation menu created with Code On Time web application generator

The page user interface can be simplified by changing the menu presentation style to “Navigation Button”.

Select the project name on the start page of the application generator, choose Settings, and proceed to Layout.

Select “Navigation Button” as menu presentation style, click Finish, and generate the application.

Notice that the menu bar with top-level options has disappeared from the user interface of the page. There is also and “drop” arrow next to the application name in the page header.

Adventure Works sample with 'Navigation Button' menu created with Code On Time web application generator. The button in the page header is not active.

Move a mouse pointer over the application name and hover over menu options to select another page.

Adventure Works sample with 'Navigation Button' menu created with Code On Time web application generator. The button has been activated to select another page.

The site menu with “Navigation Button” style offers a minimalistic presentation even for the most complex navigation systems.

Wednesday, November 7, 2012PrintSubscribe
Comparing Fly-Over Login and Dedicated Login Page

If custom membership and role providers are enabled for a project then the application is configured to expose the page with the name Home to anonymous users. A link on a membership bar allows activating the fly-over Login window.

A fly-over login window in web app with custom membership and role providers created with Code OnTime application generator

Developers can re-design the page Home by removing the standard user controls and adding the custom ones. Standard user controls display a site map and login instructions.

Additional pages can be exposed to end users if their Roles property is set to “?”.

For example, create a new page MySiteMap, set its Roles property to “?” (do not copy the double quotes). Activate User Controls tab in Project Explorer, right-click the user control node TableOfContents and choose “Copy”. “Paste” the user control on the new page. Right-click the page and choose “View in Browser”.

The new page will be visible to anonymous users along with Home page.

A page of a web app is exposed to anonymous users if its 'Roles' property is set to '?'

A dedicated login page can “greet” users when they access the web app.

Select the project on the start page of application generator, choose Settings, and proceed to Authentication and Membership. Choose Login Window section and enable a dedicated login page instead of a fly-over login window. Click Finish button.

Select Refresh action to ensure that the dedicated login page is included in the application design. Do not choose any data controllers in Refresh Dialog and simply proceed to refresh the project by clicking on Refresh button.

Generate the project. A dedicated page will be displayed asking users to sign in.

A standard dedicated login page created by application generator

If you need to change the layout of the login page, then activate Project Designer. Select User Controls tab in Project Explorer. Right-click Login user control node and select “Edit in Visual Studio” option in context menu.

Activating Visual Studio to modify the 'Login' user control

Visual Studio will start and display the definition of the user control. The user control is configured to be generated “First Time Only”. Any changes done in Visual Studio will persist between sessions of code generation.

Notice that the pages available to anonymous users are still accessible if the URL of the page is known.

For example,  an anonymous user can access MySiteMap page created above by entering the URL directly in the address bar of a web browser without being required to sign in.

A page can be accessed directly in web app with a dedicated login page if its 'Roles' property is set to '?'

An attempt to access a protected page will redirect an anonymous user to the dedicated login page.