Breadcrumb in SharePoint 2013

Estruyf has an excellent post on using the Suite Bar for Breadcrumb. In my case I needed it for my SharePoint Online (O365) project and I was using Starter Master Pages by Randy Drisgrill.

The below are some tweaks that I did to get it working:

The below control in the master page generates the Ribbon and the Suite Bar

<PublishingRibbon:PublishingRibbon runat="server" />

With limited support for PowerShell in SharePoint Online, I instead used Estruvf's JS code and used it my MasterPage. I updated the below lines:

From:

if (_spPageContextInfo.pageListId.toUpperCase() == ctx.listName.toUpperCase()) {

To:

if (_spPageContextInfo.pageListId.toUpperCase() == ctx.listName.toUpperCase() || _spPageContextInfo.pageListId.substring(1, _spPageContextInfo.pageListId.length - 1).toUpperCase() == ctx.listName.toUpperCase()) {

to show breadcrumbs for Calendars.

From:

this.elm.innerHTML = this.breadcrumb;

to:

For SharePoint Online: $('#suiteBrandingBox').text(this.breadcrumb);  
For SharePoint 2013:   $('#ms-core-brandingText').text(this.breadcrumb);




The suiteBrandingBox is generated by the PublishingRibbon control, 


and lastly I didn't need to show the Home site, I included the following in the onQuerySuccess function (parentWeb)

if (this.parentweb.get_serverRelativeUrl() != "/")


HTH

Provisioning TermSets/Terms to Terms Store from Apps

I was reading Deploying Managed Metadata Fields by Luis Manez, in the blog he mentions about creating TermSets and Terms with PowerShell. I couldn't get it working and instead created an APP to provision the TermSets and Terms.

Below are brief steps:

1. Create a "App for SharePoint 2013" Project (SharePoint-hosted)

2. Open AppMainifest.xml and set the Permissions

3. below is the js code



call the InitiateTaxonomy from the onGetUserNameSuccess method.

4. Deploy the app and verify by navigating to the Term Store Management.

Note: I used the publishing site template, the Site Collection was already created.

Tiles view with Client Side Rendering

In my previous post I wrote about Tiles view with CQWP. You can also achieve this using Client Side Rendering (CSR examples by Wesley).

I wanted my custom list to have Tiles view:

I created a Javascript Display Template file & uploaded to the masterpage gallery and set the JS Link in the Miscellaneous section.

Below is the sample CSR code (update the styles..):



CSS:



Note: I have the DisForm hard coded, I couldn't find a way to get the DisplayUrl property like in REST. I shall update this when I come across a better way.

Output: