Header and Footer Text in Form Views

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
Sunday, September 21, 2008PrintSubscribe
Header and Footer Text in Form Views

Custom headers and footers can boost ease of use of your applications created with Data Aquarium Framework.  Take a look at the following screen shot.

image

Data field Unit Price features custom header and footer. Here is how we have defined this view in ~/Controllers/Products.xml of our sample application.

<view id="editForm1" type="Form" commandId="command1" label="Review Products">
  <headerText>Please review products information below. 
    Click Edit to change this record, click Delete to delete the record, 
    or click Cancel/Close to return back.</headerText>
  <categories>
    <category headerText="Products">
      <description>These are the fields of the products record 
        that can be edited.</description>
      <dataFields>
        <dataField fieldName="ProductName" columns="40" />
        <dataField fieldName="SupplierID" aliasFieldName="SupplierCompanyName" />
        <dataField fieldName="CategoryID" aliasFieldName="CategoryCategoryName" />
        <dataField fieldName="QuantityPerUnit" columns="20" />
        <dataField fieldName="UnitPrice" dataFormatString="c" columns="15">
          <headerText>Price of Unit:</headerText>
          <footerText>
            <![CDATA[ 
            <div style="color:navy">
            Enter price of unit in USD. Make sure to consult catalog of products 
            sold by our competitors at
            <a href="http://www.amazon.com" target="_blank">amazon.com</a>
            </div>]]>
          </footerText>
        </dataField>
        <dataField fieldName="UnitsInStock" columns="15" />
        <dataField fieldName="UnitsOnOrder" columns="15" />
        <dataField fieldName="ReorderLevel" columns="15" />
        <dataField fieldName="Discontinued" />
      </dataFields>
    </category>
  </categories>
</view>

HeaderText is displayed above the field value while the FooterText is displayed just under the field value. By default the field header is inherited from the label attribute of the base field.

You can break down the fields in the standard views in a few categories to further improve the form presentation.

Header and footer text will also automatically display in a custom form. Define the following markup in your web form that displays products.

<aquarium:DataViewExtender ID="ProductsExtender" runat="server" 
    Controller="Products" TargetControlID="ProductList" />
<div id="Products_editForm1" style="display: none">
    {ProductName}<br />
    {SupplierID}<br />
    {CategoryID}<br />
    {UnitPrice}
</div>

This simple markup will alter the form view presentation shown in the screen shot above to look like the one below.

image

Custom form templates allow ad hoc form view presentation when standard layout does not provide enough flexibility.