Web Application Generator

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
Web Application Generator
Tuesday, June 19, 2012PrintSubscribe
Value Conversion

Project requirements may dictate that conversion should be performed on field values.

For example, the Customer# field of the Customers table in the Northwind database may need to be converted to uppercase.

Customer# field value is uppercase.

However, there is no mechanism preventing users from saving lowercase letters in the field.

Customer# field has no validation to prevent lowercase letters.

Let’s create an SQL Business Rule to perform field value conversion.

Validate on Insert or Update

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on Customers / Business Rules node, and select New Business Rule.

New Business Rule for Customers controller.

Use the following properties:

Property Value
Command Name Insert|Update
Type SQL
Phase Before
Script
set @CustomerID = UPPER(@CustomerID)

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

Navigate to the Customers page, and edit a record. Insert some mixed-case letters in the Customer# field.

Value of Customer# with lowercase letters.

Save the record. The field value will be converted to uppercase.

Value of Customer# has been converted to uppercase.

Validate on Calculate

You can also perform just-in-time value conversion, when the user moves focus away from the field.

Switch back to the Project Designer. In the Project Explorer, double-click on Customers / Business Rule / Insert|Update node.

InsertUpdate business rule for Customers controller.

Change the Command Name property:

Property New Value
Command Name Calculate

Press OK to save the business rule. In order for the calculation to be performed, the field needs to cause a server request.

In the Project Explorer, double-click on Customers / Fields / CustomerID field node.

CustomerID field of Customers controller.

Make the following changes:

Property New Value
The value of this field is calculated by a business rule expression. True
Context Fields CustomerID

Press OK to save the field. On the toolbar, press Browse.

On the Customers page, edit a record. Insert mixed-case characters into the Customer# field.

Lower case characters inserted into CustomerID field.

Press Tab on your keyboard or click on another field. The client library will convert the value in Customer# field into uppercase.

CustomerID value converted to uppercase.

Expanding the Business Rule

The user may still click on the OK button and save the lowercase characters in the field. Therefore, you may need to combine both Insert|Update and Calculate command handling. The following Command Name will cover all possible methods of changing the field.

Property New Value
Command Name Calculate|Insert|Update

The same business logic can be implemented with the help of C#/Visual Basic Business Rules.

Monday, June 18, 2012PrintSubscribe
Working with Controls

Controls are instances of user controls that are placed in containers.

The picture below shows the default Home page with controls TableOfContents and Welcome placed in two containers.

Two controls in different containers on the Home page.

Creating a Control

Controls can be added to a container by using the New Control option in the container context menu.

New Control option on the container context menu.

The New Control icon on the toolbar can also be used.

New Control icon on the Project Explorer toolbar.

This will open the New Control form in the Project Designer window. The Id of the control will be automatically assigned, and can be changed in the Project Explorer.

Moving Controls

Dropping a control onto another control will place it after the target control.

Dropping control1 on control4.     Control1 is placed after control4.

The context menu actions Cut and Paste will also serve the same purpose.

Cut context menu option on control3.     Paste context menu option on control1.

Dropping a control to the right side of another control will place it after the target control.

Dropping control4 on the right side of control3.     Control4 placed after control3.

Dropping a control to the left side of another control will place it before the target control.

Control2 dropped on the left side of control3.     Control2 placed before control3.

Holding CTRL key while dropping on a page or container will duplicate the control. If a control with the same Id already exists in the page, the new control will be renamed.

Control4 copied into container2.     Control5, a copy of control4, placed in container2.

Dropping a control onto a container will place the control at the bottom of the container.

Control1 moved into container4.     Control1 is placed at the end of container2.

Dropping a control onto a page will move that control onto that page in a new container.

Control2 dropped on Home page.     Control2 placed in a new container 'c101' in the Home page.

Renaming a Control

Controls can be renamed using the Rename context menu option.

Rename option on control3 context menu. 

The keyboard shortcut F2 will also activate Rename command.

Control3 in Rename mode.

Editing Controls

A user control can be edited by using the context menu option Edit in Visual Studio. This option will only be present if the user control property Generate is set to “First Time Only”.

Context menu option Edit in Visual Studio for a control in Project Explorer.

Deleting Controls

Controls can be deleted using the Delete context menu option.

Delete option on control3 context menu.

The Delete key will activate Delete action.

Multiple controls deleted at once by pressing Delete on the keyboard.

Monday, June 18, 2012PrintSubscribe
Working with Data Views

Data views are instances of data controllers that are placed in page containers.

The picture below shows the four data views on the Customers page, placed in two different containers.

Four views in two containers on the Customers page.

Creating a Data View

A data view can be created by activating the context menu on a container and selecting New Data View option.

New Data View context menu option on the container.

The New Data View button on the Project Explorer toolbar can also be used.

New Data View toolbar option for container.

This will open the New Data View form in the Project Designer window. Specify the controller and view. Press OK button to add the view to the container. The Id of the view will be automatically assigned, and can be changed in the Project Explorer.

New view created in container1 of My Test Page.

Moving Data Views

Data views can be moved into different locations.

Dragging a data view and dropping it onto another data view will place it after the target data view.

View2 dropped on view4 data view.     View2 moved after view4 when dropped.

Using the context menu commands Cut and Paste will also lead to the same result.

Cut context menu option for view2 data view.     Paste context menu option for a data view.

Dropping a data view on the right side of another data view will place it after the target data view.

Drop data view view3 on the right side of view2.      View3 will be placed after view2.

Dropping a data view on the left side of another data view will place it before the target data view.

Drop view2 on the left side of view3.     View2 will be placed before view 3.

Dropping a data view on a container will place the data view at the bottom of the target container. The application framework will try to assign the correct Filter Source, if it is available on the page. Otherwise, it will be cleared.

View1 dropped on container2.     View1 moved at the bottom of container2.

If CTRL key is held down when the data view is dropped on a container, the data view will be duplicated. If there is a name conflict, the new data view will be renamed. Context menu commands Copy and Paste can be used for the same purpose.

View1 ctrl dropped onto container2.     View1 duplicated as view5.

Dropping a data view on a page will move the data view into a new container at the bottom of the page.

Dropping view5 onto My Test Page.     View5 placed into a new container.

When multiple data views are dropped, they will be dropped in the order of selection. In the example below, the data views were selected in the following order: view1, view2, view3, view4, view5. The views were then dropped on container2.

All views on My Test Page selected.     All views dropped on container2.

Renaming Data Views

A data view can be renamed by activating the context menu and selecting Rename option.

image     View1 of container1 in Rename mode.

Deleting Data Views

Data views can be deleted via the context menu Delete action.

Delete context menu action for two selected data views.