Custom Form Templates

Labels
AJAX(112) Apple(1) Application Builder(242) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) 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(11) 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) DotNetNuke(12) EASE(20) Email(6) Features(99) Firebird(1) Form Builder(14) Globalization and Localization(6) Hypermedia(2) Installation(4) 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(15) OAuth(5) OAuth Scopes(1) OAuth2(6) Offline(14) Oracle(10) PKCE(1) PostgreSQL(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(163) Reports(48) REST(26) RESTful(21) RESTful Workshop(13) RFID tags(1) SaaS(7) Security(75) SharePoint(12) SPA(5) SQL Anywhere(3) SQL Server(26) Stored Procedure(4) Teamwork(15) Tips and Tricks(81) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(331) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(39) Web.Config(9) Workflow(28)
Archive
Blog
Saturday, March 20, 2010PrintSubscribe
Custom Form Templates

Learn to create custom form templates to define the exact layout of data fields in form categories that meets your business requirements with Code OnTime Designer. The templates are based on HTML. Simple data field placeholders are automatically substituted in the client web browser.

 

Custom Form Templates in ASP.NET/AJAX Web Apps

Watch this tutorial on our YouTube channel at http://www.youtube.com/watch?v=OCobJ84wY7o.

This is the screen shot from the tutorial that shows a custom data field category of the form view editForm1 with the template from tutorial applied to it.

image

Here is the markup  of the custom form template used in this tutorial:

<table>
    <tr>
        <td valign="top">
            <div style="border: solid 1px silver; width: 400px; height:230px; background-color: white; padding: 8px;">
                <div class="FieldPlaceholder DataOnly">
                    {Photo}</div>
                <div class="FieldPlaceholder DataOnly" style="font-weight: bold; font-size: 16pt;">
                    {LastName}</div>
                <div class="FieldPlaceholder DataOnly" style="font-weight: bold; font-size: 16pt;">
                    {FirstName}</div>
                <div class="FieldPlaceholder DataOnly" style="width: 200px; margin-top: 8px;">
                    <div style="margin-left: 8px; color: dimgray;">
                        Notes:</div>
                    {Notes}</div>
                <div style="clear: both">
                </div>
            </div>
        </td>
        <td valign="top">
            <div style="border: solid silver 1px; height:230px; background-color: White; padding: 8px; margin-left: 8px;">
                <table>
                    <tr>
                        <td>
                            <div class="FieldPlaceholder">
                                {ReportsTo}</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="FieldPlaceholder">
                                {Title}</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="FieldPlaceholder">
                                {TitleOfCourtesy}</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="FieldPlaceholder">
                                {HireDate}</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="FieldPlaceholder">
                                {BirthDate}</div>
                        </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>