HTML5 Tag not working in Internet Explorer

While working on a SharePoint 2013 branding job we noticed the layout of some pages was off only in Internet Explorer (10 and 11). We used various new HTML5 semantic elements like main, section and article while the final portal would run on Internet Explorer 11. To our suprise we found that the <main> element as a main container of the Page Layout was not working with max-width of a centered Page Layout.

After some searching on the web I found that all HTML5 semantic elements are supported by all modern browsers except for one little company called Microsoft that supports all elements except for the main element. Brilliant.

http://caniuse.com/#search=main

image

Does not include support for the <main> element.

Solution: main {display: block; }

SharePoint Branding Trick Not Affecting OOTB Dialogs

Use this prefix for elements you want to style without affecting the SharePoint OOTB dialog elements.

html:not(.ms-dialog) {}

Example:

To change the background of the #s4-workspace use html:not(.ms-dialog) #s4-workspace { background: lime }

http://bastiaanjacobs.nl/wp-content/uploads/2015/09/not-dialog.png

 

 

Query Rules and Branding Search

A cool new SharePoint 2013 feature is the Search Query Rule where you can build statements that allow you to conditionally promote important results and show blocks of additional results.

In this post I will:

  • set up a simple Search Query Rule;
  • explain Result Blocks and Groups;
  • show what we can do with Groups in Display Templates.
  • make the look and feel somewhat more attractive.

Set up a simple Search Query Rule

Via the Site Settings > Search Query Rules (under Site Collection Administration) we can add new Search Query Rules. Choose a Content Source (context) for the rules to apply on. In this case I will choose the Local SharePoint Results. You will see SharePoint already provided some rules for e.g. Site and Image results. Choose New Query Rule.

SearchQueryRule

 

In this case we only add a Result Block that will show us some extra results while searching. For additional People results you can configure the Result Block to search in the Local People Results Content Source. Mind the Group Display Template is c Default Group instead of the Out of the Box Group Display Template Default Group. This new Group Display Template is a modified copy of the OOTB one and will be used for branding the additional results later on.

EditResultBlock

 

Give the Rule a name like “People Highlight” and click Save. We now have created a extra Search Query Rule that will give us additional People results when the Local SharePoint Results is used.

ResultBlock

 

Like many articles inlcuding the MSDN SharePoint 2013 Design Manager display templates (https://msdn.microsoft.com/en-us/library/office/jj945138.aspx) talk about Control and Item Display Templates. What not many people realize is that you have another level that is not really manageable via the UI, Groups. Note that the data-querryruleid matches the Search Query Rule ID we just created. The first Group is the default core results. ms-srch-group-border is shown in the previous image.

GroupDOM

 

Rendering the Groups will be done with the Search Query Rules and Core Results all as separated Groups. Of course this is not ideal when the customer asks something like this layout for their Local SharePoint Results. This is where the c Default Group Display Template can be useful.
GroupsLayout

Find the following line:
<div id=”_#= $htmlEncode(groupId) =#_” name=”Group” class=”ms-srch-group _#= markerCSS =#_” data-queryruleid=”_#= $htmlEncode(queryRuleId) =#_”>

and change it to:
<div id=”_#= $htmlEncode(groupId) =#_” name=”Group” class=”rightcolumn ms-srch-group _#= markerCSS =#_” data-queryruleid=”_#= $htmlEncode(queryRuleId) =#_”>

 

The rightcolumn class will let the Search Query Rule Group differ from the default Groups. With a short script in the c Control_Searchresults (copy from Control_Searchresults) these rightcolumn groups can be wrapped around with a parent DIV element for easier branding. col-6 in this case will float the rightcolumn Groups to the right side with a width of 50%. The left side of 50% will be filled with the Core Search Results.

WrapGroupsParent

 

The changed HTML for the Search Query Rule Result Block now looks like this:

WrapGroupsParentDOM

 

The final result is a cool looking results page where individual Groups can easily be styled. For example the first right column can be given a different background color so it will stand out with .rightcolumn:nth-child(1).

endResult

RESTcall

SharePoint 2013 REST jQuery Slideshow

After the SharePoint 2010 Slideshow I searched for a better solution for SharePoint 2013. I found a lot of Slideshow solutions still using SOAP calls.

The better solution in this case (see announcement below) was creating a solution based on the new SharePoint 2013 REST API.

API sets

“Two API sets are still supported in the SharePoint 2013 framework for backward compatibility, but we recommend that you not use them for new projects: the ASP.NET (asmx) web services, and direct Remote Procedure Calls (RPC) calls to the owssvr.dll file”

With 3 simple steps and minimal code we can create a cool slider.

  • Create a Picture Library

    Create a SharePoint 2013 picture library and name it “Banners”

  • Add code

    Add the REST call and plugin code to your Page Layout

  • Customize

    Style/add content however you want!

This is the slider we want to go for, as seen on http://www.slidesjs.com

Take a look at the following demo:

OK, let’s start!

  • Create a Picture Library

    Create a SharePoint 2013 picture library and name it “Banners”

Add an app > Picture Library > Name it “Banners” > Add some images

The result should be the following:

  • Add code

    Add the REST call and plugin code to your Page Layout

First add the placeholder for the append images code

Now we can add the REST call to the “Banners” Picture Library and run the slidesjs plugin

Copy and paste : )


jQuery(document).ready(function() {
var basePath = "/_api/";
jQuery.ajax({
url: basePath + "lists/GetByTitle('Banners')/items?$select=EncodedAbsUrl,Title",
type: "GET",
headers: { "Accept": "application/json;odata=verbose" },
success: function (data) {
//script to build UI HERE
jQuery.each(data.d.results, function (index, value) {
jQuery("#slides").append("<img src='" + value.EncodedAbsUrl + "'" + " alt='" + value.Title + "'/>");
});
jQuery(function () {
jQuery('#slides').slidesjs({
play: {
active: true,
auto: true,
interval: 5000,
swap: true
}
});
});
},
error: function (data) {
//output error HERE
alert(data.statusText);
}
});
});

Note

Make sure you download the jquery.slides.min.js from http://www.slidesjs.com or here and reference it before all the other code

Now,

  • Customize

    Style/add content however you want!

Good luck!