Embedding Gatsby Views

Embedding Gatsby views directly into your custom Active Server Pages provides a great deal of flexibility, however it does require a basic knowledge of HTML, cascading style sheets and Active Server Page programming.

Gatsby views are available using the Gatsby Application Objects Library. To embed a Gatsby view into your custom ASP code, create an instance of the Gatsby Application Object. This object has methods to open and close a Gatsby data sources file. After you open a data sources file you can create a Gatsby Form or List view object. These objects have properties that contain the HTML code for the specified view.

The following code creates a simple HTML page with an embedded form.

<%@ Language = Jscript %>
<html>
<body>
<%
var App = Server.CreateObject( "Gatsby.Application.3" );
var Form = App.CreateForm( "MyForm", "/Intranet/Staff/");
Form.ProcessPost();
Response.Write( "<script>" + Form.Script + "</script>" );
Response.Write( Form.htmlHeader );
Response.Write( Form.htmlBody );
%>
<input type=submit>
<% =Form.htmlFooter %>
</body>
</html>

Creating the Application Object

Before you can create a view you must have an instance of the Gatsby Application object. If you don’t explicitly open a Gatsby data sources file, Gatsby will use the system data sources. The data sources file can have multiple databases mounted (depending upon your license).

Since the Application manages access to the database you may want to make it a session variable. Otherwise, the Application will have to open and close the database for every new page. This is particularly important in situations where you are using Gatsby to manage access to secure databases since the user would be asked to login each time a new form was displayed and submitted.

You can create the object using Server.CreateObject with the program id “Gatsby.Application.3”. You may want to use an object tag if you are using a development environment such as Microsoft Visual Studio since this will enable the Intellisense features.

<object runat=server classid="clsid:D2E33EE0-AD8D-11D3-8E83-00A024407377" id=App></object>

Embedding a Form

After you’ve created the Application object, creating a form is a simple matter of calling the CreateForm method. CreateForm takes two parameters. The first parameter is the name of the form. This should be unique within your document. The second parameter is the relational path to the view for which the form is to be created. To determine the path to pass, open up Gatsby and navigate to the view that you want to create a form for and copy the value from the query string. For instance if you want to create a form for the Staff member “Bobby Ford” from the Intranets sample that ships with Gatsby the query string would look like:

http://localhost/gatsby/default.asp?action=detail&path=/Intranet/Staff/38

The path parameter is “/Intranet/Staff/38”. If you want to create a form the first Staff member then omit everything from the end of the relational path back to the last slash. For instance, “/Intranet/Staff/” would build a form for the first Staff member. If you want to create a form for a new Staff member then go one step further and omit the trailing slash, for example “/Intranet/Staff”.

Inserting the Form

After you’ve created the view you need to embed the code for the view into your page. An HTML page with Gatsby view has the following structure:

The Gatsby Application objects provide the shaded areas. If your browser supports cascading style sheets, then you’ll want to include either your own styles or the Gatsby generated styles into a <STYLE> block in the <HEAD> of your document. See the section Customizing View Styles for more information.

The Script section should only be included once per document, even if your document includes multiple forms.  The script needs to be inserted into a script block.

<script>
<%=MyForm.Script%>
</script>

The Form Header section is provided by the “htmlHeader” property of the Gatsby Form object. It contains javascript code required by the Form and an HTML <FORM> tag. Include the Form Header in your page with the following code:

<%=MyForm.htmlHeader%>

After the header you can include any of your own custom elements, including navigation buttons, submit buttons and so on. Gatsby does not automatically generate a submit button so you’ll need to provide your own.

The Form Body is the actual form including field labels and form elements. Include the Form Body in your page with the following code:

<%=MyForm.htmlBody%>

After the body you can include more of your own custom elements. Finally, you need to include the Form Footer code. The Form Footer contains more javascript code and the closing </FORM> tag. Include the Form Footer in your page with the following code:

<%=MyForm.htmlFooter%>

Processing Form Results

Building the form is only half of the battle. Next you need to save the results of the form back to the database. This is accomplished with the ProcessPost method.  There is a ProcessPost method on the Application object and the Form object. 

var Form = App.ProcessPost();

If an error is encountered when calling the ProcessPost method on the Form object, the Form will be configured to display an error message, highlight the offending field and set the focus to that field.

Embedding a List

A Gatsby List view has two parts, a Form for editing parameters and a List for display the results. One or both parts may be valid for a given context.

View Type Form List

Select Query or Table

No

Yes

Parameterized Query

Yes

Yes

Action Query

Yes

No