Step by Step with Open Web Studio – Part 2

In part one of the series we installed OWS and imported an existing OWS configuration with registration capabilities into our site, then described the enhancement that we are going to make to the registration module. One of the key parts of the requirements for our enhancement is to keep the page from refreshing (posting back) so that we don’t interrupt the workflow for the user, but provide feedback as quickly as possible when something is wrong. This is where that particularly compelling feature I mentioned at the beginning of the first post comes in.

Introducing ows.Fetch

Before we add new functionality to the module, let’s familiarize ourselves with the ows.Fetch functionality. If you pay attention closely to the example you can start to see how this is going to help us accomplish our goal of enhancing the module to include inline Ajax username validation to the form.

Essentially, ows.Fetch is a JavaScript function that allows for communication with a particular OWS module. You can place logic inside of the OWS module to perform various actions (like checking to see if a Username is in use!), and using ows.Fetch, you can trigger that functionality without performing a full page post back which causes the page to refresh.

The ows.Fetch JavaScript function accepts four parameters:

1. TM - Id of the target OWS module. This is the ModuleId that is assigned to a module when it is placed on the page.
2. page - Id of the page for the target OWS module. This is generally set to 0 when performing same page operations.
3. appendQuery - Additional query string parameters to send to the server. This is generally used to specify exactly what action this Fetch request will perform.
4. targetobjectid - Id of the element to populate with the result from the server. This can be omitted if no results are needed, if used, this is typically the id of a <div> element in which the result should be placed. The Fetch method also takes care of displaying this element if it has been hidden using CSS.

The following line is a sneak preview of what we’re going to be doing in part three of this series. It demonstrates the usage of ows.Fetch, although without providing any additional context.

Example parameters explained:

1. Target Module Id
   • [ModuleId,System] is an OWS “token” that when used within an OWS module configuration, will resolve to the current Module Id.
2. Page Id
   • 0 is specified for the Page Id as we are refreshing a module on the current page
3. Additional Querystring Parameters
   • “Action=ValidateUsername” + “&Username=” + $(this).val() – this combines a “hard-coded” parameter (Action=ValidateUserName) that will indicate to the OWS module that we want to execute the “validate username” functionality and a dynamic parameter (Username=?) that, using jQuery, will resolve to the value of the UserName text box in the form that the user is filling out.
4. Id of element to populate with server results
   • InvalidUsernameMessage – is the (very explicitly named) Id of the element we want to populate with the result from the server. The actual markup we’re referencing here is <span id=”InvalidUsernameMessage”></span>.

You may have noticed the $(this) syntax used in creating the third parameter. We will be using jQuery in our implementation and this syntax indicates that the ows.Fetch method is being used within an “event handler” that we’ve created. If you’re new to jQuery, this will become more clear in the next post where we actually put all of this together!

Continue on to part three of the series to see ows.Fetch in action and to complete our implementation of the in-line username validation.