Dig SharePoint: Create List Print Ribbon in SharePoint 2010

This solution named ListPrintingUtility designed to add support for printing lists. The idea behind this solution is to add a command button to the Ribbon above a list that will allow the user to print the current view of the list. Below screenshot shows what the Print List button looks like on the Ribbon and also shows the utility printing window that opens when the button is clicked.

The Print List button shown on the Ribbon is added using a CustomAction element. When adding to the Ribbon, the CAML is more complex than what is required for simply adding to the Site Actions menu. Nonetheless, the CAML is supported by the sandbox, so it’s a valid approach for creating the required interface.

Bolow codes shows the CAML used to create the button. This CustomAction element extends the Ribbon with a custom Print List command.

        1: <Elements xmlns="http://schemas.microsoft.com/sharepoint/">

       2:  

       3:   <CustomAction

       4:       Id="Ribbon.List.Items.Print"

       5:       Location="CommandUI.Ribbon"

       6:       RegistrationType="ContentType"

       7:       RegistrationId="0x01"

       8:       Sequence="11"

       9:       Title="Print">

    <CommandUIExtension>

      <CommandUIDefinitions>

        <CommandUIDefinition Location="Ribbon.ListItem.Actions.Controls._children">

          <Button

            Id="Ribbon.List.Items.Action.PrintListButton"

            Sequence="01"

            Alt="Print"

            Command="PrintList"

            Image16by16="/_layouts/images/mewa_frozenb.gif"

            Image32by32="/_layouts/images/mewa_frozenb.gif"

            LabelText="Print List"

            ToolTipTitle="Print List"

            ToolTipDescription="Opens current view in a printer-friendly page."

            TemplateAlias="o1"/>

        </CommandUIDefinition>

      </CommandUIDefinitions>

      <CommandUIHandlers>

        <CommandUIHandler

          Command="PrintList"

          CommandAction="javascript:

            var queryString = '?ListId={ListId}&amp;ViewId=' + ctx.view;

            var targetUrl = '{SiteUrl}/PrintingPages/List.aspx' + queryString; 

            var windowOptions = 'scollbars=1,height=600,width=800';

            window.open(targetUrl, 'printwindow', windowOptions);"/>

      </CommandUIHandlers>

    </CommandUIExtension>

  </CustomAction>

  

</Elements>

The CommandAction attribute specifies the code to run when the button is clicked. In this case, some JavaScript runs that opens a new window containing the page List.aspx. QueryString parameters are passed to the page detailing the list and view to display. The idea is simply to display the current view in a new page without any chrome. This design effectively creates a print view for the list. The challenge with the List.aspx page is that it must be designed to run in the sandbox. In the past, most developers would simply deploy the page as an application page to the LAYOUTS directory directly in the SharePoint root directory. But the sandbox doesn’t support these types of pages. Therefore, we need a different approach. For this solution, the List.aspx page is deployed as a site page. Site pages are pages that are deployed to the content database instead of the system directory. These types of pages are supported in the sandbox and can be deployed to the content database by using a SharePoint project item created from the Module SharePoint project item type. Below screenshot shows the ListPrintingUtility project opened in Visual Studio 2010. You can see that a SharePoint project item named RibbonExtensions was created from the Empty Element SharePoint project item type. This project item contains the element manifest with the CustomAction that adds the Print List button to the Ribbon. A second SharePoint project item, PrintingPages, was created from the Module SharePoint project item type. The PrintingPages item is used to deploy the site page List.aspx along with its associated files, including List.js, ListStyles.css, and ListStylesPrinting.css.

The site page List.aspx renders a print view of a list. When a user clicks the Print List button, the List.aspx page is requested with a QueryString containing the ListId and the ViewId. The List.aspx page must provide code to get the list items for rendering. However, there is a problem: site pages don’t support server-side code. Therefore, you can’t write any code in the page that uses the server-side SharePoint object model. This is where the client object model comes into play. The client object model is a JavaScript library that allows you to write code on the client that is very similar to server-side code. For this solution, the necessary print view is created using clientside code, which is supported in site pages. Below codes shows the complete code in List.js for rendering the print view using the client object model.

       1: var list;

       2: var printView;

       3:  

       4: function initPage() {

       5:   $get("listTitle").innerHTML = 'getting list data...'; 

       6:   ExecuteOrDelayUntilScriptLoaded(getListData, "sp.js");  

       7: }

       8:  

       9: function getListData() {

  // get QueryString parameters

  var queryString = window.location.search.substring(1);

  var args = queryString.split('&');

  var listId = args[0].split('=')[1];

  var viewId = args[1].split('=')[1];

  // use client object model to get list items

  var context = new SP.ClientContext.get_current();

  var site = context.get_web();

  context.load(site);

  var lists = site.get_lists();

  context.load(lists);

  list = lists.getById(listId);

  context.load(list);

  var views = list.get_views();

  context.load(views);

  var view = views.getById(viewId);

  context.load(view);

  printView = view.renderAsHtml();

  context.executeQueryAsync(success, failure);

}

  

function success() {

  $get("listTitle").innerHTML = list.get_title();

  $get("listTable").innerHTML = printView.get_value();

}

  

function failure() {

  $get("listTitle").innerHTML = "error running Client OM query";

  $get("listTable").innerHTML = "";

}

The print list solution is a good example of the thinking involved in designing sandboxed solutions. Supported CAML elements were used to create the button. A site page was used to create the user interface experience, and supported client-side code was used to implement the functionality. A key point is that this project contains no server-side code.

Dig SharePoint

Create List Print Ribbon in SharePoint 2010

Search

Popular Posts

Blog Archive