Designer

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.

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>

Question:

Do you have an example of how we can display the image by using the DataFormatString and HTMLEncode? Basically, our database has a field "photo_url" which store the path to the photo in the file system. Can it behave like an image field in terms of presentation?

Please try the following:

1. Start the code generator, click on the name of your project and press "Design" button, select the data controller name and add a new field to the data controller.

2. If the name of the image field is "PhotoPath" then name the new field "PhotoPathImage".

3. Set the type of the new field to "String".

4. Set "Allow null values." to true.

5. Check "The value of the field is computed at runtime" and enter the same snippet from the data controller's command command1 that selects the actual field "PhotoPath". For example, the Northwind's database Employees.PhotoPath will look as follows:

          "Employees"."PhotoPath".

6. Assign a label to the new field. For example, "Photo Path"

7. Uncheck HTML encoding.

8. Enter <img src="{0}"/> as a data format string.

9. Save the field.

10. Add a new data field to grid1 or editForm1 and set its FieldName to PhotoPathImage.

The field will be presented as an image.