Note: If you are using a T27 or UTS data source project, you may prefer to follow the instructions in Controlling the Look and Feel in a T27 Data Source Project or Controlling the Look and Feel in a UTS Data Source Project, because an update to the .t27xml or .utsxml file overwrites the server message (and client message, by default).
You can modify the look and feel of an .aspx or .cshtml file created for a data source project by modifying properties in ePortal client (or server) messages, or by using the Visual Studio web editors. Refer to Controlling the Look and Feel using Visual Studio Web Editors.
To reorder individual message fields
If you generate a web presentation (including both MVC and web forms), by default the order of the fields on the generated page matches the order of the fields in the corresponding client message.
Note: You cannot reorder fields in a server message.
To reorder the fields in the client message, do the following:
Open the client message in the message editor. Refer to the topics Modifying Client Messages and Message Editor for more information.
In the message editor window, drag selected field or fields and drop in the desired location.
To define one or more CSS Classes for a message field
If you generate a web presentation (including both MVC and Web Forms), you can cause ePortal to automatically include one or more Cascading Style Sheet (CSS) classes on the corresponding HTML element in the generated web page; then, you can style the element using CSS.
Open the client (or server) message in the message editor. Refer to the topics Modifying Client Messages and Message Editor for more information.
In the message editor window, navigate to the desired message field.
In the properties window, enter a space-separated list of one or more valid CSS class names for the Class property.
Notes:
For more information on CSS, refer to http://www.w3schools.com/css/.
The web forms ListView control does not support the CssClass attribute. The ePortal web forms mobile presentations use the ListView control to render arrays (for example, the Control Style GridView or DetailsView). Therefore, the Class property is ignored for web form mobile presentations if the Control Style is GridView or DetailsView. Refer to http://msdn.microsoft.com/en-us/library/vstudio/system.web.ui.webcontrols.listview.cssclass(v=vs.110).aspx for more information.
To modify the control styles for the individual message fields
Modifying the default properties of message fields gives the presentation build process information to generate appropriate markup for the fields on the generated web page.
Perform the following steps for each field that requires any display preference changes:
Modify the appropriate client (or server) message. Refer to Modifying Client Messages and Message Editor for more information.
In the Properties window, change any of the available properties for the field. For instance, a field that currently has the ControlStyle property set to TextBox might be changed to a ControlStyle of CheckBox, if the field only has two possible values. Alternatively, such a field might be changed to a ControlStyle of RadioButtonList if the expected input value has only a few options, or to a ControlStyle of DropDownList if the expected input value has many options.
If you set the ControlStyle property to TextBox, you can also set additional properties for the text box. Refer to TextBox Properties, below, for more information.
If the particular field can only have two possible values, you might want to you set the ControlStyle property to CheckBox. Refer to CheckBox Controls below for more information.
If the particular field is a numeric value that does not need to be a precise value, you might want to set the ControlStyle property to Slider. Refer to Slider Control below for more information.
If you select ComboBox, RadioButtonList, DropDownList, LinkButtonList, ButtonList, CheckBoxList, or ListBox for the ControlStyle property, do the following to identify the various selections:
Click the browse button for ListItems (labeled with an ellipsis).
In the ListItem Collection Editor dialog box, click Add, update Text with the text that describes the selection, and update Value with the value that the ClearPath application is expecting.
Repeat the previous step for each possible selection.
A combo box consists of a text box along with a list. Therefore, if you select ComboBox, you can also set the properties for the text box portion of the combo box; refer to TextBox Properties below for more information.
If you select a value for the ControlStyle property that is prefixed by “Hybrid”, such as HybridBarcodeReader, then ePortal will generate markup that uses the native capabilities of a mobile device, if possible. Refer to Hybrid Mobile Controls below for more information. You can also set the properties for the text box portion of the hybrid control; refer to TextBox Properties, below, for more information.
You can select Custom for the ControlStyle property if you want to define your own custom control. Refer to Custom Controls below for more information
For arrays, you can set the ControlStyle property to GridView, DetailsView, DataSource or Custom. Refer to Array Controls below for more information.
Click File then click Save to save your changes.
For Web Forms or Web Forms Mobile presentation projects, if you have one or more presentation projects that have already been built, you may need to reconcile your changes to the message with any ePortal-generated .aspx files. In this case, the Save Message Dialog appears.
Refer to Creating Web Forms Application Projects for more information.
Refer to Creating Web Forms Mobile Application Projects for more information.
For Scaffolded presentation projects, if you have one or more presentation projects that have already been scaffolded, you may need to reconcile your changes to the message with any ePortal-generated presentation files.
Refer to Reference Information for Scaffolded Projects for more information.
Refer to Reconciling Client Message Changes to Scaffolded Presentation Projects for more information.
TextBox Properties
If you select a ControlStyle of TextBox or ComboBox, or if you select a Hybrid ControlStyle in your client message, you can configure additional properties for the textbox.
TextStyle
Set the TextStyle property to indicate the type of text:
Text – input represents generic text.
Number – input represents a numeric value (integer or decimal); a mobile device might use a numeric keyboard; depending on the browser, the user may be prevented from entering anything other than valid numbers.
Phone – input represents a telephone number; a mobile device may use a phone number keypad for entry; depending on the presentation type or browser, validation may occur to verify the value entered appears to be a valid phone number.
Url – input represents a Uniform Resource Locator (URL), or web address; a mobile device may use a special keyboard; depending on the presentation type or browser, validation may occur to verify the value entered appears to be a valid URL.
Email – input represents an email address; a mobile device may use a special keyboard; depending on the presentation type or browser, validation may occur to verify the value entered appears to be a valid email address.
Password – input represents a password; text is masked as characters are typed.
Search – input represents a search term; a mobile device may use a special keyboard.
MultiLine – renders a multiple line textbox (that is, a textarea HTML element). This setting does not apply when the ControlStyle property is ComboBox, HybridContactPhone, or HybridContactEmail.
Prompt
Set the Prompt property if you want the textbox to contain placeholder text. Placeholder text is a short hint that describes the expected input when the textbox is empty.
Note: The prompt text is localizable if your presentation is MVC; refer to Localization Support for MVC.
AutoCapitalize, AutoCorrect, and AutoComplete
Set the AutoCapitalize, AutoCorrect, and AutoComplete properties if you want to control these settings on the textbox. AutoCapitalize and AutoCorrect are non-standard attributes that work on iOS in particular.
For more information on these three attributes, refer to the following web references:
CheckBox Controls
If you select a ControlStyle of CheckBox, ePortal renders a control that can be selected (checked) or deselected (unchecked). The actual control rendered is either a checkbox or a toggle switch, depending on the presentation type and configuration:
If the presentation project type is Web Forms, then a checkbox is rendered.
If the presentation style is Web Forms Mobile, then a toggle switch is rendered by default. If you prefer to use a checkbox, change the CheckBoxControlType from SwitchCell to CheckBoxCell. Refer to Markup Template Editor for more information.
If the presentation style is MVC, then a checkbox is rendered by default. If you are using the Unisys Modern Bootstrap Theme, you can use a toggle switch by setting the Class property to include the class uuiToggleSwitch. Refer to Bootstrap Themes for MVC Projects for more information.
In addition, you should configure the following message field properties:
CheckedValue - Set to the value that the server application will receive when the control is checked (on).
UncheckedValue - Set to the value that the server application will receive when the control is not checked (off).
Slider Control
If you select a ControlStyle of Slider, and you scaffold an MVC Web presentation, ePortal will render a control that allows the application user to select an imprecise numeric value by sliding a knob horizontally. When you select a ControlStyle of Slider, you should also configure the message field properties MinValue, MaxValue, and StepValue. Refer to Runtime Error Checking for Message Fields for more information.
Notes:
Currently, the slider control is only generated for the MVC web presentation type. If you set ControlStyle for a field in a client message to Slider, and you generate a Web Forms presentation, the field is rendered as a simple text box.
The slider control is implemented with the HTML input tag with the type attribute set to range. All modern browsers support the range type; however, some older browsers (such as Internet Explorer 9 and early Android browsers) do not support the range type. On these browsers, the control will render as a simple textbox. For more information, refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input and http://caniuse.com/#feat=input-range.
Hybrid Mobile Controls
If you select a Hybrid ControlStyle in your client message, and you scaffold an MVC Web presentation, ePortal generates the markup for a Hybrid Mobile control.
A Hybrid Mobile control uses native device capabilities when the MVC application is accessed from a Multi-Device Hybrid App that is installed on a device; in other cases, the control provides reasonable fallback functionality. For example, the HybridBarcodeReader control renders a text box with a scan button. When running a properly-configured Multi-Device Hybrid App on a mobile device, the end user can tap the scan button to open the device camera and read a barcode or QR code; the resulting scanned value appears in the textbox. When run in other cases (for example, from a desktop browser) the scan button is disabled, but the end user can still manually enter a value into the text box.
Note: Currently, Hybrid Mobile controls are only generated for the MVC web presentation type. For example, if you set ControlStyle for a field in a client message to HybridBarcodeReader, and you generate a Web Forms presentation, the field will be rendered as a simple text box.
Custom Controls
You can define your own custom control for an MVC Web presentation.
For more information on custom controls, refer to:
Creating a Custom Editor Template in Editor Templates
Perform the following steps to configure custom controls:
Select Custom for the ControlStyle property of a field in your client message.
Enter a value for the UIHint property of the field in your client message. Typically, this is a unique identifier that represents the name of your custom control type. When building the data source project, ePortal adds a UIHint annotation to the corresponding field in the model class.
Optionally, you can supply additional metadata using the AdditionalMetadata property of the field in the client message. If you choose to supply additional metadata, add one or more name/value pairs for your metadata. When building the data source project, ePortal adds one AdditionalMetadata annotation to the corresponding field in the model class for each name/value pair.
Create a custom editor template with a name that matches the UIHint value that you supplied. Your editor template can access the AdditionalMetadata values at runtime, if needed.
Note: Currently, custom controls are only generated for the MVC web presentation type. For example, if you set ControlStyle for a field in a client message to Custom, and you generate a Web Forms presentation, the field will be rendered as a simple text box.
Array Controls
If the field in the client message is an array, then you can set the ControlStyle property to Custom (see Custom Controls above), or one of the following:
GridView
This is the default setting for an array.
For a Web Forms presentation, the GridView control is used to render the array. If the AccessType property of the client message field is Input or InputOutput, then the GridView control allows editing the values, although this can be difficult to use. For more information on the GridView control, see the MSDN reference at https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview(v=vs.110).aspx.
For a Mobile Web Forms presentation, the ListView control is used to render the array. If the AccessType property of the client message field is Input or InputOutput, then the ListView control allows editing the values, although this can be difficult to use. For more information on the ListView control, see the MSDN reference at https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listview(v=vs.110).aspx.
For an MVC presentation, the GridView.cshtml editor template is used to render the array. By default, the GridView.cshtml editor template uses a WebGrid HTML helper to generate a bootstrap responsive table. A bootstrap responsive table scrolls horizontally when displayed in a narrow browser viewport, such as on a smartphone; however, you can customize the editor template. Currently, WebGrid does not allow editing values, so the generated table is always read-only.
For more information, refer to:
WebGrid MSDN reference: https://msdn.microsoft.com/en-us/library/system.web.helpers.webgrid(v=vs.111).aspx
Bootstrap responsive tables reference: http://getbootstrap.com/css/#tables-responsive
DetailsView
For a Web Forms presentation, the DetailsView control is used to render the array. If the AccessType property of the client message field is Input or InputOutput, then the DetailsView control allows editing the values, although this can be difficult to use. For more information on the DetailsView control, see the MSDN reference at https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.detailsview(v=vs.110).aspx.
For a Mobile Web Forms presentation, the ListView control is used to render the array. If the AccessType property of the client message field is Input or InputOutput, then the ListView control allows editing the values, although this can be difficult to use. For more information on the ListView control, see the MSDN reference at https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listview(v=vs.110).aspx.
For an MVC presentation, the DetailsView.cshtml editor template is used to render the array. By default, the DetailsView.cshtml editor template uses a WebGrid HTML helper to generate a uuiStackTable control. The uuiStackTable control renders a regular table with column headings when the browser viewport is wide; however, when the browser viewport is narrow, such as on a smartphone, the table is rendered with each table row “stacked” one on top of the other, and the table headings rendered as value labels; however, you can customize the editor template. Currently, WebGrid does not allow editing values, so the generated table is always read-only.
For more information, refer to:
WebGrid MSDN reference: https://msdn.microsoft.com/en-us/library/system.web.helpers.webgrid(v=vs.111).aspx
The uuiStackTable reference documentation: refer to ePortal Developer Controls for MVC Web Projects.
Data Source
For a Web Forms presentation or a Web Forms Mobile presentation, an ObjectDataSource control is rendered for the array. An ObjectDataSource does not render any visible user interface elements on the page; you must implement you own user interface. For more information on the ObjectDataSource control, see the MSDN reference at https://msdn.microsoft.com/en-us/library/vstudio/system.web.ui.webcontrols.objectdatasource(v=vs.110).aspx.
For an MVC presentation, the DataSource.cshtml editor template is used to render the array. By default, this editor template does not render any user interface; however, you can customize the editor template. Refer to Editor Templates for more information.
Refer to also: