User Interface

Labels
AJAX(112) App Studio(8) 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(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(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
User Interface
Monday, July 9, 2012PrintSubscribe
Code Default

The Code Default property provides an expression written in C#/Visual Basic that evaluates to an initial field value of a new data row. Database tables frequently define default column expressions that will be evaluated by the database engine when a new record is persisted. From the user perspective, it is beneficial to see what exactly will be inserted in the column at the time when the user enters the field values instead of leaving the fields blank and relying on the database to fill in the blanks. The Code Default may provide a duplicate calculation that fulfills this need.

Default Values with C# / Visual Basic

The New Orders form has two date fields, Order Date and Required Date, that should have defaults when the form is first initialized.

New Orders form without any default values.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab, and double-click on Orders / Fields / OrderDate node.

OrderDate field of Orders controller.

Change the Code Default:

Property New Value
Code Default DateTime.Now

Press OK to save. Double-click on Orders / Fields / RequiredDate node.

RequiredDate field of Orders controller.

Change the Code Default:

Property New Value
Code Default DateTime.Now.AddDays(7)

Press OK to save. On the Project Browser toolbar, press Browse button.

Navigate to the Orders page, and create a new record. The Order Date field will be populated with the current date. The Required Date field will be populated with the date seven days in the future.

New Orders form with default values for Order Date and Required Date fields.

This is how the code generator incorporates the code expression in the C#/Visual Basic business rules.

C#:

using System;
using MyCompany.Data;

namespace MyCompany.Rules
{
    public partial class OrdersBusinessRules : MyCompany.Data.BusinessRules
    {
        
        [RowBuilder("Orders", RowKind.New)]
        public void BuildNewOrders()
        {
            UpdateFieldValue("OrderDate", DateTime.Now);
            UpdateFieldValue("RequiredDate", DateTime.Now.AddDays(7));
        }
    }
}
Visual Basic:
Imports MyCompany.Data

Namespace MyCompany.Rules
    
    Partial Public Class OrdersBusinessRules
        Inherits MyCompany.Data.BusinessRules
        
        <RowBuilder("Orders", RowKind.New)>  _
        Public Sub BuildNewOrders()
            UpdateFieldValue("OrderDate", DateTime.Now)
            UpdateFieldValue("RequiredDate", DateTime.Now.AddDays(7))
        End Sub
    End Class
End Namespace

A custom utility class can be implemented for complex calculations. A static or shared property or method of the class can be used in Code Default expressions similar to how System.DateTime class is used in the example.

Default Values with SQL Business Rules

Code Default permits simple default values. For a majority of situations or when a more complex default value calculation involving interactions with the database is required, SQL Business Rules provide a great alternative.

Switch back to the Project Designer. Double-click on Orders / Fields / OrderDate field node.

OrderDate field of Orders controller.

Clear the Code Default:

Property New Value
Code Default N/A

Save the field. Double-click on Orders / Fields / RequiredDate field node.

RequiredDate field of Orders controller.

Change the following properties:

Property New Value
Code Default N/A

Press OK to save the field. Right-click on Orders / Business Rules node, and select New Business Rule option.

image

Use the following configuration:

Property Value
Command Name New
Type SQL
Phase Execute
Script
set @OrderDate = GETDATE()
set @RequiredDate = DATEADD("d", 7, getdate())

Press OK to save the business rule. On the toolbar, press Browse.

Navigate to the Orders page, and create a new order. The correct date values will be presented as default values.

New Orders form with default values for Order Date and Required Date fields.

The business rule matching New command is automatically executed on the server and the values of parameters OrderDate and RequiredDate are transferred to the fields with the same name in a new row.

Thursday, July 5, 2012PrintSubscribe
Working with Containers in the Project Designer

Containers define the layout of the page. Each container may start a new row or new column. The content of containers is rendered in the order of their appearance on the page. Containers host instances of data controllers (data views) and custom user controls (controls).

A list of containers can be viewed on the Containers tab of a page.

List of containers for Customers page.

In the Project Explorer, the context menu option Show All Containers allows browsing the list of page containers.

Show All Containers context menu option for page node in Project Explorer.

The context menu option List allows viewing all containers of a page.

List context menu option for container node in Project Explorer.

A container can be located by entering the Id of the container and the name of the page in the configuration navigator.

A container located in the configuration navigator.

In the list of containers, directly clicking on the Id of the container or using context menu option Open will navigate to the container property page.

Open context menu option for 'container1' in list of containers.     Edit Form of container in Project Browser.

The Sync context menu option will select the container in the Project Explorer.

Sync context menu option for container1 in list of containers of Project Browser.      Container1 synched in Project Explorer.

The Sync action on the action bar in the property page will select the container in the Project Explorer.

Sync action on the action bar in the Project Browser.

The container Id can be changed using the Rename context menu option.

Rename context menu option for container1 in the Project Explorer.

Containers can be rearranged by dragging container nodes in the Project Explorer.

Dropping container1 on the right side of container2 in the Project Explorer.      Container1 placed after container2 in the Project Explorer.

Thursday, July 5, 2012PrintSubscribe
Overview of Containers

Containers are placed on pages, and hold instances of data controllers (data views) and custom user controls (controls).

Container Properties:

Property Description
CSS Class Name Assigns a custom CSS class to the container.
CSS Style Properties Assigns CSS styling rules to the container.
Flow Determines how the container is rendered on the page. If Flow is “New Row”, then the container will be rendered in the next container row. If Flow is “New Column”, then the container will be rendered in a new column to the right of the previous container.
Id The Id of the container is automatically assigned when the container is created. It can be changed using the Rename context menu option in the Project Explorer.
Page Specifies which page the container belongs to.
Width Specifies how much horizontal space the container will take up. It can use percentage of the page width, or an exact pixel width.

Learn to work with containers in the Project Designer.

Learn to drag and drop containers in the Project Explorer.

Common tasks:

Task Description
Extending Pages Learn to break down page layout into multiple containers.
Configuring Master-Detail Relationships Learn to configure a master-detail page with multiple levels.
Grouping Data Views in the Same Container Learn to hide child data views when the master data view becomes invisible.