February, 2010

  • Visual Studio SharePoint Development Blog

    Publishing Silverlight Applications in SharePoint 2010

    • 7 Comments

    In this blog post I’ll walk you through how easy it is to publish Silverlight applications to SharePoint 2010 by using the Visual Studio 2010 tools for SharePoint development.

    This walkthrough requires: a local installation of either SharePoint Foundation 2010 or SharePoint Server 2010, Silverlight 3.0, and Visual Studio 2010. Please see http://msdn.microsoft.com/en-us/library/ee231582(VS.100).aspx for a full list of requirements. Once you have installed the prerequisites start Visual Studio as an administrator. (This is required to create SharePoint projects in VS.)

    To begin, let’s create a simple Silverlight (SL) application. Create a new Silverlight Application project named “MySilverlightApplication” and uncheck the Host the Silverlight Application in a new website option in the New Project wizard. Because we're hosting the SL application in a SharePoint Web part, that option isn't required. On the MainPage.xaml, add a text box, button, and label control. In the button's click event, add code to copy the textbox’s text to the label’s content field. It should look something like this:

    Next, we’ll create a SharePoint project to package and deploy the Silverlight app to our test server. To do this, click File -> Add -> New Project… , select Visual C# -> SharePoint -> 2010, select the Module project template, and then name it “DeploymentProject”. Leave the other settings at their defaults and click OK. In the wizard that is displayed click the Finish button to add this second project to the solution. Notice that a Module1 project item is included in this new project. Feel free to expand the Module1 node and delete the unnecessary sample.txt file. Next, we’ll want to add the output of the Silverlight application to our package. To do this, select the Module1 node in Solution Explorer, select Project Output References in the Properties window, and then click the ellipsis (…) button.

    Note: The Project Output References property of a SharePoint Item determines whether the output of a project is packaged as an element file, template file, root file, or other deployment type. These files will be packaged only if the item is included in the package. If you would rather include project output as an assembly to be deployed to the GAC or BIN folder, then use the Advanced tab in the Package Designer.

    In the Project Output References dialog, click the Add button on the left. The new project output reference is automatically selected in the list. Choose ElementFile in the Deployment Type drop-down list. Then select the Project Name drop-down and choose the Silverlight project you added to the solution earlier. Here’s how it should look.

    There are a number of places we can deploy our Silverlight XAP file to SharePoint. The web’s ClientBin folder is sometimes used, but we can’t use the WSP file or our tools to deploy it there. Another deployment location option is the SharePoint hive. The decision of where to place the file depends on the scope of your application. The most common and easily controlled location is a Document Library. Uploading your XAP files to this list makes it easy to control permissions to the application and keeps them all in one location that's easy to find and update.

    For debugging purposes, let’s create a list using our deployment project. Right-click the DeploymentProject node in Solution Explorer and then select Add -> New Item. Select the SharePoint -> 2010 List Instance project item template, name it “XAPLibrary” and choose a “Document Library” type of list. In the wizard, change the name to “XAPLibrary”, choose “Document Library” as the type of list, and the relative URL for this list to “Lists/XAPLibrary” and then click Finish. This project item will automatically be packaged and deployed with the module we created earlier.

    Now that we have a list to host the XAP file, we need to tell SharePoint where to deploy it. Expand the Module1 node in Solution Explorer and open the Elements.xml file. Add the File node to the Modules parent node using the following:

    <Module Name="Module1">
    <File Path="Module1\MySilverlightApplication.xap" Url="Lists/XAPLibrary/MySilverlightApplication.xap" Type="GhostableInLibrary"/>
    </Module>

    The GhostableInLibrary type attribute is necessary so that SharePoint will create a list item for our XAP file on deployment.

    That’s it! We’re ready to deploy. Right-click the DeploymentProject node in Solution Explorer and select “Set as StartUp Project”. Now, press F5 and the Silverlight application will be built, packaged into the DeploymentProject WSP, and then deployed to the SharePoint site. In addition, the browser will be opened to the home page of the site. For testing purposes, let’s add the Web part to this page. Click the Page tab in the ribbon and then click Edit to enable the page to be edited. Click the Insert tab on the ribbon which is now displayed and then click Web Part on the ribbon to bring up the Web part picker. In the Media and Content category select the Silverlight Web Part item and click Add. Enter the location of the XAP file in the URL text box (~site/Lists/XAPLibrary/MySilverlightApplication.xap) and click OK.

    Once added, the Web part should appear on your site. Enter some text in the text box and click the button, and your text should be copied. You can now modify the SL application and redeploy it quickly to the site so that your changes are promptly reflected.

    I hope this post helps you get started publishing Silverlight applications to SharePoint. For further information, please watch this informative video by Paul Stubbs “Developer Patterns to Integrate Silverlight with SharePoint 2010” in which he leverages the Visual Studio 2010 tools for SharePoint development.

    Erik Cutts

  • Visual Studio SharePoint Development Blog

    How to deploy a SharePoint Site Definition project to the correct location when the SharePoint language is different from VS Language

    • 0 Comments

    If a SharePoint site definition project is created in English (ENU) version of Visual Studio 2010 and deployed on Arabic – Saudi Arabia (Ar-Sa) SharePoint, the template does not show up in SharePoint when you navigate to the site creation page. The template file is deployed to the folder corresponding to ENU locale (1033) instead of the one associated with ar-sa locale (1025).

    To fix this, the deployment path of the webtemp_<projectname>.xml needs to be changed to point to the correct SharePoint locale. Right click the webtemp_<projectname>.xml in the Solution Explorer and select Properties. In the properties window, expand the Deployment Location property. By default the Path property will be <VS LCID>\xml\ where <VS LCID> is 1033 for ENU Visual Studio (refer to the figure below).

    Change the LCID part of the path property to match that of the SharePoint language. For Ar-Sa the LCID is 1025 and hence the path should be 1025\xml. Deploying this onto Ar-Sa SharePoint should show this template under the SharePoint customizations tab in the Site creation page.You can find the full locale ID chart at http://msdn.microsoft.com/en-us/library/0h88fahh(VS.85).aspx.

     

    Pallavi Vajranabhaiah

  • Visual Studio SharePoint Development Blog

    Adding actions to Site Actions menu

    • 0 Comments

    This example shows how to add a link to Site Actions menu. We are going to use mapped folders to deploy an image and an application page to which the new link will point. In order to customize the menu we are going to use CustomAction element:

    <CustomAction Id="CustomActionID"
    Description="Custom Action Description"
    Title=" Custom Action Title"
    GroupId="SiteActions"
    Location="Microsoft.SharePoint.StandardMenu"
    ImageUrl="/_layouts/Images/SPCustomAction/MyIco.bmp"
    Sequence="10">

    GroupId and Location attributes determine where the custom action is displayed. Since we want to add a link to SiteActions menu we are using SiteActions GroupId. You can find the list of default custom action locations and IDs over at MSDN.

    We are going to start with an Empty SharePoint project (name the project SPCustomAction). Select “Deploy as a farm solution” in the project wizard. Reason for using the farm solution is because we want to deploy an image as well as application page and you can’t do that with sandboxed solutions.

    To add a mapped folder to the project, right click the project name and select Add -> SharePoint 'Images" mapped folder. Once mapped folder is in your project it works same as any other regular folder. You can right click the folder and add either a new image (BMP) or an existing one to the project. I named my BMP file MyImage.bmp. If you use named your file with differently, make sure the name matches the one you specify in the ImageUrl attribute below.

    Next we need to add an application page – right click the project name and select Add -> New Item . From the New Item dialog, select the Application Page template and click add (name the page MyAppPage.aspx). You will notice that the Layouts mapped folder is added to the project and it contains the application page. If you want to use an existing ASPX file you could add a Layouts mapped folder first and then add the ASPX file to that folder.

    Now we can start with the CustomAction. We are going to use an Empty Element project item template. Open Add New Item dialog and add an Empty Element template to the project. Elements.xml file should be opened by default. Paste the following XML to the Elements.xml file:

    <?xml version="1.0" encoding="utf-8"?>
    <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction 
         Id="MyCustomAction"
         Description="This is my custom action."
         Title="Open Application Page"
         GroupId="SiteActions"
         Location="Microsoft.SharePoint.StandardMenu"
         ImageUrl="/_layouts/Images/SPCustomAction/MyImage.bmp"
         Sequence="10">
                  <UrlAction Url="~site/_layouts/SPCustomAction/MyAppPage.aspx"/>
    </CustomAction>
    </Elements>

    That’s all you need to do in order to create a new custom action. Deploy the project (or press F5) and navigate to your SharePoint site. If you open the Site Actions menu there should be a new link with custom image. When you click the link it should open the MyAppPage.aspx application page we added to the project.

    Peter Jausovec

  • Visual Studio SharePoint Development Blog

    Event Receiver and Custom Error Page

    • 5 Comments

    In this example I am going to show you how to use list item event receiver and how to redirect users to error page if something goes wrong. We have a list of contacts and we want to display an error message if the entered zip code doesn't a specific value. For this example I am using zip code 98052. If user enters a different ZIP code we display a custom error page. For custom error page we are going to create an application page.

    Start by creating a new Event Receiver project (I am using C# Event Receiver project). Because we are going to use an application page, select Deploy as farm solution. In the Event Receiver wizard, select List Item Events for the type of the event receiver. Event source is going to be Contacts and we are interested in "An item is being added" event.

    Next, add an application page to the project and name it CustomErrorPage.aspx. Let’s modify the application page and add a Label control to display the error message. Your markup code should look something like this:

    <asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server"> 
    <asp:Label ID="lblError" runat="server"></asp:Label> 
    </asp:Content> 
    
    <asp:Content ID="PageTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server"> 
    Error Page
    </asp:Content> 
    
    <asp:Content ID="PageTitleInTitleArea" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server" >
    Error Page
    </asp:Content>

    I removed the Text attribute of the Label control because we are going to create the error message in the event receiver code and then pass the error message to the page. In order to display the error message on the ASPX page (Label control), we need to get that parameter somehow. Switch to the application page code view and add the following code to the Page_Load method:

    C#

    protected void Page_Load(object sender, EventArgs e) 
    { 
            lblError.Text = Request.Params["Error"]; 
    }

    VB

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
         lblError.Text = Request.Params("Error")
    End Sub

    We are requesting the parameter called "Error" and then setting it to the Text property of lblError label control. Now that custom error page is created open the EventReceiver1.cs file and adds the following code to the ItemAdding method:

    C#

    public override void ItemAdding(SPItemEventProperties properties) 
    {
        base.ItemAdding(properties); 
        string zipCode = properties.AfterProperties["WorkZip"].ToString(); 
    
        if (zipCode != "98052") 
        { 
            string errorMessage = string.Format ("ZIP Code '{0}' is Invalid!", zipCode); 
            properties.Cancel = true; 
            properties.Status = SPEventReceiverStatus.CancelWithRedirectUrl; 
            properties.RedirectUrl = "/_layouts/EventReceiverProject1/CustomErrorPage.aspx?Error=" + errorMessage; 
        } 
    }

    VB

    Public Overrides Sub ItemAdding(properties as SPItemEventProperties)
            MyBase.ItemAdding(properties)
            Dim zipCode As String = properties.AfterProperties("WorkZip").ToString()
            If zipCode <> "98052" Then
                Dim errorMessage As String = String.Format("Zip Code '{0}' Is Invalid!", zipCode)
                properties.Cancel = True
                properties.Status = SPEventReceiverStatus.CancelWithRedirectUrl
                properties.RedirectUrl = "/_layouts/CustomErrorPage/CustomErrorPage.aspx?Error="  & errorMessage
            End If
     End Sub

    In the above method we are getting the value of the ZIP code (WorkZip field) and then comparing it to 98052. If the zip code doesn't match we are setting the Cancel property of the SPItemEventReceiverProperties to true and cancelling the event. Because we want to display the custom error page we set the Status property to CancelWithRedirectUrl. You could also cancel the event without an error or even continue it. Last thing we need to do is to redirect the users to the custom error page we created before and pass the error message to the ASPX page.

    Press F5 or deploy the project to verify the behavior. Start by creating a new Contacts list (click the List s link and the Create to create new Contacts list). Navigate to the created list, add a new contact and enter an 'invalid' zip code (in our case invalid zip code is anything that is different from string 98052). As you click Save to add the contact custom error page we created should be displayed.

    Peter Jausovec

Page 1 of 1 (4 items)