Building a Custom Gadget in OU Campus Go-Go Gadget Building a Custom Gadget in OU Campus Welcome to JavaScript for gadget development. My name is Alok Somani.

What is a Gadget? I like to start with the obvious. So, the obvious question is: What exactly is a Gadget?

Sidebar Gadget Well, you’ve seen it before. I think there are people who don’t really use gadgets too much, and then there are people who LOVE using gadgets. The one you see here exists in the sidebar whenever we pull that out – which is why it’s called a Sidebar Gadget.

General Idea In coding terms, it is a self-contained application It extends the functionality of OU Campus Can exist in sidebar or dashboard, or both A gadget can interact with OU Campus APIs OR It can be completely self-reliant We kind of know what a gadget is Holistically, you would probably best consider a gadget to essentially be a small, self-contained application that exists within your OU Campus. It runs on its own code, it runs in its own frame -- not exactly a part of OU Campus, but is an add-on -- and you can build and add your own! A gadget’s primary offering is in being able to add pieces of functionality to OU Campus that you and your team want. Think of things like: Bookmarks to various pages in OU Campus, or a color picker to make it easy to find the right colors when creating content, or in today’s case: a To Do List to help you manage all of your website development tasks in OU Campus. A gadget’s functionality can be completely isolated, like if you were to build a calculator, or it can interact with OU Campus via APIs

Examples We kind of know what a gadget is Holistically, you would probably best consider a gadget to essentially be a small, self-contained application that exists within your OU Campus. It runs on its own code, it runs in its own frame -- not exactly a part of OU Campus, but is an add-on -- and you can build and add your own! A gadget’s primary offering is in being able to add pieces of functionality to OU Campus that you and your team want. Think of things like: Bookmarks to various pages in OU Campus, or a color picker to make it easy to find the right colors when creating content, or in today’s case: a To Do List to help you manage all of your website development tasks in OU Campus. A gadget’s functionality can be completely isolated, like if you were to build a calculator, or it can interact with OU Campus via APIs

Implied Restrictions Size Exists in <iframe> No access to parent window Except for API While a gadget is an isolated application, it does have a couple of limitations to note: Limited physical size It exists in an <iframe>, which means it is self-contained, but it also means that you can’t target anything or access the parent window. Think about it this way: if you were to try to target an element in the rest of OU Campus from within a gadget, you wouldn’t be able to do it. But that’s also why we offer APIs, to give you the ability to still interact with OU Campus and build functionality

Why Build a Gadget To improve efficiency or convenience One of the primary reasons that you might want to build a gadget, is to make a process or task that you do in OUCampus more efficient or convenient. These two gadgets are examples of that.

Why Build a Gadget To do something outside the immediate scope of OU Campus Another big reason is to do something that might be outside of the immediate scope of OU Campus. This Notes gadget is a good example of that. While we try to provide you with all the tools needed for a great content management system, there are things that can be added that further improve your workflow and lives.

Planning & Considerations As we move forward, we want to know more to be able to better plan what we can and can’t do.

Some Decisions What are some things we should consider when planning how to build our gadgets? Do we want the gadget to be context sensitive? Do we want OU Campus to pass us notifications? Do we want to persist the data? Do we want to link our data to an OU Page, Asset, Site, or Directory?

Gadget Context Specify in what context the gadget should be available Only possible for sidebar gadgets

Gadget Context - Edit Assets Gadget

Notifications Gadgets can be configured to catch notifications from OU Campus.

Persisting Data Without persisting data: With persistent data: Calculator, color picker – immediate needs Great for utility tools With persistent data: Maintained lists, notes, information Linkable to Pages, Directories, Assets, and Sites More ”application-like” potential

The APIs Gadgetlib, Metadata, OU Campus

Gadgetlib.js Remember, you’re in an iframe Can’t access window context Can only use window.postMessage Library/API to allow you to interact with OU Campus Handles environment details, including token Provides shortcuts to Metadata API calls (using $.ajax) Provides global “gadget” object

Metadata API For persisting data Document based database Uses JSON Free form content structure

Metadata API Example /metadata/new endpoint via gadgetlib

Linking Data Not its own API Actually possible through the metadata API Allows us to associate specific metadata with specific object constructs in OU Campus: ”page” “asset” “directory” “site”

Linking Via Metadata API Link your metadata to a “link type”

OU Campus API developers.omniupdate.com

Workshop Resources That’s it! outc18.com/workshops  Go-Go-Gadget workshop Download the resource files!

Thank you. Alok Somani asomani@omniupdate.com outc18.com/surveys