Technology & Development, Content Management

A Gadget to Call Your Own

Gadgets are undoubtedly one of the more enjoyable and useful new features available in version 10 of our OU Campus web content management system (CMS). They're easy to use and handy, as they provide OU Campus administrators and content contributors alike shortcuts for frequently used actions and some really cool new functionality. Gadgets come in two flavors: Dashboard and Sidebar, and a few gadgets can do double duty as both dashboard and sidebar gadgets.

Gadgets SidebarOut of the box, there are eight gadgets built right into the system. Notably, these include gadgets that provide an activity stream and a view of checked-out content, which are conveniently available in both the Dashboard and the Gadgets sidebar. On the Gadgets sidebar itself, built-in functionality includes a URL shortener, a search for dependency tags, and a thumbnail view of page information. That's already an abundance of great new functionality at the fingertips of every OU Campus user. In addition, some sidebar gadgets are displayed based on context. For example, the Images and Snippets gadgets are only relevant in a page-editing context, so they become available to users when the WYSIWYG Editor or Source Editor is open.

But wait, it gets better. You can actually create your own gadgets that make use of OU Campus' web Application Programming Interface (API). This allows developers on your web team to write institution-specific gadgets that make use of functionality provided by the API, providing new features to users via gadgets in the user interface.

Gadgets can be written by anyone with web development experience. I'm not going to lie to you and say it's super easy, but if you know HTML, CSS, and JavaScript, you'll be able to write your own gadgets for OU Campus.

Getting Started
There are really only two requirements for a gadget. One is that it must have a web page/address that can be reached at a real URL — one that starts with http:// (or https://) and ends with a slash. It doesn't necessarily have to be a static HTML file, as it can be a generated web page such as when using PHP. This web address for the gadget must be accessible to the OU Campus users for whom the gadget is intended.

The second requirement is that it has to have a configuration file named config.xml, which must be in the root directory of the gadget. The config.xml file contains key/value pairs for various attributes that describe the gadget to OU Campus and, optionally, create persistent variables for the gadget's own use. For example: <entry key="title">My First Gadget</entry>. In this case, the value of "title" is "My First Gadget" and this is what the user will see in the gadget's title bar.

The client-side gadgets that the OmniUpdate Development team members are writing make use of JavaScript, various JavaScript libraries, JSON for data exchange, and Bootstrap for styling. When writing gadgets, you are not limited to these tools and techniques, but OmniUpdate provides a JavaScript library that you can use to make writing client-side API calls to OU Campus easier, and to easily obtain the gadget's properties that are stored in the OU Campus database.

More About Scripting
The foundation of a gadget is in its index.html file (or the server-side script that acts as this file). A CSS stylesheet can be linked to or styling can be added with a <style> tag in the head. Same with the scripts, as a JavaScript file can be called with the <script> tag. For example: <script type="text/javascript" src="../lib/gadgetlib.js"></script>

Or the JavaScript can be added to the page within a <script> tag:
Gadgets Scripting

In a nutshell, that's how to get started with writing your own gadgets. Once you get going, there are a few other items to take into consideration such as:

  • Obtaining and passing the authorization token
  • Adding a favicon in config.xml
  • Defining custom entries in config.xml
  • Adding configurable properties
  • Specifying values for the sidebar_context entry

These undertakings, as well as the necessary API calls, will be provided in the OU Campus Learning Management System, which will be highlighted in an upcoming blog post. So, stay tuned!

Share this article:

WRITE FOR US

Would you like to share your knowledge and expertise with the OmniUpdate community via our blog? Submit your post ideas!