How to: Develop a Silverlight application where user can checkout multiple documents

Hi all, 

I have read an article by Randy Williams where he developed a Silverlight application which does a multiple-file check out. He has beautifully explained all tricks and some issues on SharePoint 2010 Beta version. 

I will split into two parts. One about development of Silverlight application and second a SharePoint 2010 project. 

PART1: Create a Silverlight application 

Step1: Fire up Visual Studio 2010 Beta2 or RC and choose default Silverlight template. Type in the name of project as "SilverlightCheckOut"

Step2: Open up MainPage.xaml file. Drag 2 controls. A listbox and set the SelectionMode property to multiple. A button and in the Content property to "Check Out". 

Step3:  On SilverlightCheckOut project, add two Silverlight dlls. 

Step4: Go to MainPage.xaml in designer mode. Select the Grid element the xmal >> In the Properties panel click on events icon (lighting icon) >> Double click on "Loaded" property which will generate an event. 

Step5: Go to code view and add using statement for the SharePoint client's reference and we prefix it with SP to avoid some object name conflicts . (Please view Randy's tip here) 

We also add some class variables as well. 

Step6: In the UserControl_Loaded event, we initialize current context and corresponding web, list and items. The main reason for designing client object model is to reduce the number of server round trips and thereby increases the efficiency dramatically Therefore, commands such as:

//batch up work to do. No call to the server

ctx.Load(myList);

ctx.Load(myItems);

//Call to the server

 ctx.ExecuteQueryAsync(getRequestSucceeded, getRequestFailed);

just batch up the commands and there is no talking to server post. Only  "ExecuteQueryAsync" make a call to the server with all the commands or batches in one go. 

getRequestSucceeded  and getRequestFailed are delegates which I cover in later steps.

Step7: We also add a C# class that will hold each file instance. 

Step8: After we execute "ctx.ExecuteQueryAsync(getRequestSucceeded, getRequestFailed);" this command, a server call is made and all the commands or batches are processed. If the code works successfully, getRequestSucceeded callbak delegate will run. It has to be noted that Silverlight calls are always asynchronous unlike traditional calls which are synchronous (or blocking). Therefore, Silverlight has a separate thread to avoid the UI does not locked up. It gives a better user experience. 

Dispatcher.BeginInvoke static method: Silverlight run on a separate thread. If we want to change anything in UI, we must do on the UI thread. The Dispatcher class greatly simplifies calling the UI thread with a static method BeginInvoke. This way, with just a line of code, we can update the UI. Therefore, we are working on results and bind to the listbox, we must do this on UI thread. The Dispatcher class guarantees that this code will be executed on the UI thread. 

The same concept applies on the getRequestFailed method. 

Step9: Double click on the "Check Out" button. 

On this button event, we check how many documents the user has selected. Subsequently, we batch up the selected documents and execute "ExecuteQueryAsync" method. 

Step10:  "checkOutRequestSucceeded" and "checkOutRequestFailed" methods have to processed as shown below. 

PART2: Create a SharePoint project.

Step11: Create a New project in VS2010 RC New Project >> SharePoint 2010 as template >> Choose "Empty SharePoint Project" >> Project Name: SLCheckOut >> Click OK. 

Step12: Right click on "SLCheckOut " solution >> Add >> New Item >> Add the module 

Step13: Go to File menu >> Add >> Existing project >> Navigate to SilverlightCheckOut project. Now, we will get to projects. 

Step14:  We have to configure on the module element. If we click on Module on and look at the properties. There is a property named "Project Output References". In this part, we tie this SharePoint package (WSP) which has just single module file in it with Silverlight file which is XAP file and deploy it as the module. Two properties have to be defined:

Deployment Type: ElementFile

Project Name: SilverlighCheckOut

Step15:  Modify the module element as shown below and deploy the solution: 

Step16: Go to SharePoint 2010 site >> Edit >> Insert >> Web Part >> Under categories, choose "Media and Content" >> Silverlight Web Part >>  Add >> Navigate to the XAP file which is under Videos, fill in the URL property: click OK button and our web part has been created.

Step17: We will get few documents from Shared Documents library in our new Silverlight application. Select few documents and hit the "Check Out" button. A message box will pop up.

Navigate to Shared Documents document library and we can observe that few documents have been check out. 

Cheers, 

--aaroh

Download the sources here. 
Silverlight application 
SharePoint 2010 with Silverlight application.

How to: Create a task adder in Silverlight application

Hi all,

In Mike Morton's interview,he showed a task adder via creating Silverlight application. I developed the same task adder and you can follow my previous post. (Create a Silverlight application in SharePoint 2010 as WSP solution). Just recap: 

• Create a Silverlight application and add references to Silverlight client's dll. 
• Write the task adder code. 
• Create a SharePoint 2010, add Silverlight's task adder project. 
• Add Module, Project Output References and deploy the solution.

Step1: Create a Silverlight application using VS2010. 

Step2: On MainPage.xaml, add label, textbox, calendar and button. 

Step3: Double click on "Add Task" button and add followed code shown below. 

Step4: Follow my previous blog and deploy the solution. 

Step5: Go to SharePoint 2010 site >> Edit >> Insert >> Web Part >> Under categories, choose "Media and Content" >> Silverlight Web Part >>  Add >> Navigate to the XAP file which is under Videos, fill in the URL property: click OK button and our web part has been created.

Step6:  In "Task Description", enter the details, choose the task date via Calendar and hit the "Add Task" button. We will will get alert. 

Step7: Navigate to the task list. We will get a new task added which we created using VS2010. 

Cheers, 

--aaroh 

Download the source here. 
Silverlight task adder 
SharePoint 2010 with Silverlight deployed a WSP.

Reference: 

Interview with Mike Morton about implementing a Silverlight SharePoint WebPart with Visual Studio 2010

How to: Debugging Silverlight applications in SharePoint 2010

Hi all, 

Its really easy to debug Silverlight applications in SharePoint 2010. Here are steps: 

Step1: Right click in the "SLwithWP" >> Properties >> Click on "SharePoint" tab >> Check the "Enable Silverlight debugging".

Step2: Make breakpoints in the code for Silverlight code

Step3: Press F5 button. I always prefer Firefox. A new Firefox's new window comes up. Enter login credentials.  Go to SharePoint 2010 site >> Edit >> Insert >> Web Part >> Under categories, choose "Media and Content" >> Silverlight Web Part >>  Add >> Navigate to the XAP file which is under Videos, fill in the URL property: click OK button and our web part has been created.

Step4: Click on "Load" button. Breakpoints will be fried up. 

Cheers, 

--aaroh   

Reference: 

Interview with Mike Morton about implementing a Silverlight SharePoint WebPart with Visual Studio 2010

How to: Create a Silverlight application in SharePoint 2010 as WSP solution

Hi all,

In previous blog, we have created a Silverlight application and upload the XAP file onto SharePoint. This approach is not good way to deploy the XAP file. Its always better to wrap XAP file into SharePoint solution (WSP). The reason for this is that, if later on business requirement does not Silverlight XAP file then there is no way we delete that XAP file. We have to manually delete from a document library. If we develop a WSP file instead, then infrastructure team delete the solution. This way, the XAP file is automatically delete from the document library.  We will split in two parts!

PART1:  Create SharePoint 2010 project.

Step1: Create a New project in VS2010 RC New Project >> SharePoint 2010 as template >> Choose "Empty SharePoint Project" >> Project Name: SLwithWP >> Click OK.   

Step2: Verify the site you want to debug and choose  "Deploy as a farm solution".

Step3:  Right click on "SLwithWP" solution >> Add >> New Item >>

 

Step4: Add the module as shown below:

The module element is typically used when files or set of files to deployed on the content database. SharePoint 2010 by default creates a "Sample.txt" as a sample. For instance, we rename the "Sample.txt" to "Sample123.txt", then element.xml if will automatically reflected. VS2010 does refracts so that those files are in sync. Module is a deployment vehicle for SharePoint.

PART2: Add Silverlight project as an existing project. 

Step5: Go to File menu >> Add >> Existing project >> Navigate to SilverlightOM project and not SilverlightOM.Web project which we created in last post. The reason for this is that,  we have to work on MainPage.xaml and App.xaml.

Step6: The solution will have 2 project as shown below: 

Step7: We have to configure on the module element. If we click on Module on and look at the properties. There is a property named "Project Output References". In this part, we tie this SharePoint package (WSP) which has just single module file in it with Silverlight file which is XAP file and deploy it as the module. Two properties have to be defined: 

Deployment Type: ElementFile

Project Name: SilverlightOM

Step8: We add the reference to the XAP file in the module as shown below: 

Step9: I have already defined a Videos document library via SharePoint UI. We just add this part in module element. Deploy the solution. 

Step10: Go to SharePoint 2010 site, navigate to Videos document library, and you will fine a folder named "Module1"

 

Step11: Go to SharePoint 2010 site >> Edit >> Insert >> Web Part >> Under categories, choose "Media and Content" >> Silverlight Web Part >>  Add >> Navigate to the XAP file which is under Videos, fill in the URL property: click OK button and our web part has been created.

And this is output: 

To recap the steps: 

• Create a new SharePoint 2010 project (SLwithWP) in VS2010
• Add a new module element 
• Add an existing Silverlight project (SilverlightOM)
• Configure the "Project Output References" in module element. 
• Add the reference to the XAP file in the module and deploy the solution.

Cheers, 

--aaroh

Download the source here. 

Reference: 

Interview with Mike Morton about implementing a Silverlight SharePoint WebPart with Visual Studio 2010

How to: Create a simple SilverLight application in SharePoint 2010

Hi all,

We have seen quite a few posts on SharePoint 2010 regarding Client object model. They come in 3 flavors:

• JavaScript/ECMAScript 
• .NET 
• Silverlight  

In this article, we will focus on  Silverlight. The Silverlight applications leverage a powerful development platform to create rich internet applications (RIA)  for web or desktop. Silverlight client object model can use an ASPX page or in web-part. SharePoint 2010 has come with  Silverlight web part which comes as wrapper. The web part can have custom properties that could be sent to Silverlight via the "InitParamertes" property. The XAP file can be deployed to Layouts.

The XAP file has to be deployed on the SharePoint 2010 server and it can be done two ways:

1. Create and develop an Silverlight application,  Go to SharePoint 2010 site >> Edit >> Insert >> Web Part >> Under categories, choose "Media and Content" >> Silverlight Web Part >>  Add >> Navigate to the XAP file, click OK button and our web part has been created. Its an easy approach to wrap Silverlight file as a web part. But as from developer perspective, we should add  XAP file in a SharePoint solution (WSP). For this web part, we have to set only one property named: URL.
2. Create and develop an Silverlight application, create a SharePoint 2010 solution (WSP) and deploy this solution to Central Administration. In this manner, we could able to activate and deactivate features. Therefore, its easy to manage solutions.  

In SharePoint 2007, there was not much support to interact with Silverlight and interactions were server side only. In new SharePoint 2010 paradigm, Microsoft has introduced client object model and Silverlight could be on client side. Developers can develop more build advanced Silverlight (SL) applications easily. Furthermore, we can have SL applications that is connected to SharePoint 2010 that doesn't run outside the browser. If you have a look on new SharePoint 2010 interface, there are few SL application popping up and its not required to install light on client's browser. If on client's machine there is no SL installed, SharePoint 2010 will "fall back" into basic HTML and prompt will be shown to end-users to install SL which has richer user interface. Examples:

• Create Dialog 
• Visio Services 
• Office web applications etc.

Examples: 

i) Create Dialog: 

An example where client's browser doesn't have Silverlight installed and SharePoint prompts user to install Silverlight:

After user installs SL, navigate to Site Actions >> More Options >> We will get nice rich Silverlight application with animation and we search for a particular list on top right:

ii)       Out-of-the-box Visio Services in SharePoint 2010. 

SharePoint 2010 has come up with new Visio workflows through which  end users can visualize the steps and they can also able to view the status interactively. I will explain this in a upcoming post about the Visio services workflows. 

During the development, I observed that when you write Silverlight applications, there is nothing SharePoint special here. We just need to add 2 references:

• Microsoft.SharePoint.Client.Silverlight
• Microsoft.SharePoint.Client.Silverlight.Runtime

This is first step. Lets create a simple Silverlight application where we create a button named Load. When user clicks on "Load" button, it will show all the lists where list title is not hidden. Its to be noted, we are using option 1 where we write Silverlight application, use SharePoint 2010 to upload this SL application as web part. In next article, I will show to wrap XAP file as a SharePoint solution.   

Step1: Fire up VS2010 New Project >> Visual C# >> Choose Silverlight template >> Silverlight application >> Click "OK" button

Step2: Silverlight configuration

When we click OK button, a pop comes up where we have to host Silverlight application in a new web site. Simply click OK button and leave all the options as default.

Step3: Two projects are created by default. First project "SilverlightOM" has two important files "App.xaml" and "MainPage.xaml". We need add two references to for SharePoint's client object model.

Second project has following structure:

>> Folder ClientBin: Output of XAP file.

>> Javascript file: Silverlight.js

>> ASPX page: SilverlightOMTestPage.aspx (Test aspx page. Also prompts user if the page requires Silverlight)

>> HTML page: SilverlightOMTestPage.html (Test html page. Also prompts user if the page requires Silverlight)

Step4: We work on MainPage.xaml and drag two controls. A button and listbox on the designer surface.

Step5: We double click on the "Load" button. The get the current site context has been retrieved  and we use SharePoint's client object model. A variable declared  named "nonHiddenListsQuery". We have to use lambda expressions to query lists where title is not null. ExecuteQueryAsync method has been executed with two functions.  "DisplayInfo" method just loop through all the lists which are not hidden.

Step6: Build the solution and we will get a XAP file under ClientBin folder.

Step7: Go to SharePoint 2010 site, navigate to Shared Documents, and upload the XAP file.

Step8: Go to SharePoint 2010 site >> Edit >> Insert >> Web Part >> Under categories, choose "Media and Content" >> Silverlight Web Part >>  Add >> Navigate to the XAP file which is under Shared Documents, click OK button and our web part has been created.

Step9: The Silverlight web part has been created successfully.

Cheers, 

--aaroh 

Download the source here. 

Reference: 

MSDN SharePoint 2010 client object model.

Toggle SharePoint User Interface between SharePoint 2007 and SharePoint 2010

Hi all,

I have found an interesting project where we can switch SharePoint 2010 UI to SharePoint 2007 UI using a feature. Looks very fascinating feature. Its written by Chakkaradeep  project could be found on codeplex. 

Check you more on the codeplex site.

Cheers,

--aaroh

How to: Creating transient notification/status bars in SharePoint 2010

Hi all,

SharePoint 2010 technical team has done an impressive job by giving end-user a great user interface. They wanted users to complete tasks as quickly as possible in the context with familiar, intuitive interface and provide reusable controls. SharePoint came up with new user interface platform with following changes:

• Masterpages (v4.master (with ribbon UI), default.master (with SharePoint 2007 UI) etc)
• Status bar and Notification Area (this post) 
• Client object model such as javascript/ecmascript and SilverLight (have posted few articles on Client OM)
• Customizable Ribbon UI (have posted few articles on Client OM)
• Dialog framework (have posted few articles on Client OM)
• Reduced of the tables (but its still there on few pages)

Lets dive into the main agenda which is notification area and status bars

Notification area:  

Few salient features of notification area:

• Notifications are used to show end-users what is happening on the page,web part or ribbon without distracting them. 
• These are transient or semi-transient messages. 
• By default, these messages disappear within 5 seconds.  
• Notification areas use javascript for the extensibility and could have HTML, icons etc. as well
• Optional "sticky" parameter can be set if caller wishes to manually remove the message. 

APIs: (14/Template/Layouts)

SP.UI.Notify.addNotification(strHtml, bSticky)

SP.UI.Notify.removeNotification(nid)

Status bars: 

Few salient features of status bars:

• They are shown just below the ribbon interface. 
• Used to display persistent information such as page status, versions, messages on the central administration and we can write our own custom status bars. 
• Status bars could be one Ribbon UI, application pages and also on web parts. 
• Its possible to set 4 pre-set background colors which depends on the importance. 
• Status bars use javascript for the extensibility and could have HTML, icons etc. as well. 

APIs: (14/Template/Layouts)

SP.UI.Status.addStatus(strTitle, strHtml, atBegining)

SP.UI.Status.appendStatus(sid, strTitle, strHtml)

SP.UI.Status.updateStatus(sid, strHtml)

SP.UI.Status.setStatusPriColor(sid, strColor)

SP.UI.Status.removeStatus (sid)

SP.UI.Status.removeAllStatus(hide)

Let's get started:

Step1: Create a New project in VS2010 RC New Project >> SharePoint 2010 as template >> Choose "Empty SharePoint Project" >> Project Name: ShowNotificationStatus >> Click OK.

Step2: Verify the site you want to debug and choose  "Deploy as a farm solution".

Step3: Right click on the "ShowNotificationStatus" >> Add >> "SharePoint Layouts Mapped Folder"

 

Step4: Right click on the "ShowNotificationStatus" folder >> Add >> Application Page >> Name: AppPage.aspx >> Click OK.

Step5: Under "PlaceHolderMain", I added 2 textbox namely: Notification and Status for entering for users notification area and status bars respectively. 

Also, we add 5 buttons which will do these activities: 

Notification Area:  

>>   "Enter New Notification" - When user enters a new notification area, we hookup to a javascript function. 

-----------------------------------------------------------------------------

 function Notification() {

            // Displays Notification
            var notification = document.getElementById("notification").value;

            if (notification == '') {
                alert('Please enter a notification!');
            }
            else
            {
                var notificationId = SP.UI.Notify.addNotification(notification);
                latestNotifyId = notificationId;
            }
        }

----------------------------------------------------------------------

We get the value of  textbox for entering the new notification. Then, we use javascript APIs to leverage new SP2010 client object model: SP.UI.Notify.addNotification(notification)

>> "Remove Notification" : By Default, notification area disappears within 5 seconds but if we click the "Remove Notification" button, with the time frame of  less than 5 seconds, then we can observe that notification disappears. 

----------------------------------------------------

  function RemoveNotification() {

            // Remove Notification
            SP.UI.Notify.removeNotification(latestNotifyId);
            latestNotifyId = '';
        }

-----------------------------------------------

Status bars: 

>>  "Enter New Status": This for entering a new user customized status bars. We can also assign a red status bars by setting "setStatusPriColor".

----------------------------------

        function AddStatus() {

            // Add the Status
            var addStatus = document.getElementById("addStatus").value;
            var statusId = SP.UI.Status.addStatus(addStatus);
            SP.UI.Status.setStatusPriColor(statusId, 'red');
            latestStatusId = statusId;

        }

--------------------------------

>> "Remove Last Status": We can remove the last status as well.

--------------------------------

        function RemoveLastStatus() {

            // Remove last Status
            var addStatus = document.getElementById("addStatus").value;
            if (addStatus == '') {
                alert('There is no status!');
            }
            else {
                SP.UI.Status.removeStatus(latestStatusId);
                latestStatusId = '';
            }

        }

---------------------------

>> "Remove All Status": We can remove all the status using javascript APIs. 

---------------------------------

        function RemoveAllStatus() {

            // Remove all status
            var addStatus = document.getElementById("addStatus").value;
            if (addStatus == '') {
                alert('There is no status!');
            }
            else {
                SP.UI.Status.removeAllStatus(true);
            }

        }

--------------------------------

Cheers,

--aaroh 

Download the source here.