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
Sunday, April 28, 2013PrintSubscribe
Introducing Tools for Excel

Code On Time application generator includes a Project Designer that allows drag & drop modification of project configuration elements. Project configuration is composed of pages, containers, data views, user controls, controls, controllers, commands, fields, views, categories, data fields, action groups, actions, business rules, styles, items, and field outputs.

Code On Time Tools for Excel is a Microsoft Excel add-in designed to provide a bird-eye view of project configuration element properties with the ability to make rapid and massive changes when needed. Users can change element properties, add, rearrange, and delete elements. A dedicated ribbon tab allows synchronizing changes with the project, modifying project settings, and generating entire applications straight from Microsoft Excel. Code On Time developers can switch between Project Designer and Tools for Excel, whichever tool is better for the task.

Getting Started

First, download and install both Code On Time application generator and Tools for Excel.

Start Microsoft Excel and open a blank workbook. On the ribbon, select Code On Time tab. Click on New button to create a new web app.

Creating a new project from Tools for Excel.

The application generator will start and display a list of project types. Proceed to create a sample Web Site Factory project named “Northwind” based on a sample Microsoft SQL Server database by following these instructions.

Creating a Web Site Factory project.

When application generation is complete, the web site will open in the default browser. Navigate to the Customers page. Let’s use Tools for Excel to make the following changes marked in the picture below:

  1. Change the title of the page to “Current Customer List”.
  2. Change “Company Name” column label to “Business”.
  3. Remove “Region” column.

Changes to be made in Customers page.

Using Tools for Excel

Switch back to Microsoft Excel. On the ribbon, select Open to see a list of existing projects. Select Northwind / Web Site Factory project from the list.

Opening a project in Tools for Excel.

A new sheet will be added, displaying instructions. The ribbon will display the project control buttons.

Project loaded in Microsoft Excel.

The table below shows descriptions of controls on the ribbon.

Control Type Description
Sync Button Sync the current changes to project configuration files into the project. If errors are found, the sync will be canceled.
Browse Button Generate and open the web application in your default browser.
Project Button Display a menu of all available project actions.
Develop Button Open the application source code in Visual Studio.
Open Button Open the application project folder in Windows Explorer.
Filter Dropdown Click here to apply a page or controller filter to all sheets.
Pages Shortcut Pages are the building blocks of the application, and host instances of data controllers (Data Views) and custom user controls (Controls).
Containers Shortcut Containers are placed on pages, and hold instances of data controllers (data views) and custom user controls (controls).
Data Views Shortcut Data views are instances of a data controller. Data views render views of the data controller on the page, along with corresponding data controller action groups. The same data controller can be exposed with data views on the same or multiple application pages.
User Controls Shortcut User controls are the primary mechanism for extending the user interface of generated application pages. Instances of user controls (called controls) are placed in page containers alongside data views or other controls.
Controls Shortcut Controls are instances of custom user controls that are placed in containers on a page.
Controllers Shortcut Controllers define metadata used by the application framework to retrieve data, present it to the users, and respond to actions in live applications.
Commands Shortcut A command provides a developer-friendly dictionary of SQL expressions that correspond to the individual fields and also define the base table and joined tables. The application framework uses the command text elements to compose Select, Update, Insert, and Delete statements at run-time.
Fields Shortcut Fields represent a piece of data in a record. It may either reflect data in a specific column, or it may be derived from a calculation. Fields are instantiated on views in the form of data fields.
Views Shortcut A view is a configuration of the data controller composed of data fields and optional categories. Form views require all data fields to arranged in categories. Other types of views are incompatible with categories.
Categories Shortcut Categories are used to group data fields in a view. They are only compatible with form views.
Data Fields Shortcut Data fields are instances of fields in a view.
Action Groups Shortcut An action group is a collections of actions placed in in a specific area of the user interface. Action group scope determines determines how the actions are rendered.
Actions Shortcut Actions are rendered as buttons or action bar menu options in the user interface of the data controller view. The scope of the parent action group determines the part of the user interface that will display the action. Action commands with optional arguments are interpreted by the application framework. Custom actions can be processed with business rules.
Business Rules Shortcut Business rules extend the functionality of a web application through SQL, C# or Visual Basic, JavaScript, or Emails.
Styles Shortcut Styles are JavaScript expressions that evaluate to a true or false. When true, a CSS class is applied to the row.
Items Shortcut Items represent static values for a lookup field.
Field Outputs Shortcut Field outputs specify the output location of a command that produces data.

Click Pages configuration shortcut on the ribbon. A new sheet will be added to the workbook containing all pages and their properties. Make the following change:

Name Title
Customers Current Customer List

Changing the Title of a page in Tools for Excel.

Next, click on Data Fields configuration shortcut on the ribbon. Then, set a filter by pressing Filter | Customers.

Filtering data fields down to "Customers" controller.

Set the Header Text of CompanyName data field in view grid1.

Field Name View Name Header Text
CompanyName grid1 Customers Business

Changing the Header Text of a data field.

Right-click on the leftmost column of Region data field row of view grid1, and press Delete Row.

Removing a data field from the Data Fields sheet using Tools for Excel.

The changes are not yet integrated into the project.  Press the large Sync button to synchronize all workbook sheets with the project. Alternatively, activate the dropdown and select a specific element type to synchronize.

Synchronizing project changes in Tools for Excel.

Tools for Excel will validate the data entered in the workbook. If any errors are found, the invalid data will be highlighted and synchronization will be canceled.

Invalid data is highlighted by Tools for Excel.

If the data is valid, Tools for Excel will save the workbook and submit data sheets to the application generator one-by-one.

Application generator will detect changes and modify project configuration elements accordingly. The updated project configuration data will be returned to Tools for Excel.

Tools for Excel will delete processed data sheets and replace them with fresh data received from the application generator. The workbook will be saved.

The changes have been synced for data fields and pages.

On the ribbon, press Browse to regenerate and open the web app in the default browser. Navigate to Customers page. Note that the title of the page has been changed, the second column has been renamed to “Business”, and Region column is no longer present.

The changes made in Tools for Excel have been applied.

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.