Making it Cool - Creating a Mashup - Part 6 of 6 - How to Build Module Interfaces with OWS

By Paul Deschenes
September 2009

This is part six of the OWS series of video tutorials presented by Paul Deschenes, we add some cool features to our OWS Knowledge Base Article module, this covers social networking and working with APIs and web services.

First of all we demonstrate how to place a 'Send This to a Friend' email link on each Knowledge Base article. This allows you to send a direct email link to anyone you wish, the user can click a link in the email and directly view the article you are referencing.

Following this we show you how to integrate AddThis into the Knowledge Base module. AddThis allows a user to bookmark and share your webpage to social networking sites such as Twitter and Delicious.

Next we demonstrate how to share an article on Facebook using the Facebook Share API. This allows you to post the URL you are viewing and pre-format the post title and URL into a person's Facebook page.

To finish, we demonstrate how to display and search Yahoo! answers via their API. This feature queries Yahoo! answers based on the Knowledge Base article that you are currently viewing. It displays underneath the Knowledge Base article links to Yahoo! answers with similar topics to the Knowledge Base article the user is currently viewing. This helps to provide the user with additional information related to the Knowledge Base article.

Before you view these tutorials it is recommended that you visit www.openwebstudio.com and download the latest version of OWS as there have been a few recent enhancements.

Resources for this Tutorial

The Series

These tutorials aim to introduce the beginner to Open Web Studio and demonstrate how to create a functional web application with little or no coding experience required.

This series will take the viewer through six episodes, where at the end the viewer will have a fully functional Technical Knowledge Base application.

Open Web Studio is a free robust tool for building data bound forms, modules, utilities and more.

Major Framework Features of Open Web Studio:
  • Zero Footprint
  • Browser based IDE environment
  • Rapid change maintenance
  • Universal Data Binding
  • Rich Debugging
  • Supports AJAX, JSON, REST
  • Create distributable OWS applications for DNN, Sharepoint, .Net applications
You can download OWS from www.openwebstudio.com

The videos contain:

Video 1 - How to Build an 'Email to a Friend' function

  • Introduction
  • How to upload the Send Email to Friend Icon
  • Search KnowledgeBase Administration
  • How to add the Send Email link to the Query Detail Template
  • How to build the Send Email Interface
  • Testing the Email Link
  • How to debug the email form
  • How to send a KnowledgeBase article via email
Time Length: 13min 50secs

Video 2 - How to Add Social BookMarks with AddThis and Share on Facebook

  • How to add a Social Bookmark feature using AddThis
  • Introduction to AddThis
  • How to add the AddThis button to the list of KnowledgeBase articles
  • How to share an article on Facebook using the Facebook Share API
  • How to upload an icon for sharing an article with Facebook
  • How to add the Facebook Share link to the Query Detail Template
  • Testing the Facebook link
Time Length: 5min 12secs

Video 3 - How to Display and Search Yahoo Answers via their API

  • How to register for a Yahoo! ID
  • How to register for a Yahoo! API Key
  • How to construct the queries to send to the Yahoo! Answers API
  • Viewing the XML document results of the Yahoo! query
  • OWS query action
  • How to use the KnowledgeBase title as the query string for the Yahoo! Answers API
  • How to URI encode the URL
  • How to format an XML query
  • How to build an action variable to display the Yahoo! Answers search results
  • How to display a message if no results are found
  • Testing the Yahoo! Answers
Time Length: 15min 19secs

Total Time Length: 34min 21secs
In the 'How to Build a Public Knowledge Base Module with OWS' series we have covered:

Part 1 - Getting Started, An Introduction to R2i Open Web Studio

How to install Open Web Studio, a review of the Open Web Studio key components and support features, and how to build your first components with Quick Builder.

This episode walks you through downloading and installing OWS, adding and configuring the module on a page, opening and reviewing the key components of the OWS Administration development environment and building your first Master-Detail-Edit form using the OWS Quickbuilder utility. At the conclusion, you will have built the creating and editing components for adding articles to your knowledge base application.

Part 2 - Building Module Interfaces

Deep dive explanation of what Quick Builder did in episode one and then recreating the master-detail-edit article pages manually.

This episode explores the actual coding process. While Quickbuilder is a great "getting started" tool, it does not provide the understanding necessary to build and customize modules to specific requirements. In this tutorial we dissect and manually build the module to get a full understanding of building a query, using AJAX calls and other OWS actions, and formatting the results so that you can build your own modules of any type with any requirement.

Part 3 - The User Search Interface

This tutorial demonstrates how to build the user search page for searching knowledge base articles. We demonstrate how to implement record paging and column sorting, how to create a categories module and how to edit the knowledge base manager page so that we can record categories for each of our articles.

We then explore SQL Server, and show you how to enable and configure Full Text Search on the server. This is so that within the modules we can implement the Full Text Search syntax to provide the users greater functionality in their searches.

Following this we show you the principles for a query based look up drop down field so that you can query tables from the database to make record selections, and to finish the tutorial, how to output the articles that people are viewing so they are printable.

Part 4 - Personalization, Text Editor, Logging and Reporting

This tutorial demonstrates how to add personalization to the knowledge base module. We demonstrate InterModule Communications and create a ‘My Saved Articles’ module. We work with JQuery to create a ToolTip, we change the “fetching data” message that is displayed for Ajax module refreshes, and we demonstrate how to enable the OWS Text Editor, which allows us to create Rich Text/HTML articles.

At this point we explore an advanced OWS technique where we change the assignment of a single category selection for an article and we create multi-category selection for each knowledgebase article.

To finish the tutorial we cover interactive logging techniques, and beginning reporting with OWS columns and column templates.

Part 5 - Debugging, Enhanced Reporting, Importing Records and Scheduling

This tutorial demonstrates Debugging, Enhanced Reporting, Importing Records and Scheduling in Open Web Studio.

We begin the tutorial by demonstrating how to debug your OWS application using the built in OWS tools. We show you how to debug form variables, session variables, SQL queries, and troubleshoot problems.

We enhance the reporting page that we built in episode 4 and we provide a facility to export your report to Microsoft Excel CSV files and HTML formatted Word documents.

Following this we enhance the Knowledgebase Manager page so that it can import records from a CSV file, this allows you to automatically import multiple knowledgebase articles simultaneously.

To finish, we demonstrate how to schedule your OWS configuration using the DotNetNuke Scheduler. We demonstrate how to setup a query which executes each day and checks for any articles that have a pending status. If there any are pending articles, an email is sent to the administrator of the website.

Comments

comments or questionsIf you have any comments or questions for this tutorial, please ask them in this Making it Cool - Creating a Mashup in Open Web Studio - Part 6 of 6 forum thread.

You need to Subscribe as a member of DNN Creative Magazine and Login to download this video tutorial.


Recommended Tutorials:

R2i Open Web Studio (OWS) Module:
'How to Build a Public Knowledge Base with OWS'
How to Import the Configuration Source Code into Open Web Studio
An Introduction to R2i Open Web Studio – Part 1
How to Build Module Interfaces in Open Web Studio – Part 2
The User Search Interface in Open Web Studio - Part 3
Personalization, Text Editor, Logging and Reporting in Open Web Studio - Part 4
Debugging, Enhanced Reporting, Importing Records and Scheduling - Part 5
Making it Cool - Creating a Mashup - Part 6 of 6
How to Create an Email Form with OWS
How to Create an iPhone App with OWS
How to Create a Portal Signup Module with OWS
How to Create a Custom Login and Register Module with OWS
Working with File Action in Open Web Studio
Enhancing the OWS Login Module and Building a Twitter Module
Form Validation, Dependant Drop Downs and Data Level Security in OWS
How to Create an Installable DotNetNuke PA Module Using OWS
How to Create a Skin Object from an OWS Configuration
OWS Advanced Techniques: User Access and Security
Getting Started With jQuery UI in OWS

DotNetMushroom (DNM) Rapid Application Developer (RAD)
How to Build a News Application with DotNetMushroom RAD
How to Style a News Application Built with DotNetMushroom RAD
How to Implement Multi-Language Localization With DotNetMushroom RAD
Language Resource Files in DotNetMushroom RAD Applications
How to Implement Paging with DotNetMushroom RAD
How to Implement a News Carousel Using DotNetMushroom RAD and JQuery
New Features in DNM 01.20.00
How to Implement a DotNetNuke User Registration Module Using DNM RAD
Creating Charts Using DNM RAD 1.3 for DotNetNuke
Creating an Events Calendar for DotNetNuke using DotNetMushroom RAD
Working with Lists in DotNetMushroom RAD
Making use of the jsTree Control in DotNetMushroom RAD

Ifinity:
URL Master Module

OnyakTech:
SigmaLive Module
OnyakTech Host Commander Module

DNN Stuff:
Aggregator Module
Module Rotator

Markit Modules:
Slideshow Module
PageEar Module

Codeplex:
Monitter4DNN Twitter Module

Oliver Hine:
Advanced Optimized Control Panel

Maps:
GeoSprawl DotNetNuke Locator Module
ZLDNN Advanced Biz Map For DotNetNuke

Evotiva:
DNNBackup Module

Smith Consulting:
DotNetNuke Smith Shopping Cart

InteractiveWebs:
InteractiveWebs Advanced Login Module
You are not logged in.
You must log in to access all 
650+ videos, tutorials, podcasts, and more.
RSS Feeds