ASP.NET 3.5

Labels
AJAX(112) App Studio(7) 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(183) 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
ASP.NET 3.5
Friday, October 16, 2009PrintSubscribe
Conditional Visibility in Forms

Data Aquarium Framework supports declarative conditional visibility of fields and field categories in form views.

Conditional Visibility of Fields

Here is a snippet of the data field controller used in Code OnTime Designer that controls visibility of the Formula field if the field is marked as computed.

<category headerText="General" >
    <description><![CDATA[ Specify field name, type, and data properties of the field.]]></description>
    <dataFields>
. . . . .
<dataField fieldName="Computed"> <headerText>The value of this field is computed at run-time.</headerText> </dataField> <dataField fieldName="Formula" columns="50" rows="5"> <visibility> <expression type="ClientScript" test="[Computed]==true"/> </visibility> </dataField> <dataField fieldName="OnDemand"/> </dataFields> </category>

The visibility expression test is written in JavaScript. The expression test can refer to the names of the fields defined in the view. The field referenced must be incased in square brackets.

The expression test is evaluated on the client whenever the field values are changed. Evaluation does not cause the server post-back.

The following screenshots show the form before and after the computed field checked.

image

image

Conditional Visibility of Categories

The following snippet from the the same data controller shows visibility expression for a field category.

<category headerText="Lookup">
    <dataFields>
        <dataField fieldName="ItemsStyle"/>
        <dataField fieldName="ItemsDataController"/>
        <dataField fieldName="ItemsDataValueField"/>
        <dataField fieldName="ItemsDataTextField"/>
        <dataField fieldName="ItemsNewDataView"/>
        <dataField fieldName="ContextFields"/>
    </dataFields>
    <visibility>
        <expression type="ClientScript" test="[Type] != 'Byte[]' &amp;&amp; [Type] != 'Object' &amp;&amp; [OnDemand] != true" />
    </visibility>
</category>

The JavaScript expression reads as follows:

[Type] != 'Byte[]'  &&  [Type] != 'Object' && [OnDemand] != true

If the value of field Type is not equal to Byte[] or Object and the field is not OnDemand then the category of fields is visible.

The next screenshot shows the visible Lookup field category.

image

Conclusion

The visibility expressions can be defined directly in the data controller files. The upcoming update to Code OnTime Designer will allow easy modifications of the visibility expressions.

Wednesday, September 23, 2009PrintSubscribe
Form Category Rendering Modes

Data Aquarium Framework supports two form rendering modes and optional tabbed presentation.

Standard Rendering Mode

The standard mode mimics Microsoft SharePoint forms. A single column of data fields is displayed on the right while categories with descriptions are displayed on the left.

Unlike Microsoft SharePoint the form is an AJAX web form and is being rendered entirely on the client eliminating the need for post backs and providing an excellent response time. The XML data controller embedded into the server application provides a list of data fields and categories.

image

You can see the live version of this form at http://dev.codeontime.com/demo/MultiColumn/StandardForm.aspx.

Compact Rendering Mode

The compact rendering mode is turned on by indicating that the category must start in the new column.

The categories are rendered from top to bottom with the fields and corresponding labels displayed on a single line. Category header text and description are displayed above the category fields.

image

The AJAX engine behind the form will also automatically downgrade the layout to a single column rendered compactly if there is not enough space for all categories to be displayed without scrolling.

image

You can see the live version of this form at http://dev.codeontime.com/demo/MultiColumn/MultiColumnForm.aspx.

Here is the data controller markup that enabled new column on the category with the header text Address. A single attribute set to true is all takes.

<category headerText="Address" newColumn="true" >

Tabbed AJAX Forms without CODE

You can also enable a standard or compact rendering with categories activated when a corresponding tab is selected.

image

Tabs are integrated into the AJAX client library of Data Aquarium Framework  and require very little effort. Simply add a tab attribute with tab label as a value to a category element to turn the tabbed layout on. If at least one tab is defined then all the other categories without a tab are automatically grouped under General tab.

<category headerText="General">
....
<category headerText="Hire Date and Manager">
....
<category headerText="Address" tab="Address">
....                
<category headerText="Notes" tab="Address">

Tabs are aware of the edit and insert modes of the view and are working in unison. For example, if you start editing the data while the first tab is selected and then switch to the second tab then the data fields are presented in edit mode as well and edits of the first tab are not lost.

If there is an error in the invisible field then tab is automatically selected and the field is highlighted when user tries to update or insert a record.

image

image

Note that tabbed presentation does not support multiple columns in compact mode.

You can see the live version of this form at http://dev.codeontime.com/demo/MultiColumn/StandardTabbedForm.aspx

Conclusion

The standard and compact rendering modes with an option to enable tabbed presentation provide some truly powerful user interface options that require no code and deliver professional results.

See the video tutorial that shows how to build such forms with Code OnTime Designer.

Read about custom form templates if you need more control over the user interface of the AJAX forms.

Sunday, September 20, 2009PrintSubscribe
Building ASP.NET/AJAX Forms With Code OnTime Designer

Learn ASP.NET/AJAX web form customization with Code OnTime Designer. We will start with an automatically generated single-column AJAX web form that lists all fields of an employee record. We proceed by creating the following form layouts in real time:

  • A single column form with employee fields broken into four categories
  • A two column form with compact field layout
  • A form with four tabs for each category and fields displayed in compact layout.
  • A form with two tabs that bring up two categories each displayed in a standard layout.

You can see a live demo of an application similar to the one in the tutorial at http://dev.codeontime.com/demo/multicolumn.