Search

Information


Gadgets

Snippets Gadget

Home  >  OU Campus Self-Help  >  Gadgets  >  Snippets Gadget

The Snippets Gadget is a sidebar gadget that allows users to add previously created snippets into an editable region from the Gadgets sidebar when using the WYSIWYG Editor and Source Editor. This gadget is useful in that it helps streamline the workflow process when adding snippets to a page, providing drag and drop functionality to the OU Campus system. Snippets Gadget

It is important to remember that the Snippets Gadget does not appear in the Gadgets sidebar until an editable region has been opened in the WYSIWYG Editor or when using the Source Editor.

WIth the Snippets Gadget, users can:

  • Filter the list of snippets by snippet category. All snippets are shown by default once the Snippets Gadget is expanded. Choose a category from the drop-down to view all the snippets assigned to that particular snippet category.
  • Preview a snippet by clicking on the snippet name.
  • Insert a snippet into the editable region or Source Editor from its preview.
  • Insert a snippet onto a page by double-clicking it.
  • Drag a snippet onto the editing area to insert it on a page.

Once a snippet is inserted on a page, it can be edited without modifying the original snippet.

When previewing the snippet, the following functionality is available:

  • View Rendered - The default view previews the snippet as rendered based on how it will appear when inserted on the page.
  • View Source Code - Shows the underlying markup or text, if it is not then its has been restricted by the administrator.
  • Insert - Click the Insert button to insert the snippet on the page.

Inserting a Snippet Using the Snippets Gadget

  1. Edit the page with the WYSIWYG Editor.
  2. If the Gadgets sidebar is not visible, click the Show Gadgets icon to show the sidebar.
  3. Expand the Snippets Gadget.
  4. Select either Buttons or UI Elements from the categories drop-down. If the snippets are not categorized, then all snippets are displayed in the list.select buttons or ui elements
  5. Select the snippet you want to use. If necessary, you can preview the snippet by clicking it.
  6. Add the snippet to the page using one of the following methods:
    • Double-click the snippet name
    • Drag the snippet onto the page
    • Click to preview the snippet and then click Insert. 
      Preview Snippet
  7. The snippet becomes part of the page and can be edited without affecting the original snippet. Snippet in WYSIWYG