Blog

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
Saturday, April 27, 2013PrintSubscribe
File System Upload/Download Adapter

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.

Designing the Customers table of Northwind database.

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.

Refreshing the Customers table.

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.

Creating a new field in Customers controller.

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.

Dropping the 'Photo' field node onto view 'editForm1'.     Photo data field instantiated in view editForm1.

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.

Uploading a picture to Photo field in Customers controller.

The files can be seen in File Explorer.

The uploaded files are stored in the specified folder.

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

Thursday, April 25, 2013PrintSubscribe
Amazon S3 Upload/Download Adapter

Amazon Simple Storage Service (Amazon S3) is a cloud-based data storage solution. Let’s add fields to the Suppliers table in the Northwind database in order to store company logos. The picture file name, size, and content type will be saved in the database, while the files will be uploaded to S3.

Setting Up S3

Navigate to http://aws.amazon.com/s3 and log in to your account. If you do not have an active account for Amazon S3, sign up for AWS Free Usage Tier.

When logged into the AWS Management Console, select S3 under Storage & Content Delivery section. Click on Create Bucket.

Creating a bucket in Amazon S3.

Enter a bucket name and press Create.

Naming and creating the bucket.

When complete, click on the account name in the top right corner and select Security Credentials. Scroll down to Access Keys section. If necessary, create a new access key. Click on Show under Secret Access Key and save both the Secret Access Key and Access Key ID for later use.

Getting the access key for Amazon S3.

Adding Utility Fields to the Database

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

Designing the Suppliers table.

Add the following columns:

Column Name Data Type Allow Nulls
LogoFileName nvarchar(250) yes
LogoLength int yes
LogoContentType nvarchar(50) yes

Save the changes. Switch to the generator and click on the project name. Select Refresh, check the box next to Suppliers controller, and proceed to refresh the web app.

Refreshing the Suppliers controller.

Configuring BLOB Field

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

Creating a new field for Suppliers controller.

Assign the following properties:

Property Value
Name Logo
Type Byte[]
Allow Null Values yes
Value is retrieved on demand yes
Source Fields SupplierID
On Demand Handler LogoBlobHandler
On Demand Style Thumbnail
Label Logo

Save the field. Drag the new field node and drop it onto Suppliers/ Views / editForm1 to instantiate the field as a data field in the editForm1 view.

Adding a data field of Logo to view 'editForm1'.     Logo data field added.

Drag the field onto view grid1 to display the picture in the list of products.

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

BLOB Adapter Configuration

Field: Logo
Storage-System: S3
Access-Key-ID: AKIAJASDFSHLPC4B7P6Q
Secret-Access-Key: lNFaASDFyosrjY3j77ASDFCUTHj408Pgz5yoCci
Bucket: northwind
Path-Template: {SupplierID}-{LogoFileName}

Note that the values above are not functional. Replace the highlighted parts with your own settings.

Make sure to save the controller.

Viewing the Results

On the toolbar, press Browse. Navigate to the Suppliers page and start editing a record. The new Logo 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.

Image uploaded to Amazon S3 and thumbnail is displayed.

The files can be seen in AWS Management Console.

Files uploaded to Amazon S3.

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

Wednesday, April 24, 2013PrintSubscribe
Azure Upload/Download Adapter

Microsoft Azure Storage is a low-cost option that allows storing binary content in the cloud. Let’s implement storing of product pictures in the Northwind sample database. We will capture name, size, and content type of the picture file in the Products table. The actual pictures will be saved in Microsoft Azure Storage.

Setting Up Azure Storage

Navigate to http://azure.com and click on the Portal link in the top right corner to log in to your Azure account. If you do not have an account, a free three month trial is offered.

When the Management tool loads, click on the New button in the bottom left corner. Select Data Services | Storage | Quick Create option. Assign a URL for your new storage and press Create Storage Account.

Creating a new storage account in Windows Azure.

When complete, click on the new storage account name in the list to view details. On the action bar displayed at the bottom, press Manage Access Keys. Copy one of the keys into the clipboard.

Viewing Access Keys for Azure Storage account.

At the top of the form, click on Containers tab. Press Add Container at the bottom of the screen.

Adding a container to a storage account.

Assign a name to the container. If you do not expect the product pictures to be accessible to anonymous users, then leave Access property as “Private”. Click on the Check icon to save.

Creating a new container.

Adding Utility Fields to the Database

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

Designing the dbo.Products table in Northwind database.

Add the following columns:

Column Name Data Type Allow Nulls
PictureFileName nvarchar(250) yes
PictureLength int yes
PictureContentType nvarchar(50) yes

Save the changes. Switch to the generator and click on the project name. Select Refresh, check the box next to Products controller, and proceed to refresh the web app.

Refreshing the Products controller.

Configuring BLOB Field

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

Adding a new field to Products controller.

Assign the following properties:

Property Value
Name Picture
Type Byte[]
Allow Null Values yes
Value is retrieved on demand yes
Source Fields ProductID
On Demand Handler PictureBlobHandler
On Demand Style Thumbnail
Label Picture

Save the field. Drag the new field node and drop it onto Products / Views / editForm1 to instantiate the field as a data field in the editForm1 view.

Instantiating the Picture field in view 'editForm1'.     'Picture' data field created in 'editForm1' view.

Drag the field onto view grid1 to display the picture in the list of products.

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

BLOB Adapter Configuration

Field: Picture
Storage-System: Azure
Account: northwindproductpictures
Container: pics
Key: e2Wl668b6fEGauS6cOTAHaj7Ut6QfwKdbGY4Vd8yngz40y2f54M5EfZtSNNHYoXW7i7+kZAfFJrg==
Path-Template: Products/{ProductID}-{PictureFileName}

Note that the values above are not functional. Replace the highlighted parts with your own settings.

Make sure to save the controller.

Viewing the Results

On the toolbar, press Browse. Navigate to the Products page, and edit any record. Note that there is a Picture field which accepts files. Click on the link to upload a file and select a picture from your hard drive. A bar at the top of the page will announce completion of upload and the thumbnail of the picture will be displayed. The utility fields will be updated with the picture file name, length, and content type. If you do not want users to change any utility field values, configure the data fields as Static.

Succesful upload of product picture to Azure.

The thumbnail will display the file extension if the file is not an image.

Extension displayed in thumbnail when file is not an image.

The uploaded files are visible in Azure Management screen.

Files are visible in Azure Management tool.

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

Continue to Data View Refresh