Enumerate all properties of javascript context object in display templates in Sharepoint 2013

If you create custom display template e.g. for search result type, it is useful to know what properties are exposed in the javascript context object (ctx). It can be achived quite easy. In the html file of your display template write the following code:

   1: for (var p in ctx.CurrentItem)

   2: {

   3:     console.log(p + ":" + $getItemValue(ctx, p));

   4: }

After that when search result will show the item which corresponds to the result type, for which you specified custom display template, if you will open javascript console (F12 in IE and FF and select Console tab), you will see something like this:

   1: Rank:11.27 

   2: DocId:5367 

   3: WorkId:5367 

   4: Title:test123 

   5: Author:Developer 

   6: Size:0 

   7: Path:http://example.com/test/DispForm.aspx?ID=1 

   8: Description: 

   9: Write:Mon Jun 3 19:55:58 UTC+0300 2013 

  10: CollapsingStatus:0 

  11: HitHighlightedSummary: 

  12: HitHighlightedProperties:<HHTitle><c0>test123</c0></HHTitle><HHUrl>

  13: http://example.com/test/DispForm.aspx?ID=1</HHUrl><author hashh="0">Developer</author> 

  14: contentclass:STS_ListItem_GenericList 

  15: PictureThumbnailURL: 

  16: ServerRedirectedURL: 

  17: ServerRedirectedEmbedURL: 

  18: ServerRedirectedPreviewURL: 

  19: FileExtension:aspx 

  20: ContentTypeId:0x0100...

  21: ParentLink:http://example.com/test/AllItems.aspx 

  22: ViewsLifeTime: 

  23: ViewsRecent: 

  24: SectionNames: 

  25: SectionIndexes: 

  26: SiteLogo: 

  27: SiteDescription: 

  28: deeplinks: 

  29: importance: 

  30: SiteName:http://example.com

  31: IsDocument:No 

  32: LastModifiedTime:Monday, June 3, 2013 

  33: FileType: 

  34: IsContainer:No 

  35: WebTemplate: 

  36: SecondaryFileExtension: 

  37: docaclmeta: 

  38: OriginalPath:http://example.com/test/DispForm.aspx?ID=1 

  39: EditorOWSUSER:Developer 

  40: DisplayAuthor:Developer 

  41: ResultTypeIdList:38;6 

  42: PartitionId:0c37852b-34d0-418e-91c6-2ac25af4be5b 

  43: UrlZone:0 

  44: AAMEnabledManagedProperties:AttachmentURI;deeplinks;DefaultEncodingURL;ExternalMediaURL;HierarchyUrl;

  45: OrgParentUrls;OrgUrls;OriginalPath;ParentLink;Path;PictureThumbnailURL;PictureURL;PublishingImage;

  46: recommendedfor;ServerRedirectedEmbedURL;ServerRedirectedPreviewURL;ServerRedirectedURL;SiteLogo;

  47: SitePath;SPSiteURL;UserEncodingURL 

  48: ResultTypeId:38 

  49: RenderTemplateId:~sitecollection/_catalogs/masterpage/Display Templates/Search/Item_test.js 

  50: piSearchResultId:0_1 

  51: ParentTableReference:[object Object] 

  52: csr_id:ctl00_PlaceHolderMain_ctl01_csr2_item 

This information will help you to create display template.

How to test Sharepoint sites on iPad, iPhone and other mobile devices

In Sharepoint development we often use VMWare images for development environments. In most of the projects in my practice we used this model. It is useful when there are configured ready for use development images, so developers only need to get the image and start to work. But how we can test sites which are developed on the VMWare images on mobile devices? At the current moment role of mobile devices in web development is growing and Sharepoint 2013 reflects this fact with new features like device channels for improving user experience for using sites on smartphones or tablets. Responsive design becomes more and more popular, and it became a trend in the public web sites development. If some time ago the usual situation was that site has good design for desktop browser, but poor design for mobile, then now I already saw sites which looks nice on mobile and awful on desktop. Fun example, but it is true.

If you develop new site on Sharepoint 2013 (or any other version of Sharepoint) and want to test it against real devices (not simulators), there are several ways:

1. configure DNS – add A record like foo.example.com which points to some external IP address of your organization (you need to use IP address of organization because in most cases in our daily work we use organization network and domain) and then ask administrators to configure proxy servers to forward requests for this domain name to your development image. It is possible, but has risks, especially if you are working in big organization and this process requires approval on several levels;
2. setup builds on separate build server with configured DNS as in previous step. But it is also problematic when during development you need to test small changes. Build can take time, so deploying changes to another server will make the process slower;
3. configure ports forwarding and use IP address instead of domain name for testing.

In this post I will describe how to make it using 2nd way.

Step 1. Connect to the WiFi network (guest network) of your organization.

If you want to test your dev sites on mobile devices you need to connect your host machine to the WiFi network (I don’t know is it possible to use LAN e.g. on iPhone, but knowing how technologies are growing, it won’t be surprise for me if there is some gadget which allows to do that). Many organizations have guest networks with limited access and we may use this network for our need.

Step 2. Get IP address of the host in the guest network.

Once you have connected to the WiFi get IP address of the host machine using the ipconfig command. You need to copy “IPv4 Address” property of the WiFi connection. For our example suppose that it will be the following:

10.20.30.40

Step 3. Allow incoming requests to 81 port on the host and guest.

For testing it is simpler to use some port which differs from default http 80 port, which can be used on the host for other purposes. In our example we will use port 81. In order to allow connections using this port go to Administrative tools > Windows Firewall with Advanced Security > Inbound Rules > New Rule:

On the 1st step choose “Port” and click Next:

On 2nd step add 81 to “Specify local ports”:

On 3rd step leave “Allow connection”:

On the 4th step leave all options checked:

On the last 5th step specify name for the new rule:

Make the same configuration on guest.

Step 4. Configure port forwarding in VMWare virtual network editor.

In order to configure port forwarding your virtual image should use NAT network connection. Go to VMWare > Edit > Virtual network editor, choose the network connection used by your image and click NAT Settings button. In the opened window click Add under “Port Forwarding”:

In the opened “Map Incoming Port” window specify the following values:

• Host port: 81 – port which will be used for accessing the site from mobile device;
• Type: TCP;
• Virtual machine IP address: 11.22.33:44 – here you should specify IP address of the virtual image. You may check it using ipconfig inside the guest image. For our example we will assume that it will be 11.22.33.44;
• Virtual machine port: 81 – it is also better to use different than default 80 port on the guest image, because when you setup port forwarding for port 80 in VMWare, you loose internet connection on the guest.

Window with values should look like this after all:

After that click Ok on all windows so changes will take effect.

Step 5. Setup bindings in IIS site.

Inside virtual image go to IIS manager, select your Sharepoint web site, click Bindings > Add:

In IP address you need to specify IP address of the virtual images, the same as was specified on step 4 in the “Map Incoming Ports” window. Port should be set to 81: also the same which was used on steps 3 and 4.

Step 6. Add alternate access mappings in Central Administration.

Go to CA > Configure alternate access mappings and filter AAM collection for your Sharepoint site. Then click “Edit public URLs”. In some free zone add the following URL: http://10.20.30.40:81 (i.e. use IP address of the host as it will be used for opening the site in mobile device’s browser):

After that click “Add Internal URLs” and add URL http://11.22.33.44:81 (i.e. use IP address of guest system here) for zone where you specified public URL above – Intranet in our example. So alternate access mappings should look like this:

After that get your iPhone, connect it to the guest WiFi, enter http://10.20.30.40:81 in the browser and test your Sharepoint site in real mobile browser. Hope this guide will help you in development of sites with great user experience for mobile devices.

Create custom actions menu in Sharepoint

As you now in Sharepoint there is OTB Site actions menu available which contains links on administrative pages (e.g. Site settings, People and Groups, etc.), links for create and update page, and others. This menu is security trimmed and by default is placed on the masterpage. It is shown via javascript to end users. It is possible to add new links to OTB Site actions by activating of custom feature with CustomAction element in elements manifest (see example e.g. here). But what if we need to create our own custom independent menu and place it to the same masterpage? It would be useful to reuse standard functionality if you need to create custom menu which should look like OTB menu.

In order to do it we will reuse SiteActions control (Sharepoint uses it for Site actions menu). We need to create inheritor and override its Text property in order to show custom title:

   1: public class CustomSiteActions : SiteActions

   2: {

   3:     public override string Text

   4:     {

   5:         get

   6:         {

   7:             return "Custom Site Actions";

   8:         }

   9:     }

  10: }

After that we can add this control to the masterpage and define custom menu items:

   1: <uc:CustomSiteActions runat="server" id="customSiteActions"

   2:     PrefixHtml="<div><div>"

   3:     SuffixHtml="</div></div>"

   4:     MenuNotVisibleHtml=" ">

   5:     <CustomTemplate>

   6:         <SharePoint:FeatureMenuTemplate runat="server"

   7:             FeatureScope="Site"

   8:             Location="CustomSiteActions"

   9:             GroupId="CustomSiteActionsGroup"

  10:             UseShortId="true">

  11:             <SharePoint:MenuItemTemplate runat="server" id="Item1"

  12:                 Text="Foo"

  13:                 MenuGroupId="100"

  14:                 Sequence="100"

  15:                 ClientOnClickNavigateUrl="~site/_layouts/test/example1.aspx" />

  16:             <SharePoint:MenuItemTemplate runat="server" id="Item1"

  17:                 Text="Bar"

  18:                 MenuGroupId="100"

  19:                 Sequence="200"

  20:                 ClientOnClickNavigateUrl="~site/_layouts/test/example2.aspx" />

  21:         </SharePoint:FeatureMenuTemplate>

  22:     </CustomTemplate>

  23: </uc:CustomSiteActions>

Note that we changed Location and GroupId properties to the custom values. They can be used in order to add custom actions to the custom site actions menu via features (by the same way as they are added to the standard menu). With this technique you will be able to create custom actions menu which looks like OTB Site actions.

Use App_LocalResources in visual web parts

In this post I will describe how to use standard ASP.Net technique for adding localized literals to the UI. When you create visual web part in VS 2010 Sharepoint project several files are added to the project:

• Web part class
• User control layout file (ascx)
• Codebehind for user control
• Sharepoint files for provisioning web part to site collection

If you will package project to wsp file and check structure inside it (you can also check it inside pkg subfolder in your project folder), you will find that ascx file will be copied to 14/ControlTemplates sub folder: in our example it is 14/ControlTemplates/SharePointProject1/VisualWebPart1. This is exactly the path which is used in LoadControl() method in web part class:

   1: public class VisualWebPart1 : WebPart

   2: {

   3:     private const string _ascxPath =

   4:         @"~/_CONTROLTEMPLATES/SharePointProject1/VisualWebPart1/VisualWebPart1UserControl.ascx";

   5:  

   6:     protected override void CreateChildControls()

   7:     {

   8:         Control control = Page.LoadControl(_ascxPath);

   9:         Controls.Add(control);

  10:     }

  11: }

In order to use standard ASP.Net local resources in ascx file we need to create App_LocalResources sub folder in the 14/ControlTemplates/SharePointProject1/VisualWebPart1 folder and put resx file with the following name: VisualWebPart1UserControl.ascx.resx. After this we can add localized literals into user control like this using standard ASP.Net convention:

   1: <asp:Label runat="server" Text="<%$Resources:Title%>" />

How to add App_LocalResources to the VS Sharepoint 2010 project in order to copy it to the VisualWebPart1 folder after provisioning? Of course we can add Sharepoint mapped folder to the project manually, then create VisualWebPart1 folder in it and put App_LocalResources there:

When we will package our wsp VS will merge user control and App_LocalResources into single folder. However the problem with this approach is that files are spread across project: web parts files are stored in one place while resx files for web parts in another.

VS allows to add local resources directly into visual web part project item:

After that you need to make extra step: in the properties of resx file set Deployment Type to TemplateFile and change Path under Deployment Location to the folder of your control (in our example it is ControlTemplates/SharePointProject1/VisualWebPart1/App_LocalResources):

With this approach all related files will be located in the same place in the project and will be copied to the correct folder during provisioning.

Create stretching rounded corners background for web part titles in Sharepoint using CSS2

You most probably know that with CSS3 it became easy to crate nice-looking rectangle areas (e.g. for buttons) with rounded corners and gradient. However in Sharepoint development we are often limited to enterprise requirements which makes impossible using of CSS3 (hopefully during last several years I didn’t have IE6 compatibility requirements, but IE7 is still often mentioned). In this post I will show how to create stretching rounded corners background for web part titles in Sharepoint 2010. In the end of article I will also show how to use it for Sharepoint 2007.

Without CSS3 we have to use images with rounded corners. For this example I used online http://css-tricks.com/examples/ButtonMaker for generating of the nice-looking button and then made images from screenshot. We will need 2 images of the same height:

left:

and right:

Note that left image should be wider (for this example I trimmed it to fit into blog layout) – it will be used when user stretches browser window horizontally.

After that put the following selectors into your alternate css file:

   1: tr.ms-WPHeader > td { height: 46px; }

   2: tr.ms-WPHeader td.ms-WPHeaderTd { background: url(left.png) no-repeat left top; }

   3: tr.ms-WPHeader td.ms-WPHeaderTd + td { background: url(right.png) no-repeat right top; }

   4: .ms-WPHeader td.ms-WPHeaderTd span { color: white; }

(you may need to fix urls to the images – according to the location of css file it may be e.g. Style library). After you will save changes your web parts will look like this:

And the same in edit mode:

In Sharepoint 2007 css will be slightly different, but idea remains the same. There is no “ms-WPHeaderTd” class so we need to use first-child pseudo element:

   1: tr.ms-WPHeader > td { height: 46px; 

   2: tr.ms-WPHeader td:first-child { background: url(left.png) no-repeat left top; }

   3: tr.ms-WPHeader td:first-child + td { background: url(right.png) no-repeat right top; }

   4: tr.ms-WPHeader span { color: white; }

Using this technique you will be able to decorate your web parts titles with CSS3-style rounded corners background.

Use Sharepoint 2007 sites look and feel in Sharepoint 2010

During upgrade from Sharepoint 2007 to Sharepoint 2010 you may want to preserve look and feel of some of your sites in order to use previous UI version. Most of changes in Sharepoint 2010 were made in UI:

Sharepoint 2010 uses ribbons in UI and it makes its look and feel similar to other Office products. However in your business web application you may still want to have old UI used in Sharepoint 2007. This is quite easy to do. Lets create OTB Publishing Portal site on Sharepoint 2010. Initially it will have new ribbon-style design:

Now in order to revert UI look and feel to the Sharepoint 2007 style we need to run the following program:

   1: using (var site = new SPSite("http://example.com"))

   2: {

   3:     site.RootWeb.UIVersion = 3;

   4:     site.RootWeb.Update();

   5: }

After that the same site will look like this:

No ribbons, no new style – we are back to Sharepoint 2007 now. After playing with old UI lets return back to the modern version:

   1: using (var site = new SPSite("http://example.com"))

   2: {

   3:     site.RootWeb.UIVersion = 4;

   4:     site.RootWeb.Update();

   5: }

And our site again has new UI version with ribbons.