November 26, 2008



The Quick Builder within Open Web Studio provides all you need to create the complete interaction around your table structures. Watch the video to see the  Quick Builder in action. This walkthrough will demonstrate the how to use Quick Builder in Open Web Studio. To get started, add an OWS control to your page and click on Administration.

Overview Video
Checkout this walkthrough of using the Quick Builder.

Next, click new to create a new configuration

The Quick Builder operates from the Query Action interface, so add a Query Action to the configuration tree.

Now double click on the Query Action you just added. Click on the query textarea and start by adding your initial query for the Quick Builder.

For our demonstration, we executed this create table SQL statement against the server:

CREATE TABLE myTable (myID int identity(1,1), Name varchar(100), Description ntext)

You can execute statements like this in the query editor, but please note that if you don’t provide a Select statement, nothing is returned and the IDE believes there was an error – even if there is not.

The Query

Now to initiate the Quick Builder, we entered the following Select statement :

Select * from myTable

Next click “Execute Query”.

The Results

Within the area located below the text area where you entered the query, we can now see the following three columns: myID, Name and Description.

To the left of, and below these results we now can see two links identified as Column Clip and Quick Builder. Column clip would provide these three columns within the Code Clip in the Text Editor for reuse later. However, at this time we’re interested generating an interface, so click Quick Builder.

Builder Attributes

Now provided below the results is the Quick Builder form. It is very straightforward and easy to use. First you must fill in the general attributes:

Table name – the table name is used to provide the queries for each of the possible interface layouts. The name of the table is specific as it is required by your SQL statements in order to properly execute. In our case are table is called “myTable”. 

jQuery transitions – providing a simple, elegant and rich interface for your clients and users is made very easy through the simple transitions provided by the Quick Builder. These transitions are produced by the jQuery open source project, also bundled with our installation. For more information on to a jQuery please review the Wiki or go to  jquery.org

Include Sorting – by checking this box you will include sorting operations for ascending, descending and normal within the grid. This is not used if you’re creating an Edit or a View.


The operations created by the Quick Builder use both query string and form variables. Query string variables (also known as URL parameters) are embedded within the URL during AJAX callbacks. Form variables are provided as visual form prompts as well as hidden inputs in the case of primary keys.

Prefix – for both form and query string variables, prefix will appear as the text directly to the left of the column name itself.  While this is not normal practice, it may be necessary at times where query string variables may conflict with other variables in your environment. (TabId, for example).   For form variables, the general practice is to use “frm”, which is the case in this example.

Postfix – like prefix, postfix appends the characters to the end of the column name in the variable definition.  This is not standard practice but can be used where necessary as dictated by prefix. 

Below the attribute table are three check boxes: Grid, View and Edit. These correspond to the interface that is to be generated.  You can choose whichever option or options you would like. When the checkbox is checked a table will be provided with the columns and system operations provided for each defined interface. 

Interface Options

The columns provided within this table are as follows:

Move – to maneuver the columns within your Grid and or the vertical structure of your forms simply press up or down in this column.

Show – determining which system operations and columns are provided within your interface, choose the items to display in the show checkbox.

Name – the name corresponds to the system operation or column value and data type within your table as defined by the query results. The following system operations are generally provided depending on the interface: view, edit, delete, save and cancel.

Label –enter the text for the label or column heading, depending on your interface, in label column.  .

Content –the content column specifies the content that will appear in the Grid columns and detail or edit form fields. The default is a text value, but can easily be overwritten to specify an image, for example:

<img src=”/images/delete.gif’ border=”0” />

Click – determine which system operations are enabled by choosing these options.  For the Grid layout, the quick check box specifies which columns, when clicked, will open the view interface.

Is Key – check the box within this column to specify the keys to be used by the interface queries.

This table is provided for each of the three default interface operations. Each of which provide a full visual interaction against the columns in your result table.  Note that during changes to the table selections, the queries provided below will update automatically. Pay close attention to these queries so that your resulting interface will operate efficiently and effectively. 


Click “Generate” to complete the creation of your actions.  A confirmation box will display when the process completes.  The Quick Builder form will be left open in case changes need to be made.  Scroll to the query action you created within the action tree.  Below this action you will now see three new regions. You can now safely move these regions to your primary runtime area, and delete the query action.  Finally click on the general tab to set the default operations. For example, set the number of records per page and whether or not you would like to use Ajax interaction. We recommend that keep debugging for super users enabled until you have tested the interface.

Average (2 Ratings):
Want to help out?

New York, NY • Baltimore, MD • Vienna, VA • St. Louis, MO • Seattle, WA • info@openwebstudio.com

Bookmark & Share Bookmark and Share