Designing Pages with Widgets

You can easily get some of the pages in Clearspace to look the way you want to by using widgets to choose and arrange content. Each widget displays content of a particular kind — for example, HTML, recent documents in Clearspace, or feed subscription results — in a box that you can drag into position on a page. After you publish it, you can come back later to update its content or design.

This topic offers 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: If you're a system administrator, you can remove widgets from the Clearspace system through the admin console. In the console, go to System > Settings > Widgets.

What You Can Customize

Several parts of Clearspace support customization with widgets. The parts you can customize depend on your role in Clearspace (such as whether or not you're an administrator).

Quick Steps

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

1. To start customizing a page, go to the tab that will display your layout.
   • If you're personalizing the home page, this will be the Your View tab.
   • If you're customizing a space or project overview page, this will be the Overview tab.

   Clearspace will display a layout screen with a set of widgets listed at the top and a default layout beneath it.

2. In the layout area beneath, find widgets you don't want displayed on the page and click their Remove button (that's a red X in the widget's upper right corner).
3. In the widgets list above, find widgets you want and drag them onto the layout area.
4. Tailor a widget to your needs by clicking its Edit button (the little pencil in the widget's upper right corner).
5. In the widgets list above click the Choose layout link to arrange your layout's columns.
6. Repeat steps 2 through 5 until you have what you want, then click Save.

You'll probably spend a lot of time in your personalized page, but if you ever want to see the full view of content again, click the All Content tab.

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. Here's a list of the widgets that shows where you can use them.

Widget	Description	Personal Home Page	Application Home Page	Space Overview	Project Overview
Actions	Displays the Action links through which people can create content and receive notifications for this space.
Checkpoints	Displays the checkpoints for the project.
Formatted Text	Displays your text with formatting and links.
HTML	Renders your HTML with JavaScript or even CSS.
Latest Poll	Displays this space's latest poll.
Popular Blog Posts	Displays the popular posts from the blogs associated with this space.
Popular Discussions	Displays a list of the popular discussions for this space (and sub-spaces if you like).
Popular Documents	Displays a list of the popular documents for this space (and sub-spaces if you like).
Popular Tags	Displays the most commonly used tags.
Project Calendar	Displays checkpoints and tasks due in coming weeks.
Projects	Displays a list of the current space's projects.
Recent Activity	Displays a list of the most recent activity.
Recent Blog Posts	Displays the most recent posts from the blogs associated with this space.
Recent Content	Displays a list of the most recent discussions, documents, and blog posts for this space (and sub-spaces if you like).
Recent Discussions	Displays a list of the most recent discussions for this space (and sub-spaces if you like).
Recent Documents	Displays a list of the most recent documents for this space (and sub-spaces if you like).
Recent Status Updates	Displays a list of the most recent status updates for people using Clearspace.
RSS Subscription	Displays results of an RSS feed from another part of Clearspace or from another web site.
Spaces	Displays a list of this space's sub-spaces.
Tag Groups	Displays a list of tag groups.
Tasks	A list of upcoming project tasks.
Top Participants	Lists the top ranked participants.
Watch A Tag	Lists the content tagged with the tag you choose.
Watch A User	Lists the content created by the user you choose.
Your Blogs	A list of blogs you're an author on.
Your Colleagues	A list of your colleagues, optionally including your boss and your direct reports.
Your Projects	A list of projects you have at least one task in.
Your Status Update	Update and view your current status.
Your Tasks	Displays a list of your tasks.

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.

Choose a Layout

Click Choose layout, then click the kind of layout you want to use. Clearspace rearranges your widgets to fit, but you should drag them around until you like what you see.

Take the Easy Way Out: Copy

If you're designing an overview page and you've see another layout you like, you can just copy it for your own use. Click Copy another space to copy that layout as your own. You can then rearrange to suit you needs.

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.