How to: make your SharePoint Content Search Web Part results open as a fancybox or “lightbox”
If you worked with the content search web part you probably know that it has several rendering templates available: List, List with Paging, Slideshow
All of these will show you just that: a list which will take you to a page where the content is coming from.
In my case, my customer wanted to see the result right on the page where they user is at, in other words – have a fancybox or lightbox show the content like this:
Let’s take a look how this can be achieved with minimal effort.
First of, I’ll be using SharePoint Online tenant to demo this but same assumptions can be applied for on premises SP2013.
1. Add a CSWP to the page … easy 
2. Download free fancybox plugin (this is the last place I’ve seen it: http://fancyapps.com/fancybox/)
2.1 This might be obvious but be aware that fancybox is using jQuery so you’ll need to download and reference jQuery in your masterpage in order for the fancybox to work – so yea, just making sure you’ve done that.
3. Extract the contents of the ZIP and upload the contents of the source directory which looks like this:
To your style library, in my case: /Style Library/Assets/scripts/fancybox
3.1 Make sure you check in all of these file otherwise they will appear not found to any other users except you and that will break the functionality.
3.2 Also make sure you reference fancybox in your masterpage just below jquery as follows (make sure the URLs match your structure):
<script type="text/javascript" src="<asp:Literal runat='server' Text='<%$SPUrl:~sitecollection/Style Library/assets/scripts/fancybox/jquery.fancybox.js%>' />"></script>
<SharePoint:CssRegistration Name="<%$SPUrl:~sitecollection/Style Library/assets/scripts/fancybox/jquery.fancybox.css%>" runat="server" />
3. Open your site in SharePoint Designer and navigate to: All files/_catalogs/masterpage/Display Templates/Content Web Parts
4. Make a copy of Item_TwoLines.html and rename newly copied file to something else, in my case it’s Item_Fancybox.html
5. Check out the new file, open Item_Fancybox.html and add the following content to it:
5.1 Find this section
<title>Two lines</title>
and replace it with
<title>Fancybox</title>
5.2 Find this section
<div id="TwoLines">
and replace it with
<div id="FancyboxLines">
5.3 Find this piece of code in the “FancyboxLines” section
var line2Id = encodedId + "line2";
and add the following chunk of code right below it
$('.fancybox').fancybox(); // fancybox
This section here basically initializes the fancybox UI with some of the parameters
5.4 Find the following piece of HTML
<div class="cbs-Item" id="_#= containerId =#_" data-displaytemplate="Item2Lines"<
Here is the picture to clarify:
and replace the entire div with it’s whole content with the following piece:
<dd class="fancyboxItem">
<a href="#content-div-_#= pictureLinkId =#_" class="fancybox">_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_</a>
<div style="display: none;">
<div id="content-div-_#= pictureLinkId =#_">
<p><strong>_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_</strong></p>
<br/>
<p>_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_</p>
</div>
</div>
<div style="clear:both"></div>
</dd>
This section here maps line1 and line2 from the web part properties to the structure in the fancybox.
This section here: <div style="display: none;"> is really the content that will appear in the fancybox flyout so if you need to display any other content for example the author name – you can output it there provided you get a hold of it through properties mapped to the CSWP.
6. Check in and publish your Item_Fancybox.html
7. Navigate back to your site and add a new (or use existing) instance of the Content Search Web Part.
7.1 Make sure that both Line 1 and Line 2 properties are mapped to correct fields so that you get the data you need displayed in a fancybox. Also, above example uses both Line 1 and Line 2 – so you must associate both of the drop downs otherwise you will get an error due to my poor error handling in this example code
8. In the web part properties, change the rendering template for the Item to Fancybox as shown below:
9. Save the web part properties and the page and ….
voila!
Enjoy!
Important steps to take if you’re running multilingual variations in SharePoint Online
The other day I described an issue where all of your Web Designer Galleries disappear. That article also suggested how to address this issue but the solution was short terms for me as I got the same problem next morning exactly at 10AM, and the morning after, and after … luckily I was able to “fix” the issue with my handy PowerShell script I wrote in the previous post. But what is the root cause?!?!?!
Well, the root cause is this;
-My site is running English and French variations
-This created two sub sites under root, one for English and one for French
The key to further discovery was the fact that the issue occurred exactly at the same time, therefore it must be a timer job.
Then someone sent me this article: Turn scripting capabilities on and off
Which basically says that there is this new cool feature allowing you to disable whole bunch of authoring functionality on the site with a simple toggle. It also says that this runs as a scheduled process every 24 hours.
You guessed it … I went down and turned off the default setting and things didn’t break the next morning.
1. Go to Admin Center | Settings:
2. Next turn off the Self-Service-Created sites toggle to “Allow”
Turns out that variation sites are Self-Service-Created sites and this settings messes them up. So, we’re down to either not using this new setting or not using variations. Well there is always an option for MS to fix the issue – but I’m not going to hold my breath for that – however, I have reported the issue to Premier Support so we might be getting some action.
Enjoy!
Want to update your SharePoint app site logo without code?
With SharePoint 2013 and SPO, you get apps and often apps have their app site.
When you update your site custom look – all the apps get the same look and feel, there is just one problem – the logo you update on the root site doesn’t get updated on the app site.
Here is my custom logo on the root site:
Here is how does one of the app site look like:
There is no settings menu to change that but here is what works:
1. Navigate to the root of your site and click on “Title, Logo ….” under “Look and Feel”
2. Copy the URL of the settings page (second part as shown below) … /_layouts/15/prjsetng.aspx
3. Change the logo on the page there and save the settings, result ….
Now your apps match your site, duh 
Enjoy!
Quickly turning your Content Query Web Part display into a jQuery tabs
In summary, the goal is to turn something that looks like this:
to this:
There are many ways to do it, and I very deliberately said “quickly” in the title of this post, implying that you won’t need to mock around XSL of the Content Query Web Part.
Here are the steps:
1. First we’ll create a list which is going to hold our data
The list data structure will be:
- Title – Single line of text
- Link Description – Single line of text
- Link Grouping – Single line of text
- Link – Hyperlink or Picture
Here is how this list looks like, hopefully yours is more useful than my list of cities:
2. Next, we add a Content Query Web Part to the Page with the following configuration:
- Source set to my list
- Grouping set of my special column which holds groups (countries)
- Display are defaults with few columns you may want to display
3. Save the configuration and verify that your display looks similar to this:
4. Add a Script Editor Web Part on the page where your content query resides with the following code in it:
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function() {
var tabCount = 0;
$(".dfwp-item div.groupheader").each(function() {
$("#tabs ul").append("<li><a href='#tabs-"+tabCount+"'>" + $(this).text
()+"</a></li>");
$("#tabs").append("<div id='tabs-"+tabCount+"'>"+"<p>"+$(this).parent
().find("ul").html()+"</p></div>");
$(this).parent().hide();
tabCount = tabCount+1;
});
$("#tabs").tabs();
});
</script>
<div id="tabs">
<ul>
</ul>
</div>
5. Save the web part and the page and ….
6. If you want to be a good practices developer – you need to download jQuery tabs and upload jquery and jquery ui artifacts into the library on your SharePoint site rather than referencing them as I did from https://code.jquery.com/ …
What the code above does is that it takes the content of the Content Query Web Part and wires it into tabs; then hides the original CQWP content.
There, wasn’t that easy?
Enjoy!
Have your Web Designer Galleries been all of the sudden gone in SharePoint Online?
I ran into a really annoying issue recently, here were the symptoms:
-Users with full control and even site collection administrators were not able to add content editor web parts onto pages
-Administrators were not able to see “Web Designer Galleries” in their site collection settings
If you have publishing features enabled – then this section was showing up with the only option of “Master pages and page layouts”
I won’t spend much time explaining how I got to the solution – I will just give you the solution and then add some speculation at the end on what might have caused this.
If you’re using SharePoint Online as I was using run the following commands in SharePoint Online Management Shell:
$userName = "myusername@mytenant.com"
$password = "MyPassword"
$siteCollectionUrl = "https://mytenant.sharepoint.com"
$siteAdminUrl = "https://mytenant-admin.sharepoint.com"
$securePassword = ConvertTo-SecureString $password -AsPlainText -force
$O365Credential = New-Object System.Management.Automation.PsCredential($username, $securePassword)
Connect-SPOService -url $siteAdminUrl -Credential $O365Credential
$rootsite = Get-SPOSite("https://mytenant.sharepoint.com")
$rootsite.DenyAddAndCustomizePages
If the response you get from the last command is “Unknown” or “true”
Then run this command:
Set-SPOSite -Identity "https://mytenant.sharepoint.com" -DenyAddAndCustomizePages $false
Here is a bit more details:
First off, this post (http://community.office365.com/themes/groups/generic/forums/thread.aspx?ForumID=154&ForumThreadID=259506&GroupKeys=en-us/) sent to me by Fred Downing got me thinking … what if Microsoft intrioduced a new property on a site collection and didn’t set the default – so the code that runs and checks for property block update if the property is not set to $true.
After digging around and finding the undocumented property, I switched it’s value and it worked.
Hopefully it will save someone long hours, Enjoy!
Important tips on customizing SharePoint Online Suite Bar
There is a lot of debate on whether SPO suite bar should be customized or not … this video puts things into a single, very important tip – best viewed in HD … enjoy!
Frequent Suite Bar customization nightmares in SharePoint Online are here to stay
Today on a SharePoint Branding webinar (thanks everyone who could attend, btw), among other things we talked about customizations to SharePoint Online component such as Suite Bar and how unreliable this can be. Well, perfect timing, to prove this point, I’ve noticed subtle Suite Bar change in Excel Online (part of SPO).
Before the suite bar looked pretty useless and thick for Excel Online and other web apps; now it looks like you can change the mame of the file right the suite bar just by clicking on it; you can also share the file:
Those are pretty handy functions but I bet there is markup change; luckily this change is not the same in regular sites such as team sites etc, so no need to panic. TO prove this, I’ve checked the DOM and here is how it looks in Web Apps:
Which is completely different from team site suite bar:
Moral of the story: stop customizing Suite Bar people :)!
Free Webinar on SharePoint Branding
Even if you built SharePoint On-Premise sites before, coming to SharePoint Online world you still may have a lot of questions, like for example:
Do you need VS for SharePoint Branding?
or
What are the most difficult elements to style in SPO?
Can you style SPO Access App?
Does SPO load jQuery automatically?
Can you use jQuery UI in SPO without problems?
Can you style list forms in SPO?
Should you pick CQWP over CSWP because it’s easier to style?
How do you load custom JS so it doesn’t break the page?
What’s the problem with SPO Suite Bar?
Can you apply custom looks in a way SharePoint themes used to work?
When do you use masterpages over custom look?
Can you have sub sites in SPO public site?
Can you have custom Rich Text Editor (RTE) styles in SPO?
Can you package and provision branding as an app?
Can you have mega menu is SharePoint?
Do I need to know .net as SPO developer?
Do I need to be a Power User before I can start branding SharePoint Online?
What tools do I need to get started with branding?
Do I need a server or can I brand SPO online?
Uhmm, I forgot that I’m here to answer questions …. so why don’t you join
@Drisgill, @JohnRossJr & @spentsarsky and ask away https://www1.gotomeeting.com/pjoin/509215617/105210085
Oh did I mentioned it’s free!
See you there!
Gearing up for SharePoint Online project
Having several different SharePoint Online projects completed over the last couple of … years really; several bigger ones still ongoing, I thought I would share few things with you that might help you from a technical perspective to avoid things that can’t be done.
In no particular order – here they come:
1. SharePoint Apps are not your typical web parts, there are limitations related to functionality and branding
Ok, so you still have web parts in SharePoint Online but everyone out there says “no more web parts, build only apps”. So you might think, well apps are new web parts. Not quite.
Some of the limitations of SharePoint hosted apps include:
-Only client code is supported in apps
-Where you need it or not – each app gets an app site
-Each app needs to request set of permissions which users just allow otherwise you app won’t work
-Apps parts in apps run on host sites as iframes – so you can’t access or manipulate DOM of a parent
2. Be careful with promised custom functionality in your workflows, you are limited to out of the box workflow actions
SharePoint Online allows you to build workflows in SharePoint Designer – this is old news. However, you can also build workflows in Visual Studio and deploy it to SharePoint Online; just use the Visual Studio 2013 workflow template. The limitations of such workflows are to actions already deployed within SharePoint Online. In other words, you can’t run your own custom actions. Having said that, out of the box actions are quite extensible and there is a lot you can achieve.
Be careful when promising your customers that you can run out of the box workflow on the app site – limitations on that site break workflow initiation even for out of the box workflows
3. Sites created by apps (aka app sites) are limited in functionality, for example tools such as SharePoint Designer and many 3rd party migration tools are not able to connect to them.
Despite the fact that apps sites should be just sites – they have a limited functionality so make sure you test your typical assumptions and test scenarios since some of them may fail. Here are few examples:
-Connecting to an app with SharePoint Designer Fails
-Many third party migration tools are not able to connect to the app site to deploy or read data
-Limited workflow initiation functionality for out of the box workflows
4. Deployment of site artifacts (master pages, layouts, images) should be done with Sandbox Solution; using apps makes it clunky.
Even though there is a theoretical option to deploy your branding and other site artifacts (master pages, content type etc) to a host/parent site using app framework – due to lack of proper support in apps to deploy those artifacts, practical implementation is beyond reasonable.
5. Have old PowerShell to deploy and configure your solutions to SP On Premise? reusing it for SPO will require tweaking
Many of us use automation to deploy site artifacts, solutions etc; I have quite a few PowerShell script that do a lot of magic in SharePoint on-premises. Don’t assume those will work seamlessly in SharePoint Online. Test them, there is a very high chance you may need to do some tweaking. In some cases, functionality is not going to be supported. The reason being, is that SharePoint Online supports Remote PowerShell which has a limited subset of functionality.
6. Be careful with customizing SPO core elements: Suite Bar, navigation, etc – things tend to break when MS pushes out an update
Suite Bar, showing on the very top of any SharePoint Online site is by far the most dangerous place to put your customization into. Many customers will ask you to add their custom links, remove out of the box links and many other requests. Most of such customizations may work at first, but there is a very high risk of this functionality breaking when Microsoft updates UI and Suite Bar is their favorite place from my experience.
I have had several instances when Suite Bar HTML rendering was changed resulting in anything that relies on it break and cause multiple errors on the page. Microsoft doesn’t provide any release schedule on such elements so you might get a nasty surprise one evening. Therefore, best is to stay away from customizing core elements such as ribbon and suite bar in SharePoint Online.
7. Your SPO tenant shares some services with others – remember that when creating solution that use search, user profile, translation etc
There are many clever solutions out there which use Managed Metadata, User Profile and Search Service. Remember that those services run in multitenant environment and latency of those is significant comparing to on-premises system.
To give you some examples:
-Search crawl can take several hours for the new search properties to be picked up
-User profiles take a while to be created manually; even the user profile property page takes few minutes to load up
-Multilingual capability in SharePoint Online which uses timer job can take up to an hour to create a translation package depending on the volume of pages
8. Avoid big bets on solutions that are not officially supported since you never know when those will be officially discontinued (example is BCS support for Kiosk users)
SharePoint Online is evolving and licensing is evolving with it. Depending on how you put together your solution – you may want to sell your customer certain level of licensing (say kiosk user license) based on availability of certain features (such as BCS) when tested the product. Although some features are available, licensing clause may explicitly or implicitly say otherwise. Avoid solutions which are built on limited availability of some features, especially if there are strong indications those features should not be there. You never want to have a core feature to disappear one day because technical hole has been patched and now you have hundreds of thousands of disappointed users.
9. Remember, the storage is now in the cloud: test migration of large volumes of data – you might need to migrate weeks worth of data without realizing it initially
This lessons learnt speaks for itself – when migrating – don’t assume this is going to be fast. Even the most ingenious migration tools out there can’t do much when it comes to transferring data across internet. Test your migration and establish baseline.
There are of course may more lessons and depending on the type of the solution you’re building – you might find several more. Above are the most common when building typical intranet or extranet solution and I hope it will save time during planning and execution of your next SharePoint Online project.
Enjoy!
