Designing Pages with Widgets

You can get Overview pages to look the way you want to by using widgets to add and arrange content. Each widget displays content of a particular kind — for example, HTML, formatted text, or recent documents in your space — in a box that you can drag into position on a page. You can save your design and come back later to finish it; it won't be visible to other people until you publish it. Even after you publish it, you can come back later to update its content or design.

Note: To customize a space's overview, you need to be the space administrator for that space.

Here are a few ideas for designing pages with widgets. But the main idea is really very simple — once you get going, you'll find all kinds of uses for them.

Note: You can remove widgets from the Clearspace system through the admin console. In the console, go to System > Settings > Widgets.

Quick Steps

Here's the quick-and-easy look at designing a page with widgets.

1. If you're a space administrator, click the customize link on the Overview tab.
2. On the Customize Overview page, drag widgets from the upper part of the page to the lower part.
   • If you already have an Overview page design for another space and want to copy it (say, to use it as a template for the current page), you can click the Copy another space link at the top of the widget list.
3. Drop widgets into the boxed area on the left side of the page (to add it as a big widget) or onto the area to the right of the box (to add it as a small widget).
4. Click the Edit link in the upper-right corner of the widget to set its properties.
5. Add, remove, and reposition widgets until you have a page layout you like.
6. Click Save for Later if you want to finish later, but don't want to make the design visible to other people.
7. Click Discard Changes if you want to toss out the changes you've made since you last published the layout; this includes changes you've merely saved previously. If you've never published a layout, this will revert the page to its original design.
8. Click Publish Layout to make the design visible to other people.
9. Come back and customize later as you need to.

Widgets Included

By default, Clearspace features a number of widgets you can use to expose content from inside or outside Clearspace, or to add content that appears only on the space overview page.

A Closer Look

You design pages by dragging and dropping widgets, then setting their properties. Here are a few widget features you can use to get your page design looking the way you want it.

Drag and Drop

You drag widgets from the top of the page into your design.

Change Position

If you want to change a widget's position, just drag it to another place in your design. Notice when you do that the widget's size and display style adapt to fit the new position.

Edit Widget Properties

Click the widget's Edit link to change the name of the widget as it appears at the top. Many widgets also include other properties you can change to tailor how the widget looks. In the Formatted Text widget, for example, you also type in the text you want the widget to display, including links, images, and so on.

Widget Layout Example

Here's a simple layout that includes both internal and external content. This layout is designed to collect fitness-oriented information for employees. The information is a mix of internal (inside the Clearspace instance) and external (from elsewhere on the Web).

Here's what people visiting the space will see:

• The most prominent content is the introduction to the space (1). The space admin can edit this content regularly to include new messages, highlight content in the space, and so on.
• Beneath the introduction is an "in-office workout" video (2) that's streamed from another web site. This needs to be on the left side if only because it's easier to watch at the bigger size.
• In the upper right is the space's most recent poll (3). People can vote if they haven't yet or view results if they have.
• The boxes at the bottom right collect links to related content, some from inside the space (4) and some from another web site (5).

The following image shows the "flipside" of these widgets, displaying the property sheets for each.

• The introduction is done through a Formatted Text widget (1). Note that the widget provides that same editing styles (rich text and plain text, with a preview) as other content editors in Clearspace.
• An HTML widget (2) displays the video. The space admin merely copied HTML code provided by YouTube and pasted it into the space on the widget's property sheet.
• The poll is simply the Latest Poll widget (3).
• A Recent Content widget (4) displays links to content inside the space.
• To get content from another site, the RSS Widget (5) takes a URL to the RSS feed provided by the site. It then displays the feed's results.