Code On Time: Application Builder

Saturday, April 27, 2013Print Subscribe

A local or remote file system is the most common method to store large binary content. Let’s implement a customer photo field in the Northwind database. Several utility fields in the Customers table will store file name, size, and type. The file itself will be stored in a specified folder location.

Adding Utility Fields to the Database

Start SQL Server Management Studio. In the Object Explorer, right-click on Databases / Northwind / dbo.Customers and press Design.

Add the following columns:

Column Name	Data Type	Allow Nulls
PhotoFileName	nvarchar(250)	yes
PhotoLength	int	yes
PhotoContentType	nvarchar(50)	yes

Save the changes to the table.

Start the web application generator. Click on the project name, and press Refresh. Check the box next to Customers controller and proceed to refresh the web app.

Configuring BLOB Field

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on Customers / Fields node and press New Field.

Assign the following values:

Property	Value
Name	Photo
Type	Byte[]
Allow null values.	yes
Value is retrieved on demand	yes
Source Fields	CustomerID
On Demand Handler	CustomerPhotoHandler
On Demand Style	Thumbnail
Label	Photo

Save the field. Drag the new field node onto Customers / Views / editForm1 to instantiate a data field in the view.

Use the same technique to create a data field in view grid1 as well.

Next, double-click on the Customers controller node. Enter the following in BLOB Adapter Configuration.

BLOB Adapter Configuration

Field: Photo
Storage-System: File
Path-Template: C:\Northwind\Customers\{CustomerID}-{PhotoFileName}

Press OK to save changes.

Viewing the Results

On the toolbar, press Browse. Navigate to the Customers page and start editing a record. The new Photo field will accept file uploads. Click on the link and upload a file. The bar at the top of the screen will show a confirmation of upload and a thumbnail of the picture will be displayed. The File Name, Length, and Content Type utility fields will be updated accordingly.

The files can be seen in File Explorer.

To upload files larger than 4 MB, you will need to increase the application upload size limit.

Labels: Application Builder, BLOB, Tutorials, Web Application Generator

Sunday, March 31, 2013Print Subscribe

When Last Command Name

Actions in the Code On Time user interface are displayed based on several conditions. When the conditions are fulfilled, the action is displayed. The When Last Command Name condition will only display an action when the previous action matches the specified command name. If When Last Command Name is null, the action will be displayed if Select action or no action is performed and the other conditions are matched.

For example, when a Customers record is selected, the Edit, Delete, and Close actions are displayed. New Customers action is available on the action bar, as well as Actions and Report dropdowns.

When the Edit action is activated, the buttons are replaced by OK, Delete, and Cancel. The action bar only has one dropdown, Record.

Note that all reporting actions have been hidden. Let’s add another Report action what will only be displayed after Edit action has been performed.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on Customers / Actions / ag7 (ActionBar) – Report node, and press New Action.

Assign the following values:

Property	Value
Command Name	Report (PDF)
Header Text	Create a report
When Last Command Name	Edit
Description	Creates a PDF report when editing a record.

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

Navigate to Customers page and select a record. The new Report action is not displayed.

Start editing the record. The new action will appear as the only option in the Report dropdown.

Labels: Application Builder, ASP.NET Code Generator, User Interface, Web Application Generator

Sunday, March 31, 2013Print Subscribe

Auto Hide Data Views

The Auto Hide property is used to hide child data views or containers when a master record has not been selected.

Self

Let’s create a page that will contain two data views: Customers and Orders. The orders will be filtered by the selected customer.

Start the Project Designer. In the Project Explorer toolbar, click on the New Page icon.

Assign a name to the page.

Property	Value
Name	Auto Hide Test

Press OK to save the page. In the Project Explorer, drop the new page node on the right side of Home node to place it second in the menu.

Switch to the Controllers tab. Hold down Ctrl key, and click on Customers and Orders data controller nodes. Right-click, and press Copy.

Switch back to the Pages tab. Right-click on Auto Hide Test page, and press Paste. The controllers will be instantiated as data views in individual containers.

Double-click on Auto Hide Test / c102 / view2 (Orders) node. Make the following changes:

Property	Value
View	grid1
Filter Source	view1
Filter Field #1	CustomerID
Auto Hide	Self

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

Navigate to the Auto Hide Test page. Note that only a list of customers is visible on the page.

When a customer is selected, the filtered list of orders is displayed underneath.

Container

When there are multiple child data views in a single container or tabs, it is advisable to hide the whole container instead.

In the Project Explorer, double-click on Auto Hide Test / c102 / view2 (Orders, grid1) –> view1 node.

Change the following values:

Property	New Value
Activator	Tab
Text	Orders

Save the data view. Browse the web app – notice that the tab element is not hidden when no customer is selected.

The data view will appear when a master record is selected.

Switch back to the Project Designer, and change Auto Hide to “Container”.

Property	New Value
Auto Hide	Container

Press OK to save, and press Browse. The tab element will now be hidden.

Note that if the master view is in the same container as the child view, an Auto Hide of “Container” will hide both views.

Labels: Application Builder, User Interface, Web Application Generator