Designer

Labels
AJAX(112) App Studio(9) 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(178) 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(184) 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(3) 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
Designer
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>
Sunday, March 7, 2010PrintSubscribe
How do I display a path stored in a field as an image?

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.

Thursday, February 11, 2010PrintSubscribe
Test Bench, Relationship Discovery, Denormalization Field Map, Auto Generated Fields in Grid Views

Test Bench

Code OnTime Designer has been enhanced with the Test Bench. This tool is designed to speed testing of data controllers without leaving the design environment. Action bar displayed above the settings of a data controller elements now features the “Preview” action.

If you click on the action then Code OnTime Generator will automatically create a test site based on Web Site Factory premium project. The test project will feature a single page named after the currently selected data controller. A browser window will open automatically as soon as the project has been generated. If this is your first time invoking the Test Bench then it will take some time to generate the initial code of the test site. Subsequent requests to preview data controllers will run much faster and will allow quickly testing changes without generating the entire project.

This illustration shows the Preview action on the action bar of the data view category list of Employees data controller from the Northwind sample. We just have changed the Floating attribute of Employees category to Yes.

image

We click on the Preview button and the Test Bench web site is opened in a new browser window in just a few seconds. If we select an employee then the following presentation will be rendered.

image

Denormalization Field Map

The code generator will automatically discover relationships between data objects in your database and create the corresponding business objects by denormalizing the data object relationships.

For example, sample database Northwind features Products and Suppliers tables. Products  table refers to Suppliers via foreign key that links dbo.Products.SupplierID and dbo.Suppliers.SupplierID fields. The code generator will automatically include the first most appropriate field from the Supliers table to complement dbo.Products.SupplierID field. The automatically selected field is Suppliers.CompanyName, which is included into Products business object as SupplierCompanyName.

You will probably agree that this make sense. Sometimes the code generator will select a field that does not make much sense at all. You can assist the code generator by supplying a denormalization field map on Business Logic Layer page of the project configuration wizard.

 image

Here is a sample denormalization field map:

dbo.Products => dbo.Suppliers
ContactName
ContactTitle
Fax
Phone

dbo.Employees=>dbo.Employees
LastName
FirstName

dbo.Orders=>dbo.Employees
LastName
FirstName

dbo.Order Details=>dbo.Products
UnitPrice

This map will ensure that ContactName, ContactTitle, Fax, and Phone are included into Products business object and any other business objects that include references to the products.

For example, OrderDetails business object will also include ContactName, ContactTitle, Fax and Phone of the product supplier with the appropriate prefix (ProductSupplieContactName, ProductSupplierContactTitle, etc.)  in front of the field name.

Employees business object is based on a self-referring Employees data object. The foreign key name is ReporsTo. The business object will have ReportsToLastName and ReportsToFirstName fields automatically included in its field roster by the code generator.

Another option of denormalization is to use Code OnTime Designer to add the appropriate formula fields directly to the data controllers. The advantage of using a denormalization map is that it will save you a bunch of mouse clicks in the Designer. The advantage of using the Code OnTime Designer for denormalization purposes is that explicitly declared formula fields can include custom expressions that go beyond a simple field reference delivered through the map.

Relationship Discovery

If you are missing a foreign key in a database or opted not to have an explicit foreign key for some other reasons then you can use Relationship Discovery mechanism to enter the missing relationships, which will help the code generator to construct the correctly denormalized business objects.

image

Here is an example:

foreign key dbo.Products(SupplierID) references dbo.Suppliers(SupplierID)

foreign key dbo.Orders(CustomerID) references dbo.Customers(CustomerID)

foreign key dbo.Order Details(OrderID) references dbo.Orders(OrderID)

foreign key dbo.Order Details(ProductID) references dbo.Products(ProductID)

Any child/parent relationship specified in relationship discovery overrides the corresponding physical foreign keys automatically discovered in the database. You can set the discovery depth to zero to take complete control over the fields that will be automatically included into composed business objects during denormalization process.

If there is a relationship specified in Relationship Discovery then the discovery depth is ignored when the code generator is following the relationship during denormalization.

The relationship discovery will be updated in the future to support primary key definitions, which will allow to automatically build business objects based on database views.

Auto-Generated Fields in Grid Views

Standard grid views created by the code generator automatically will include ten first fields that are suitable for display to end users. You can change this number on the Features page of the project configuration wizard as shown on the picture below.

image

You can use Code OnTime Designer to re-arrange any data fields that were automatically generated.