1. 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.

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

3. 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.

4. 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

5. 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

6. 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

7. 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.

8. 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.

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

10. 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?

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

12. Gadget Context - Edit
Assets Gadget

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

14. 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

15. The APIs
Gadgetlib, Metadata, OU Campus

16. 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

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

18. Metadata API Example
/metadata/new endpoint via gadgetlib

19. 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”

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

21. OU Campus API
developers.omniupdate.com

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

23. Thank you.
Alok Somani
outc18.com/surveys