none
[Astuce] Pivot Viewer vNext et SharePoint 2010 RRS feed

  • Discussion générale

  • Mise en garde

        Il s'agit bien de la version inclue avec Silverlight 5 RC, ce code n'est donc pas amené à être mis en production et peut être amené a ne plus fonctionner avec la version définitive.

    Introduction

    PivotViewer est un contrôle Silverlight très puissant qui permet de d'afficher un grand nombre d'item sur une page. La version 1.0 est basée sur une collection CXML et ne peut être remplis que par cette méthode. Le souci lorsqu'on travaille avec SharePoint est qu'il faut générer à la volée la collection. C'est le but d'un projet comme http://pivotviewersp.codeplex.com. La version 2.0 vient de sortir en RC avec Silverlight 5 RC. Une des grosses nouveautés est qu'on peut désormais se lié a une collection IEnumerable.

    Le projet

    On va d'abord créer un projet Silverlight 5

    Comme on travaille avec SharePoint on ajoute les assemblies silverlight client :

    Et le contrôle pivot viewer dans la barre d'outil.

    La collection

    On va créer une classe qu'on remplira par la suite :

    namespace PV2forSharePoint

    {

    public class SPItemSource

    {

    public string FileType { get; set; }

    public string Title { get; set; }

    public DateTime Created { get; set; }

    public string Author { get; set; }

    public DateTime Modified { get; set; }

    public int FileSize { get; set; }

    }

    }

     

    Cette classe servira à faire le binding avec Silverlight.
    On la remplie avec l'api cliente SharePoint Silverlight :

    using System;

    using System.Collections.Generic;

    using System.Linq;

    using System.Net;

    using System.Windows;

    using System.Windows.Controls;

    using System.Windows.Documents;

    using System.Windows.Input;

    using System.Windows.Media;

    using System.Windows.Media.Animation;

    using System.Windows.Shapes;

    using Microsoft.SharePoint.Client;

     

    namespace PV2forSharePoint

    {

    public partial class MainPage : UserControl

    {

    ClientContext ctx;

    List lst;

    ListItemCollection lc;

    List<SPItemSource> lstIS;

    public MainPage()

    {

    lstIS = new List<SPItemSource>();

    InitializeComponent();

    ctx = new ClientContext("http://srvmoss/docs");

    ctx.Load(ctx.Site);

    ctx.Load(ctx.Web);

    lst=ctx.Web.Lists.GetByTitle("Documents");

    ctx.Load(lst);

    lc = lst.GetItems(CamlQuery.CreateAllItemsQuery());

    ctx.Load(lc);

    ClientRequestSucceededEventHandler crseh = new ClientRequestSucceededEventHandler(lcLoad);

    ctx.ExecuteQueryAsync(crseh,null);

    }

    private void lcLoad(object sender, ClientRequestSucceededEventArgs crsea)

    {

     

    foreach (ListItem li in lc)

    {

    SPItemSource sis = new SPItemSource();

    try

    {

     

    sis.Title = li["Title"].ToString();

    sis.FileType = li["File_x0020_Type"].ToString();

    sis.Created = DateTime.Parse(li["Created"].ToString());

    sis.Author = ((FieldUserValue) li["Author"]).LookupValue;

    sis.Modified = DateTime.Parse(li["Modified"].ToString());

    sis.FileSize = int.Parse(li["File_x0020_Size"].ToString());

    }

    catch (Exception ex)

    {

    continue;

    }

    lstIS.Add(sis);

    }

    this.Dispatcher.BeginInvoke(BindPV);

    }

    private void BindPV()

    {

    this.pv4SP2.ItemsSource = lstIS;

    }

     

    }

    }

     

    Maintenant on a une liste d'IEnumerable qu'on va lier à notre contrôle.

    Le contrôle PivotViewer

    On ajoute le contrôle sur notre page et on le nomme pv4sp.

    Le contrôle se base sur des propriétés de différents types pour afficher les refinements et les informations de l'item. On ajoute donc ces propriétés au contrôles :

    <sdk:PivotViewer.PivotProperties>

    <sdk:PivotViewerStringProperty Id="FileType" Options="CanFilter" DisplayName="Type de Fichier" Binding="{Binding FileType}" />

    <sdk:PivotViewerStringProperty Id="Title" Options="CanFilter" DisplayName="Titre" Binding="{Binding Title}" />

    <sdk:PivotViewerDateTimeProperty Id="Created" Options="CanFilter" DisplayName="Créé le" Binding="{Binding Created}" />

    <sdk:PivotViewerStringProperty Id="Author" Options="CanFilter" DisplayName="Créé par" Binding="{Binding Author}" />

    <sdk:PivotViewerDateTimeProperty Id="Modified" Options="CanFilter" DisplayName="Modifié le" Binding="{Binding Modified}" />

    <sdk:PivotViewerNumericProperty Id="FileSize" Options="CanFilter" DisplayName="Taille" Binding="{Binding FileSize}" />

     

    </sdk:PivotViewer.PivotProperties>

     

    Si on lance l'application le contrôle apparait de la manière suivante :

    Il nous reste donc à personnaliser les tile du contrôle avec la propriété itemtemplate :

    <sdk:PivotViewer.ItemTemplates>

    <sdk:PivotViewerItemTemplate>

    <Border Width="200" Height="200" Background="DarkOrange">

    <StackPanel Orientation="Vertical">

    <TextBlock Text="{Binding Title}" FontSize="16" FontWeight="Bold" Foreground="White" />

    <TextBlock Text="{Binding Author}" FontSize="16" Foreground="White" />

    <TextBlock Text="{Binding FileType}" FontSize="16" Foreground="White" />

    <TextBlock Text="{Binding Created}" FontSize="16" Foreground="White" />

    <TextBlock Text="{Binding Modified}" FontSize="16" Foreground="White" />

    </StackPanel>

    </Border>

    </sdk:PivotViewerItemTemplate>

    </sdk:PivotViewer.ItemTemplates>

    Le code complet de notre page Xaml est le suivant:

    <UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="PV2forSharePoint.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

     

    <Grid x:Name="LayoutRoot" Background="White">

    <sdk:PivotViewer x:Name="pv4SP2">

    <sdk:PivotViewer.PivotProperties>

    <sdk:PivotViewerStringProperty Id="FileType" Options="CanFilter" DisplayName="Type de Fichier" Binding="{Binding FileType}" />

    <sdk:PivotViewerStringProperty Id="Title" Options="CanFilter" DisplayName="Titre" Binding="{Binding Title}" />

    <sdk:PivotViewerDateTimeProperty Id="Created" Options="CanFilter" DisplayName="Créé le" Binding="{Binding Created}" />

    <sdk:PivotViewerStringProperty Id="Author" Options="CanFilter" DisplayName="Créé par" Binding="{Binding Author}" />

    <sdk:PivotViewerDateTimeProperty Id="Modified" Options="CanFilter" DisplayName="Modifié le" Binding="{Binding Modified}" />

    <sdk:PivotViewerNumericProperty Id="FileSize" Options="CanFilter" DisplayName="Taille" Binding="{Binding FileSize}" />

     

    </sdk:PivotViewer.PivotProperties>

     

    <!--Setting data-->

    <sdk:PivotViewer.ItemTemplates>

    <sdk:PivotViewerItemTemplate>

    <Border Width="200" Height="200" Background="DarkOrange">

    <StackPanel Orientation="Vertical">

    <TextBlock Text="{Binding Title}" FontSize="16" FontWeight="Bold" Foreground="White" />

    <TextBlock Text="{Binding Author}" FontSize="16" Foreground="White" />

    <TextBlock Text="{Binding FileType}" FontSize="16" Foreground="White" />

    <TextBlock Text="{Binding Created}" FontSize="16" Foreground="White" />

    <TextBlock Text="{Binding Modified}" FontSize="16" Foreground="White" />

    </StackPanel>

    </Border>

    </sdk:PivotViewerItemTemplate>

    </sdk:PivotViewer.ItemTemplates>

    </sdk:PivotViewer>

    </Grid>

    </UserControl>

     

    Et voici le résultat final:

    On retrouve nos propriétés dans la barre de refinement sur la gauche.

    Lorsqu'on zoom sur un tile on voit la barre d'information avec les propriétés et on voit le résultat de l'itemtemplate :

    Le contrôle PivotViewer ouvre beaucoup de possibilité dans l'interaction avec l'utilisateur. Cette version ajoute la facilité de programmation.

     


    Xavier VANNESTE
    www.xvanneste.com
    media.xvanneste.com
    blog.xvanneste.com
    • Déplacé Hengzhe Li mardi 21 février 2012 06:43 merge forum (Origine :Développement Sharepoint 2010)
    mardi 6 septembre 2011 18:12
    Auteur de réponse