What modules I used to develop www.alunet.com (Part 2 - Open Web Studio)

Open Web Studio (or OWS in short) is a FREE (yes, free!) module from R2integrated, formerly known as ListX. (There are paid subscription options too, although I'm not quite sure what is offered). At first glance, it looks like a module where you can define an sql query and then create a template to render results - something like a glorified data repeater. But it's a lot more than that. It supports AJAX, paging, variables, it can "talk" to DNN and retrieve things like the tab id, the module id, the locale etc. it can make decisions and branch execution, you can nest modules and have one call another via AJAX, you can do redirections or change page and module titles, you can cache query results and you can even write to files!

 

Activity lists, product and company lists, product and company details, as well as the users' control panel are rendered via OWS. Additionally, OWS is used in all security checks (such as checking if the user has the right to edit a specific company or product or if the user can add another product). This is achieved via modules that have no front-end but nevertheless run when the page is requested.

 

 

Development in OWS is done via a handy tree-like interface where you define things like variables, If - else sections, sql queries, header-detail-alternate detail-footer sections etc.

 

The site's first page is a good OWS example. The asynchronous effect you will see when you load the first page is because only the main activities are retrieved when the page loads. Subactivities are then queried and rendered via AJAX, and query results are cached for each subactivity (yes, OWS can do named caching on query results so that you don't have to query your database all the time - you can even use fields from your queries to construct names for the cached elements). This is on purpose, since there is a large number of activities and counting products and companies for each one can take some time.

 

What's more is that you can then have more control over your caching - when a new company or product is submitted, you can clear only the cache that corresponds to the specific main activity it belongs to - leaving all the other query results cached. (No, I haven't done that yet - that's why it's a bit slow :))

 

Another example would be the company details page, in the future - the site will soon be supporting "packages", i.e. there will be companies that will register for free and companies that will pay. The "free" companies will have fewer details shown than the paying ones. This is very easy to control via OWS.

 

 

In fact, I could use OWS to even create the submission forms - but it would be very hard since I would have to do it all by hand - Dynamic Forms is very easier for this type of task. I created the quick search form on the company and product lists with OWS, though. When submitted, it runs a stored procedure which brings the appropriate results - illegal character escaping, injection protection, even parameter type checking and default values assignment are all built-in and easily customizable.

What's the catch? Well, lack of documentation. You've got to turn a lot of knobs and push a lot of buttons to understand what OWS really can do. Fortunately, there's a great community of OWS fans (me included), and this has solved most of my problems.

 

OWS Pros:

• Free!
• Very few bugs compared to other solutions
• Integrated RAD development environment including debugger
• It can talk to any external database (you can define connection strings)
• Supports calls to webservices or even external DLLs
• Supports caching, ajax, paging, sorting, decisions, variables
• Can talk to DNN - actually it can retrieve everything the PortalSettings class offers and some more.
• Very portable configurations, provides an option to even create your own PA assemblies, meaning that you can create your own modules using OWS.

OWS Cons:

• VERY poor wiki-style documentation (but lots of examples in the community forums)
• Internal functions have a syntax that is somewhat hard to read (quotes inside quotes, brackets, curly brackets, parentheses, escaped quotes, you can usually find them all in one line)
• Developer must be very proficient in SQL and HTML / Javascript in order to achieve good results (actually IMHO, this is not a bad thing)
• Can be painful to debug in very complex scenarios

Company website: www.r2integrated.com

Module website: www.openwebstudio.com

Snowcovered: Click

 

Click here to read Part 1 (introduction and Dynamic Forms from Datasprings)

Read more...

What modules I used to develop www.alunet.com (Part 1 - introduction and Dynamic Forms from Datasprings)

Instead of writing another boring "top 10" list of modules "you must use before you die", I chose to present a site I developed (currently online but in Beta stage). This is a unique opportunity, since I usually don't get permission or don't have enough time to publish details on my work.

 

The site is www.alunet.com, a global directory related to aluminium companies and products, and has been developed using the following DNN modules:

 

 

Dynamic Forms from Datasprings

IndooGrid from IndooLab

Open Web Studio from R2integrated

News Articles from Ventrian

Live Tabs from Mandeeps

Navigation Suite from DNN360.net

SmokeRanch Ad Manager from Smoke Ranch Software

 

(Please be aware that the design is not mine - the layout and site structure was entirely designed by the client and my job was to implement all the functionality needed).

 

The site is also heavily using jQuery, Fancybox (a jQuery plugin for displaying images and/or html) as well as ImageGen, an image resizer originally developed for the Umbraco CMS that can function stand-alone in any .NET - based website.

 

Let's discuss where I used what and why:

 

Dynamic Forms from Datasprings

 

Dynamic Forms is being used for almost all end-user data submission tasks. This is a very powerful forms generator for DotNetNuke, which allows you to create data-driven forms, storing data either in the module's internal database schema or in any custom external table structure. I am using custom tables for companies, products and categories so I chose the second approach. You can easily load data to your forms as well as save data to your database via SQL queries or stored procedures. You can populate form fields using SQL, and this is especially useful with lookup data used in combo boxes or checkbox groups.  The module supports various goodies like injecting your own javascript, creating your own validations and launching events on form submission that can send email or write to the database. I used Dynamic Forms for the product and company data submission forms that are displayed to registered users.

 

 

 

Registered users can submit their company data. Each user can submit only one company, which is approved by the site's administrator. Companies must have a main activity and subactivities that fall under their main activity (it's a tree with 3 levels). After initial submission, the user must select a main activity and subactivities. (again, Dynamic Forms is used for the selection forms).

 

When this process is complete, the company must be approved by the site administrators. Users get an email when this is done. (Of course, administrators also get an email for each submitted company). This is achieved via Dynamic Forms post-submission events.

 

Afterwards, the user is able to submit up to a specific number of products for the company (currently 10, but it's as easy to change as a record in a database table) and assign each product to one of the subactivities they have defined for their company. Actually, the "main activity" acts only as a grouping category, while subactivities are the actual activities of the company.

 

 

When editing the subactivity list, the forms present only subactivities that can be selected depending on the main activity chosen and do not let the user unselect a subactivity he has already assigned products to.

 

 

 

Users have their own "control panel" where they can manage companies, products and activities. This works mainly with Open Web Studio, which we'll examine later on.

 

Dynamic Forms pros:

• Very powerful
• Datastore in own schema or custom database
• Post-submission events (email, sql, etc.)
• Field events (when you fill a field - you can hide/show sections depending on value etc.)
• Great selection of controls - including data-driven comboboxes, listbox/radio groups, rich text editor, image and file upload controls.

Dynamic Forms cons:

• Bugs arise when you try to push it too far
• Somewhat expensive - you must make sure that you need it
• Not very good / easy control on final layout
• Image and file upload controls have many features (e.g. unique filenames, automatic thumbnail resizing) but need a lot of work to operate correctly.

Company website: www.datasprings.com

DotNetNuke Store: Click

 

Click here to read Part 2 (Open Web Studio)

Read more...