Geeks With Blogs

News


Timmy Kokke's Blog

↑ Grab this Headline Animator

Timmy Kokke at Blogged
Timmy Kokke …just sorting my bubbles…

PivotViewer series

  1. Building your first PivotViewer application
  2. Runtime PivotViewer collection creation
  3. PivotViewer - Working with Facets
  4. Handling PivotViewer events
  5. PivotViewer - Custom actions
  6. PivotViewer and MVVM

Intro

In this next tutorial about the Silverlight PivotViewer control I would like to give a little more depth on Facets. What are facets, and how are they used in runtime generation of collections using the PivotServerTools library.

This tutorial continues on techniques from last tutorial about runtime collection creation. If you are just getting started using the PivotViewer control, you might want to have a look at the Getting Started Tutorial first. This tutorial is centered around the methods build in the last tutorial: MakeCollection and MakeItem.

 

Facets

Facets are basically the properties on the PivotViewer that allow the visitor to sort and filter. Facets are also shown when viewing the details of an item.

PivotViewerFacetsOverview

Facets are added to the collections by calling the Collection.AddItem() method. This method takes a couple of parameters. The first is the Name of the item being added. The second is a URL. This can be used to navigate to more details about the item for example. This URL is used when clicking on the Name of the item in the details panel. Then there’s the Description of the item. This text is shown on the details panel. The fourth parameter is the image shown in the DeepZoom part of the control. The ItemImage type from the PivotServerTools. Its constructor is used, to which a URL to the image is given. All parameters after that, from the fifth on are Facets. You can add as many as you need. A call to AddItem might look something like this:

collection.AddItem(
        id,
        url,
        description,
        new ItemImage(new Uri(image)),
        new Facet("String value", FacetType.Text, id),
        new Facet("Integer Value", FacetType.Number, intValue),
        new Facet("Double Value", FacetType.Number, doubleValue),
        new Facet("Date value",FacetType.DateTime,date),
        new Facet("Url Value",FacetType.Link, new FacetHyperlink("Url Value", urlValue)),
        new Facet("Names", names),
        new Facet("FormattedValue",formattedValue)
        );

 

 

 

 

 

Facets are grouped in Facet Categories. Every item in the collection can contain one or more facet categories and every category can contain one or more facets. Facet categories are created when a they are used for the first time while adding items to the collection. 

 FacetDetails The PivotServerTools library is used to generate the .CXML. It uses 4 types of facets categories:Text, Number, DateTime and Link. The type of facet category determines how facets are displayed in the PivotViewer control.  Each facet in the category must be of this type.

Text:

The text type is used to display anything of type string. If the type is omitted and the type can’t be determined automatically the Text type is defaulted to.

To create a facet of type text you can use its constructor with a category name, the type of facet and its tag. For example:

Facet stringFacet = new Facet("Names", FacetType.Text, name);

 

 

 

 

 

This might look something like this in the PivotViewer control.

image

Number:

This facet type is used to display numbers. It allows the end-user to make selections on ranges of this tag. This tag value can also be formatted which I’ll explain later.

Again, to create a facet of this type, use its constructor and pass in a different FacetType this time:

 Facet integerFacet = new Facet("Integer Value", FacetType.Number, intValue);
 Facet doubleFacet = new Facet("Double Value", FacetType.Number, doubleValue);

image

DateTime:

Dates are displayed like in the image below. You can select a date by era, the actual value or select a custom range.

The date facets are added the same way as numbers or text, but with a different FacetType.

Facet dateFacet = new Facet("Date value",FacetType.DateTime, date);
image 

Link:

Hyperlinks are not shown in the filter list. Only the name given to the URL is shown in the details list.  Clicking on a link does not navigate by default. You’ll have to implement the navigate yourself. An event is fired when an item on the details panel is clicked though.

To create a facet of type link you can use its constructor again. Only the third parameter is different this time. It takes a value of type FacetHyperLink. The type uses a description and a URL together. In the code below both are passed into the constructor of FacetHyperLink. Both parameters are strings.  

 

 

 

Facet linkFacet = new Facet("Url Value", FacetType.Link, 
                            new FacetHyperlink("Displayed Name", urlValue));

 

One last thing to notices about adding items to the collection. As I mentioned earlier, every facet category can be used zero or more times. The constructor of Facets takes one or more values for a value for each tag. You could, for example, add an array of strings to a category at once just by passing that array to the constructor. All values will be shown in that category on the details panel.

string[] myNames = {"Timmy Kokke", "Sorskoot"};
Facet namesFacet = new Facet("My Names",FacetType.Text, names );

 

More on categories

After the items are added to the collection you can fine-tune the categories a little further. Often it is necessary to make facet categories visible in only the details panel or enable filtering for a particular category but disable text search on them. The Collection class has a method to set these properties.

The SetFacetDisplay method takes the name of the category and 3 booleans.  The first of the three booleans indicated whether or not the category is shown in the list of filters. The second enables or disables the category showing up in de info panel. When the last is set to false the category is excluded from the text search.

Here are a few examples.

collection.SetFacetDisplay("Integer Value", true, false, false);
collection.SetFacetDisplay("Double Value", false, true, false);
collection.SetFacetDisplay("Names", true, true, false);

The Integer Value category is shown in the list of filters, but hidden from the info panel and the text search. The Double Value category is hidden from the filters and the text search, but is visible on the info panel. The Names category is visible in both filters and info panel, but isn’t used for text search.

The Collection class has one other method of interest concerning facets. The SetFacetFormat is used to set format of a category in which it is displayed. It uses standard .NET string formatting. For example, to display a double as a floating point with 3 decimals you can use the following code:

collection.SetFacetFormat("FormattedValue", "F3");

 

 

 

Wrap-up

The code that goes along with this tutorial can be downloaded here. The next tutorial will be about the events of the PivotViewer control. To be the first to know when it is released you can subscribe to the RSS-feed or follow me on twitter.

Technorati Tags: ,

Share


 

kick it on DotNetKicks.com
 

Shout it

Posted on Tuesday, August 24, 2010 10:31 PM Silverlight , dotnetmag , PivotViewer | Back to top


Comments on this post: PivotViewer – Working with Facets

# re: PivotViewer – Working with Facets
Requesting Gravatar...
Hi Timmy,

Can I change the Sort Order values? Now they are equal to the facets.

Cheers,
Ron
Left by Ron Lagerwaard on Oct 13, 2010 10:33 AM

# re: PivotViewer – Working with Facets
Requesting Gravatar...
In the AMG movies example on the GetPivot.com site they've used the schema extensions(http://getpivot.com/developer-info/xml-schema.aspx#Schema_Details) to create a custom sort on stars and ratings. http://content.getpivot.com/collections/amg/Top_Movies.cxml).

In the .cxml file the FacetCategory is described like this:
<FacetCategory Name="Rating" Type="String"
d1p1:IsFilterVisible="false"
d1p1:IsMetaDataVisible="true"
d1p1:IsWordWheelVisible="false">
<Extension>
<d1p1:SortOrder Name="rating">
<d1p1:SortValue Value="�" />
<d1p1:SortValue Value="?" />
<d1p1:SortValue Value="? �" />
<d1p1:SortValue Value="? ?" />
<d1p1:SortValue Value="? ? �" />
<d1p1:SortValue Value="? ? ?" />
<d1p1:SortValue Value="? ? ? �" />
<d1p1:SortValue Value="? ? ? ?" />
<d1p1:SortValue Value="? ? ? ? �" />
<d1p1:SortValue Value="? ? ? ? ?" />
</d1p1:SortOrder>
</Extension>
</FacetCategory>

The schema extensions is not implemented in the JIT example. If you want to use the PivotTools library in there you'll have to implement it yourself.
Left by Timmy Kokke on Oct 13, 2010 10:59 AM

# re: PivotViewer – Working with Facets
Requesting Gravatar...
Tim I used you JIT example It works fine on my dev machine I can create basis jit collections or view collections from the web.
The problem is when I deploy it only the web collections work ,for the jit collections I get a 404 in fiddler.
Pivotviewer.LoadCollection("http://ckhs35259/ReportSelector/demo.cxml",string.Empty) ;
Can you tell me what else I need to do for deployment.
Thanks for the great examples.
Len
Left by Len Chase on Oct 20, 2010 2:41 PM

# re: PivotViewer – Working with Facets
Requesting Gravatar...
Hi Timmy,

Can I change the sort order of the datetime facet in the filter panel?

In default behavior, the datetime facets are shown in ascending order.
But, I would like to change the datetime item in descending order.
2010s
2000s
1990s or

2010
2009
2008 ...

Could you tell me the way to deploy it?

Thank you in advance.
Left by Kaori on Dec 17, 2010 7:42 AM

# re: PivotViewer – Working with Facets
Requesting Gravatar...
Sir , i want to Show Sub categories falling under a category, so that my subcategories shud be located under my main category is it possible in case of Pivot Viewer.
Left by Nidhi Singh on Nov 12, 2011 10:50 AM

# re: PivotViewer – Working with Facets
Requesting Gravatar...
Hello Kaori

I see you asked the question "I would like to change the datetime item in descending order. 2010s 2000s 1990s or"...


Did you ever got that issue resolved? If so, can you please share HOW?

Thanks in advance
-Prasanna
Left by Prasanna on Jul 12, 2012 8:57 PM

# re: PivotViewer – Working with Facets
Requesting Gravatar...
Hello Nidhi Singh

I see you asked for "I want to Show Sub categories falling under a category, so that my subcategories shud be located under my main category is it possible in case of Pivot Viewer."

Did you ever got that fixed? Can you please share your solutions?

Thanks
Prasanna
Left by Prasanna on Jul 12, 2012 9:02 PM

# re: PivotViewer – Working with Facets
Requesting Gravatar...
How to change 'Search...' text in PivotViewer search panel's search box?
Left by Paul on Jan 04, 2013 1:34 PM

# re: PivotViewer – Working with Facets
Requesting Gravatar...
Hi Prasanna :)

Did anyone find a solution to modifying the display order of items within a filter?
Left by kannankeril on Mar 25, 2013 11:31 PM

Your comment:
 (will show your gravatar)


Copyright © Timmy Kokke | Powered by: GeeksWithBlogs.net