Welcome to ComponentOne Studio for SharePoint

ComponentOne Studio for SharePoint Welcome to ComponentOne Studio for SharePoint

ComponentOne Studio for SharePoint includes five Web Parts you can use to enhance your Microsoft SharePoint 2010 sites. These WebParts — C1Maps, C1DataGrid, C1Chart, and the bonus Web Parts C1CoverFlow and C1ImageViewer — have a simple point-and-click interface so you can configure your data display quickly and flexibly. You can create impressive data displays in minutes, without writing any code — although, if you wish, you can further customize your Web Parts using Microsoft Visual Studio.

C1Maps

Display a specific location on a Microsoft Bing™ map, and add location markers that open web pages, images, or both.

C1DataGrid

Display your data in an interactive grid that users can sort, filter, and more.

C1Chart

Choose from a wide variety of themes and color palettes to create over 30 different types of charts, including Bar, Bubble, Candle, Gantt, Pie, and Radar.

C1CoverFlow

Display any SharePoint picture library in an interactive iTunes-style coverflow gallery.

C1ImageViewer

Display any image with an interactive magnifying glass that lets you zoom in anywhere.

The Studio for SharePoint Demo Site showcases all of the Web Parts. See http://webparts.componentone.com.

More:

Getting Started with ComponentOne Studio for SharePoint

Copyright and Trademark Information

Contacting Technical Support


Copyright and Trademark Information

Copyright © 1987-2011 ComponentOne LLC. All rights reserved.

Corporate Headquarters

ComponentOne LLC
201 South Highland Avenue 3rd Floor
Pittsburgh, PA 15206 · USA

Web site: http://www.componentone.com

Sales
E-mail: sales@componentone.com
Telephone: 1.800.858.2739 or 1.412.681.4343 (Pittsburgh, PA USA Office)

Trademarks
ComponentOne Studio for SharePoint and the ComponentOne Studio for SharePoint logo are trademarks of ComponentOne LLC. ComponentOne is a registered trademark of ComponentOne LLC. Microsoft, SharePoint, Vista, XP, Visual Studio, and Windows are either registered trademarks or trademarks of Microsoft Corporation. All other trademarks used herein are the properties of their respective owners.

More:

Welcome to ComponentOne Studio for SharePoint


Contacting Technical Support

ComponentOne offers a variety of support options for ComponentOne Studio for SharePoint.

Online Support via HelpCentral (http://helpcentral.componentone.com/) ComponentOne HelpCentral provides you with technical resources in the form of FAQs, samples, Version Release History, Articles, searchable Knowledge Base, searchable Online Help and more. We recommend you look here first with your technical questions.

Online Support via our Incident Submission Form (http://www.componentone.com/Support/default.aspx) This online support service provides you with direct access to our Technical Support staff via an online incident submission form. When you submit an incident, you'll immediately receive a response via e-mail confirming that you've successfully created an incident. This email will provide you with an Issue Reference ID and you will receive a response from one of the ComponentOne staff members via e-mail in 2 business days or less. You must create a ComponentOne Account and register your product with a valid serial number to use this method.

Peer-to-Peer Product Forums and Newsgroups (http://helpcentral.componentone.com/Forums.aspx) ComponentOne peer-to-peer product forums and newsgroups are available to exchange information, tips, and techniques regarding ComponentOne products. ComponentOne sponsors these areas as a forum for users to share information. While ComponentOne does not provide direct support in the forums and newsgroups, we periodically monitor them to ensure accuracy of information and provide comments when appropriate. Please note that a ComponentOne User Account is required to participate in the ComponentOne Product Forums.

Installation Issues Registered users can obtain help with problems installing ComponentOne products. Contact technical support by using the online incident submission form (http://www.componentone.com/Support/default.aspx) or by phone (412.681.4738).

Documentation Documentation is available for ComponentOne Studio for SharePoint. It is installed with the product, and is also available on HelpCentral (http://helpcentral.componentone.com/Documentation.aspx). If you have suggestions on how we can improve our documentation, please email the Documentation team. Please note that e-mail sent to the Documentation team is for documentation feedback only. Technical Support and Sales issues should be sent directly to those departments.

More:

Welcome to ComponentOne Studio for SharePoint


Getting Started with ComponentOne Studio for SharePoint

Using ComponentOne Studio for SharePoint is easy — just install, add a web part to your webpage, and configure. There are Quick Starts for each web part, so you can build a real-world example before starting your own project.

See below for more information about using ComponentOne Studio for SharePoint.

Installing ComponentOne Studio for SharePoint

Installation Instructions

Activation Instructions

Setting Permissions

Tutorials

An example for every web part, plus an example of connecting web parts.

Quick Start

Adding a Web Part to a SharePoint Page

(Also creating a SharePoint webpage, edit mode, and importing/exporting)

Adding a Web Part to a Page

Importing and Exporting Web Parts

Customizing your Web Part

Using the On-Board Designer

Choosing a Data Source (also includes information on creating SharePoint Lists, plus sorting and filtering data sources)

Selecting the Data to Display (refining your data source)

Studio for SharePoint Demo Site:

C1Maps

C1Chart

C1DataGrid

C1CoverFlow

C1ImageViewer

Other Features

Connecting Web Parts

Extending Web Parts

For more Help

ComponentOne Help Central (click on the "Other" tab)

ComponentOne Forums (click on the "Other" tab)

Studio for SharePoint Demo Site

Contacting Technical Support

More:

Welcome to ComponentOne Studio for SharePoint


Installation Instructions

After you have downloaded the installation file (C1WebParts2010_x64_version number.exe):

  1. Double-click on the installation file. The Setup Wizard will open.
  2. Review the Dependency Check screen:

    • If all items have a green check next to them, all the requirements are installed. Click Next to continue.

    • A red "X" next to any item indicates that you need to install it. Click Cancel and install the required dependency(ies) before attempting to install again.

  3. In the End-User License Activation screen, accept the terms and click Next.

  4. In the Destination Folder screen, confirm the installation location (or choose another) and click Next.

  5. Click Install to begin installation. A PowerShell application will open and install ComponentOne Studio for SharePoint to every site on your server. When this is complete, the message "Press any key to close this window" will appear. Press any key.

  6. Click Finish to close the Setup Wizard.

Activating Your Web Parts

If you have purchased ComponentOne Studio for SharePoint you should now activate it. See Activation Instructions.

The trial version is fully-functional for 30 days. After that, you must purchase and activate the Web Parts in order to continue using them.

Uninstalling Web Parts

  1. Open the Control Panel and choose Add or Remove Programs.
  2. Select ComponentOne Studio for SharePoint and click the Remove button.
  3. Click Yes.

More:

Activation Instructions

Setting Permissions


Activation Instructions

After purchasing and installing ComponentOne Studio for SharePoint, you need to activate it.

The trial version of ComponentOne Studio for SharePoint is fully-functional for 30 days. After that, you must purchase and activate in order to continue using it without interruption. To purchase ComponentOne Studio for SharePoint, contact ComponentOne Sales at:

  • E-mail: sales@componentone.com
  • Telephone: 1.800.858.2739 or 1.412.681.4343 (Pittsburgh, PA USA Office)

To activate ComponentOne Studio for SharePoint
  1. From the Start menu, choose All Programs > ComponentOne Studio for SharePoint > License Activation. The Activate License dialog box will open.
  2. In the Activate License dialog box, enter your name, company name, and product serial number. (You receive a serial number when you purchase the product.)
  3. Select an activation method:
    • Automatically over the Internet This is the default method. If you have an Internet connection, the Web Parts will be automatically activated.
    • From our web site This wizard will give you an authentication number. Go to http://c1verification.componentone.com/webfiles/Activate.aspx and enter your serial number and authentication number to receive an Activation Code.
    • By e-mail This wizard will give you an authentication number. Email your serial number and authentication number to activate@componentone.com and a customer service representative will provide you with an Activation Code.
    • Over the phone This wizard will give you an authentication number. Call the Activation hotline at 866.379.0274 (U.S. and Canada) or 412.681.0711 (International) 9:00 a.m. to 5:00 p.m. EST Monday through Friday, provide your serial and authentication numbers, and a customer service representative will provide you with an Activation Code.
  4. Click Next and follow the steps to receive an Activation Code. If you chose to activate Automatically over the Internet, the process is complete. If you choose another method, click Next again to continue.

Once the license is activated, you can register the product. Click Yes or No; however, we recommend clicking Yes so we can notify you of product updates and upgrades.

Note: If you try to activate on a farm that has more web front end (WFE) servers than you have licenses for, the following dialog box will appear. This means that none of your licenses is activated. Contact your sales representative to purchase the appropriate number of licenses for your farm.

For additional information on activating ComponentOne products, visit https://c1verification.componentone.com/webfiles.

To verify that your ComponentOne Studio for SharePoint license is active
  1. From the Start menu > All Programs > Microsoft SharePoint 2010 Products > SharePoint 2010 Central Administration
  2. In the Central Administration application, go to System Settings > Manage Farm Features.
  3. Verify that ComponentOne Studio for SharePoint License has the status of Active.

Activate Your Web Part

If the status is not active, click the Activate button. This will activate the licensing.

Deactivating Licensing

If you need to deactivate your licensing for any reason, go to the Start menu and choose All Programs > ComponentOne Studio for SharePoint > License Deactivation.

More:

Installation Instructions

Setting Permissions


Setting Permissions

There are minimal permission requirements to view ComponentOne Web Parts in SharePoint. One of the following must be true:

  • Users must be a member of the WSS_WPG group on the Windows server. (Administrators who already belong to the WSS_ADMIN_WPG group do not need to be added to the WSS_WPG group. )

OR

  • Users must have Read & Execute permissions on the folder where ComponentOne Studio for SharePoint is deployed.

Additional permissions are needed for users to edit and save Web Parts:

  • Users must have Contribute permission or greater on the SharePoint site. (They must belong to the Home Members or Home Owners group on the SharePoint site, where Home is the name of the site. )

In order to grant certain users limited permissions:

  • Users who are members of the Home Visitors group are only granted read permission and, therefore, have limited functionality. Home Visitors can modify Web Part properties but cannot save them. Additionally, Home Visitors do not have permission to browse subsites in SharePoint, so subsites will not be accessible in the Data Source tab of the On-Board Designer. However, SharePoint administrators can change the default SharePoint permissions of the user groups.

To add a user to the WSS_WPG group
  1. Select Start > Administrative Tools > Computer Managemen t.
  2. In the Computer Management pane on the left, expand System Tools, Local Users and Groups, and select Groups.
  3. In the right pane, right click WSS_WPG and select properties.
  4. In the WSS_WPG Properties dialog box, click Add. The Select Users dialog box appears.
  5. Under Enter the object names to select, enter a user name. You can follow any of the syntax examples below and you can also enter a group name:
    • DisplayName (example: FirstName LastName)
    • ObjectName (example: Computer1)
    • UserName (example: User1)
    • ObjectName@DomainName (example: User1@Domain1)
    • DomainName\ObjectName (example: Domain1\User1)

  6. Click the Check Names button to find the user or group, which will appear in the text box once it is located.

  7. Click OK, and you will notice the user or group now appears in the Members list in the WSS_WPG Properties dialog box.

  8. Click OK again to close the dialog box. The user or group will now be able to view ComponentOne Web Parts.

To add a user to the Home Members, Home Owners, or Home Visitors group in SharePoint
  1. Open your SharePoint site, and click the Site Actions menu.
  2. Select Site Settings and then choose People and Groups.
  3. Select Home Members or Home Owners from the list of Groups on the left side of the page.
  4. Select New > Add Users.
  5. Enter the name of the user in the Users/Groups text box.

    You can also choose to Give users permission directly. Select the control option for the user here. Users must have Contribute permission or greater in order to edit ComponentOne Web Parts.

  6. Click OK to add the user to the group.

More:

Installation Instructions


Adding a Web Part to a Page

To add a ComponentOne Web Part to an existing SharePoint page
  1. Open the SharePoint page.
  2. Click the Page tab. Click the Edit button.
  3. Select the Insert tab. Click the Web Part button.
  4. From the Categories column, choose ComponentOne SharePoint Web Parts. From the Web Parts column, pick the appropriate Web Part.
  5. Click the Add button.

If your SharePoint Page already has "Add Web Part" buttons displayed, you can also click on one of those to add a ComponentOne Web Part.

To create a new SharePoint Web Part Page
  1. On the Site Actions menu, choose More Options...
  2. Choose Web Parts Page as the Type (you will need to scroll down). Click the Create button.
  3. Name the page and choose a Layout. Choose a Document Library. Click Create.
  4. Click any of the "Add a Web Part" buttons on the page to select a ComponentOne SharePoint Web Part.

Editing a SharePoint Page

You must be in Edit mode to edit/add Web Parts, so if you open a page and can not edit, choose the Page tab and click the Edit Page button.

To easily move through your document tree, use the Navigate button.

More:

Using the On-Board Designer


Using the On-Board Designer

After you have placed a Web Part on a page, you can quickly and easily configure it using the On-Board Designer (OBD). The OBD makes it simple to link your Web Part to your data source and design its display in a few clicks. No programming is required. To access the OBD, simply right-click within your Web Part, and choose Design from the menu. The OBD will open.

To open the On-Board Designer in a new window (great for smaller-sized Web Parts), choose Design in New Window from the right-click menu. Please note that you cannot create connections between Web Parts when you open the OBD in a new window.

There is a slight difference between the OK and Save Web Part buttons.

  • Clicking OK updates the web part, but does not save the changes. It allows you to preview your changes before saving them.

  • Clicking Save Web Part saves the web part's properties to the SharePoint server.

To close the OBD without saving any changes, click the Cancel button.

Please note: The Save Web Part button in the OBD will not be enabled for those without the proper permissions.

Changing the Appearance of a Web Part

Although you configure the majority of your Web Part's properties using the On-Board Designer, there are several important Web Part properties that are set using SharePoint's Properties List. The most important ones are:

  • Allow Access to the On-Board Designer (Set it to Never to hide it from end users; set it to Always to allow any user to open the OBD and configure the Web Part; set it to Authorized to allow only those with proper rights to use the OBD.)
  • Title (the name that appears above the Web Part)
  • Height
  • Width

In Edit mode, click the drop-down in the upper-right corner of the Web Part and choose Edit Web Part from the menu. The SharePoint Properties List for that Web Part will open. Make your changes and click OK.

Edit Web Part

More:

Setting Permissions

Importing and Exporting Web Parts

Printing a Web Part

Displaying a Web Part in a New Window or Full Screen mode


Importing and Exporting Web Parts

Once you have configured ComponentOne Studio for SharePoint Web Parts, you can export them so they can be used on other SharePoint sites.

To export ComponentOne Web Parts
  1. Open the SharePoint page containing the Web Part you would like to export.

  2. In Edit mode, click the drop-down in the upper-right corner of the Web Part and choose Export from the menu.

    Export Web Part

  3. Click Save and save the .webpart file.

To import ComponentOne Web Parts
  1. Open the SharePoint page you would like to import a Web Part to.
  2. Click the Page tab. Click the Edit button.
  3. Select the Insert tab. Click the Web Part button.
  4. In the Add Web Parts menu, select Upload a Web Part and then select the Browse button to locate a file.
  5. In the Open File dialog box, select a .webpart file and click Open.

  6. Click the Import button to import the file to the chosen location.

More:

Using the On-Board Designer


Printing a Web Part

To print any web part, right-click within the Web Part and choose Print from the menu.

When printing the C1DataGrid Web Part, all information in the current grid (even if it has been sorted, grouped, or filtered)will be printed. Even the portions of the grid that are scrolled out of view will print.

When printing the C1Maps, C1Chart, C1CoverFlow, or C1ImageViewer Web Parts, only the information displayed will be printed. Any zooming or scrolling will be respected, but only what is displayed will print.

More:

Using the On-Board Designer

Displaying a Web Part in a New Window or Full Screen mode


Displaying a Web Part in a New Window or Full Screen mode

To display a Web Part in a new window, right-click within the Web Part and choose Open in New Window from the menu. Choose Full Screen to view the Web Part in full screen mode.

More:

Using the On-Board Designer

Printing a Web Part


Choosing a Data Source

ComponentOne Studio for SharePoint makes it easy to connect our Web Parts to your Data Source.

You can connect to many types of SharePoint Lists, including:

  • Data Lists
  • External Lists
  • Picture Libraries

Your Data Source must be a SharePoint List, and many types of data sets can easily be converted.

Data Source tab

If your Data Source needs to be converted to a SharePoint List
  • To create a SharePoint Data Source from an Excel spreadsheet, see the Quick Start for instructions.
  • To create a SharePoint Picture Library from your own pictures, see the C1CoverFlow Quick Start for instructions.
  • To create a Data Source from an external list (such as a SQL Server Table) see http://msdn.microsoft.com/en-us/library/ee558778.aspx

To choose a data source for any ComponentOne Studio for SharePoint web part
  1. Open the On-Board Designer. (See Using the On-Board Designer.)
  2. Click the Data Source tab to display the available SharePoint lists.

    To navigate to a different site collection, enter the URL in the Site field or select a site collection from the drop-down menu. Entering a / in the Site field will always return you to the top of the list.

  3. Choose the SharePoint list to use as a Data Source. To select a specific list view, click the arrow to the left of the name, then select the appropriate list.

  4. Click the Save Web Part button.

You can view, sort, select, and filter the columns in your selected data source, see:

  • Sorting and Filtering Columns
  • Selecting the Data to Display

More:

Selecting the Data to Display

Sorting and Filtering Data Source Columns


Selecting the Data to Display

You can choose the data that will be used from your data source by removing, adding, or hiding columns.

To remove or add columns

If you remove a column, the data in that column will not be downloaded.

  1. Click the Data Source tab.
  2. Choose the ellipsis button next to the List name.

  3. Clear the check boxes next to the columns you would like to remove. Select the check boxes next to columns you would like to include.

    Tip: Click the Exclude all columns button Exclude All Columns to clear all the columns. Click the Include all columns button [image] to select all the columns.

  4. Click the Save Web Part button.

Note: Click the Views button and choose List to return to the previous display.
Return

To hide columns (C1DataGrid Web Part only)

If you hide a column, the information will not display, but the data will be downloaded.

  1. Click the Columns tab.
  2. Choose the column you wish to hide on the left, then clear the Visible check box on the right.

  3. Click the Save Web Part button.

You can sort and filter columns also. See Sorting and Filtering Columns.

More:

Choosing a Data Source


Sorting and Filtering Data Source Columns

You can sort or filter the columns of your data source.

To sort columns
  1. Click the Data Source tab.
  2. Choose the ellipsis button next to the List name.

  3. Click in the Sort Type column. Select Descending, Ascending, or Unsorted from the drop-down.

  4. In the Sort Order column, use the arrows to set the column sort sequence (for example, enter 1 to have items in the specified column sorted first).

Note: Click the Views button and choose List to return to the previous display.
Return

To filter columns
  1. Click the Data Source tab.
  2. Choose the ellipsis button next to the List name.

  3. Click the row you wish to filter by.
  4. Click the Add filter condition button Filter button.
  5. Enter a filter expression under Filter. You can use multiple filter expressions by entering them in the Or columns.
  6. Expressions must start with an operator, such as one of the following:
    = (or ==)
    <=
    <
    <> (or !=)
    >=
    >
    (If there is no operator provided, = will be assumed.)

To remove a filter
  1. Click the filtered row.
  2. Click the Remove filter condition button Remove Filter .

You can remove, add, or hide columns, see Selecting the Data to Display.

More:

Choosing a Data Source


Quick Start

This Quick Start will help you get up-to-speed on ComponentOne Studio for SharePoint.

There is one Quick Start for each Web Part, and each highlights several features of that Web Part. After you have completed the Quick Start for each one, you can make any additional customizations you wish using the On-Board Designer.

The Studio for SharePoint Demo Site showcases all of the Web Parts. See http://webparts.componentone.com.

Prerequisites

Before you begin, download the Excel Spreadsheets from: ftp://publicfiles.componentone.com/C1StudioforSharePointDataSources.zip

Create a SharePoint List for each (see below).

The C1StudioforSharePointDataSources.zip file includes the following:

  • StateCapitals.xls
  • Endowments.xls
  • Universities.xls

To create a SharePoint List

Before beginning the Quick Start, create a SharePoint List for each of the Excel spreadsheets your downloaded: State Capitals, Endowments, and Universities.

  1. On the Site Actions menu, choose More Options...
  2. Choose Import Spreadsheet as the Type (you will need to scroll down). Click Create.
  3. Enter a Name and browse to the File Location. Click Import.
  4. Excel will open, along with the Import to Windows SharePoint Services List dialog box.

    See the Studio for SharePoint Demo Site for more tutorials.

  5. Choose the Range Type of Range of Cells.
  6. Click the - sign in the Select Range field. A smaller import dialog box will open.

  7. Select the range in the spreadsheet. (You may find it easier to scroll to the end of the spreadsheet and select from the bottom up. Make sure to include the column headers in your selection.)
  8. Click the download button on the right of the small dialog box, then click the Import button in the larger Import to Windows SharePoint Services List dialog box. Your list will open in SharePoint.

Bing Maps license

You need a Bing Maps license to try the geocoding features of the C1Maps Web Part. If you don't have a Bing Maps license, you can sign up for a free developer license here: http://www.bingmapsportal.com/.

More:

C1Maps Quick Start

C1Chart Quick Start

C1DataGrid Quick Start

C1CoverFlow Quick Start

C1ImageViewer Quick Start

Connecting Web Parts Quick Start


C1Maps Quick Start

The C1Maps Web Part Quick Start shows you how to create a map that indicates the location of 30 universities based on their address. When the location marker for the university is clicked on the map, a picture of the campus is displayed. Hovering over the location marker will display a tooltip with the name of the university.

This Quick Start uses the Universities list. If you have not created this list, see Quick Start for instructions.

How it works:

The Universities List contains university names (the Institution column), street addresses, state, affiliations, rank by endowments, and photo URLs. We will only use the institution, address, and photo data in this example.

  • The Web Part tells Bing Maps to use the addresses in the Universities list to indicate the location of each university. Bing Maps Geocoding can use addresses (as well as other data, like State) to pinpoint locations on a map.
  • The Web Part pulls the campus photo from the URL in the Universities list. It also pulls the name of the university from the list to use as a tooltip.
  • The Web Part sets the type of Bing Map (Road, Aerial, or Hybrid), the longitude, latitude, and zoom of the coordinates that will be displayed by default. (In this case, the map will be zoomed in to the continental USA.)

To create an interactive Map
  1. Add the C1Maps Web Part to the page. (See Adding a Web Part to a Page.)
  2. Open the On-Board Designer. (See Using the On-Board Designer.)
  3. Click the Data Source tab.
    • Choose the "Universities" List. Click OK.

  4. Click the Geocode tab. Set the following:
    • Service Provider = Bing Maps. Enter your Authentication Key.
    • Choose the dropdown next to Address and select Required. Move this field to the top of the list with the arrow buttons. Click OK.

      If you don't have a Bing Maps license, you can sign up for a free developer license here: http://www.bingmapsportal.com/.

      The Geocode tab

  5. Click the Maps tab. Set the following and click OK. This specifies the coordinates we would like to display (the continental USA):

    • Map Source = BingMapsRoad

    • Longitude = -96.635742

    • Latitude = 39.571822

    • Zoom Factor = 3.0

  6. Click the Annotations tab. Set the following and click OK. This sets the marker (orange ball) hover tooltip text (the information in the Institution column), as well as the information displayed when the orange ball is clicked (an image stored in the Photo column):

    • Annotation Type = Image

    • Annotation URL Column = Photo

    • ToolTip Text Column = Institution

  7. Click the Save Web Part button.

The result:

  • The map will now be zoomed into the continental USA, and an orange ball will be displayed at the address of each university.
  • Hovering over any orange ball will display a tooltip containing the name of each university.
  • Clicking on any orange ball will display a photo of that university.
  • You can zoom in and navigate the map.

More:

Quick Start

Using the C1Maps Web Part


C1Chart Quick Start

The C1Chart Web Part Quick Start shows you how to create a column chart that displays the universities with the top 10 endowment funds for a given year (in this case, 2007).

Chart Web Part

This Quick Start uses the Endowments list. If you have not created this list, see Quick Start for instructions.

How it works:

The Endowments List contains the names (the Institution column), state, 2007 and 2006 endowments, and endowment ranking of 785 universities. It also contains the percentage change in endowments for each between 2006 and 2007.

This Quick Start uses the Institution, Rank, and 2007 endowment information from the list.

  • The Web Part pulls the Universities with the top 10 endowments using filtering (there are 700+ institutions in the list).
  • The Web Part displays the information we want to display (the universities and the dollar amount) on the axis we choose.
  • The Web Part makes cosmetic changes to make the chart easier to understand and more professional looking — the university names are set at an angle, the legend is moved to the top, and the raw numbers are displayed as currency.

To create a Chart
  1. Add the C1Chart Web Part to the page. (See Adding a Web Part to a Page.)
  2. Open the On-Board Designer. (See Using the On-Board Designer.)
  3. Click the Data Source tab.
  4. Choose the Endowments List.

  5. The Endowments list has 785 institutions (too many for this chart) so we need to pare it down to the institutions with the top 10 endowments. To do that, we filter the list. Click the ellipsis next to the Endowments list. The columns in the list will be displayed.
  6. Select Rank, then click the Filter button. In the Filter field, enter <=10.

  7. Click the Views button and choose List to return to the previous display.

  8. Click OK.
  9. Now we need to name the data series and choose the X and Y axis of the chart. Click the Series tab. Click the plus sign on the lower left and give the series the name of 2007 Endowment. For the Data Columns, set the following:
    • X Column = Institution
    • Y Column = 2007 Endowment
  10. Click OK.

    This will put the Institutions on the X Axis and the 2007 Endowments on the Y Axis.

  11. The Legend should be at the top of this chart, so we need to move it from its default position (the bottom). Click the Chart tab and in the Legend area, change the Position to Top.

    While you are there, note that the Chart Type is Column, which is the default.

    Two tweaks to the Axes tab information and we are done. First of all, we would like the Universities in the X axis to display at an angle so they are easier to read.

  12. Click the Axes tab and choose X axis from the drop-down at the top.
  13. In the Annotations area, enter 20 for the Angle. Click OK.

    20 degree angle

  14. Now we want the dollar amounts displayed on the Y axis to be displayed as currency. Choose the Y axis at the top and in the Annotations area, choose Currency as the Numeric Format. (This tells the Web Part to display the numbers in the 2007 Endowment column as dollars.)

  15. Click the Save Web Part button.

If you'd like your chart to be more exciting than plain old beige, try changing the Theme or the Palette. The C1Chart Web Part has 11 themes and 20 palettes. They are set on the Chart tab (in the Appearance section.)

The result:

  • A Column chart is created.
  • The chart displays the universities with the top ten endowments on the X axis.
  • The Y axis displays the dollars in increments of 5 million.
  • The legend for the chart is on the top.
  • University names are displayed at an angle for easy readability.

More:

Quick Start

Using the C1Chart Web Part


C1DataGrid Quick Start

The C1DataGrid Web Part Quick Start shows you how to create an interactive grid that displays the US States and their Capitals, along with their longitude and latitude. This list can be sorted and filtered as desired. University Endowments are added to the mix to show the power of master-detail relationships in C1DataGrid.

This Quick Start uses the State Capitals and Endowments list. If you have not created these lists, see Quick Start for instructions.

How it works:

The State Capitals List contains the State names, abbreviations (the ST column), Capitals, Longitude, and Latitude.

The Endowments List contains the names (the Institution column), state, 2007 and 2006 endowments, and endowment ranking of 785 universities. It also contains the percentage change in endowments for each between 2006 and 2007.

This Quick Start combines all the data from both of these lists.

  • The Web Part displays all the information in the State Capitals List, simply by choosing that list as the Data Source.
  • The resulting data grid can be scrolled, filtered, sorted, and grouped — plus the columns can be rearranged.
  • The Endowments List is added as a data source and made a "Detail View."
  • The chart "nesting" is specified by simply choosing one column from the Master List (State Capitals) and one from the Detail List (Endowments).
  • The Web Part then displays the Master List as the main grid, but clicking an arrow will display the Detail List information.

To create an interactive Data Grid

  1. Add the C1DataGrid Web Part to the page. (See Adding a Web Part to a Page.)
  2. Open the On-Board Designer. (See Using the On-Board Designer.)
  3. Click the Data Source tab. Choose the State Capitals List.

    DateGrid Data Source

  4. Click the Save Web Part button.

This is all you need to display the data set, which includes the name of each State, its Capital, Longitude, Latitude, and Abbreviation (the ST field in the list). You can scroll, sort, filter, and group the grid.

Interacting with C1DataGrid
Rearrange Columns by drag and drop Choose any column header and drag it where you would prefer. | Scroll | Sort Sort the grid Click the arrow at the top of each column to sort by that column.
Filter Click on the column drop-down to open filtering. Choose "Starts with", then enter "R" in the second field and click Filter to display all the states that begin with the letter R in the grid. | Group Group by column To enable grouping, open the On-Board Designer and click on the DataGrid tab. Select the Allow Grouping check box.

Several of these grid behaviors can be turned off. See Customizing the Behavior and Display of Your Grid.

To create a nested table (Master-Detail relationship)

We can add information from the Endowments List to our existing chart and create a chart that displays both sets of data, related in a logical way.

  1. Click the Detail tab on the left.
  2. Click the Data Source tab and select the Endowments List.
  3. Select the Enable Detail View check box, then set the following:
    • Master Column = ST
    • Detail Column = State

    Choosing Enable Detail View turns on the nesting. The Master Column of ST is pulled from the State Capitals List and the Detail Column of State is pulled from the Endowments List.

  4. Click the Save Web Part button.

Now your grid will display an arrow next to each State. Click on it, and you will see the Endowment information for every University in that State. When you close the Endowment information, the State Capitals information is still the "Master" view.

The result:

  • An interactive data grid is created. It can be scrolled, filtered, sorted, grouped, and rearranged.
  • The grid displays the State Capitals List information as the main grid.
  • The grid displays the Endowments List information as the detail grid (you must click an arrow to display).

You can clear or hide columns in either data source if you wish, see Selecting the Data to Display.

More:

Quick Start

Using the C1DataGrid Web Part

Customizing the Behavior and Display of Your Grid


C1CoverFlow Quick Start

For this Quick Start, you will first need to create a SharePoint Picture Library. We will use images that are already installed with Windows, but if you already have a Picture Library, or want to use your own images when creating a Picture Library, go for it.

Both png and jpg files can be used in your picture library.

To create a SharePoint Picture Library

  1. On the Site Actions menu, choose More Options...
  2. Choose Picture Library as the Type (you will need to scroll down).
  3. Name the library "My Windows Pictures" and click Create.
  4. Click the Upload drop down and choose Upload Multiple Pictures.

  5. The Microsoft Picture Library will open. In the Picture Shortcuts pane on the left, choose Add Picture Shortcut.

  6. Navigate to one of the following:

    • In Windows 7 or Vista: C:\Users\Public\Pictures\Sample Pictures

    • In XP: C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures

  7. Select all the pictures and click the Add button.
  8. In the Upload settings, choose the Send Pictures Optimized for Viewing on the web radio button.
  9. Click the Upload and Close button.

To create a CoverFlow
  1. Add the C1CoverFlow Web Part to the page. (See Adding a Web Part to a Page.)
  2. Open the On-Board Designer. (See Using the On-Board Designer.)
  3. Click the Data Source tab.
  4. Choose the "My Windows Pictures" Picture Library from the list. Click Save Web Part.

You can flip through the CoverFlow using the scroll bar on the bottom, or by using the arrow keys.

More:

Quick Start

Using the C1CoverFlow Web Part


C1ImageViewer Quick Start

With C1ImageViewer, you can link to any image URL and display the image with an interactive magnifying glass. Both png and jpg files can be used.

The ImageViewer grabs the image using the URL provided and displays it in the Web Part. For a list of images with Creative Commons licensing, see http://www.flickr.com/groups/creative_commons-_free_pictures/pool/

To create an ImageViewer
  1. Add the C1ImageViewer Web Part to the page. (See Adding a Web Part to a Page.)
  2. Open the On-Board Designer. (See Using the On-Board Designer.)
  3. Click the ImageViewer tab.
  4. Enter a URL in the Image URL field. You must use a URL that contains an image file, such as http://upload.wikimedia.org/wikipedia/commons/e/ee/Duquesne_Incline_from_top.jpg
  5. Adjust the Zoom Factor to 2.5.
  6. Click Save Web Part.

You can move the magnifier around the image to zoom in on specific areas. You can also use the +/- keys.

More:

Quick Start

Using the C1ImageViewer Web Part


Connecting Web Parts Quick Start

Web Parts that are placed on the same page can be connected — these connections will make the web parts interact with each other.

How it works:
  • We will connect a C1Maps Web Part to an empty C1DataGrid Web Part (we will use C1Maps Quick Start we already created.)
  • The existing C1Maps Web Part uses the Universities List and displays an orange ball marker at the location of 30 Universities. When you click on any orange marker, a photo of the University displays. Also, hovering over the marker displays a tooltip with the name of the university.
  • After the two Web Parts are connected, when you click on an orange ball marker in the C1Maps Web Part:
  • The University photo will display in the C1Maps Web Part.
  • The C1DataGrid Web Part will display the data about that University. The data will be pulled from the Universities data source used by the C1Maps Web Part.

To create a connection
  1. On the page that already contains the C1Maps Quick Start Web Part, add a C1DataGrid Web Part. (See Adding a Web Part to a Page.)
  2. In the C1Maps Web Part, open the On-Board Designer. (See Using the On-Board Designer.)
  3. Click the Connections tab.

    Since we want to send the information from the Map to the DataGrid when a marker is clicked, choose the Send tab on the far right.

  4. Click the drop-down on the left and choose Marker Clicked.
  5. In the Connection Properties, choose to Send To the C1DataGrid Web Part.

  6. Click the Save Web Part button.
  7. In the C1DataGrid Web Part, open the On-Board Designer.
  8. Click the Connections tab.

    Since we want to receive information from the Map that will be displayed in the DataGrid, choose the Receive tab on the far right.

  9. Click the drop-down on the left and choose Display Data.
  10. In the Connection Properties, choose to Receive From the C1Maps Web Part

  11. Click the Save Web Part button.

The result:

Now, when you click on an orange ball marker in the C1Maps Web Part, the photo will display — and the C1DataGrid will display the information about that University in the C1DataGrid. The Data displayed in the DataGrid will be retrieved from the Universities data source used by the C1Maps Web Part.

If you close the photo and choose another marker, the information about that University will display in the DataGrid.

More:

Quick Start

Connecting Web Parts


Using the C1Maps Web Part

The C1Maps Web Part can be used to create rich, interactive maps. Choose from a variety of Microsoft Bing Maps views, plus included markers and interactions.

Your map can include markers on locations you'd like to highlight, plus display additional information (data or even a photo) when the markers are clicked and/or hovered over. Markers can be custom images, or you can choose from the ones provided. In addition, users can use the zoom tool to zoom in/out of the map, or use their keyboard +/- keys. C1Maps Web Part

To create an interactive Map
  1. Add the C1Maps Web Part to the page. (See Adding a Web Part to a Page.)
  2. Open the On-Board Designer. (See Using the On-Board Designer.)
  3. Click the Data Source tab and choose a List. (See Choosing a Data Source.)

    If you are not using Bing Maps Geocoding, choose the Longitude Column and the Latitude Column using the drop-downs. (Your list must include those columns in order to display points on a Map without geocoding.)

  4. Click the Geocode tab. Set the following:
    • Service Provider = Bing Maps. Enter your Authentication Key.

      If you don't have a Bing Maps license, you can sign up for a free developer license here: http://www.bingmapsportal.com/.

    • Choose the dropdown next to all of the location columns you would like plotted and select Required (or choose Optional, which will keep missing data from breaking geocoding). Use the arrow keys to put the columns in order. The markers will be plotted on the map based on your selection. Click OK.

      The Geocode tab

  5. Click the Maps tab. Set the following and click OK. These fields specify the map type, the longitude/latitude coordinates to be displayed, the map zoom, and the display of the navigation tools:

    • Map Source = BingMapsRoad, BingMapsAerial, or BingMapsHybrid (See C1Maps Sources.)

    • Longitude

    • Latitude

    • Zoom Factor

    • Navigation Tools = on (default) or off. The direction tool allows users to move across the right, left, top, or bottom of the map. The scale/zoom tool allows users to zoom in or out of the map.

  6. Click the Annotations tab. Set the following and click OK.

    • Marker Symbol = Choose from Ball, BallPin, Flag, PushPin, and Star. (The map displayed above uses PushPin.) If you have your own image, you can use it; set it in Marker Image URL Column.

    • Marker Image URL Column = If you have a custom image to use as the Marker Symbol, choose the column for it here.

    • Minimum Zoom Factor = If Map Inset is chosen as the Annotation Type, set the zoom for the inset here.

    • Click Action = Choose the type of dialog box that will display when the Marker Symbol is clicked: Modal, Modeless, or none.

    • Annotation Type = Choose the type of information that should be displayed when the user clicks on a Marker Symbol. Data Values, Image, Map Inset, and Navigation are available.

    • Annotation URL Column = If your annotations (for example, you chose an Annotation Type of Image) can be accessed by a URL in a list column, select that column here.

    • ToolTip Text Column = Choose the list column that contains the Marker tooltip information. This information will be displayed when the user hovers over the Marker Symbol.

  7. Click the Save Web Part button.

If you would like to connect your C1Maps Web Part to another web part on the same page, see Connecting Web Parts.

More:

C1Maps Quick Start

C1Maps Sources


C1Maps Sources

There are four Map Sources to choose from when creating a Map:

  • Bing Maps Aerial
  • Bing Maps Road
  • Bing Maps Hybrid
  • None

Bing Maps Aerial displays an aerial satellite view of a location.

Bing Maps Aerial

Bing Maps Road displays a road map view of a location.

Bing Maps Road

Bing Maps Hybrid displays a combination aerial satellite and road map view of a location.

Bing Maps Hybrid

None is only used if you are extending your Web Part with a custom image.

More:

Using the C1Maps Web Part


Using the C1Chart Web Part

With the C1Chart Web Part, you can create charts based on SharePoint Lists or Business Connectivity Service (BCS) data in minutes. Choose from 30+ chart types (including financial charts), apply a theme, select a data source, set options, and get charts that fit into your site perfectly. Useful features include data aggregation, mixed chart types, multiple series axes, and zoom.

For more on BCS, see the Microsoft Business Connectivity Services website.

To create a Basic Chart
  1. Add the C1Chart Web Part to the page. (See Adding a Web Part to a Page.)
  2. Open the On-Board Designer. (See Using the On-Board Designer.)
  3. Click the Data Source tab and choose a List. (See Choosing a Data Source.)
  4. Click the Chart tab and choose the Chart Type, such as Column or Bar. (See Choosing a Chart Type.)
  5. Click the Series tab. Click the plus sign on the lower left and in the Name field enter the name for your data series.
  6. Choose the X and Y axis of the data series. For the Data Columns, set the following:
    • X Column
    • Y Column
  7. Click the Save Web Part button.

If you'd like your chart to be more exciting than plain old beige, try changing the Theme or the Palette. The C1Chart Web Part has 12 themes and 23 palettes. See Customizing the Look of Your Chart.

If you would like to connect your C1Chart Web Part to another web part on the same page, see Connecting Web Parts.

More:

C1Chart Quick Start

Choosing a Chart Type

Customizing the Look of Your Chart

Customizing Each Axis of Your Chart

Creating Charts with Multiple Data Series

Creating Aggregate Charts


Choosing a Chart Type

The C1Chart Web Part has thirty-six different chart options. The table below describes each one.

How to choose a chart type

  1. Open the On-Board Designer. (See Using the On-Board Designer.)

  2. Click on the Chart tab.

  3. Click the Chart type drop-down and select a chart type.

  4. Click the Save Web Part button.

After choosing the type of chart, you can further customize it further by choosing a pre-defined chart Theme or Palette. See Changing the Appearance of Your Chart.

Chart Type | Description
Area | An Area chart displays a series as a set of points connected by a line, with all the area filled in below the line. Area charts are commonly used to represent data that occurs over a continuous period of time.
AreaSmoothed Area Smoothed Chart | An AreaSmoothed chart is an area chart where the data points are connected by a smooth line instead of a regular line. This chart is used to display trends rather than values of individual data points.
AreaStacked Area Stacked Chart | An AreaStacked chart shows multiple series stacked vertically. If there is only one series in the chart, the stacked area chart will display the same as an area chart.
AreaStacked100pc Area Stacked 100pc Chart | An AreaStacked100pc chart shows an area chart where multiple series are stacked vertically to fit 100% of the chart area. If there is only one series in your chart, the stacked area chart will display the same as an area chart.
Bar | A Bar chart displays series as sets of horizontal bars. The bar chart is the only chart type that displays data horizontally. For this reason, it is popular for representing data that occurs over time, with a finite start and end date. It is also popular for showing categorical information since categories can be displayed horizontally.
BarStacked Bar Stacked Chart | A BarStacked chart shows multiple series stacked vertically. If there is only one series in the chart, the stacked bar chart will display the same as a bar chart.
BarStacked100pc Bar Stacked 100pc Chart | A BarStacked100pc chart shows a column chart where multiple series are stacked vertically to fit 100% of the chart area. If there is only one series in your chart, all bars will fit to 100% of the chart area.
Bubble | A Bubble chart combines two independent values to supply both the point y value and the point sizes. This chart is used to represent an addition data value at each point by changing its size.
Candle | Candle and HiLoOpenClose charts are types of Stock charts used in financial applications to show the opening, closing, high, and low prices of a given stock. A Candle chart is a special type of HiLoOpenClose chart. It represents the change in stock price from opening to closing.
Column | A Column chart displays a series as a set of vertical bars that are grouped by category. Column charts are useful for showing data changes over a period of time or for illustrating comparisons among items.
ColumnStacked Column Stacked Chart | A ColumnStacked chart shows multiple series stacked vertically. If there is only one series in the chart, the stacked column chart will display the same as a column chart.
ColumnStacked100pc Column Stacked 100pc Chart | A ColumnStacked100pc chart shows a column chart where multiple series are stacked vertically to fit 100% of the chart area. If there is only one series in your chart, all the column bars will fit to 100% of the chart area.
Gantt | A Gantt chart is used to illustrate a timeline of various tasks and outline the critical activities to a project's completion.
HighLowOpenClose High Low Open Close Chart | Candle and HiLoOpenClose charts are types of Stock charts used in financial applications to show the opening, closing, high, and low prices of a given stock. This chart combines four independent values to supply high, low, open and close data for a point in a series.
Line | A Line chart displays a series as a set of points connected by a single line. Line charts are used to represent large amounts of data that occur over a continuous period of time.
LineSmoothed Line Smoothed Chart | A LineSmoothed chart is a Line chart that uses a curved line instead of a regular line.
LineStacked Line Stacked Chart | A LineStacked chart shows multiple series stacked vertically. If there is only one series in the chart, the stacked line chart will display the same as a line chart.
LineStacked100pc Line Stacked 100pc Chart | A LineStacked100pc chart shows a line chart where multiple series are stacked vertically to fit 100% of the chart area. If there is only one series in your chart, all lines will fit to 100% of the chart area.
LineSymbols Line Symbols Chart | A LineSymbols chart displays a series as a set of points connected by a single line. A filled circle appears at each data point.
LineSymbolsSmoothed Line Symbols Smoothed Chart | A LineSymbolsSmoothed chart is a LineSymbols chart that uses a curved line instead of a regular line.
LineSymbolsStacked Line Symbols Stacked Chart | A LineSymbolsStacked chart shows multiple series stacked vertically. If there is only one series in the chart, the stacked line chart will display the same as a line chart. A filled circle appears at each data point.
LineSymbolsStacked100pc Line Symbols Stacked 100pc Chart | A LineSymbolsStacked100pc chart shows a LineSymbols chart where multiple series are stacked vertically to fit 100% of the chart area. If there is only one series in your chart, all lines will fit to 100% of the chart area.
Pie | A Pie chart draws each series as a slice in a pie. The number of pies is the number of points in the data.
PieDoughnut Pie Donut Chart | A PieDoughnut is a pie chart that has an open space in the center.
PieExploded Pie Exploded Chart | A PieExploded chart is a pie chart where all of the slices are moved away from the center of the pie.
PieExplodedDoughnut Pie Exploded Donut Chart | A PieExplodedDoughnut chart is a chart where all of the slices are moved away from the center of the doughnut.
PolarLines Polar Lines Chart | A Polar chart is a circular grid that uses polar, rather than Cartesian coordinates. A PolarLines chart plots the angles using only lines.
PolarLinesSymbols Polar Lines Symbols Chart | A PolarLinesSymbols chart plots the angles using lines and dot symbols.
PolarSymbols Polar Symbols Chart | A PolarSymbols chart plots the angles using dot symbols.
Radar | A Radar chart draws the y value in each data set along a radar line (the x value is ignored except for labels).
RadarFilled Radar Filled Chart | A RadarFilled chart is a Radar chart with the radar lines filled in.
RadarSymbols Radar Symbols Chart | A RadarSymbols chart is a Radar chart that draws the y value in each data set along a radar line (the x value is ignored except for labels). A filled circle appears at each data point.
Step | Step charts are good for showing values that change over time, like interest rates. A Step chart will display this information using only lines.
StepArea Step Area Chart | A StepArea chart will display data with the Step lines filled in.
StepSymbols Step Symbols Chart | A StepSymbols chart will display data using dot symbols and lines.
XYPlot XY Plot Chart | XYPlot charts draw each series as connected points of data.

More:

Using the C1Chart Web Part


Customizing the Look of Your Chart

The C1Chart Web Part includes 12 themes and 23 palettes you can use to define the style and colors of your chart, as well as its background area and legend.

You can choose to use both a Theme and a Palette, just one of them, or neither.

How to choose a theme or palette

  1. Open the On-Board Designer. (See Using the On-Board Designer.)

  2. Click on the Chart tab.

    • To select a Theme, click the Theme drop-down.

    • To select a Palette, click the Palette drop-down. If you want the Theme to remain as-is, set the Palette to Default.
  3. Click the Save Web Part button.

C1Chart Themes
Dusk Blue Theme DuskBlue | Dusk Green Theme DuskGreen | Media Player Theme MediaPlayer
Office 2003 Blue Theme Office2003Blue | Office 2003 Classic Theme Office2003Classic | Office 2003 Olive Theme Office2003Olive
Office 2003 Royale Theme Office2003Royale | Office 2003 Silver Theme Office2003Silver | Office 2007 Black Theme Office2007Black
Office 2007 Blue Theme Office2007Blue | Office 2007 Silver Theme Office2007Silver | Vista

C1Chart Palettes
Default | Standard | Office
Gray Scale Palette GrayScale | Apex | Aspect
Civic | Concourse | Equity
Flow | Foundry | Median
Metro | Module | Opulent
Oriel | Origin | Paper
Solstice | Technic | Trek
Urban | Verve |

More:

Using the C1Chart Web Part


Customizing Each Axis of Your Chart

Using the Axis tab, you can customize each axis of your chart. You can give each axis a title, set minimum and maximum values to display, choose the color of grid lines, and more.

To set axis properties
  1. Open the On-Board Designer. (See Using the On-Board Designer.)
  2. Click the Axis tab and choose the axis from the drop-down at the top.

    Setting Axis Properties

  3. Set the properties for each axis. A few of the most common properties to set are:
    • Title = This name will be displayed for the axis. (If you leave it blank, there will be no title.)
    • Angle = Places the axis annotation labels at an angle of your choice.
    • Numeric Format = Specifies the formatting for numbers that are axis labels. Choose Currency to specify U.S. Dollars format. Other options are: Exponential, Fixed-Point, General, Numeric, and Percent. For more on other standard numeric formats, see http://msdn.microsoft.com/en-us/library/dwhawy9k.aspx
    • Date/Time Format = Specifies the formatting for date/time labels. Options include Short Date, Long Date, Month Day, etc. For more on standard date/time formats, see: http://msdn.microsoft.com/en-us/library/az4se3k1(VS.71).aspx

    Axis Properties section:

    • Position = The position of the axis title (choose Default, Near or Far)
    • Reversed = Selecting this check box will reverse the order of the tick marks on the axis.

    Values section:

    • Minimum/Maximum = Sets the minimum and maximum values that will be displayed on the axis. (Instead of all the values in the data source.)
    • Major Unit/Minor Unit = Sets the spacing between the major and minor tick marks.
    • Origin = This is where the X and Y axes cross. By default, they cross at zero, but you can change that here.
    • Scale = Use this field to scale down or enlarge the size of the data displayed in the chart.

    Annotations section:

    • Position = The position of the annotations on each axis (choose Default, Near or Far).

    Grid Lines and Tick Marks sections:

    • If you would like to change the default display of axis grid lines and tick marks, use the Grid Lines and Tick Marks sections.
  4. Click the Save Web Part button.

More:

Selecting the Data to Display

Using the C1Chart Web Part


Creating Charts with Multiple Data Series

You can create charts that compare data by overlaying multiple series on a single chart. These are called multiple data series charts. These are called multiple data series charts.

In the example below, the C1Chart displays global temperature data plotted over time using a column chart and a line chart.

Multiple Data Series Chart

To create a chart with multiple data series
  1. Create a basic chart. See Using the C1Chart Web Part.
  2. Open the On-Board Designer. (See Using the On-Board Designer.)
  3. Click the Series tab. Select the data series you've already created on the left, and choose a Series Type for it on the right. That data set will be displayed as the type of Chart selected. (Column chart, Bar chart, etc.)
  4. Click the plus sign on the lower left and in the Name field enter the name for your new data series.
  5. For the Data Columns, set the following:
    • X Column
    • Y Column
  6. In the Axes section, select the X and Y Axis for the Data Columns. You have the choice of Primary or Secondary. What you choose depends on how you want your data to display.

    For example:

    • You have plotted the University endowments for 2007 as a Column chart, with Institution as the X Column and 2007 Endowments as the Y Column. (The X and Y Axes are both Primary.)
    • You have plotted University Endowments for 2006 as a Line chart, with Institution as the X Column and 2007 Endowments as the Y Column.

    If you would like the 2006 Endowment information to be plotted on top of the 2007 information to illustrate the increases and decreases, for the 2006 information, choose the X Axis of Primary and the Y Axis of Secondary.

Note: The Opacity of the Data Series is the transparency. The default is 1, which is 100%. Reduce it to make a series more transparent.

More:

Using the C1Chart Web Part


Creating Aggregate Charts

You can create charts that summarize data in a variety of ways. You can perform calculations such as average, sum, and count on your data to show useful summary charts. You don’t need to set up calculations in the source data, just choose the column you would like to group by then select the appropriate calculation. For example, the chart below shows the aggregation of widgets, gadgets, and trinkets sold in Canadian provinces for a selected time period. All of this data was pulled from a single data source.

To create an aggregate chart

  1. Create a basic chart. (See Using the C1Chart Web Part.)
  2. Open the On-Board Designer. (See Using the On-Board Designer.)
  3. On the Chart tab, specify the type of aggregation in the Aggregate drop-down.
    • Sum = Sum all values for each point.
    • Count = Number of values for each point
    • Average = Average all values for each point
    • Minimum = Get the minimum value for each point
    • Maximum = Get the maximum value for each point
    • Variance = Gets the variance of the values for each point (sample)
    • VariancePop = Gets the variance of the values for each point (population)
    • StandardDeviation = Gets the standard deviation of the values for each point (sample)
    • StandardDeviationPop = Gets the standard deviation of the values for each point (population)

  4. Click the Series tab. Select the data series you've already created on the left, and choose the Aggregate for it on the right.

  5. If you'd like to add an additional data series, click the plus sign on the lower left and in the Name field enter the name for your new data series.
  6. For the Data Columns, set the following:
    • X Column
    • Y Column
  7. In the Series Properties section, choose the Aggregate for it on the right.

Note: You can't specify Series Types (for example, Pie and Column) and Aggregations (for example, Average and StandardDeviation) that are radically different.

You can customize the axis properties for your aggregated chart, see Customizing Each Axis of Your Chart.

More:

Using the C1Chart Web Part


Using the C1DataGrid Web Part

With C1DataGrid, you can create grids based on SharePoint Lists or Business Connectivity Service (BCS) data in minutes. Users can scroll, group, sort, filter, and create hierarchical views smoothly, as well as add, update, and delete data.

For more on BCS, see the Microsoft Business Connectivity Services website.

To create a basic interactive DataGrid

  1. Add the C1DataGrid Web Part to the page. (See Adding a Web Part to a Page.)
  2. Open the On-Board Designer. (See Using the On-Board Designer.)
  3. Click the Data Source tab and choose a List. (See Choosing a Data Source.)

    DateGrid Data Source

  4. Click the Save Web Part button.

This is all you need to display an interactive Grid. The DataGrid can be scrolled, sorted, filtered, and grouped. See Sorting, Filtering, Grouping, and Resizing a C1DataGrid.

You can fine-tune the DataGrid by:

  • Specifying the exact behavior and display you prefer. See Customizing the Behavior and Display of Your Grid.
  • Creating a hierarchical grid. See Creating a Hierarchical (Master-Detail) Grid.

More:

C1DataGrid Quick Start

Sorting, Filtering, Grouping, and Resizing a C1DataGrid

Editing a C1DataGrid

Customizing the Behavior and Display of Your Grid

Creating a Hierarchical (Master-Detail) Grid


Sorting, Filtering, Grouping, and Resizing a C1DataGrid

The C1DataGrid Web Part is interactive; users can sort, filter, resize, and group the data as they wish.

Users can also edit the data, see Editing a C1DataGrid.

If you wish to change any of these behaviors, see Customizing the Behavior and Display of Your Grid.

Sorting Columns

Click within a column header once and look for the sort indicator arrow. Click it to sort the grid by that column; an up arrow indicates an ascending sort, a down arrow descending.

Moving Columns

You can move the columns by dragging the column headers to the desired locations. Simply select the column header you would like to move and drag it where you would prefer it appear. In this example, the Capital column will be moved between the State and ST columns.

Moving a Column

Resizing Columns and Rows

You can resize columns by dragging the resizing arrow to the desired width. Hover over the divider until you see the double arrow, then drag to resize the column.
Resizing Columns

To resize a row, hover over the row divider on the far right (this is called the record selector column ) and drag up or down.

Resize a Row

Filtering Columns

You can filter columns using the filter buttons in the column headers. Click the column header, then the filter drop-down in the column you would like to filter by. Choose Contains, Starts With, Equals, or Not Equals and enter the letter or number to filter by.

Filter a Column

Once you have filtered a column (in this case, "Starts With" the letter "R"), then the filter drop-down with change to a filter symbol, which indicates that the grid display has been changed. Click on the filter symbol and click the Clear button to reset the display.

Grouping Columns

End users can only group columns if grouping is turned on. Open the On-Board Designer and select the Allow Grouping check box on the DataGrid tab. (If your grid is a Master-Detail grid, grouping is enabled automatically, but you can turn it off.)

Users can also edit the data, see Editing a C1DataGrid.

After Grouping is turned on, there will be a grouping area. Select any column header and drag it to that area to group your columns.

Drag to Allow Grouping

Example of the columns grouped by State. Click the X in the State button to turn off the grouping.

Columns Grouped by State

Selecting Rows

You can select one row or more rows in a grid, just click in the row's record selector column (far right). Use Shift + Click to select a range, or Ctrl + Click to select individual rows. Selected columns will be highlighted.

More:

Using the C1DataGrid Web Part

Customizing the Behavior and Display of Your Grid

Editing a C1DataGrid


Editing a C1DataGrid

The data in a C1DataGrid Web Part can be edited by end users — with the proper settings, they can edit the data within a cell, delete rows, and add new rows to the grid.

Users can also sort, filter, group data, and resize columns and rows, see Sorting, Filtering, Grouping, and Resizing a C1DataGrid.

To allow editing of a C1DataGrid

  1. Open the On-Board Designer. (See Using the On-Board Designer.)
  2. Click the Data Source tab.
  3. Set the Update Mode to Immediate or Batch.

    If you choose Immediate, the user can double-click in a cell and make edits that will be saved when they exit that cell. If you choose Batch, a Save Changes button will appear at the bottom of the grid. This button must be clicked or the changes made will not be saved. No edits can be made in ReadOnly mode.

  4. Click the DataGrid tab.
  5. To allow:
    • Editing of the grid— select the Allow Editing check box
    • Deleting a row from the grid — select the Allow Delete check box
    • Adding a new row to the grid — select the Allow Add New check box.
  6. Click the Save Web Part button.

When the end user edits a cell, an editing icon will appear in the row selector column (far left). The Save Changes button will appear if the Update Mode was set to Batch (Data Source tab). To delete the entire row, click on the row selector and click the Delete button on your keyboard.

Editing a cell

If the Allow Add New check box is selected (DataGrid tab), new rows can be added to the grid by clicking on Click here to add a new row.

Add New Row

Note: You can choose to only allow the editing of specific columns in your C1DataGrid. You can do so using the Allow Editing check box in the Columns tab. See Customizing the Behavior and Display of Your Grid.

More:

Using the C1DataGrid Web Part

Sorting, Filtering, Grouping, and Resizing a C1DataGrid

Customizing the Behavior and Display of Your Grid


Customizing the Behavior and Display of Your Grid

By default, end users can manipulate a C1DataGrid in a number of ways. They can sort, filter, edit, resize columns and rows and more.

However, you can control the level of interaction with your C1DataGrid, and the display of the columns and rows. These items are controlled using the DataGrid tab. You can set these fields for both the Master and the Detail grid (Detail grids are only used in Hierarchical Grids, see Creating a Hierarchical Grid.)

To customize your DataGrid's behavior and display
  1. Open the On-Board Designer. (See Using the On-Board Designer.)
  2. Click the DataGrid tab.

    To control:

    • Sorting of columns — use the Allow Sorting check box
    • Filtering of columns — use the Allow Filtering check box
    • Grouping of columns — use the Allow Grouping check box
    • Editing the grid— use the Allow Editing check box
    • Deleting rows from the grid — use the Allow Delete check box
    • Adding new rows to the grid — use the Allow Add New check box
    • Moving and resizing of columns — in the Columns section, use the Allow Moving and Allow Resizing check boxes.
    • Resizing of rows — in the Rows section, use the Allow Resizing check box.
    • Ability to view the detail information in a hierarchical grid — in the Rows section, use the Allow Toggle Detail check box. If this check box is cleared, the user will not see the detail button Detail button, so they can't view the detail information.

    There are a few other Column and Row settings that control width and height.

    In the Columns area, you can:

    • Allow the freezing of columns (frozen columns will not move when the grid is scrolled) — use the Allow Freezing check box
    • Choose the columns to freeze — use the Frozen field. The number of columns entered will be frozen, starting with the columns on the left.
    • Set a standard width for all columns (in pixels) — use the Width field (to reset the width, select the number and click the Delete button to return the width to (auto))

    In the Rows area you can:

    • Set a standard height for all rows (in pixels) — use the Height field.
    • Choose the number of rows to freeze at the top of the grid (frozen rows will not move when the grid is scrolled) — use the Frozen at Top field
    • Choose the number of rows to freeze at the bottom of the grid — use the Frozen at Bottom field
  3. Click the Save Web Part button.

Please note: You can set some of these options by column using the Columns tab.

To customize individual columns

This is the place to fine-tune individual columns in your grid.

If you have created a hierarchical grid, you can customize both the Master and the Detail columns.

  1. Open the On-Board Designer. (See Using the On-Board Designer.)
  2. Click the Column tab.
  3. Select the column you would like to customize on the left.

    You can change the default order of the columns here. Use the up and down arrows to set the Display Order. If you would like to remove or hide a column in your C1DataGrid, see Selecting the Data to Display.

    In addition to Display Order, you can also set the Group Order to create expandable groups of like-valued cells within one or more columns. Choose Group Order from the drop-down at the bottom. Then select each column(s) and choose Ascending or Descending order from the drop-down. Your data will be nested in the order specified.

    Display Order of Columns

  4. Set the appearance and behavior of the chosen column.

    To control:

    • The name of the column — use the Header field
    • The width of the column — use the Width field
    • The alignment of the text in the column — use the Horizontal and Vertical Alignment fields
    • Whether the column is visible — use the Visible check box (For more on removing or hiding columns, see Selecting the Data to Display.)
    • Text wrapping — use the Wrap Text check box
    • Sorting of the column — use the Allow Sorting check box
    • Filtering of the column — use the Allow Filtering check box
    • Moving of the column — use the Allow Moving check box
    • Resizing of the column — use the Allow Resizing check box
    • Editing of the column — use the Allow Editing check box (The Allow Editing check box must also be selected in the DataGrid tab or individual columns cannot be edited.)
    • Allow null values in the column — use the Allow Null Values check box
    • When clicking in a cell, the data will be selected and ready for editing — use the Edit on Selection check box

    If you choose a column that contains numeric data, you can specify the Numeric format or the Date/Time format. For more on other standard numeric formats, see http://msdn.microsoft.com/en-us/library/dwhawy9k.aspx. Date/time standard format information can be found here: http://msdn.microsoft.com/en-us/library/az4se3k1(VS.71).aspx

  5. Click the Save Web Part button.

More:

Sorting and Filtering Data Source Columns

Using the C1DataGrid Web Part


Creating a Hierarchical (Master-Detail) Grid

You can create a hierarchical grid using the C1DataGrid Web Part. A hierarchical grid is one that displays two sets of information at the same time, the "master" (or "parent") and the "detail" (or "child"). They are logically linked by key fields. The detail information is not displayed by default; an arrow will appear in the record selector column (far left column of the grid) that is used to display the information.

In this example, the List of State Capitals is the Master List, and the List of College Endowments is the Detail List. When you click on the arrow next to a State, the list of colleges with endowments in that state displays.

To create a hierarchical grid (Master-Detail relationship)

  1. Create a basic DataGrid. (See Using the C1DataGrid Web Part.)
  2. Open the On-Board Designer. (See Using the On-Board Designer.)
  3. Click the Detail tab on the left.
  4. Click the Data Source tab and select a List.
  5. Select the Enable Detail View check box, then choose the:
    • Master Column
    • Detail Column

  6. Click the Save Web Part button.

Now your grid will display an arrow that users can click on to see the information from the Detail List. Nested Grid

More:

Using the C1DataGrid Web Part


Using the C1CoverFlow Web Part

The C1CoverFlow Web Part can be used to display any SharePoint picture library in an interactive iTunes-style coverflow gallery.

You can use a SharePoint Picture Library you already have, or create a new one using your pictures. See C1CoverFlow Quick Start for instructions on how to create a picture library.

Both png and jpg files can be used in your picture library.

To create a CoverFlow

  1. Add the C1CoverFlow Web Part to the page. (See Adding a Web Part to a Page.)
  2. Open the On-Board Designer. (See Using the On-Board Designer.)
  3. Click the Data Source tab. (See Choosing a Data Source.)
  4. Choose the desired Picture Library from the list. Click Save Web Part.

You can flip through the CoverFlow using the scroll bar on the bottom, or by using the arrow keys.

More:

C1CoverFlow Quick Start


Using the C1ImageViewer Web Part

With C1ImageViewer, you can link to any image URL and display the image with an interactive magnifying glass.

This is a great option for photos with a great amount of detail, such as a product image, a landscape, or a company group photo. Both png and jpg files can be used.

Pittsburgh in the C1Image Viewer

To create an ImageViewer
  1. Add the C1ImageViewer Web Part to the page. (See Adding a Web Part to a Page.)
  2. Open the On-Board Designer. (See Using the On-Board Designer.)
  3. Click the ImageViewer tab.
  4. Enter a URL in the Image URL field. You must use a URL that contains an image file, such as http://upload.wikimedia.org/wikipedia/commons/e/ee/Duquesne_Incline_from_top.jpg

    If you wish, adjust the Zoom Factor of the image.

  5. Click Save Web Part.

You can move the magnifier around the image to zoom in on specific areas. You can also use the +/- keys.

More:

C1ImageViewer Quick Start


Connecting Web Parts

Interactive connections can be made between Web Parts that are placed on the same page.

Using the On-Board Designer, you can send data to or receive data from other Web Parts and choose an event to trigger when the connection is made.

Some examples:

  • When a marker on a C1Maps Web Part is clicked, the store locations in that city display in a C1DataGrid Web Part.
  • When data is selected in a C1DataGrid Web Part, the information is plotted in a C1Chart Web Part.
  • When a location is selected in a C1DataGrid Web Part, that location is displayed as a marker in a C1Maps Web Part.

The Quick Start includes an example of a Web Parts Connection. That connection is between a C1Maps Web Part and a C1DataGrid Web Part. To test drive this example yourself, try the following examples:

  • C1Maps Quick Start
  • C1DataGrid Quick Start
  • Connecting Web Parts Quick Start

To create a connection between two Web Parts

A rule of thumb about connecting Web Parts — the Web Part that will be manipulated by the user is the "Send" Web Part, the one that displays information based on that event is the "Receive" Web Part.

  1. Configure the two (or more) Web Parts that you would like to connect.
  2. Click the Connections tab.
  3. Since we want to send information to another Web Part, click the Send tab on the far right.
  4. Click the drop-down on the left and choose an event, such as Marker Clicked. (The events will vary based on the Web Parts you have created.) For a list of available events, see Web Part Connection Events.
  5. In the Connection Properties, choose the Send To drop-down and choose the Web Part to send the data to.

  6. Click the Save Web Part button.
  7. Open the On-Board Designer for the Web Part that should receive the information.
  8. Click the Connections tab.

  9. Since we want to receive information from another Web Part, choose the Receive tab on the far right.

  10. Click the drop-down on the left and choose an event, such as Display Data.
  11. In the Connection Properties, choose the Receive From drop-down and choose the Web Part to receive the data from.

  12. Click the Save Web Part button.
  13. Test the connection.

More:

Connecting Web Parts Quick Start

Web Part Connection Events


Web Part Connection Events

The Web Part connection Events available depend on the Web Part, and what data you are sending/receiving.

Send
  • C1DataGrid
  • Data Source Changed = Sends data to the receiving web part when the C1DataGrid’s data source changes
  • Current Row Changed = Sends the current row’s data to the receiving web part when the current row changes in the C1DataGrid (useful when you want to show only a record in the receiving web part)
  • Selected Rows Changed = Sends the selected rows data to the receiving web part when the selected rows change in the C1DataGrid (useful when you want to show multiple records in the receiving web part)
  • Filter Changed = Sends the C1DataGrid’s current records to the receiving web part after it filter changes
  • Sort Changed = Sends the C1DataGrid’s current records to the receiving web part after the columns sort order is changed
  • C1Maps
  • View Changed = Sends the items in view to the receiving web part
  • Marker Clicked = When the marker is clicked, sends the marker’s record to the receiving web part
  • Surface Clicked = Sends information about the surface point to the receiving web part
  • C1Chart
  • None
  • C1CoverFlow
  • None
  • C1ImageViewer
  • None
Receive
  • C1DataGrid
  • Display Data = Displays the data received from the sending web part
  • Filter Data Source = Displays the details for the selected row (for Master-Detail connection)
  • C1Maps
  • Center Point = Centers on the point (latitude/longitude) from the receiving web part
  • Center Geocode = Centers on the point (Geocode) from the receiving web part
  • Filter Data Source = Shows details points for the sender’s record (for Master-Detail relationship)
  • Plot Point = Plots the point (latitude/longitude) from the sending web part
  • Plot Geocode = Plots the point (Geocode) from the sending web part
  • C1Chart
  • Display Data = Displays the sending web part’s data
  • Filter Data Source = Used to show details for the sending web part’s record (for Master-Detail)
  • Plot Basic Series = Plots basic series from the sending web part
  • Plot Bubble Series = Plots bubble series from the sending web part
  • Plot Financial Series = Plots financial data from the sending web part
  • Plot Gantt Series = Plots gantt data from sending web part
  • C1CoverFlow
  • None
  • C1ImageViewer
  • Display Image = Displays the image from the sending web part

More:

Connecting Web Parts


Extending ComponentOne Studio for SharePoint

Every Web part included in ComponentOne Studio for SharePoint can be customized using Microsoft’s Managed Extensibility Framework (MEF). All you need to do is create a .XAP file that implements one of the Studio for SharePoint extension interfaces, upload it to a library, and point to it through the On-Board Designer. Learn more about MEF on the MEF Community Site.

Sample extensions are available on the Studio for SharePoint Demo Site. Go to http://webparts.componentone.com and see the Extensions Library on the left.

To customize any ComponentOne Studio for SharePoint web part
  1. Open the On-Board Designer. (See Using the On-Board Designer.)
  2. Click the Extensions tab to display the available extensions.

    To navigate to a different site collection, enter the URL in the Site field or select a site collection from the drop-down menu. Entering a / in the Site field will always return you to the top of the list.

  3. Choose the extension.
  4. Click the Save Web Part button.

More:

Using the On-Board Designer