Code On Time: User Interface

Blog

User Interface

Monday, June 11, 2012Print Subscribe

A date and time format string defines the text representation of a DateTime value that results from a formatting operation. It can also define the representation of a date and time value that is required in a parsing operation in order to successfully convert the string to a date and time. A custom format string consists of one or more custom date and time format specifiers. Any string that is not a standard date and time format string is interpreted as a custom date and time format string.

Let’s apply a custom format string to the OrderDate field of Orders controller.

Start the Project Designer. In the Project Explorer, double-click on Orders / Fields / OrderDate field node.

Change the Data Format String property:

Property	Value
Data Format String	'The' d 'of' MMMM, yyyy.

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

Navigate to the Orders page. The Order Date values will be rendered in the custom date pattern.

Below is a list of supported custom date format strings.

Format specifier	Description	Examples
"d"	The day of the month, from 1 through 31.	6/1/2009 1:45:30 PM –> 1 6/15/2009 1:45:30 PM -> 15
"dd"	The day of the month, from 01 through 31.	6/1/2009 1:45:30 PM –> 01 6/15/2009 1:45:30 PM -> 15
"ddd"	The abbreviated name of the day of the week.	6/15/2009 1:45:30 PM -> Mon (en-US) 6/15/2009 1:45:30 PM -> Пн (ru-RU) 6/15/2009 1:45:30 PM -> lun. (fr-FR)
"dddd"	The full name of the day of the week.	6/15/2009 1:45:30 PM -> Monday (en-US) 6/15/2009 1:45:30 PM -> понедельник (ru-RU) 6/15/2009 1:45:30 PM -> lundi (fr-FR)
"f"	The tenths of a second in a date and time value.	6/15/2009 13:45:30.617 –> 6 6/15/2009 13:45:30.050 -> 0
"ff"	The hundredths of a second in a date and time value.	6/15/2009 13:45:30.617 -> 61 6/15/2009 13:45:30.005 -> 00
"fff"	The milliseconds in a date and time value.	6/15/2009 13:45:30.617 –> 617 6/15/2009 13:45:30.0005 -> 000
"ffff"	The ten thousandths of a second in a date and time value.	6/15/2009 13:45:30.6175 –> 6175 6/15/2009 13:45:30.00005 -> 0000
"fffff"	The hundred thousandths of a second in a date and time value.	6/15/2009 13:45:30.61754 –> 61754 6/15/2009 13:45:30.000005 -> 00000
"ffffff"	The millionths of a second in a date and time value.	6/15/2009 13:45:30.617542 –> 617542 6/15/2009 13:45:30.0000005 -> 000000
"fffffff"	The ten millionths of a second in a date and time value.	6/15/2009 13:45:30.6175425 –> 6175425 6/15/2009 13:45:30.0001150 -> 0001150
"g", "gg"	The period or era.	6/15/2009 1:45:30 PM -> A.D.
"h"	The hour, using a 12-hour clock from 1 to 12.	6/15/2009 1:45:30 AM –> 1 6/15/2009 1:45:30 PM -> 1
"hh"	The hour, using a 12-hour clock from 01 to 12.	6/15/2009 1:45:30 AM –> 01 6/15/2009 1:45:30 PM -> 01
"H"	The hour, using a 24-hour clock from 0 to 23.	6/15/2009 1:45:30 AM –> 1 6/15/2009 1:45:30 PM -> 13
"HH"	The hour, using a 24-hour clock from 00 to 23.	6/15/2009 1:45:30 AM –> 01 6/15/2009 1:45:30 PM -> 13
"m"	The minute, from 0 through 59.	6/15/2009 1:09:30 AM –> 9 6/15/2009 1:09:30 PM -> 9
"mm"	The minute, from 00 through 59.	6/15/2009 1:09:30 AM –> 09 6/15/2009 1:09:30 PM -> 09
"M"	The month, from 1 through 12.	6/15/2009 1:45:30 PM -> 6
"MM"	The month, from 01 through 12.	6/15/2009 1:45:30 PM -> 06
"MMM"	The abbreviated name of the month.	6/15/2009 1:45:30 PM -> Jun (en-US) 6/15/2009 1:45:30 PM -> juin (fr-FR) 6/15/2009 1:45:30 PM -> Jun (zu-ZA)
"MMMM"	The full name of the month.	6/15/2009 1:45:30 PM -> June (en-US) 6/15/2009 1:45:30 PM -> juni (da-DK) 6/15/2009 1:45:30 PM -> uJuni (zu-ZA)
"s"	The second, from 0 through 59.	6/15/2009 1:45:09 PM -> 9
"ss"	The second, from 00 through 59.	6/15/2009 1:45:09 PM -> 09
"t"	The first character of the AM/PM designator.	6/15/2009 1:45:30 PM -> P (en-US) 6/15/2009 1:45:30 PM -> 午 (ja-JP) 6/15/2009 1:45:30 PM -> (fr-FR)
"tt"	The AM/PM designator.	6/15/2009 1:45:30 PM -> PM (en-US) 6/15/2009 1:45:30 PM -> 午後 (ja-JP) 6/15/2009 1:45:30 PM -> (fr-FR)
"y"	The year, from 0 to 99.	1/1/0001 12:00:00 AM –> 1 1/1/0900 12:00:00 AM –> 0 1/1/1900 12:00:00 AM –> 0 6/15/2009 1:45:30 PM -> 9
"yy"	The year, from 00 to 99.	1/1/0001 12:00:00 AM –> 01 1/1/0900 12:00:00 AM –> 00 1/1/1900 12:00:00 AM –> 00 6/15/2009 1:45:30 PM -> 09
"yyyy"	The year as a four-digit number.	1/1/0001 12:00:00 AM –> 0001 1/1/0900 12:00:00 AM –> 0900 1/1/1900 12:00:00 AM –> 1900 6/15/2009 1:45:30 PM -> 2009
"z"	Hours offset from UTC, with no leading zeros.	6/15/2009 1:45:30 PM -07:00 -> -7
"zz"	Hours offset from UTC, with a leading zero for a single-digit value.	6/15/2009 1:45:30 PM -07:00 -> -07
"zzz"	Hours and minutes offset from UTC.	6/15/2009 1:45:30 PM -07:00 -> -07:00
":"	The time separator.	6/15/2009 1:45:30 PM -> : (en-US) 6/15/2009 1:45:30 PM -> . (it-IT) 6/15/2009 1:45:30 PM -> : (ja-JP)
"/"	The date separator.	6/15/2009 1:45:30 PM -> / (en-US) 6/15/2009 1:45:30 PM -> - (ar-DZ) 6/15/2009 1:45:30 PM -> . (tr-TR)
'string'	Literal string delimiter.	6/15/2009 1:45:30 PM ('arr:' h:m t) -> arr: 1:45 P
%	Defines the following character as a custom format specifier.	6/15/2009 1:45:30 PM (%h) -> 1
Any other character	The character is copied to the result string unchanged.	6/15/2009 1:45:30 AM (arr hh:mm t) -> arr 01:45 A

Labels: User Interface, Web Application Generator

Monday, June 11, 2012Print Subscribe

Standard Date Format Strings

A standard date and time format string uses a single format specifier to define the text representation of a date and time value. Any date and time format string that contains more than one character, including white space, is interpreted as a custom date and time format string. A standard or custom format string can be used in two ways:

To define the string that results from a formatting operation.
To define the text representation of a date and time value that can be converted to a DateTime value by a parsing operation.

Let’s change the Order Date on the Orders controller to display the long date pattern.

Start the Project Designer. In the Project Explorer, double-click on Orders / Fields / OrderDate field node.

Change the Data Format String property:

Property	Value
Data Format String	D

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

Navigate to the Orders page. The Order Date values will be rendered in the long date pattern.

Below is a list of supported date format strings. The format string can be specified either directly or in curly braces. The data format string in the above sample can be written “D” or “{0:D}”.

Format String	Description	Example (Value = 6/15/2009 1:45:30 PM)
"d"	Short date pattern.	6/15/2009 (en-US) 15/06/2009 (fr-FR) 2009/06/15 (ja-JP)
"D"	Long date pattern.	Monday, June 15, 2009 (en-US) 15 июня 2009 г. (ru-RU) Montag, 15. Juni 2009 (de-DE)
"g"	General date/time pattern (short time).	6/15/2009 1:45 PM (en-US) 15/06/2009 13:45 (es-ES) 2009/6/15 13:45 (zh-CN)
"G"	General date/time pattern (long time).	6/15/2009 1:45:30 PM (en-US) 15/06/2009 13:45:30 (es-ES) 2009/6/15 13:45:30 (zh-CN)
"t"	Short time pattern.	1:45 PM (en-US) 13:45 (hr-HR) 01:45 م (ar-EG)
"T"	Long time pattern.	1:45:30 PM (en-US) 13:45:30 (hr-HR) 01:45:30 م (ar-EG)
"f"	Full date/time pattern (short time).	Monday, June 15, 2009 1:45 PM (en-US) den 15 juni 2009 13:45 (sv-SE) Δευτέρα, 15 Ιουνίου 2009 1:45 μμ (el-GR)
"F"	Full date/time pattern (long time).	Monday, June 15, 2009 1:45:30 PM (en-US) den 15 juni 2009 13:45:30 (sv-SE) Δευτέρα, 15 Ιουνίου 2009 1:45:30 μμ (el-GR)
"M", "m"	Month/day pattern.	June 15 (en-US) 15. juni (da-DK) 15 Juni (id-ID)
"s"	Sortable date/time pattern.	2009-06-15T13:45:30
"Y", "y"	Year month pattern.	June, 2009 (en-US) juni 2009 (da-DK) Juni 2009 (id-ID)
"U", "u"	Universal sortable date/time pattern.	2009-06-15 20:45:30Z

Labels: User Interface, Web Application Generator

Sunday, June 10, 2012Print Subscribe

Standard Numeric Format Strings

Standard numeric format strings can be used to format common numeric types in the client browser. A standard numeric format string takes the form Axx, where A is an alphabetic character called the format specifier, and xx is an optional integer called the precision specifier. The precision specifier ranges from 0 to 99 and affects the number of digits in the result. Any numeric format string that contains more than one alphabetic character, including white space, is interpreted as a custom numeric format string.

Let’s change the Data Format String of the Unit Price field on the Products controller.

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

Change the Data Format String:

Property	Value
Data Format String	C4

Press OK t0 save the field. On the toolbar, click Browse.

Navigate to the Products page. The Unit Price field will be formatted as currency with a precision of 4.

Below is a list of supported standard format strings. The format string can be specified either directly or in curly brackets. The currency format string from the example can be written as “C4” or “{0:C4}”.

Note that the formatting output depends on the application user interface culture.

String	Name	Description	Example
"D" or "d"	Decimal	Result: Integer digits with optional negative sign. Supported by: Integral types only. Precision specifier: Minimum number of digits.	1234 ("D") -> 1234 -1234 ("D6") -> -001234
"C" or "c"	Currency	Result: A currency value. Supported by: All numeric types. Precision specifier: Number of decimal digits.	123.456 ("C", en-US) -> $123.46 123.456 ("C", fr-FR) -> 123,46 € 123.456 ("C", ja-JP) -> ¥123 -123.456 ("C3", en-US) -> ($123.456) -123.456 ("C3", fr-FR) -> -123,456 € -123.456 ("C3", ja-JP) -> -¥123.456
"N" or "n"	Number	Result: Integral and decimal digits, group separators, and a decimal separator with optional negative sign. Supported by: All numeric types. Precision specifier: Desired number of decimal places.	1234.567 ("N", en-US) -> 1,234.57 1234.567 ("N", ru-RU) -> 1 234,57 1234 ("N", en-US) -> 1,234.0 1234 ("N", ru-RU) -> 1 234,0 -1234.56 ("N", en-US) -> -1,234.560 -1234.56 ("N", ru-RU) -> -1 234,560
"P" or "p"	Percent	Result: Number multiplied by 100 and displayed with a percent symbol. Supported by: All numeric types. Precision specifier: Desired number of decimal places.	1 ("P", en-US) -> 100.00 % 1 ("P", fr-FR) -> 100,00 % -0.39678 ("P1", en-US) -> -39.7 % -0.39678 ("P1", fr-FR) -> -39,7 %

Labels: User Interface, Web Application Generator