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
Monday, June 25, 2012PrintSubscribe
Format On Server

Format strings are used to format data before presentation to the end user. There are standard numeric and date/time format strings. In addition, custom date/time format strings can be created. The formatting is performed in the client web browser by default.

Microsoft.NET offers rich data formatting capabilities. Developers may request formatting of field values on the server to take advantage of everything it has to offer.

For example, the Unit Price field in the Order Details controller uses the standard currency format string of “c”. An application with en-US culture will format the number as a currency with a dollar sign on the left, period as a decimal separator, and parenthesis's to indicate negative values. The $0.00 indicates a zero value.

Unit Price field with default format string of 'c'.

Server-side formatting offers additional field value formatting options.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab and double-click on Order Details / Fields / UnitPrice field node.

UnitPrice field of OrderDetails controller.

Change the following properties:

Property New Value
Data Format String 000,000.00;(000.00);Zero Value
Format On Client False

The data format string is a custom numeric format string. Positive, negative, and zero value strings are separated by a semicolon.

Press OK to save the field. On the toolbar, click on the Browse button to generate the web application.

Navigate to the Order Details page. The values in Unit Price field will be formatted according to the custom numerical format string. All eight digits will be displayed. Zero values will be represented with the text “Zero Value”.

Unit Price field using server-formatted custom numeric format string.

Notice that when the row is in edit mode, the values of fields formatted on the server will be displayed in raw form.

When the row is in edit mode, the values of fields formatted on the server will be displayed in raw form.

Tuesday, June 19, 2012PrintSubscribe
Multiple Edit Forms

Different edit forms can be used depending on the field values of a record. For example, the Customers table has a Postal Code column.

Customers edit form with Postal Code label.

Customers in the United States refer to the Postal Code as a “ZIP Code”. Let’s create another edit form for customers from USA that uses the “ZIP Code” label for Postal Code, and is rendered in two columns.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on Customers / Views node, and select New View option.

Create New View for Customers controller.

Give this view the following settings:

Property Value
Id editFormUSA
Type Form
Command command1
Label Edit Customer from USA
Header Text Edit the fields of this customer from USA.

Press OK to save the view. In the Project Explorer, right-click on Customers / Views / editFormUSA view node, and select New Category.

Create New Category in editFormUSA view.

Assign the following settings:

Property Value
Header Text Customer Information
Description This is information about the customer.

Press OK to save the category. In the Project Explorer, right-click on Customers / Views / editFormUSA / c100 – Customer Information category node, and select New Data Field.

New Data Field in Customer Information category.

Assign the data field these properties:

Property Value
Field Name CustomerID
Columns 5

Save the data field. Create several more data fields with the following settings:

Field Name Columns
CompanyName 20
ContactName 20
ContactTitle 5
Phone 12

Right-click on Customers / Views / EditFormUSA view node, and select New Category.

Create New Category for editFormUSA view.

Give the category these settings:

Property Value
Header Text Shipping Information
Description This is the shipping information for the customer.
New Column Yes

Press OK to save. Add the following data fields to this category:

Field Name Columns Header Text
Address 20  
City 12  
Region 5  
PostalCode 12 ZIP Code
Country 12  

Now that the new edit form has been configured, let’s change the action state machine to direct USA  customers to the correct form.

In the Project Explorer, right-click on Customers / Actions / ag1 (Grid) action group node, and select New Action.

New Action in action group 'ag1'.

Give this action the following settings:

Property Value
Command Name Select
Command Argument editFormUSA
When Client Script [Country] == 'USA'

Press OK to save the action. In the Project Explorer, move the action into second place, after ag1 – Select.

Action a100 in action group 'ag1'.

Double-click on Customers / Actions / ag1 (Grid) / a1 – Select action node.

Action 'a1' in action group 'ag1'.

Change the When Client Script property:

Property Value
When Client Script [Country] != 'USA'

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

Navigate to the Customers page. Select a customer that is not from the United States. The standard edit form will be displayed.

Standard editForm1 view of Customers.

Select a different customer with Country of “USA”. The new two-column edit form will be displayed. “Postal Code” is replaced by “ZIP Code”.

Custom 'editFormUSA' view of Customers from USA.

Friday, June 15, 2012PrintSubscribe
Write Permission on Fields

Fields can be displayed as read-only to users with specific roles. The Hire Date field in the Employees controller allows all users to edit the field value by default.

The Hire Date field is editable for all users by default.

Start the Project Designer. In the Project Explorer, switch to Controllers tab. Double-click on Employees / Fields / HireDate field node.

Hire Date field in the Employees controller.

Change the “Write” Roles property:

Property New Value
“Write” Roles Administrators

Press OK to save the field. On the toolbar, click Browse to generate the application.

Log in as user/user123%. Navigate to the Employees page, and edit a record. The Hire Date column will not be editable.

When logged in as user, the Hire Date Field is not editable.

Log out, and log in as admin/admin123%. The Hire Date column will be editable again.