Pages

Friday, April 22, 2011

Using Javascript to provision SharePoint sites

In today's post I'm going to show how you can leverage SharePoint's ECMAScript client object model to provision sites in SharePoint 2010. Thought out this post I will use a sample application that I wrote that leverage the capabilities to use provision and removes sites.

Application Overview
Figure 1 shows the sample application that I will use in my post. The application is hosted inside of a content editor web part which displays two tabs;one tab provides the capability to provision a site and the other provides the capability to delete a site. Very simple application and you can deploy it outside of SharePoint as well, with some minor tweaks to my sample you can host this inside of a .net page outside of SharePoint...Pretty cool huh..Now let's take a look at the "Provision Sites" tab, first we'll dive into how the application works and then wrap up by taking look at the code base.

Figure 1










Provision Sites tab
The purpose of this tab is provide the capability to provision a new site. Users will populate the form fields to set properties of their new site such as the title, url, web template....Below is a list of the form fields users will fill out:
  • Site Title allows you provide a title for your site.
  • Site Url allows you to define a url to your site.
  • Site Description allows you to provide a description for your new site.
  • Use Same Permission As Parent Sites determine if your new site should inherit permissions from the parent site or not.
  • Select a Category and Choose a Web Template works together like a cascading drop down lists; the Select a Category provides a list of categories to choose from, when you select a category the Choose a Web Template list will dynamically populate with all activated site templates that is assign to the selected category. Once you have selected a web template, below you will see the name and description of the selected web template See Figure 3 and 4.
Figure 2


Figure 3 - shows a list of categories.

Figure 4 - shows a list of  web templates based on the Collaboration category.
 


Click the "Provision New Site" button once the form is completed, then you should see a link to your new site and a notification message  letting you know that your site has been created, see Figure 5.
Figure 5
Click on the link to navigate to your new site, see Figure 6.

Figure 6


Simple huh!! Now let's dive into the code base. Figure 7 shows code that does the following:
  • Load the sp.js file first and once completed call the init function.
  • Attaching the onchange events to the category and web template select lists.
  • Then leverages the client object model to retrieve web templates from the site collection using the getAvailableWebTemplates(lcid, doIncludeCrossLanguage) method which returns a collection of web templates. See Figure 7.
We will use this to populate the Select a Category list.

Figure 7
Figure 8 provides the code details on how the category select list is populated. One thing to note here is the SP.WebTemplate.get_isHidden method; this determines if the site definition configuration should be displayed in the UI when creating new sites. We need to make sure that we do not display site templates that are no longer used in SharePoint 2010 because they could be deprecated and contain features that are no longer use in SharePoint 2010. If the method returns false then I'm invoking the SP.WebTemplate.get_displayCategory method to retrieve the web template's category value to add to the category list. Next we will take a look how the web template select list is populated, similar to Figure 8, but now we display web templates where the web template's category is equal to the selected category.


Figure 8
Figure 9 shows the code base to populate the web template select list. The function ShowWebTemplatesBySelectedCategory function is responsible for populating the web template select list; this method is called once a category has been selected. Similar logic populating the category select list, but now we're displaying the web template name. Next let's look at the code to provision a site.

Figure 9
ProvisionNewSite function is responsible to provision the new sites. First the function retrieves the data from the form and then it leverages the client object model's SP.WebCreationInformation class to provision a new site. Once we've created the object and filled out the necessary properties, we add the SP.WebCreationInformation object to the SP.Web class, call the Sp.Web.Update method to provision our new site. Now this doesn't actually happen until after you call the invoke the SP.ClientContext's load and executeQueryAsync methods. See Figure 10.

Figure 10
If all goes well, then you should see a link below the button that will take you to your new site and a notification message letting you know that your site has been created. Figure 11 shows the code that displays the notification message both on the succeeded and failure functions.


Figure 11

Cool huh? With little code you can provision sites on the using javascript. Next we're going to take at "Manage Sites" tab; we'll review the application first, its purpose and then the code.

Manage Sites tab
The Manage Sites tab is a smaller form which sole purpose is to delete a site. Figure 12 shows a list of all subsites that a user chooses from, once a site has been selected details about the site such as the relative URL, title and description. See Figure 13

Figure 12

Figure 13

To remove the site click on the "Remove Selected Site" button which deletes the site and you will see an alert button letting you know that your site has been deleted, see Figure 14.

Figure 14

See Figure 15 shows the Sites and Workspaces page which provides further proof that you site has been deleted.

Figure 15

Easy, huh? So is the code base. ShowAllSubSites and onGetAllSubsitesSucceeded functions, shown in Figure 16, is responsible for populating the select list with subsites. Once thing to note here is the ShowAllSubSites  function is called when the user clicks on the "Manage Sites" tab, see Figure 17 for the html code.

Figure 16









Figure 17
Once a site has been selected, basic properties about the site are displayed to the use, shown in Figure 18. The DisplayWebsiteProperties function accepts a singe parameter; WebsiteUrl which is passed to the SP.ClientContext constructor so can do some work on the site I selected. Now we can gather and display the site's properties; checkout the onDisplayWebSitePropertiesSucceeded function for details.

Figure 18
RemoveSite function is called once the Remove Selected Site button is clicked. All we're doing here is creating an instance of the SP.ClientContext object based on the site that we want to delete and then we're calling the SP.Web.deleteObject() method to actually delete the site, see figure 19. Once the site has been deleted, you will see an alert message letting you know that your site has been deleted, take a look at the onSiteDeletedSucceeded function for details.

Figure 19

And that's it folks.

Conclusion
In conclusion you can leverage the SP.WebCreationInformation class to provision sites on the fly and the SP.Web.deleteObject method to delete sites. You can take this example and extended into the areas of user management; leveraging the SP.User, SP.UserCreationInformation and SP.Web classes to add/modify/remove users from a particular site.

Well I hope this post was informative and motivates to take a look at SharePoint's Client Object Model.  Let me know if you have any questions or comments regarding this post or in anything general. Thanks!!



Sample Source Code





Tuesday, April 12, 2011

Sharepoint 2010 & BCS: Collaboration Hub

Hey readers, found this great article on How SharePoint 2010 Can Be Used as a Collaboration Hub which provides a senario where Sharepoint 2010 and BCS pulls/pushes data from three different external systems giving  project managers the capability to work with each system within Sharepoint.

Saturday, April 9, 2011

Video: Creating an Excel Services and Bing Maps Mash-up for SharePoint 2010 Using the Excel Services ECMAScript Object Model

Found this awesome video on using ECMAScript Object Model with Excel Services and Bing Maps. A great example of using javascript, Bing Maps and Excel Services to create a pretty useful application. Little code, no assembly to be deployed, just an excel spreadsheet and a little javascript magic. Nice!!!
 
Link to video: Creating an Excel Services and Bing Maps Mash-up for SharePoint 2010 Using the Excel Services ECMAScript Object Model

Friday, April 8, 2011

Video on Creating Documents with SharePoint Designer 2010 Workflows

Cool YouTube video on creating documents with SharePoint Designer 2010 Workflows. Nice Stuff!!!....One thing that I notice is that the author uses a regular workflow instead of using Resusable Workflows which allows you to attach a workflow to a specific content type. Either way it works and its another example how powerful SharePoint's OOTB features are.


Monday, April 4, 2011

Cloud Computing on the rise.

Found an interesting article regarding a study on cloud computing as it relates to the role of IT (Cloud computing elevating the role of IT: study). Its interesting that 70% of respondents believe that CIO's and senior IT staff will have a business background as opposed to a technology background in the future. Will we see a movement of power users in IT as oppose to hard core programmers? I still think we'll have programmers, but I agree with the article in that their role will be more of managing service providers than providing customize application features. This sounds like SharePoint Online to me...Former pprogrammers are now SharePoint administrators on business end, mainly acting in the help desk role to contact Microsoft when an application goes down and little programming opportunities (Sandbox Solutions) and Power Users as content developers using SharePoint Designer or a web browser to deploying applications to the business. Just my opinion. What's your thoughts?

Sunday, April 3, 2011

Plan browser support for Sharepoint Server 2010

Plan browser support (SharePoint Server 2010)

Its werid to see that the 64-bit versions of IE(7, 8 & 9) are not fully supported as their 32-bit counterparts. Your thoughts?

Saturday, April 2, 2011

Using Javascript to access an external list in SharePoint 2010.

In today's post let's take a look at leveraging SharePoint's ECMAScript Client Object Model to access an external list data. In this post we're going to cover:
  • Using javascript and the client object model to build a products search application that returns products from an external list.
  • Host the application in side of a content editor webpart.
Let's begin by taking a look at the Products external list.

Products External List

Figure 1 shows a list of products external list which is view from the AdventureWorks.Products sql table. Using external content types and lists provides you with the capabilities to connect and manipulate data from external systems such as a web service, sql server database or from a .NET assembly. Leveraging SharePoint Designer 2010 or Visual Studio 2010 provides the tools that's need to craete external content types and lists to be consume in SharePoint or in other applications.  For more information about BCS, external content types and lists check out Microsoft Business Connectivity Services. Now that we have a list of products to work with, next we will leverage SharePoint's client object model to extract and display products based on user's search requests.

Figure 1









Leveraging SharePoint's Client Object Model to access external list data.

Figure 2 and 3 shows will show you the end results. Users will type in the first letter or two, click on the search button and the application returns a list of products based on the user's search request.

Figure 2









Figure 3







To begin we need to add a content editor webpart to host the application.. Add the web part to the home page and then we need to edit html source for the web part. Figure 4 shows the location of the edit inside of the ribbon. Inside of the HTML editor copy and paste the javascript source code thats located as a file to download at the end of this blog post.


Figure 4





Notice in the source code the CAML query and the 'Include' statement inside of the clientContext.load method. Both are required to access data from an external list. See Figure 5

Figure 5








Inside of the CAML query the Method tag provides the operation name used to query the Products list.. The Name attribute is where you specify the name of the operation. Note that the value of the Name attribute should be a valid operation that exists in the external content type. See Figure 6 shows you list of operations that the external content type supports.

Figure 6








The ViewFields tag  requires you to include all fields that anoperation returns. Remember confuring your external content type and in the wizard the their step Return Parameters ? In this step you can specify the fields that you want to return for an operation.  Figure 7 shows the button to edit a selected operation and Figure 8 shows the Return Parameter step where you can configure the operation's return fields. Finally in the clientContext.load method the 'Include' statement makes the fields available to use in the onQuerySucceeded function.

Figure 7







Figure 8












Let's recap
  • Using BCS provides you the capabilities to expose external data using external content types and lists.
  • Leveraging the Client Object Model you can access external list data and expose it to the client.
  • The Method tag  specifies the CURD operations to use whne querying an external list. This gives you the ability to implement select, update and delete CAML querites against external lists.
  • Make sure you include all fields that anoperation returns inside of the ViewFields tags. Do the same for the 'Include' statement inside of the clientContext.load method as well.


For a copy of the AdventureWorks database check out this link: Microsoft SQL Server Database Product Samples.


Sample Source Code: