Step By Step with Open Web Studio - Part 1

I’ve been familiar with OWS, conceptually, for some time, but just recently I have jumped in to OWS DotNetNuke module creation head first. One of the OWS features I’ve been using relying on quite heavily is called Fetch, which enables Ajax communication within OWS. This post will demonstrate the Fetch functionality, but along the way will demonstrate and explain some of the fundamentals of working with OWS in DotNetNuke.

Essentially, Fetch is a JavaScript function made available natively to all OWS modules, it allows you to perform an AJAX call in your OWS module. In addition, it allows you to retrieve a value from the server and display it on the page. Pretty simple but powerful stuff.

Jump start with an existing OWS module configuration

To demonstrate the Fetch functionality, I’ll be walking through adding a small enhancement to an existing OWS module configuration I came across in the OWS forums. It is a DotnetNuke user registration module configuration created by form member adski. You can read more about it (and download the OWS module configuration) in the original forum post entitled OWS Custom Registration Module. I selected an existing module to enhance so that I could more easily focus on the details of a single enhancement, rather than the process of creating an entire module.

Importing the configuration

To set up the OWS module with adski’s registration configuration:

1. Download OWS and install it on your DNN site as you would any DNN module. More info on installing the module: DotNetNuke 4, DotNetNuke 5.
2. Create a test page in your DNN site and place an OWS module on that page. You may want to name the page "Registration Test" or something of that nature.
3. From the module’s context menu (also called the action menu), select “Settings."
   
4. Rename the module “Registration” and uncheck “Inherit View permissions from Page” and then check “Unauthenticated Users” and click update. Now only administrators and those who are not logged in will be able to see the module.
5. While logged in as a super user, select “Administration” from the module’s context menu (also called an action menu). Now we’ll need to import the sample registration module configuration.
   
6. Download the OWS Registration configuration. This is a text file containing the actual OWS configuration (which is stored entirely as JSON). Put this text on your clipboard.
7. Back on the OWS Module Administration page, select the “Import” button in the “Configuration” section of the ribbon. Replace the contents of the text area “Place Configuration Here” with the contents of your clipboard (the JSON text) and select the “Save” link at the bottom.
   
8. Click the “Publish” button in the configuration section of the ribbon.
9. Navigate back to the module settings and make sure the newly imported registration configuration (MWD.OWS.Custom.User……) is selected, now hit update.
   
10. Navigate back to the module page, and you will see the registration form.
    

After completing these steps, you should be able to get a rough idea of how OWS works. OWS is essentially a module that creates other modules by leveraging core functionality (its framework) and additional functionality (plugins) to allow you to create those modules. When you install the OWS DNN module and drop one on a page, you’re starting with essentially a blank slate and a ton of functionality at your fingertips.

We’ve taken a pretty significant short cut by importing all of the functionality contained within the sample registration module configuration. Whether you’re new to OWS or not, I’d suggest taking a minute to read through the comments at the top of the OWS module configuration we just imported. Also, go ahead and get familiar with the module's functionality by logging out, filling out the form, and registering a new user.

The registration module

This sample registration form allows a user to enter their first name, last name, email address, user name, and password. All fields are required. It enforces the required fields and some basic validation of password on the client side with JavaScript. It also provides error messages from the server side if your registration was not successful. If your registration was successful, it redirects you into the site as a logged in user.

So, what’s next?

While there are many potential customizations to be made to this configuration. For the purposes of this series we are going to focus on one particular enhancement. We’re going to perform some in-line validation of the username to make sure it is not being used already. Basically , we want the user to know as soon as possible that they need to pick a different user name.

The requirement for this feature is to display a message to the user if the username is already in use as soon as they finish filling out the “user name” text box without refreshing the page or interrupting the flow of the user filling out the form.

If the username is not in use, no message will be displayed. This extra bit of will help to ensure the first time the user submits the form they will be successful. This particular technique is directly related to the AJAX pattern called Live Form. Take a look at the Yahoo! signup form for a good (and fairly advanced) example of this technique in action on the username field. While our implementation is going to be much more basic, the same principle applies.

Continue on to the next part of the series which discusses the functionality that will take advantage of to meet the requirements we’ve just discussed.