Category Archives: WebPart

Display templates for the Content Search Web Part

You can use the following display templates to change the appearance of content that is shown in a Content Search Web Part. These display template files are located in the Content Web Parts subfolder in the Display Templates folder in the Master Page Gallery.

Display templates for the Refinement Web Part and the Taxonomy Refinement Web Part

You can use the display templates listed in the following table to change the appearance of content that is shown in a Refinement Web Part and a Taxonomy Refinement Web Part. These display template files are located in the Filters subfolder in the Display Templates folder in the Master Page Gallery. Note that there are different display templates for different refiner types.

Display templates for the Search Results Web Part

You can use the display templates in the following table to change the appearance of content shown in a Search Results Web Part. Note that the hover panels for the different result types have separate display templates. These display template files are located in the Search subfolder in the Display Templates folder in the Master Page Gallery.

People have liked the Organization Browser web part so much that they want the web part to be added to their companies main Portal web application. I too recently came across this interesting situation, wherein we were supposed to show the My Site Organization Browser web part inside our publishing site. It was a task that according to me was very small. Just add the Organization Browser web part from the Social Collaboration group (as shown in the figure below) in the webpage and you are sorted.

I started working on it. As mentioned, I just added the web part from the Social Collaboration group, and whoa!!!.. I was done. Wait……there was something wrong. The Silverlight web part did not show anything inside it. There was no rendering done. I tried to do a lot of tweaking, but to avail no success : (

I started searching for the solution over the internet, and noticed that I was not the only one facing the problem. Instead there were many with the same problem. Finally I got something that helped me resolve the issue. There are two approaches to resolve the issue. They are:

Solution 1:

The web part is available and functions as expected IF the Portal and My Sites are on the same web application. This implies that the My Site and the Portal should be configured on the same web application.

Solution 2:

Having the Portal and the My Site in the same web application is not a best practice approach. There are also the situations when the environments are entirely different. In such a scenario, when the Organization Browser is added on a page in the Portal web application, the web part is added properly, but it displays blank as shown below:

In order for the web part to function on the portal web application as it does on the My Sites, following are the steps to be followed:

Create a clientaccesspolicy.xml file. This file will contain the following lines on xml:

To follow the security best practices, limit this policy to allow access only to your portal web application.

2.Add this xml file inside the root of the virtual directories of both the portal web application and the My Sites web application. The virtual directories for the web sites are located within “C:inetpubwwwrootwssVirtualDirectories”

After you are done adding the file to the root directories of both the applications, open the portal web application and you would see the Organization Browser web part functioning properly.

Out Of Box (OOB) Webparts
These are the basic in-built components in SharePoint for displaying and managing list data without the need of any custom development. Not all of them will be available depending upon the version of SharePoint installed.

List of OOB Webparts in SharePoint 2010
Following is the list of OOB webparts in SharePoint 2010 along with the category.

List and LibrariesAnnouncements – Use this list to track upcoming events, status updates or other team newsCalendar – Use the Calendar list to keep informed of upcoming meetings, deadlines, and other important eventsLinks – Use the Links list for links to Web pages that your team members will find interesting or usefulShared Documents – Share a document with the team by adding it to this document librarySite Assets – Use this library to store files which are included on pages within this site, such as images on Wiki pages.Site Pages – Use this library to create and store pages on this siteTasks – Use the Tasks list to keep track of work that you or your team needs to completeTeam Discussions – Use the Team Discussion list to hold newsgroup-style discussions on topics relevant to your teamBusiness DataBusiness Data Actions – Displays a list of actions from Business Data ConnectivityBusiness Data Connectivity Filter – Filters the contents of Web Parts using a list of values from the Business Data ConnectivityBusiness Data Item – Displays one item from a data source in Business Data ConnectivityBusiness Data Item Builder – Creates a Business Data item from parameters in the query string and provides it to other Web PartsBusiness Data List – Displays a list of items from a data source in Business Data Connectivity
Business Data Related List – Displays a list of items related to one or more parent items from a data source in Business Data ConnectivityChart Web Part – Helps you to visualize your data on SharePoint sites and portals
Excel Web Access – Use the Excel Web Access Web Part to interact with an Excel workbook as a Web pageIndicator Details – Displays the details of a single Status Indicator. Status Indicators display an important measure for an organization and may be obtained from other data sources including SharePoint lists, Excel workbooks, and SQL Server 2005 Analysis Services KPIs.Status Lists – Shows a list of Status Indicators. Status Indicators display important measures for your organization, and show how your organization is performing with respect to your goals.Visio Web Access – Enables viewing and refreshing of Visio Web DrawingsContent RollupCategories – Displays categories from the Site DirectoryContent Query – Displays a dynamic view of content from your siteRelevant Documents – Displays documents that are relevant to the current userRSS Viewer – Displays an RSS feedSite Aggregator – Displays sites of your choice.Sites In Category – Displays sites from the Site Directory within a specific categorySummary Links – Allows authors to create links that can be grouped and styledTable Of Contents – Displays the navigation hierarchy of your siteWeb Analytics web Part – Displays the most viewed content, most frequent search queries from a site, or most frequent search queries from a search centerWSRP Viewer – Displays portlets from web sites using WSRP 1.1XML Viewer – Transforms XML data using XSL and shows the resultsFiltersChoice Filter – Filters the contents of Web Parts using a list of values entered by the page authorCurrent User Filter – Filters the contents of Web Parts by using properties of the current userDate Filter – Filter the contents of Web Parts by allowing users to enter or pick a dateFilter Actions – Use the Filter Actions Web Part when you have two or more filter Web Parts on one Web Part Page, and you want to synchronize the display of the filter resultsPage Field Filter – Filters the contents of Web Parts using information about the current pageQuery String (URL) Filter – Filters the contents of Web Parts using values passed via the query stringSharePoint List Filter – Filters the contents of Web Parts by using a list of valuesSQL Server Analysis Services Filter – Filters the contents of Web Parts using a list of values from SQL Server Analysis Services cubesText Filter – Filters the contents of Web Parts by allowing users to enter a text valueFormsHTML Form Web Part – Connects simple form controls to other Web PartsInfoPath Form Web Part – Use this Web Part to display an InfoPath browser-enabled formMedia and ContentContent Editor – Allows authors to enter rich text contentImage Viewer – Displays a specified imageMedia Web Part – Use to embed media clips (video and audio) in a web pagePage Viewer – Displays another Web page on this Web page. The other Web page is presented in an IFramePicture Library Slideshow Web Part – Use to display a slideshow of images and photos from a picture librarySilverlight Web part – A web part to display a Silverlight applicationOutlook Web AppMy Calendar – Displays your calendar using Outlook Web Access for Microsoft Exchange Server 2003 or laterMy Contacts – Displays your contacts using Outlook Web Access for Microsoft Exchange Server 2003 or laterMy Inbox – Displays your inbox using Outlook Web Access for Microsoft Exchange Server 2003 or laterMy Mail Folder – Displays your mail folder using Outlook Web Access for Microsoft Exchange Server 2000My Tasks – Displays your tasks using Outlook Web Access for Microsoft Exchange Server 2003 or laterPerformancePointPerformancePoint Filter – This web part displays PerformancePoint filters. Filters may be linked to other web parts to provide an interactive dashboard experience. Filter types include lists and trees based on a variety of data sourcesPerformancePoint Report – This web part displays PerformancePoint reports. Reports may be linked to other web parts to create an interactive dashboard experience. Report types include: Analytic charts & grids, Strategy Maps, Excel Services, Reporting Services, Predictive Trend charts, and web pagesPerformancePoint Scorecard – This web part displays a PerformancePoint scorecard. Scorecards may be linked to other web parts, such as filters and reports, to create an interactive dashboard experience.PerformancePoint Stack Selector – This web part displays a PerformancePoint Stack Selector. All PerformancePoint web parts, such as filters and reports, contained in the same zone will be automatically stacked and selectable using this web part.SearchAdvanced Search Box – Displays parameterized search options based on properties and combinations of words.Dual Chinese Search – Used to search Dual Chinese document and items at the same time.Federated Results – Displays search results from a configured locationPeople Refinement Panel – This webpart helps the users to refine people search resultsPeople Search Box – Presents a search box that allows users to search for peoplePeople Search Core Results – Displays the people search results and the properties associated with them.Refinement Panel – This webpart helps the users to refine search resultsRelated Queries – This webpart displays related queries to a user querySearch Action Link – Displays the search action links on the search results pageSearch Best Bet – Displays high-confidence results on a search results page.Search Box – Displays a search box that allows users to search for information.Search Core Results – Displays the search results and the properties associated with themSearch Paging – Display links for navigating pages containing search results.Search Statistics – Displays the search statistics such as the number of results shown on the current page, total number of results and time taken to perform the search.Search Summary – Displays suggestions for current search querySearch Visual Best Bet – Displays Visual Best BetTop Federated Results – Displays the Top Federated result from the configured locationSocial CollaborationContact Details – Displays details about a contact for this page or site.Note Board – Enable users to leave short, publicly-viewable notes about this page.Organization Browser – This Web Part displays each person in the reporting chain in an interactive view optimized for browsing organization charts.Site Users – Use the Site Users Web Part to see a list of the site users and their online status.Tag Cloud – Displays the most popular subjects being tagged inside your organizationUser Tasks – Displays tasks that are assigned to the current user.What’s New – This Web part shows new information from specified lists and librariesWhereabouts – Use to display Whereabouts information.

Adding a OOB Webparts
For adding a OOB webpart to your SharePoint page you can follow the same steps mentioned in the “Adding a Webpart” section of Webpart OveriewPost.

One of the new additions to Microsoft’s SharePoint Server 2010 platform is the Chart Web Part (CWP), which allows you to create static and dynamic charts for your site without a line a code. One of the complaints from MOSS 2007 was that users wanted to be able to drop a chart onto their site to create dashboard or display information from Excel documents, or provide metrics to other users in a graphical way.

So now that the Chart Web Part is available, let see how we can use it. To drop a Chart Web Part on your page, go to Site Actions > Edit Page. From there, click “Insert” from the Editing Tools menu. The “Chart Web Part” is available under the “Business Data” category, then you can click on the CWP option and add to a content area.

Once added to the page, you will see “Data & Appearance” and “Advance Properties” options.

There are a couple of ways you can go once you click the “Data & Appearance” link. You can change the way that the chart will display under “Customize Your Chart” or change the data connection the chart by selecting “Connect Chart to Data” link.

The “Customize Your Chart” options will start with selecting the type of chart you’d like to have display your information. There are 2D and 3D chart types you can select and various sub-types of chart types to choose from.

Then click “Finish” and you have a web part on your page, but now we need to decide which data to use now that we’ve make look the way we want. To change the data source, click “Connect Chart to Data” and we’ll review the options available.

We can connect to another web part that has information that we need, maybe from another SharePoint list. We can connect directly to a list, the Business Data Catalog that contains your business system’s data or to Excel Services that has a spreadsheet you’d like to dynamically update in one location and pull into a dashboard. For this exercise, I will connect to a List, in this case, I’m going to select my “Help Desk Tickets” list.

Here is the information that is going to be contained in my chart:

I provide some information to enhance how the chart will display the data and by which fields the data could be grouped by.

The final result looks like this:

You can change some of the properties or styles to get the result you’d like, but you can see it’s pretty easy to add a chart (or charts) to your site with a little configuration. We could look at Excel Services or BDC data in the future, but the concept is the same.

When you create an Enterprise Search Center site collection as described in Create a Search Center site in SharePoint Server 2013, SharePoint 2013 creates a default search home page and a default search results page. In addition, several pages known as search verticals are also created. Search verticals are customized for searching specific content, such as People, Conversations, and Videos, and they display search results that are filtered and formatted for a specific content type or class.

The following pages are created in an Enterprise Search Center site collection:

default.aspx: the home page for the Search Center, and the page where end-users enter their queries.

results.aspx: the default search results page for the Search Center. It is also the search results page for the Everything search vertical.

peopleresults.aspx: the search results page for the People search vertical.

conversationresults.aspx: the search results page for the Conversations search vertical.

videoresults.aspx: the search results page for the Videos search vertical.

advanced.aspx: the search page where end-users can apply some restrictions to their search phrases — for example, limiting the search to an exact phrase.

These pages are located in the Pages library, and they contain Web Parts that you can customize to improve the end-user search experience. This article describes the Web Parts on these pages, and how you can configure the different Web Parts settings to improve how search results are displayed.

By default, the Web Parts on the search vertical pages (results.aspx, peopleresults.aspx, conversationresults.aspx, videoresults.aspx, advanced.aspx) are the same. However the query in the Search Results Web Part is configured differently for each search vertical page. For each search vertical page, the query in the Search Results Web Part is directed to a particular result source. This can be a result source that defines the search vertical or any result source that you want to direct queries to when you create a custom search vertical. For example, for the peopleresults.aspx search vertical page, the query in the Search Results Web Part is limited to the Local People Results (System) result source. For the videoresults.aspx search vertical page, the query in the Search Results Web Part is limited to the Local Video Results (System).

By default, the Search Box Web Part is used on the home page for the Search Center (default.aspx), and all search results pages (results.aspx, peopleresults.aspx, conversationresults.aspx, videoresults.aspx). By changing properties in the Search Box Web Part you can you can do the following:

Change the Web Part or page where the search results should be displayed — for example, a custom Search Results Web Part or a custom search results page.

Display links to a search preference page and an advanced search page.

Change the display template that is applied to the Web Part.

To configure the properties of a Search Box Web Part

Verify that the user account that performs this procedure is a member of the Designers SharePoint group on the Enterprise Search Center site.

On the Search Center site home page, click the Settings menu, and then click Edit Page.

In the Web Part, click the Search Box Web Part Menu arrow, and then click Edit Web Part.

In the Web Part tool pane, in the Properties for Search Box section, expand the Which search results page should queries be sent to section, and then do the following:

To display the settings that are defined on the Search Settings page, select the Use this site’s Search Settings check box.

To override the settings that are defined on the Search Settings page, clear the Use this site’s Search Settings check box, and then do the following:

To display search results in a Web Part on the page, in the section Send queries to other Web Parts on this page, select a Web Part.

Note:

If there are no other Web Parts on a page, search results will be sent to the search results page as specified on the Search Settings page.

To send queries to a custom search results page, select Send queries to a custom results page URL, and then type the URL of the custom search results page.

Note:

You can’t send queries to a custom search results page that uses a friendly URL.

In the Web Part tool pane, in the Properties for Search Box section, expand the Query Suggestions section, and then do the following:

To disable query suggestions, clear the Show suggestions check box.

To specify additional properties for query suggestions, change the values in the following fields:

Number of query suggestions: How many query suggestions to display.

Minimum number of characters: How many characters the user must type before query suggestions are displayed.

Suggestions delay (in milliseconds): How many milliseconds elapse before query suggestions are displayed.

Number of personal favorites: How many query suggestions are displayed to the user under the text Are you looking for these again? in the search results. These suggestions are based on search results that the user has clicked previously. To disable personal favorite results, clear the Show personal favorite results check box.

To turn on people name suggestions, select Show people name suggestions.

In the Web Part tool pane, in the Properties for Search Box section, expand the Settings section, and then do the following:

To show a link to a search preference page, select Show preferences link.

To show a link to an advanced search page, select Show advanced link, and then in the Advanced search page URL box, type the URL of the advanced search page that you want to link to.

To apply another display template, in the Search box control Display Template list, select the display template that you want to apply to the Web Part.

Select the Make the search box have focus when the page is loaded check box to make it possible for users to immediately type a query in the search box when the page is loaded without first having to click the search box. By default, this is selected.

In this post we will discuss how to populate a chart web part from a SharePoint list. Here I am using chart web part in SharePoint 2013. Though Microsoft removed chart web part, you can check this work around to make chart web part available in SharePoint 2013.

Here I have a SharePoint list name as “Course” which has 5 columns and the data are like below:

chart web part sharepoint2013

Here I want to show a chart (bar) and want to see in Sharepoint 2013 how many trained, novice, intermediate and expert people. Similarly for SharePoint 2010, Asp.net and C#.Net skills.

For this first add a chart web part to the page (Edit Page -> INSERT -> Web Part). Once you will put the chart it will appear like below. Save the page.

chart web part sharepoint2013

After that click on Data & Appearance. Then select Connect Chart To Data as shown in the fig below:

Connect chart to webpart sharepoint2013

In the next step select “Connect to a List” in the Choose a Data Source section. Then click on Next.

connect list chart webpart sharepoint2013

In the next step select the site and the list in the drop down.

In the next step it will show you the list and the data. Click Next.

The 4th Step Bind Chart to Data is an important step. Follow below instruction. Here

In the Series expand (click on +) Series Properties. Enter name, here I am putting based on my column names. It should be like below:

Series Name: Trained
Series Type: StackedColumn (From the drop down select the column).
Y Field: Trained (Select Trained Column from drop down)
X Field: Title (Remember this will be same for all series)

So it will appear like below:

series properties chart web part sharepoint2013

Then click on the + icon near series like below:

series properties add chart webpart sharepoint2013_6

Here also fill the series details like below:

Series Name: Novice
Series Type: StackedColumn (From the drop down select the column).
Y Field: Novice (Select Novice Column from drop down)
X Field: Title (Remember this will be same for all series).

So it will be appear like below:

series properties chart webpart sharepoint2013_7

Add all based on the columns. Here I added 4 for each columns (Trained, Novice, Intermediate and Expert).

Then click on Finish.

Now your chat will appear like below:

chart web part sharepoint2013_8

If you want to customize a bit like you want to show the count as well as a image in the top right corner follow below steps.

Here click on Data & Appearance, then click on Customize your chat.

Here select Stacked Column and click Next as shown in the fig below:

chart templates

You can set the width and Height of the chart web part. then click on Next.

The next step is very important, if you want to Show Legend then you chose Show Legend.

chart web part sharepoint2013_10

You can go to the Axis and Gridlines tab and if you do not want the Major Grid lines then you can deselect “Show Major Grid Lines” for both X and Y axis.

If you want to show the Labels then you can select the Label and click on Finish.

Microsoft introduced Chart Web Part in SharePoint 2010. It is a very useful web part to work with for different scenarios. But as Microsoft removed some of the 2010 features in SharePoint 2013, Chart web part is also removed by Microsoft in SharePoint 2013.

But still you can add the chart web part in SharePoint 2013. Follow below steps.

Edit the page and then go to the INSERT tab and then there click on Web Part. Then click on Upload a Web Part and then browser the file that we have unziped in Step-1 and click on Upload as shown in the fig below:

Step-3:

Then the Chat web part will come in the web part list, select the web part and click on OK. It will appear in the page as shown in the fig below: