FEED Validator

for Atom and RSS and KML

Congratulations!

This is a valid RSS feed.

Recommendations

This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

line 173, column 0: style attribute contains potentially dangerous content: background-image (23 occurrences) [help]
```
<a href="https://tommdaly.files.wordpress.com/2016/08/clip_image002.jpg"> ...
```

Source: http://tommdaly.wordpress.com/feed/

<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:media="http://search.yahoo.com/mrss/"
>
<channel>
<title>Thomas Daly's SharePoint Blog</title>
<atom:link href="https://tommdaly.wordpress.com/feed/" rel="self" type="application/rss+xml" />
<link>https://tommdaly.wordpress.com</link>
<description>blogging stuff from the world of SharePoint & Office 365</description>
<lastBuildDate>Fri, 19 Aug 2016 20:19:23 +0000</lastBuildDate>
<language>en</language>
<sy:updatePeriod>
hourly </sy:updatePeriod>
<sy:updateFrequency>
1 </sy:updateFrequency>
<generator>http://wordpress.com/</generator>
<cloud domain='tommdaly.wordpress.com' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' />
<image>
<url>https://s0.wp.com/i/buttonw-com.png</url>
<title>Thomas Daly's SharePoint Blog</title>
<link>https://tommdaly.wordpress.com</link>
</image>
<atom:link rel="search" type="application/opensearchdescription+xml" href="https://tommdaly.wordpress.com/osd.xml" title="Thomas Daly's SharePoint Blog" />
<atom:link rel='hub' href='https://tommdaly.wordpress.com/?pushpress=hub'/>
<item>
<title>SharePoint Framework Developer Preview Release – Where do I begin?</title>
<link>https://tommdaly.wordpress.com/2016/08/18/sharepoint-framework-developer-preview-release-where-do-i-begin/</link>
<comments>https://tommdaly.wordpress.com/2016/08/18/sharepoint-framework-developer-preview-release-where-do-i-begin/#comments</comments>
<dc:creator><![CDATA[Thomas Daly]]></dc:creator>
<pubDate>Fri, 19 Aug 2016 01:11:00 +0000</pubDate>
<category><![CDATA[Development]]></category>
<category><![CDATA[JavaScript]]></category>
<category><![CDATA[Office 365]]></category>
<category><![CDATA[On-Prem]]></category>
<category><![CDATA[SharePoint 2013]]></category>
<category><![CDATA[SPFx]]></category>
<guid isPermaLink="false">http://tommdaly.wordpress.com/?p=914</guid>
<description><![CDATA[This is an exciting time! The much anticipated SharePoint Framework Preview was released yesterday. And guess what … they are essentially Add-ins /Apps. Right now just the web parts piece is released and the end result is an improvement over app parts. The most noteworthy part is that the web parts are now on the … <a href="https://tommdaly.wordpress.com/2016/08/18/sharepoint-framework-developer-preview-release-where-do-i-begin/" class="more-link">Continue reading SharePoint Framework Developer Preview Release – Where do I begin?</a>]]></description>
<content:encoded><![CDATA[This is an exciting time! The much anticipated <a href="https://dev.office.com/blogs/sharepoint-framework-developer-preview-release" target="_blank">SharePoint Framework Preview was released yesterday</a>. And guess what … they are essentially Add-ins /Apps. Right now just the web parts piece is released and the end result is an improvement over app parts. The most noteworthy part is that the web parts are now on the page as opposed to being inside of an iframe! They have a couple more improvements like being able to be fully responsive, having web part properties. They mention that new developments will be added frequently and they are targeting a release time frame of early 2017.
The biggest hurdle that I can see for traditional SharePoint developer is the tooling.  If you are not comfortable with using a command line, Node.js, NPM, Yeoman or Gulp then you should invest a large chunk of time to familiarize yourself with those technologies. I believe that having a base knowledge of the “What” is actually happening when you type “yo @microsoft/sharepoint” is important.  Most modern day front end web developers are already comfortable with these things. For the traditional SharePoint developer most of these things will be foreign and seemingly difficult to grasp at first (for some).
<h4>So you’ve visited the <a href="https://github.com/SharePoint/sp-dev-docs" target="_blank">SharePoint Framework Developer Preview Release git-hub</a> and you’re following the steps but you find yourself scratching your head. What did you miss? What is all this stuff?  Where do you begin to even get started?</h4>
First off don’t feel bad.. most people are seeing this for the first time just like you. 
<rant> Just the other day I discussed the front end development build process of node/gulp/npm to other day to our Senior SharePoint developers and even they were confused. Some even got pissed off and mad at Microsoft. I can remember the comments clearly, “COMMAND LINE? What year is this?”. I’ve embraced the change and I can see the good things that can come out of it.  Getting back to point of this article. </rant>
I recommend that you take the time to learn about the new tools that they are asking us to adopt. There are ton’s of free online resource on YouTube alone… However if you have or can get your job to pay for a <a href="http://www.pluralsight.com/" target="_blank">Pluralsight</a> you will access to premium content with some of the top authors (this will be more important for the SharePoint work)
<h3>Online resources (free) to help you get familiar with for Node/Gulp/TypeScript/Yeoman</h3>
<li><a href="https://www.youtube.com/watch?v=FVdH9YcB3Dg" target="_blank">Node.js Fundamentals</a></li>
<li><a href="https://www.youtube.com/watch?v=0X_uTNhSxaM" target="_blank">NodeJS – NPM Package Manager – Tutorial 2</a></li>
<li><a href="https://www.youtube.com/watch?v=LmdT2zhFmn4" target="_blank">Gulp.js Build System #1 – Fundamentals</a></li>
<li><a href="https://www.youtube.com/watch?v=dwSLFai8ovQ" target="_blank">Gulp – The Basics</a></li>
<li><a href="https://www.youtube.com/watch?v=kCmjN5_wVZU" target="_blank">TypeScript/ES6 Module Syntax Intro</a></li>
<li><a href="http://yeoman.io/" target="_blank">Yeoman – Read first paragraph</a></li>
If you haven’t even started to develop apps or client side web parts using JavaScript then you need to take a look at resources geared towards connecting to SharePoint lists and libraries using the REST end points or the client side JavaScript object model. There are some course that I highly recommend.  
<h3>Pluralsight Courses for SharePoint Client Object Model</h3>
<li>David Mann</li>
<li><a title="http://www.pluralsight.com/courses/developing-sharepoint-2013-javascript" href="http://www.pluralsight.com/courses/developing-sharepoint-2013-javascript">http://www.pluralsight.com/courses/developing-sharepoint-2013-javascript</a></li>
<li><a title="http://www.pluralsight.com/courses/developing-sharepoint-2013-javascript-part2" href="http://www.pluralsight.com/courses/developing-sharepoint-2013-javascript-part2">http://www.pluralsight.com/courses/developing-sharepoint-2013-javascript-part2</a></li>
<li><a title="http://www.pluralsight.com/courses/developing-sharepoint-2013-javascript-part3" href="http://www.pluralsight.com/courses/developing-sharepoint-2013-javascript-part3">http://www.pluralsight.com/courses/developing-sharepoint-2013-javascript-part3</a></li>
<li>Rob Windsor</li>
<li><a title="http://www.pluralsight.com/courses/sharepoint-2013-client-object-model-rest" href="http://www.pluralsight.com/courses/sharepoint-2013-client-object-model-rest">http://www.pluralsight.com/courses/sharepoint-2013-client-object-model-rest</a></li>
<li>Rob Windsor, & Sahil Malik</li>
<li><a title="http://www.pluralsight.com/courses/sp2010-client-object-model" href="http://www.pluralsight.com/courses/sp2010-client-object-model">http://www.pluralsight.com/courses/sp2010-client-object-model</a></li>
<h3>Can I just use Visual Studio? PLEASE!@#!@ Do I need to learn all the front end tooling?</h3>
The framework can be intimidating for the people not comfortable with the technologies listed. For the most part you really just need to learn a couple of things and you can get by. TypeScript is not one of those things. Good news for those most comfortable working in Visual Studio. They have documentation on how to get setup <a href="https://github.com/SharePoint/sp-dev-docs/wiki/Working-with-visual-studio" target="_blank">via Visual Studio 2015 (Update 3) here</a>.  The bad news is that is still uses Node.js and the Gulp build tasks to compile and build the project. We will just have to wait and see if the process is improved with future releases.
<h3>Ok I got all that…</h3>
After you’ve covered all this then you should walk through the examples. The documentations is very good at explaining how to get everything installed and get up and running with your first Hello World web part. My only piece of advice is to read through everything 1 step at a time. It took me a few reads before I was able to get the first web part to load inside SharePoint. 
<h3>Final Thoughts:</h3>
<ul>
<li><a href="http://dev.office.com/devprogram" target="_blank">Get an Office 365 Developer Account</a></li>
<li>Learn the fundamental technologies in play – Node.js, Gulp, Yeoman, Node Package Manager (npm)</li>
<li>Become a <a href="https://www.typescriptlang.org/">TypeScript</a> master</li>
<li>Changes, Updates, Fixes will be coming frequently with a release time frame of 2017 (so they say)</li>
<li>Preview is missing a few things that a traditional deployment would have</li>
<ul>
<li>Examples on how to deploy files to SharePoint / not CDN</li>
<li>Examples on how to deploy assets (List Definitions, Content Types, Site Columns) => <a href="https://github.com/SharePoint/sp-dev-docs/wiki/Notes-on-Solution-Packaging">Notes on Solutions Packaging</a></li>
</ul>
</ul>
]]></content:encoded>
<wfw:commentRss>https://tommdaly.wordpress.com/2016/08/18/sharepoint-framework-developer-preview-release-where-do-i-begin/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
<media:content url="https://2.gravatar.com/avatar/be15f0680dfa61960dc5799b7ca508d5ac5beeae683a0e309ac667809e07840e?s=96&d=identicon&r=G" medium="image">
<media:title type="html">tommdaly</media:title>
</media:content>
</item>
<item>
<title>Change Default SharePoint Site Logo CSS Trick – Great for Office 365!</title>
<link>https://tommdaly.wordpress.com/2016/08/09/change-default-sharepoint-site-logo-css-trick-great-for-office-365/</link>
<dc:creator><![CDATA[Thomas Daly]]></dc:creator>
<pubDate>Wed, 10 Aug 2016 01:25:32 +0000</pubDate>
<category><![CDATA[Branding]]></category>
<category><![CDATA[CSS]]></category>
<category><![CDATA[Customizations]]></category>
<category><![CDATA[Office 365]]></category>
<category><![CDATA[On-Prem]]></category>
<guid isPermaLink="false">http://tommdaly.wordpress.com/?p=911</guid>
<description><![CDATA[I was just thinking about this issue one day and realized that I could just override the default image but if the user decides that they wanted to change it later via site settings they could. Why do I love this trick? You don’t have to set a Site Logo via Site Settings > Title, … <a href="https://tommdaly.wordpress.com/2016/08/09/change-default-sharepoint-site-logo-css-trick-great-for-office-365/" class="more-link">Continue reading Change Default SharePoint Site Logo CSS Trick – Great for Office 365!</a>]]></description>
<content:encoded><![CDATA[I was just thinking about this issue one day and realized that I could just override the default image but if the user decides that they wanted to change it later via site settings they could.
<h2>Why do I love this trick?</h2>
<ol>
<li>You don’t have to set a Site Logo via Site Settings > Title, description, and logo
<ol>
<li>For On-Prem solutions I would set this via code</li>
<li>For Office 365 you would typically have to do this manually OR powershell to set it across</li>
</ol>
</li>
<li>It’s pure CSS trickery, no change to any markup!
<ol>
<li>This will work across the board On-Prem/Office 365…. No code….</li>
</ol>
</li>
<li>Manually setting the Logo you can override this trick
<ol>
<li>For those subsites that don’t want to inherit the logo they can manually set the logo via the Site Settings > Title, description, and logo</li>
<li>Once the logo is set in the default it will override this trick</li>
</ol>
</li>
</ol>
<h2>Get to the trick already!!!!</h2>
Add the following lines of CSS. Only a couple of notes to make this actually work.
<div id="scid:C89E2BDB-ADD3-4f7a-9810-1B7EACF446C1:f877060e-1d85-4d1a-9c3e-093923456c21" class="wlWriterEditableSmartContent" style="float:none;margin:0;display:inline;padding:0;">
<pre class="brush: css; title: ; notranslate">
img[src*='siteIcon'] {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(‘/Style Library/mySiteLogo.png’) no-repeat; /* Path to the site logo */
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}
.ms-siteicon-img, .ms-siteicon-a {
max-height: none;
max-width: none;
}
</pre>
</div>
Only 2 important detail for this trick to work.
<ol>
<li>You must set the actual image size must equal the information above for this trick to work.</li>
<li>DON’T use ‘siteIcon’ in the filename.</li>
</ol>
How does this work?
This trick works because it uses CSS to catch onto the <img/> field where the ‘src’ contains ‘siteIcon’. This case catches both the themed site icon on the publishing site and the site icon on the team site. The CSS that performs the replacement of the image comes from <a href="https://css-tricks.com/replace-the-image-in-an-img-with-css/">https://css-tricks.com/replace-the-image-in-an-img-with-css/</a> by <a href="https://twitter.com/marcelshields">Marcel Shields</a>. You can read more about that there.
<ul>
<li>Publishing Site Logo</li>
</ul>
<a href="https://tommdaly.files.wordpress.com/2016/08/clip_image002.jpg"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="clip_image002" src="https://tommdaly.files.wordpress.com/2016/08/clip_image002_thumb.jpg?w=685&h=118" alt="clip_image002" width="685" height="118" border="0" /></a>
<ul>
<li>Team Site Logo</li>
</ul>
<a href="https://tommdaly.files.wordpress.com/2016/08/clip_image004.jpg"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="clip_image004" src="https://tommdaly.files.wordpress.com/2016/08/clip_image004_thumb.jpg?w=680&h=109" alt="clip_image004" width="680" height="109" border="0" /></a>
]]></content:encoded>
<media:content url="https://2.gravatar.com/avatar/be15f0680dfa61960dc5799b7ca508d5ac5beeae683a0e309ac667809e07840e?s=96&d=identicon&r=G" medium="image">
<media:title type="html">tommdaly</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2016/08/clip_image002_thumb.jpg" medium="image">
<media:title type="html">clip_image002</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2016/08/clip_image004_thumb.jpg" medium="image">
<media:title type="html">clip_image004</media:title>
</media:content>
</item>
<item>
<title>Hide Newsfeed, OneDrive and/or Sites from the Suite Bar – Ribbon Area for SharePoint 2013</title>
<link>https://tommdaly.wordpress.com/2016/03/05/hide-newsfeed-onedrive-andor-sites-from-the-suite-bar-ribbon-area-for-sharepoint-2013/</link>
<dc:creator><![CDATA[Thomas Daly]]></dc:creator>
<pubDate>Sat, 05 Mar 2016 22:17:28 +0000</pubDate>
<category><![CDATA[Branding]]></category>
<category><![CDATA[CSS]]></category>
<category><![CDATA[On-Prem]]></category>
<category><![CDATA[SharePoint 2013]]></category>
<guid isPermaLink="false">http://tommdaly.wordpress.com/?p=419</guid>
<description><![CDATA[It really is super simple and requires I line of CSS per item. If you want to hit them all or any future ones you could hide the whole element. I’m posting this b/c I was looking for a quick fix to do this and all the blogs make you change master pages or something … <a href="https://tommdaly.wordpress.com/2016/03/05/hide-newsfeed-onedrive-andor-sites-from-the-suite-bar-ribbon-area-for-sharepoint-2013/" class="more-link">Continue reading Hide Newsfeed, OneDrive and/or Sites from the Suite Bar – Ribbon Area for SharePoint 2013</a>]]></description>
<content:encoded><![CDATA[It really is super simple and requires I line of CSS per item. If you want to hit them all or any future ones you could hide the whole element. I’m posting this b/c I was looking for a quick fix to do this and all the blogs make you change master pages or something else wacky. I didn’t have mine enabled and really was being lazy. So here it is.
Hide OneDrive
#suiteLinksBox .ms-core-suiteLink-a[id$=’ShellDocuments’] {
display: none;
}
Hide Newsfeeds 
#suiteLinksBox .ms-core-suiteLink-a[id$=’ShellNewsfeed’] {
display: none;
}
Hide Sites
#suiteLinksBox .ms-core-suiteLink-a[id$=’ShellSites’] {
display: none;
}
Get rid of them all in one shot
#suiteLinksBox .ms-core-suiteLink-a[id$=’ShellDocuments’],
#suiteLinksBox .ms-core-suiteLink-a[id$=’ShellNewsfeed’],
#suiteLinksBox .ms-core-suiteLink-a[id$=’ShellSites’] {
display: none;
}
Get rid of the anything that could possible go in there 
#suiteLinksBox {
display: none;
}
 
There you have it folks – simple css to just pop those items right off the page.
]]></content:encoded>
<media:content url="https://2.gravatar.com/avatar/be15f0680dfa61960dc5799b7ca508d5ac5beeae683a0e309ac667809e07840e?s=96&d=identicon&r=G" medium="image">
<media:title type="html">tommdaly</media:title>
</media:content>
</item>
<item>
<title>Hiding People from People Search</title>
<link>https://tommdaly.wordpress.com/2016/01/16/hiding-people-from-people-search/</link>
<comments>https://tommdaly.wordpress.com/2016/01/16/hiding-people-from-people-search/#comments</comments>
<dc:creator><![CDATA[Thomas Daly]]></dc:creator>
<pubDate>Sat, 16 Jan 2016 14:45:09 +0000</pubDate>
<category><![CDATA[Customizations]]></category>
<category><![CDATA[Office 365]]></category>
<category><![CDATA[On-Prem]]></category>
<category><![CDATA[SharePoint 2013]]></category>
<guid isPermaLink="false">http://thomasdaly.net/?p=860</guid>
<description><![CDATA[Introduction This all started as a request from a client to hide only certain users from the people search. I’ve decided on this route because the management interface already exists to update user profiles and it would be very little work to add a user profile property, get it crawled and use that as the … <a href="https://tommdaly.wordpress.com/2016/01/16/hiding-people-from-people-search/" class="more-link">Continue reading Hiding People from People Search</a>]]></description>
<content:encoded><![CDATA[<h1>Introduction</h1>
This all started as a request from a client to hide only certain users from the people search. I’ve decided on this route because the management interface already exists to update user profiles and it would be very little work to add a user profile property, get it crawled and use that as the filter in the people search results webpart. Below I will explain how I was able to accomplish this in Office 365 but the same would work for a SharePoint 2013 on prem.
<h1>How To</h1>
In Office 365 -> SharePoint Administration -> User Profiles 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl1.png?w=700" alt="" /> 

Click “Manage User Properties” under the People Group 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl2.png?w=700" alt="" /> 

Click “New Property” 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl3.png?w=700" alt="" /> 

Set the following properties (everything else leave be) 

Name: HideFromPeopleSearch 

Display Name: HideFromPeopleSearch 

Policy Setting: Optional 

Default Privacy Settings: Everyone 

Search Settings -> Alias [checked] 

 -> Indexed [checked] 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl4.png?w=700" alt="" /> 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl5.png?w=700" alt="" /> 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl6.png?w=700" alt="" /> 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl7.png?w=700" alt="" /> 

Click “OK” 

Wait some amount of time for O365 to index the User Profiles and retrieve this new field. 

** for on prem users – kick off a FULL search crawl of your people content source** 

You’ll know it’s ready when you can find the new Property in the Search Schema, Crawled Properties. 

From the Admin Center click “search” in the left hand menu 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl8.png?w=700" alt="" /> 

Click “Manage Search Schema” 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl9.png?w=700" alt="" /> 

Click “Crawled Properties” 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl10.png?w=700" alt="" /> 

Enter “Hide” in the Crawled properties search box, then click the green arrow 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl11.png?w=700" alt="" /> 

You will see the property appear in the search results when the property has been successfully crawled. 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl12.png?w=700" alt="" /> 

Next you will need to create a “Managed Property”, Click On the “Managed Properties” link 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl13.png?w=700" alt="" /> 

Click “New Managed Property” 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl14.png?w=700" alt="" /> 

Enter the following information: 

Property Name: HideFromPeopleSearch 

Type: Text 

Queryable: Checked 

Retrieveable: Checked 

Add Property Mapping -> People:HideFromPeopleSearch 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl15.png?w=700" alt="" /> 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl16.png?w=700" alt="" /> 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl17.png?w=700" alt="" /> 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl18.png?w=700" alt="" /> 

Click Add A Mapping 

Enter “Hide” in the search box, click the Find button 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl19.png?w=700" alt="" /> 

Select “People:HideFromPeopleSearch”, click the OK button 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl20.png?w=700" alt="" /> 

Leave all the other properties as-is, click OK 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl21.png?w=700" alt="" /> 

You will now have to wait until Office 365 runs a full crawl on your site for the property to become available in search. When this action takes place is unknown. (I’ve head 4 hours) 

** for on prem users – kick off a FULL search crawl of your site content source** 

Next go to the people search page 

Edit the page and Edit the Web Part Properties of the People Search Core Results 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl22.png?w=700" alt="" /> 

Click Change Query 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl23.png?w=700" alt="" /> 

In the Property Filter drop down select –Show all managed properties– 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl24.png?w=700" alt="" /> 

Select HideFromPeopleSearch 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl25.png?w=700" alt="" /> 

Select “Not equals” then “Manual Value” 

Enter “True” for the Manual Value 

Next Click Add property filter 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl26.png?w=700" alt="" /> 

Click OK 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl27.png?w=700" alt="" /> 

Click OK in the People Search Core Results, Web Part Properties pane 

<img src="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl28.png?w=700" alt="" /> 

Save, Check-In & Publish your page – All Set! 

To manage users it’s as easy as using the User Profile Service Application, searching for a user’s profile and checking a box to save. Watch the video if you are note sure about that – <a href="http://screencast.com/t/5VGSLCt5">http://screencast.com/t/5VGSLCt5</a>N
Remember it won’t be instantly removed – it will take a crawl of the people source for those changes to make it to the site!!!
]]></content:encoded>
<wfw:commentRss>https://tommdaly.wordpress.com/2016/01/16/hiding-people-from-people-search/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
<media:content url="https://2.gravatar.com/avatar/be15f0680dfa61960dc5799b7ca508d5ac5beeae683a0e309ac667809e07840e?s=96&d=identicon&r=G" medium="image">
<media:title type="html">tommdaly</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl1.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl2.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl3.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl4.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl5.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl6.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl7.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl8.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl9.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl10.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl11.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl12.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl13.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl14.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl15.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl16.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl17.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl18.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl19.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl20.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl21.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl22.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl23.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl24.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl25.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl26.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl27.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2016/01/011616_1444_hidingpeopl28.png" medium="image" />
</item>
<item>
<title>Bootstrap Navigation for Office 365 & SharePoint 2013 using jQuery and REST</title>
<link>https://tommdaly.wordpress.com/2015/10/13/bootstrap-navigation-for-office-365-sharepoint-2013-using-jquery-and-rest/</link>
<dc:creator><![CDATA[Thomas Daly]]></dc:creator>
<pubDate>Tue, 13 Oct 2015 22:46:24 +0000</pubDate>
<category><![CDATA[Branding]]></category>
<category><![CDATA[Customizations]]></category>
<category><![CDATA[Development]]></category>
<category><![CDATA[JavaScript]]></category>
<category><![CDATA[JQuery]]></category>
<category><![CDATA[Mobile]]></category>
<category><![CDATA[Office 365]]></category>
<category><![CDATA[Responsive]]></category>
<category><![CDATA[SharePoint 2013]]></category>
<guid isPermaLink="false">http://thomasdaly.net/?p=827</guid>
<description><![CDATA[Introduction In my last post I talked about making the SharePoint navigation render in a Bootstrap friendly way. I suggested that you could do this by changing the markup of the navigation using an ASP:Repeater to display the nodes. This works great if you’re on an on-prem environment but on Office 365 you cannot use … <a href="https://tommdaly.wordpress.com/2015/10/13/bootstrap-navigation-for-office-365-sharepoint-2013-using-jquery-and-rest/" class="more-link">Continue reading Bootstrap Navigation for Office 365 & SharePoint 2013 using jQuery and REST</a>]]></description>
<content:encoded><![CDATA[<h1>Introduction</h1>
In my last post I talked about making the SharePoint navigation render in a Bootstrap friendly way. I suggested that you could do this by changing the markup of the navigation using an ASP:Repeater to display the nodes. This works great if you’re on an on-prem environment but on Office 365 you cannot use this method because the masterpage cannot contain code blocks. If you haven’t read that it might be worth taking a look at – <a href="http://thomasdaly.net/2015/06/28/bootstrap-responsive-navigation-in-sharepoint/">Bootstrap Responsive Navigation in SharePoint</a> .
This post will demonstrate an Office 365 safe version that use JavaScript, jQuery, and REST to retrieve the navigation from SharePoint’s navigation provider. Once we have that we’ll render that out to the screen client side. With this approach we can use the out of the box Managed Meta Data navigation provider for the navigation, and we can control the exact rendering so that it fits Bootstrap’s model for a navigation bar.
The code can be downloaded directly from my git-hub account – <a href="https://github.com/tom-daly/sp2013-bootstrap-nav">https://github.com/tom-daly/sp2013-bootstrap-nav</a>
<h1>Getting Started</h1>
It’s very simple to get started you only need to do a few things.
<ol>
<li>Add the link to the topNavigation.js in your SharePoint masterpage</li>
</ol>
<img src="https://tommdaly.files.wordpress.com/2015/10/101315_2246_bootstrapna1.png?w=700" alt="" />
<ol>
<li>In the Master Page, add the container below where the navigation will be pushed into. You will need to determine where you want the navigation to go, I’ll have a full example at the very end.</li>
</ol>
<img src="https://tommdaly.files.wordpress.com/2015/10/101315_2246_bootstrapna2.png?w=700" alt="" />
<ol>
<li>
<div>Switch the SharePoint Navigation to use the Managed Meta Data Navigation</div>
<ol>
<li>In Site Settings</li>
<li>Look and Feel -> Navigation</li>
</ol>
</li>
</ol>
<img src="https://tommdaly.files.wordpress.com/2015/10/101315_2246_bootstrapna3.png?w=700" alt="" />
Once you complete those steps you’ll have your navigation displayed in that container.
<img src="https://tommdaly.files.wordpress.com/2015/10/101315_2246_bootstrapna4.png?w=700" alt="" />
<h1>Other Details</h1>
<h3>Changing Rendering</h3>
The rendering of the menu is defined in the renderNavigationNodes function. This is currently the format the Bootstrap likes. If you visit the Bootstrap website and take a look at the first example
<a href="http://getbootstrap.com/components/#navbar">http://getbootstrap.com/components/#navbar</a>
The red box is exactly what the code is injecting. So you would wrap all that however you want it to appear. Follow the examples there are plenty out there.
<img src="https://tommdaly.files.wordpress.com/2015/10/101315_2246_bootstrapna5.png?w=700" alt="" />
<h3>2 Level Flyouts</h3>
Currently this supports only 2 levels, a top level and 1 flyout. This is just what Bootstrap v3.3.5 supports and that’s what I’m sticking with currently. If you want more levels then it’s up to you to figure that part out. It can be done and there are other 3rd parties implementing 3rd or 4th level flyouts after the fact. The code is recursive and will support as many levels as you have, you just need to handle the front end portion.
<h3>The REST Call</h3>
The query that I am using can be seen below. The /web/navigation/topbar endpoint – flat out sucks. It won’t show if a node is hidden and it didn’t behave. This is the only one I could get to work reliably.
<img src="https://tommdaly.files.wordpress.com/2015/10/101315_2246_bootstrapna6.png?w=700" alt="" />
<h3>Changing Target Container</h3>
If you want to change where the navigation goes, instead of “#my-top-navigation” then you can edit the topNavigation.js file and at the bottom change the selector to another ID preferably.
<img src="https://tommdaly.files.wordpress.com/2015/10/101315_2246_bootstrapna7.png?w=700" alt="" />
<h1>Sample Files</h1>
I have a few more sample files that might be of use to look at.
<a href="https://bandr-public.sharepoint.com/TomBlogFiles/base.css">Base.css</a> – Sample CSS file (helps with some Bootstrap/SharePoint resets)
<a href="https://bandr-public.sharepoint.com/TomBlogFiles/bootstrap.master">Bootstrap.Master</a> – Sample masterpage used in this example. In this sample I create my own header and not s4-titlerow. Using this html structure you’ll get the collapsible navigation that is popular on most web sites.
<img src="https://tommdaly.files.wordpress.com/2015/10/101315_2246_bootstrapna8.png?w=700" alt="" />
<h1>Conclusion</h1>
The whole goal of this script was to have a way for an Office 365 site to use the Bootstrap navigation. Although there are still limitations it’s doable. And you don’t even necessarily need to touch the master page. You could attach the scripts and css via other methods which I won’t go in to. So if you’re an Office 365 purist who doesn’t want to customize the master page you would want to take an approach to this. I hope this helps someone out there. If there are problems with the script you can report the issues through the github page. <a href="https://github.com/tom-daly/sp2013-bootstrap-nav/issues">https://github.com/tom-daly/sp2013-bootstrap-nav/issues</a>
]]></content:encoded>
<media:content url="https://2.gravatar.com/avatar/be15f0680dfa61960dc5799b7ca508d5ac5beeae683a0e309ac667809e07840e?s=96&d=identicon&r=G" medium="image">
<media:title type="html">tommdaly</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/10/101315_2246_bootstrapna1.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2015/10/101315_2246_bootstrapna2.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2015/10/101315_2246_bootstrapna3.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2015/10/101315_2246_bootstrapna4.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2015/10/101315_2246_bootstrapna5.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2015/10/101315_2246_bootstrapna6.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2015/10/101315_2246_bootstrapna7.png" medium="image" />
<media:content url="https://tommdaly.files.wordpress.com/2015/10/101315_2246_bootstrapna8.png" medium="image" />
</item>
<item>
<title>Bootstrap Responsive Navigation in SharePoint</title>
<link>https://tommdaly.wordpress.com/2015/06/28/bootstrap-responsive-navigation-in-sharepoint/</link>
<comments>https://tommdaly.wordpress.com/2015/06/28/bootstrap-responsive-navigation-in-sharepoint/#comments</comments>
<dc:creator><![CDATA[Thomas Daly]]></dc:creator>
<pubDate>Mon, 29 Jun 2015 03:19:00 +0000</pubDate>
<category><![CDATA[Branding]]></category>
<category><![CDATA[Customizations]]></category>
<category><![CDATA[JQuery]]></category>
<category><![CDATA[Mobile]]></category>
<category><![CDATA[On-Prem]]></category>
<category><![CDATA[Responsive]]></category>
<category><![CDATA[SharePoint 2013]]></category>
<guid isPermaLink="false">http://tommdaly.wordpress.com/?p=785</guid>
<description><![CDATA[Introduction Many of my most recent branding projects have all been responsive. Clients are building sites that they want to work on desktops, tablets, & phones. If you’ve ever tried to deal with this request and SharePoint is your platform then you know what a handful this can be. For all my responsive branding projects … <a href="https://tommdaly.wordpress.com/2015/06/28/bootstrap-responsive-navigation-in-sharepoint/" class="more-link">Continue reading Bootstrap Responsive Navigation in SharePoint</a>]]></description>
<content:encoded><![CDATA[<h1>Introduction</h1>
Many of my most recent branding projects have all been responsive. Clients are building sites that they want to work on desktops, tablets, & phones. If you’ve ever tried to deal with this request and SharePoint is your platform then you know what a handful this can be. For all my responsive branding projects I always go to <a href="http://getbootstrap.com/" target="_blank">Bootstrap</a>. If you don’t know what that is then this article is not for you. We will not going into the details of implementing Bootstrap or the issues / fixes to do that. If you’re looking for cookie cutter bootstrap in SharePoint then I recommend that you check out <a href="https://responsivesharepoint.codeplex.com/" target="_blank">Responsive SharePoint</a>.
This article we will simply focus on the navigation. We will be replicating the standard out of the box (OOTB) SharePoint navigation and formatting it in a way that works with Bootstrap 3.0. I’ll provide you with the code snippet and an explanation of how to implement, and what is happening. It should leave you with the functionality of the Bootstrap’s collapsible navigation.
Our main problems with the SharePoint navigation are:
<ul>
<ul>
<li>SharePoint out of the box navigation is NOT responsive</li>
<li>SharePoint out of the box navigation doesn’t work well with touch enabled devices
<ul>
<li>It has hover actions on the navigation, and hover doesn’t work on touch devices</li>
</ul>
</li>
</ul>
</ul>
<a href="https://tommdaly.files.wordpress.com/2015/06/b.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="b" src="https://tommdaly.files.wordpress.com/2015/06/b_thumb.png?w=207&h=196" alt="b" width="207" height="196" border="0" /></a>
<h1>Prerequisites</h1>
The following need to be reference in your site.
<ul>
<li><a href="https://jquery.com/" target="_blank">jQuery</a></li>
<li><a href="http://getbootstrap.com/" target="_blank">Bootstrap 3.0</a></li>
<li>On-Prem SharePoint environment w/ access to the Masterpage</li>
<li>
<ul>
<li>You can see the references these in my master page</li>
</ul>
</li>
</ul>
SORRY SharePoint Onliner’s and O365’s – this won’t work b/c you can’t use code blocks in the MasterPage
<a href="https://tommdaly.files.wordpress.com/2015/06/ref.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="ref" src="https://tommdaly.files.wordpress.com/2015/06/ref_thumb.png?w=1243&h=138" alt="ref" width="1243" height="138" border="0" /></a>
<h1>The Navigation Code</h1>
You can view the html markup that Bootstrap requires in order to work properly – <a title="http://getbootstrap.com/components/#navbar" href="http://getbootstrap.com/components/#navbar">http://getbootstrap.com/components/#navbar</a> . The OOTB SharePoint navigation does its own thing so it would never work with Bootstrap. In this approach we’ll use the SharePoint top navigation provider but we’ll create our own navigation markup using asp repeaters. The following code will only work for 2 levels deep, it could be modified to work on X number of levels. You would just have to keep nesting repeaters. I am using ASP repeaters in the master page with no code behind in this approach. If you wanted to you could write a user control and simplify what goes into the master page but for me no C# code means less things that could break. There is one minor issue with this approach – see the Known Issues section.
<h1><a href="https://dl.dropboxusercontent.com/u/24839514/TomBlogFiles/bootstrap-nav.txt" target="_blank">Download Snippet Here</a></h1>
<div id="scid:9D7513F9-C04C-4721-824A-2B34F0212519:5fb4fe61-5349-431e-a939-2a8271ba3c97" class="wlWriterEditableSmartContent" style="float:none;margin:0;display:inline;padding:0;">
<div> 1 <nav class=”navbar navbar-default s4-notdlg noindex s4-noindex”> 2 <div class=”container”> 3 <!– Brand and toggle get grouped for better mobile display –> 4 <div class=”navbar-header”> 5 <button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#bs-example-navbar-collapse-1″ aria-expanded=”false”> 6 <span class=”sr-only”>Toggle navigation</span> 7 <span class=”icon-bar”></span> 8 <span class=”icon-bar”></span> 9 <span class=”icon-bar”></span> 10 </button> 11 <SharePoint:SPLinkButton runat=”server” NavigateUrl=”~sitecollection/” ID=”onetidProjectPropertyTitleGraphic” CssClass=”navbar-brand”> 12 <SharePoint:SiteLogoImage name=”onetidHeadbnnr0″ ID=”onetidHeadbnnr2″ LogoImageUrl=”images/logo.png” runat=”server”></SharePoint:SiteLogoImage> 13 </SharePoint:SPLinkButton> 14 </div> 15 16 <div class=”collapse navbar-collapse” id=”bs-example-navbar-collapse-1″> 17 18 <asp:Repeater runat=”server” ID=”TopNavMenu” DataSourceID=”topSiteMap”> 19 <HeaderTemplate> 20 <ul class=”nav navbar-nav navbar-right”> 21 </HeaderTemplate> 22 <ItemTemplate> 23 <li runat=”server” class=”root-node”> 24 <a href=”<%# Eval(“Url”) %>“> 25 <%# Eval(“Title“) %> 26 </a> 27 </li> 28 <asp:Repeater runat=”server” ID=”FirstLevelNodes” DataSource=”<%# ((SiteMapNode)Container.DataItem).ChildNodes %>”> 29 <ItemTemplate> 30 <!– if has children –> 31 <li runat=”server” visible=”<%# ((SiteMapNode) Container.DataItem).ChildNodes.Count > 0 %>” data-node-count=”<%# ((SiteMapNode)((RepeaterItem)Container.Parent.Parent).DataItem).ChildNodes.Count %>” data-node-index=”<%# Container.ItemIndex %>” class='<%# Container.ItemIndex == ((SiteMapNode)((RepeaterItem)Container.Parent.Parent).DataItem).ChildNodes.Count-1 ? “dropdown last-node nav-node” : (Container.ItemIndex == 0 ? “dropdown first-node nav-node” : “dropdown nav-node”) %>‘> 32 <a href=”<%# Eval(“Url”) %>” class=”dropdown-toggle” data-toggle=”dropdown” role=”button” aria-expanded=”false”> 33 <%# Eval(“Title“) %> 34 <span class=”caret”></span> 35 </a> 36 <asp:Repeater runat=”server” ID=”ChildMenuRepeater” DataSource=”<%# ((SiteMapNode)Container.DataItem).ChildNodes %>”> 37 <HeaderTemplate> 38 <ul class=”dropdown-menu” role=”menu”> 39 </HeaderTemplate> 40 <ItemTemplate> 41 <li data-node-index=”<%# Container.ItemIndex %>” class=’nav-node’> 42 <a href=”<%# Eval(“Url”) %>“> 43 <%# Eval(“Title“) %> 44 </a> 45 </li> 46 </ItemTemplate> 47 <FooterTemplate></ul></FooterTemplate> 48 </asp:Repeater> 49 </li> 50 <!– if has zero children –> 51 <li runat=”server” visible=”<%# ((SiteMapNode) Container.DataItem).ChildNodes.Count <= 0 %>” data-node-count=”<%# ((SiteMapNode)((RepeaterItem)Container.Parent.Parent).DataItem).ChildNodes.Count %>” data-node-index=”<%# Container.ItemIndex %>” class='<%# Container.ItemIndex == ((SiteMapNode)((RepeaterItem)Container.Parent.Parent).DataItem).ChildNodes.Count-1 ? “last-node nav-node” : (Container.ItemIndex == 0 ? “first-node nav-node” : “nav-node”) %>‘ > 52 <a href=”<%# Eval(“Url”) %>“> 53 <%# Eval(“Title“) %> 54 </a> 55 </li> 56 </ItemTemplate> 57 </asp:Repeater> 58 </ItemTemplate> 59 <FooterTemplate> 60 </ul> 61 </FooterTemplate> 62 </asp:Repeater> 63 64 </div> 65 <!– /.navbar-collapse –> 66 67 </div> 68 <!– end container –> 69 </nav> 70 <!– end nav-bar –></div>

</div>
Take a look at how this renders, much better.
<a href="https://tommdaly.files.wordpress.com/2015/06/render.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="render" src="https://tommdaly.files.wordpress.com/2015/06/render_thumb.png?w=1259&h=804" alt="render" width="1259" height="804" border="0" /></a>
And when the screen hits the break point. It collapses and you have the mobile friendly menu. The break point is set in the bootstrap CSS (I believe it is 768px). The menu below is also
<a href="https://tommdaly.files.wordpress.com/2015/06/resp1.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="resp1" src="https://tommdaly.files.wordpress.com/2015/06/resp1_thumb.png?w=762&h=210" alt="resp1" width="762" height="210" border="0" /></a>
And the drop down
<a href="https://tommdaly.files.wordpress.com/2015/06/resp2.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="resp2" src="https://tommdaly.files.wordpress.com/2015/06/resp2_thumb.png?w=763&h=363" alt="resp2" width="763" height="363" border="0" /></a>
<h1>The Code Explained</h1>
You can skip this part if you don’t care what the code snippet actually does. I’ll break it down into parts to help you understand so you can make changes to it.
<h2>1) It’s up to you to determine where you are going to put the navigation inside your masterpage</h2>
In my particular case below I’ve created my own custom header where I put the navbar. I then turn the visibility off on the PlaceHolderTopNavBar (line 543)
<a href="https://tommdaly.files.wordpress.com/2015/06/ex.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="ex" src="https://tommdaly.files.wordpress.com/2015/06/ex_thumb.png?w=990&h=573" alt="ex" width="990" height="573" border="0" /></a>
<h2>2) Looking at just the very high level bootstrap nav html</h2>
<a href="https://tommdaly.files.wordpress.com/2015/06/boot1.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="boot1" src="https://tommdaly.files.wordpress.com/2015/06/boot1_thumb.png?w=1227&h=469" alt="boot1" width="1227" height="469" border="0" /></a>
<h2>3) The Root Level Repeater</h2>
The first level I consider the root level. It contains the root navigation node typically “Home”. Below is the best representation of how the data comes back from the topSiteMap navigation provider. Each color is a level. The children of “Home” are the main level. This is similar to the OOTB, you might have seen the first node that isn’t in the navigation provider but just shows up anyway.
<a href="https://tommdaly.files.wordpress.com/2015/06/nav123.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="nav123" src="https://tommdaly.files.wordpress.com/2015/06/nav123_thumb.png?w=297&h=219" alt="nav123" width="297" height="219" border="0" /></a> <a href="https://tommdaly.files.wordpress.com/2015/06/nav1234.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="nav1234" src="https://tommdaly.files.wordpress.com/2015/06/nav1234_thumb.png?w=445&h=385" alt="nav1234" width="445" height="385" border="0" /></a>
Now for the root level. In this screen shot you can see I render the root node then have a second repeater for its children nodes. The html is fairly simple for the first node and gets more involved for the next level.
<a href="https://tommdaly.files.wordpress.com/2015/06/zerolevel.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="zerolevel" src="https://tommdaly.files.wordpress.com/2015/06/zerolevel_thumb.png?w=847&h=357" alt="zerolevel" width="847" height="357" border="0" /></a>
<h2>4) The First Level Repeater</h2>
This level gets a bit more interesting because now we have two different classifications of nav nodes, with children and without children. We have to handle each a slight bit different and I’ll explain. If you have children we need to specify a different class to have a drop down. Next it needs a nested repeater to handle the next level (2nd level). If there are no children we can simply just render the navigation node just as we did with the root level. I use the ChildNodes.Count to determine which to hide or show. You might notice that the
<ul>
<li>’s, line 487 & 507, have some other attributes like data-node-count and data-node-index and are REALLY long. I’ll explain that in the next section.</li>
</ul>
<a href="https://tommdaly.files.wordpress.com/2015/06/level_one.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="level_one" src="https://tommdaly.files.wordpress.com/2015/06/level_one_thumb.png?w=1240&h=298" alt="level_one" width="1240" height="298" border="0" /></a>
<h2>4a) First Level</h2>
<ul>
<li>’s</li>
</ul>
Let’s examine the first
<ul>
<li>the one with children. They are both the same except for the visible attr. We are going to focus on the following attributes, data-node-count, data-node-index, & class.</li>
</ul>
data-node-count – is not needed, but this will tell you how many sibling nodes are detected. I used this to help generate the if statements for class.
data-node-index – is not needed, but this will tell you the index of the node in amongst it’s current siblings. I used this to help generate the if statements for class.
<a href="https://tommdaly.files.wordpress.com/2015/06/a.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="a" src="https://tommdaly.files.wordpress.com/2015/06/a_thumb.png?w=1266&h=70" alt="a" width="1266" height="70" border="0" /></a>
class – this is basically a fancy edition I added which provides a first-node and last-node class. Again you’ll notice this one has “dropdown” in the class, the other
<ul>
<li>won’t because it doesn’t have children and doesn’t need a drop down.</li>
</ul>
<ul>
<ul>
<li>The first node of a set will have the class=“dropdown first-node nav-node”</li>
<li>The middle nodes would have the class=”dropdown nav-node”</li>
<li>The last node would have the class=”dropdown last-node nav-node”</li>
</ul>
</ul>
<div id="scid:9D7513F9-C04C-4721-824A-2B34F0212519:a5f21f34-d47f-470a-98be-84a3eef5d627" class="wlWriterEditableSmartContent" style="float:none;margin:0;display:inline;padding:0;">
<div>1 class=’<%# Container.ItemIndex == ((SiteMapNode)((RepeaterItem)Container.Parent.Parent).DataItem).ChildNodes.Count–1 ? “dropdown last-node nav-node“ : (Container.ItemIndex == 0 ? “dropdown first-node nav-node“ : “dropdown nav-node“) %>‘></div>

</div>
<h2>5) The Second Level Repeater</h2>
The second level repeater code gets a little simpler. This is our last level and we don’t consider if the node has children or not. We just render the value of the node and leave it at that. If you wanted to go 3, 4 or 5 levels essentially it’s just copy what we’ve already done but I wouldn’t go more than 2 levels. Bootstrap 3.0 removed support for multilevel dropdowns, citing usability issues as the cause. You would be on your own if you decided to go for more levels. There are 3rd party plugins available to assist Bootstrap 3.0 with multi levels.
<a href="https://tommdaly.files.wordpress.com/2015/06/second_level.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border-width:0;" title="second_level" src="https://tommdaly.files.wordpress.com/2015/06/second_level_thumb.png?w=1136&h=214" alt="second_level" width="1136" height="214" border="0" /></a>
<h1>Known Issues</h1>
You expected everything to work beautifully, I know! But there is always a gotcha! when it comes to SharePoint.
The only issue with this method is that you loose the selected state of the navigation. This is easily over come with supplemental jQuery. You’re only other alternative is to convert this all to a user control (like I mentioned way earlier) and then in code what page you are on and add a class. I don’t have the reference to this method – but I’m looking. To be posted later. 
Here is my jQuery work around – for highlighting the navigation for a selected node.
<h1><a href="https://dl.dropboxusercontent.com/u/24839514/TomBlogFiles/bootstrap-nav-script.js" target="_blank">Download Script Here</a></h1>
<div id="scid:9D7513F9-C04C-4721-824A-2B34F0212519:51e62046-af55-467b-a2a0-91e765c7c233" class="wlWriterEditableSmartContent" style="float:none;margin:0;display:inline;padding:0;">
<div> 1 $(document).ready(function() { 2 var nav = $(“.nav“); 3 if (nav == null || typeof (nav) == ‘undefined‘) return; 4 5 /* Match navigation on current page */ 6 var url = window.location.href.toLowerCase(); 7 var decUrl = decodeURI(url); 8 nav.find(“li > a“).each(function () { 9 10 var href = $(this).attr(“href“).toLowerCase(); 11 var decHref = decodeURI(href); 12 13 if (decUrl.indexOf(decHref) != –1) { 14 $(this).addClass(“active“); 15 return false; 16 } 17 }); 18 });</div>

</div>
<h1>Conclusion</h1>
That explains how I was able to utilize the SharePoint out of the box top navigation provider and build a new menu with ASP repeaters to behave responsively and work with Bootstrap 3.0. This is a simple enhancement that I’ve been re-using on many on of my On-Prem responsive projects. Unfortunately this doesn’t not work for SharePoint Online or O365 as the Masterpage does not allow code blocks. I’m curious if that’s with only editing pages by SharePoint designer, but what about deployed through wsp. <a title="http://stackoverflow.com/questions/22566589/sharepoint-master-page-asprepeater-tag" href="http://stackoverflow.com/questions/22566589/sharepoint-master-page-asprepeater-tag">http://stackoverflow.com/questions/22566589/sharepoint-master-page-asprepeater-tag</a> . I hope to uncover an answer either way. Thanks for reading!
]]></content:encoded>
<wfw:commentRss>https://tommdaly.wordpress.com/2015/06/28/bootstrap-responsive-navigation-in-sharepoint/feed/</wfw:commentRss>
<slash:comments>5</slash:comments>
<media:thumbnail url="https://tommdaly.files.wordpress.com/2015/06/b_thumb.png" />
<media:content url="https://tommdaly.files.wordpress.com/2015/06/b_thumb.png" medium="image">
<media:title type="html">b_thumb.png</media:title>
</media:content>
<media:content url="https://2.gravatar.com/avatar/be15f0680dfa61960dc5799b7ca508d5ac5beeae683a0e309ac667809e07840e?s=96&d=identicon&r=G" medium="image">
<media:title type="html">tommdaly</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/06/b_thumb.png" medium="image">
<media:title type="html">b</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/06/ref_thumb.png" medium="image">
<media:title type="html">ref</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/06/render_thumb.png" medium="image">
<media:title type="html">render</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/06/resp1_thumb.png" medium="image">
<media:title type="html">resp1</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/06/resp2_thumb.png" medium="image">
<media:title type="html">resp2</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/06/ex_thumb.png" medium="image">
<media:title type="html">ex</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/06/boot1_thumb.png" medium="image">
<media:title type="html">boot1</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/06/nav123_thumb.png" medium="image">
<media:title type="html">nav123</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/06/nav1234_thumb.png" medium="image">
<media:title type="html">nav1234</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/06/zerolevel_thumb.png" medium="image">
<media:title type="html">zerolevel</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/06/level_one_thumb.png" medium="image">
<media:title type="html">level_one</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/06/a_thumb.png" medium="image">
<media:title type="html">a</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/06/second_level_thumb.png" medium="image">
<media:title type="html">second_level</media:title>
</media:content>
</item>
<item>
<title>Office 365 Icons</title>
<link>https://tommdaly.wordpress.com/2015/06/24/office-365-icons/</link>
<comments>https://tommdaly.wordpress.com/2015/06/24/office-365-icons/#comments</comments>
<dc:creator><![CDATA[Thomas Daly]]></dc:creator>
<pubDate>Wed, 24 Jun 2015 15:52:00 +0000</pubDate>
<category><![CDATA[Branding]]></category>
<category><![CDATA[CSS]]></category>
<category><![CDATA[Customizations]]></category>
<category><![CDATA[Office 365]]></category>
<category><![CDATA[SharePoint 2013]]></category>
<guid isPermaLink="false">http://tommdaly.wordpress.com/?p=752</guid>
<description><![CDATA[Introduction I recently came across an interesting blog – http://www.n8d.at/blog/office-365-icon-font-documentation/ which mentions O365 icons. This was back in February so when I attempted to locate these fonts so I could use them in some of my work. I could not located the file on the CDN that was mentioned. I kind of shrugged it off … <a href="https://tommdaly.wordpress.com/2015/06/24/office-365-icons/" class="more-link">Continue reading Office 365 Icons</a>]]></description>
<content:encoded><![CDATA[<h2>Introduction</h2>
I recently came across an interesting blog – <a title="http://www.n8d.at/blog/office-365-icon-font-documentation/" href="http://www.n8d.at/blog/office-365-icon-font-documentation/">http://www.n8d.at/blog/office-365-icon-font-documentation/</a> which mentions O365 icons. This was back in February so when I attempted to locate these fonts so I could use them in some of my work. I could not located the file on the CDN that was mentioned. I kind of shrugged it off for a while but recently needed the icons again. So I went digging inside O365 and I found them. They are there if you want to use them. I’ll show you what classes to use. I also pulled the files which I’ll provide a link to at the end of the blog so you can download them and use them and not have to worry about CDN’s.
I found all the O365 icon inside my O365 Portal. I downloaded the web fonts and a portion of the css file that has the code for the icons. Using this approach you would be locked into the current icon. Microsoft is likely to continually update the icon & css, so this set would eventually become stale. If there ever is an official CDN I’d switch to that. If you’re on office 365 you don’t need to link to any fonts or css. You are able to just take advantages of the icons immediately you just need to look at my chart to see the classes or determine the code for the css content. If you don’t understand anything about using web fonts or what office 365 icons are, read the blog I mentioned above. That should bring you right up to speed.
<h2>Installation</h2>
<h2></h2>
<ul>
<ul>
<li>copy the css & font folder to your on prem site</li>
<li>link to the css file in your masterpage or page (adjust path as needed)
<pre></pre>
</li>
</ul>
</ul>
<ul>
<li>you can implement one of the icons using something like this below
<pre></pre>
</li>
<li>i have additional styles for color, font size, and spacing. view the source to check that out</li>
</ul>
<h2>Explanation of the Grid</h2>
<ul>
<li>the orange tiles are icons that are available by using the css:after { content: ‘code’; } or if you copy the supplemental css above</li>
<li>the blue tiles are icons that have classes in O365. you can use those classes in directly on your o365 site without attaching any styles or fonts</li>
<li>the black tiles are dead, meaning they don’t show or are not in the font package but may be in the official css and have not been purged.</li>
</ul>
The concept of using fonts for icons is nothing new and if you are not exactly familiar with that check out <a href="http://fortawesome.github.io/Font-Awesome/" target="blank">Font Awesome</a> or <a href="http://glyphicons.com/">Glyphicons</a>. The concept is that fonts will scale nice, the are light weight and fully loaded once when you hit the site. You can easily resize them and re-color them. No need for messing around with images.
<h3>Where I found the files</h3>
Fonts
<a title="https://outlook.office365.com/owa/prem/16.0.772.13/resources/styles/fonts/office365icons.svg" href="https://outlook.office365.com/owa/prem/16.0.772.13/resources/styles/fonts/office365icons.svg">https://outlook.office365.com/owa/prem/16.0.772.13/resources/styles/fonts/office365icons.svg</a>
<a title="https://outlook.office365.com/owa/prem/16.0.772.13/resources/styles/fonts/office365icons.svg" href="https://outlook.office365.com/owa/prem/16.0.772.13/resources/styles/fonts/office365icons.eot">https://outlook.office365.com/owa/prem/16.0.772.13/resources/styles/fonts/office365icons.eot</a>
<a title="https://outlook.office365.com/owa/prem/16.0.772.13/resources/styles/fonts/office365icons.svg" href="https://outlook.office365.com/owa/prem/16.0.772.13/resources/styles/fonts/office365icons.eot">https://outlook.office365.com/owa/prem/16.0.772.13/resources/styles/fonts/office365icons.ttf</a>
<a title="https://outlook.office365.com/owa/prem/16.0.772.13/resources/styles/fonts/office365icons.svg" href="https://outlook.office365.com/owa/prem/16.0.772.13/resources/styles/fonts/office365icons.woff">https://outlook.office365.com/owa/prem/16.0.772.13/resources/styles/fonts/office365icons.woff</a>
CSS
<a title="https://prod.msocdn.com/16.00.0791.004/en-US/css/shellg2corecss_f727a58f.css" href="https://prod.msocdn.com/16.00.0791.004/en-US/css/shellg2corecss_f727a58f.css">https://prod.msocdn.com/16.00.0791.004/en-US/css/shellg2corecss_f727a58f.css</a>
<h1><a href="https://dl.dropboxusercontent.com/u/24839514/TomBlogFiles/o365-fonts.zip" target="_blank">Download Files Here</a></h1>
<h2>Screenshot of all the possible icons –> see full preview site above for a live example</h2>
<a href="https://tommdaly.files.wordpress.com/2015/06/1.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border:0;" title="1" src="https://tommdaly.files.wordpress.com/2015/06/1_thumb.png?w=1284&h=703" alt="1" width="1284" height="703" border="0" /></a>
<a href="https://tommdaly.files.wordpress.com/2015/06/2.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border:0;" title="2" src="https://tommdaly.files.wordpress.com/2015/06/2_thumb.png?w=1286&h=706" alt="2" width="1286" height="706" border="0" /></a>
<a href="https://tommdaly.files.wordpress.com/2015/06/3.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border:0;" title="3" src="https://tommdaly.files.wordpress.com/2015/06/3_thumb.png?w=1288&h=702" alt="3" width="1288" height="702" border="0" /></a>
<h3><a href="https://tommdaly.files.wordpress.com/2015/06/4.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border:0;" title="4" src="https://tommdaly.files.wordpress.com/2015/06/4_thumb.png?w=1290&h=705" alt="4" width="1290" height="705" border="0" /></a></h3>
<a href="https://tommdaly.files.wordpress.com/2015/06/5.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border:0;" title="5" src="https://tommdaly.files.wordpress.com/2015/06/5_thumb.png?w=1287&h=707" alt="5" width="1287" height="707" border="0" /></a>
<a href="https://tommdaly.files.wordpress.com/2015/06/6.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border:0;" title="6" src="https://tommdaly.files.wordpress.com/2015/06/6_thumb.png?w=1280&h=706" alt="6" width="1280" height="706" border="0" /></a>
<a href="https://tommdaly.files.wordpress.com/2015/06/7.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border:0;" title="7" src="https://tommdaly.files.wordpress.com/2015/06/7_thumb.png?w=1289&h=703" alt="7" width="1289" height="703" border="0" /></a>
<a href="https://tommdaly.files.wordpress.com/2015/06/8.png"><img style="background-image:none;padding-top:0;padding-left:0;display:inline;padding-right:0;border:0;" title="8" src="https://tommdaly.files.wordpress.com/2015/06/8_thumb.png?w=1287&h=289" alt="8" width="1287" height="289" border="0" /></a>
<h1><a href="https://dl.dropboxusercontent.com/u/24839514/TomBlogFiles/o365-fonts.zip" target="_blank">Download Files Here</a></h1>
Thanks for checking this out
]]></content:encoded>
<wfw:commentRss>https://tommdaly.wordpress.com/2015/06/24/office-365-icons/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
<media:content url="https://2.gravatar.com/avatar/be15f0680dfa61960dc5799b7ca508d5ac5beeae683a0e309ac667809e07840e?s=96&d=identicon&r=G" medium="image">
<media:title type="html">tommdaly</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/06/1_thumb.png" medium="image">
<media:title type="html">1</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/06/2_thumb.png" medium="image">
<media:title type="html">2</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/06/3_thumb.png" medium="image">
<media:title type="html">3</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/06/4_thumb.png" medium="image">
<media:title type="html">4</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/06/5_thumb.png" medium="image">
<media:title type="html">5</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/06/6_thumb.png" medium="image">
<media:title type="html">6</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/06/7_thumb.png" medium="image">
<media:title type="html">7</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/06/8_thumb.png" medium="image">
<media:title type="html">8</media:title>
</media:content>
</item>
<item>
<title>My Favorite JavaScript Libraries and jQuery plugins</title>
<link>https://tommdaly.wordpress.com/2015/05/07/my-favorite-javascript-libraries-and-jquery-plugins/</link>
<dc:creator><![CDATA[Thomas Daly]]></dc:creator>
<pubDate>Thu, 07 May 2015 20:24:00 +0000</pubDate>
<category><![CDATA[Branding]]></category>
<category><![CDATA[Customizations]]></category>
<category><![CDATA[JavaScript]]></category>
<category><![CDATA[JQuery]]></category>
<category><![CDATA[SharePoint 2010]]></category>
<category><![CDATA[SharePoint 2013]]></category>
<guid isPermaLink="false">http://tommdaly.wordpress.com/?p=725</guid>
<description><![CDATA[These are a few of my favorite and go to JavaScript libraries. These tend to work well in SharePoint with no problem. This is my personal list that I use Grid http://unsemantic.com/ (SIMPLE) Console Log https://github.com/patik/console.log-wrapper Glyphs All – http://fortawesome.github.io/Font-Awesome/ Weather – http://erikflowers.github.io/weather-icons/ O365 – http://www.n8d.at/blog/office-365-icon-font-documentation/ Carousel Owl Carousel – http://owlgraphic.com/owlcarousel/index.html#demo slick – http://kenwheeler.github.io/slick/ jCycle2 … <a href="https://tommdaly.wordpress.com/2015/05/07/my-favorite-javascript-libraries-and-jquery-plugins/" class="more-link">Continue reading My Favorite JavaScript Libraries and jQuery plugins</a>]]></description>
<content:encoded><![CDATA[These are a few of my favorite and go to JavaScript libraries. These tend to work well in SharePoint with no problem. This is my personal list that I use
<h2>Grid </h2>
<ul>
<li><a href="http://unsemantic.com/">http://unsemantic.com/</a> (SIMPLE)</li>
</ul>
<h2>Console Log</h2>
<ul>
<li><a href="https://github.com/patik/console.log-wrapper">https://github.com/patik/console.log-wrapper</a></li>
</ul>
<h2>Glyphs</h2>
<ul>
<li>All – <a href="http://fortawesome.github.io/Font-Awesome/">http://fortawesome.github.io/Font-Awesome/</a>
<li>Weather – <a href="http://erikflowers.github.io/weather-icons/">http://erikflowers.github.io/weather-icons/</a>
<li>O365 – <a title="http://www.n8d.at/blog/office-365-icon-font-documentation/" href="http://www.n8d.at/blog/office-365-icon-font-documentation/">http://www.n8d.at/blog/office-365-icon-font-documentation/</a></li>
</ul>
<h2>Carousel</h2>
<ul>
<li>Owl Carousel – <a href="http://owlgraphic.com/owlcarousel/index.html#demo">http://owlgraphic.com/owlcarousel/index.html#demo</a>
<li>slick – <a href="http://kenwheeler.github.io/slick/">http://kenwheeler.github.io/slick/</a>
<li>jCycle2 – <a href="http://jquery.malsup.com/cycle2/">http://jquery.malsup.com/cycle2/</a>
<li>backFlip – <a title="https://github.com/backflip/jquery-carousel" href="https://github.com/backflip/jquery-carousel">https://github.com/backflip/jquery-carousel</a> (doesn’t use .clone() – good for use in ajaxPanel or where you don’t want cloned elements)</li>
</ul>
<h2>Cookies</h2>
<ul>
<li>jquery.cookie <a href="https://github.com/carhartl/jquery-cookie">https://github.com/carhartl/jquery-cookie</a></li>
</ul>
<h2>Click Outside</h2>
<ul>
<li><a href="http://benalman.com/code/projects/jquery-outside-events/examples/clickoutside/">http://benalman.com/code/projects/jquery-outside-events/examples/clickoutside/</a></li>
</ul>
<h2>Mutate / Resize</h2>
<ul>
<li><a href="http://www.jqui.net/demo/mutate/">http://www.jqui.net/demo/mutate/</a> (had issue with zip, use github files)
<li><a href="http://benalman.com/code/projects/jquery-resize/examples/resize/">http://benalman.com/code/projects/jquery-resize/examples/resize/</a></li>
<li>Smart Resize – <a href="http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/">http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/</a></li>
</ul>
<h2>Select Box (supports Multi)</h2>
<ul>
<li>Sumo Select <a href="https://github.com/HemantNegi/jquery.sumoselect">https://github.com/HemantNegi/jquery.sumoselect</a></li>
</ul>
<h2>Time / Date</h2>
<ul>
<li>Moment – <a href="http://momentjs.com/">http://momentjs.com/</a>
<li>Datejs – <a href="http://www.datejs.com/">http://www.datejs.com/</a></li>
</ul>
<h2>Truncating Text</h2>
<ul>
<li>jQuery dotdotdot… <a href="http://dotdotdot.frebsite.nl/?utm_source=dlvr.it&utm_medium=twitter">http://dotdotdot.frebsite.nl/?utm_source=dlvr.it&utm_medium=twitter</a> [THIS DIDN’T WORK WITH br’s]
<li>Truncate – <a href="https://github.com/pathable/truncate">https://github.com/pathable/truncate</a></li>
</ul>
<h2>Layouts (masonry type)</h2>
<ul>
<li>Isotope – <a href="http://isotope.metafizzy.co/">http://isotope.metafizzy.co/</a>
<ul>
<li>** use imagesLoaded for images – <a href="https://github.com/desandro/imagesloaded">https://github.com/desandro/imagesloaded</a></li>
</ul>
</li>
</ul>
<h2>Notify / Alerts</h2>
<ul>
<li>Notify.js – <a title="http://notifyjs.com/" href="http://notifyjs.com/">http://notifyjs.com/</a>
<li>Flavr – <a title="http://codecanyon.net/item/flavr-flat-jquery-popup-dialog/7021021" href="http://codecanyon.net/item/flavr-flat-jquery-popup-dialog/7021021">http://codecanyon.net/item/flavr-flat-jquery-popup-dialog/7021021</a></li>
</ul>
<h2>Modal </h2>
<ul>
<li>Zurb Reveal – <a title="http://foundation.zurb.com/docs/components/reveal.html" href="http://foundation.zurb.com/docs/components/reveal.html">http://foundation.zurb.com/docs/components/reveal.html</a> – [Needs adjustment for s4-workspace, but otherwise good]</li>
</ul>
<h2>Scroll Bars </h2>
<ul>
<li>jScrollPane – <a href="http://jscrollpane.kelvinluck.com/">http://jscrollpane.kelvinluck.com/</a></li>
</ul>
<h2>SharePoint Specific</h2>
<ul>
<li>SPServices – <a title="https://spservices.codeplex.com/" href="https://spservices.codeplex.com/">https://spservices.codeplex.com/</a></li>
</ul>
]]></content:encoded>
<media:content url="https://2.gravatar.com/avatar/be15f0680dfa61960dc5799b7ca508d5ac5beeae683a0e309ac667809e07840e?s=96&d=identicon&r=G" medium="image">
<media:title type="html">tommdaly</media:title>
</media:content>
</item>
<item>
<title>Working with SASS style sheets in Office 365 / SharePoint 2013</title>
<link>https://tommdaly.wordpress.com/2015/01/03/working-with-sass-style-sheets-in-office-365-sharepoint-2013/</link>
<comments>https://tommdaly.wordpress.com/2015/01/03/working-with-sass-style-sheets-in-office-365-sharepoint-2013/#comments</comments>
<dc:creator><![CDATA[Thomas Daly]]></dc:creator>
<pubDate>Sun, 04 Jan 2015 00:53:00 +0000</pubDate>
<category><![CDATA[Branding]]></category>
<category><![CDATA[CSS]]></category>
<category><![CDATA[Customizations]]></category>
<category><![CDATA[Office 365]]></category>
<category><![CDATA[SharePoint 2013]]></category>
<guid isPermaLink="false">http://tommdaly.wordpress.com/?p=714</guid>
<description><![CDATA[My new favorite thing is creating all my style sheets with SASS. SASS makes writing my style sheets faster, easier, cleaner, and more reusable. Don’t ask me why I chose SASS, but I liked it just a little better than LESS even though they are very similar.  You can go do research for yourself and … <a href="https://tommdaly.wordpress.com/2015/01/03/working-with-sass-style-sheets-in-office-365-sharepoint-2013/" class="more-link">Continue reading Working with SASS style sheets in Office 365 / SharePoint 2013</a>]]></description>
<content:encoded><![CDATA[My new favorite thing is creating all my style sheets with SASS. SASS makes writing my style sheets faster, easier, cleaner, and more reusable. Don’t ask me why I chose SASS, but I liked it just a little better than LESS even though they are very similar.  You can go do research for yourself and decide which you’d like to use.  SASS – <a title="http://sass-lang.com/" href="http://sass-lang.com/">http://sass-lang.com/</a> LESS – <a title="http://lesscss.org/" href="http://lesscss.org/">http://lesscss.org/</a>.
SASS is nothing new however it is very difficult to work with when using with SharePoint 2010/2013 .. or Office 365. Why is it difficult? Because SASS needs to be compiled to CSS and none of your typical SharePoint tools do that. 
 
<h3>Current Scenarios:</h3>
<ol>
<li>If you are working on O365 you might be working with SharePoint Designer which won’t do anything for you.
<li>Maybe you have Visual Studio you can use <a href="http://vswebessentials.com/" target="_blank">Web Essentials</a> or <a href="http://www.mindscapehq.com/products/web-workbench" target="_blank">Mindscape Web Workbench</a>. Both of these will compile the SASS to CSS
<li>You can use a stand alone compiler like Koala, Propos, & Scout (for Windows) … but configuring them to work can be tricky.
<li>You can use an online compiler – <a href="http://sassmeister.com/">SassMeister | The Sass Playground!</a> , but then you will be doing a lot of copy / pasting / uploading.</li>
</ol>
 
This article is going to show you how to use <a href="http://www.sublimetext.com/2" target="_blank">Sublime Text 2</a> on your desktop, to write and compile SASS, which will automatically be saved to O365. No copy / paste or uploading needed!
 
<h3>General Approach</h3>
<ul>
<li>Map network drive to O365 site
<li>Use a desktop editor to create SASS
<li>Use a desktop compiler to create the CSS
<li>Use Scout to monitor CSS changes locally and copy file to network drive</li>
</ul>
 
<h3>Pre-Requisites</h3>
1. Java v7 – <a title="http://www.java.com/en/download" href="http://www.java.com/en/download">http://www.java.com/en/download</a> [Scout has issue with any other version, <a title="https://github.com/mhs/scout-app/issues/173" href="https://github.com/mhs/scout-app/issues/173">https://github.com/mhs/scout-app/issues/173</a>]
2. O365 Site
 
<h3>Step 1 – Install Sublime Text 2 & SASS Builder</h3>
1. go to <a title="http://www.sublimetext.com/2" href="http://www.sublimetext.com/2">http://www.sublimetext.com/2</a> and download and install 
2. go to <a title="https://github.com/jaumefontal/SASS-Build-SublimeText2" href="https://github.com/jaumefontal/SASS-Build-SublimeText2">https://github.com/jaumefontal/SASS-Build-SublimeText2</a> (Follow Instructions there skip to step 3) 
<blockquote>
<h4>Installing Ruby</h4>
</blockquote>
Install Ruby library (for windows) – <a title="http://rubyinstaller.org/downloads/" href="http://rubyinstaller.org/downloads/">http://rubyinstaller.org/downloads/</a> 
<ul>
<li>check box to add Ruby executables to your PATH</li>
</ul>
Start Command Prompt with Ruby 
 <a href="https://tommdaly.files.wordpress.com/2015/01/image.png"><img title="image" style="display:inline;border-width:0;" border="0" alt="image" src="https://tommdaly.files.wordpress.com/2015/01/image_thumb.png?w=561&h=296" width="561" height="296"></a>
In the console type the following
<ul>
<li>gem install sass
<li>IF you get this error </li>
</ul>
<a href="https://tommdaly.files.wordpress.com/2015/01/image1.png"><img title="image" style="display:inline;border-width:0;" border="0" alt="image" src="https://tommdaly.files.wordpress.com/2015/01/image_thumb1.png?w=809&h=187" width="809" height="187"></a> 
Take a deep breath – you need to download the cert and add it to your RubyGem’s certificate directory.
<ul>
<li>Download the new PEM file <a href="https://raw.githubusercontent.com/rubygems/rubygems/master/lib/rubygems/ssl_certs/AddTrustExternalCARoot-2048.pem" target="_blank">AddTrustExternalCARoot-2048.pem</a>
<li>in the ruby command window type
<ul>
<li>gem which rubygems</li>
</ul>
</li>
</ul>
<a href="https://tommdaly.files.wordpress.com/2015/01/image2.png"><img title="image" style="display:inline;border-width:0;" border="0" alt="image" src="https://tommdaly.files.wordpress.com/2015/01/image_thumb2.png?w=368&h=63" width="368" height="63"></a> 
<ul>
<li>go to that folder in windows in windows explorer
<li>open up a subfolder rubygems\ssl_certs
<li>copy the <a href="https://raw.githubusercontent.com/rubygems/rubygems/master/lib/rubygems/ssl_certs/AddTrustExternalCARoot-2048.pem" target="_blank">AddTrustExternalCARoot-2048.pem</a> to the rubygems\ssl_certs
<li>Retry “gem install sass” –SUCCESS!</li>
</ul>
<a href="https://tommdaly.files.wordpress.com/2015/01/image3.png"><img title="image" style="display:inline;border-width:0;" border="0" alt="image" src="https://tommdaly.files.wordpress.com/2015/01/image_thumb3.png?w=537&h=112" width="537" height="112"></a> 


<blockquote>
<h4>Installing SASS Build System</h4>
</blockquote>
The easiest way to install this package is through Package Control. 
1. Download and install the <a href="http://wbond.net/sublime_packages/package_control">Package Control Plugin</a>. Follow the instructions on the website 
2. Open the command panel: <code>Control+Shift+P</code> (Linux/Windows) or <code>Command+Shift+P</code> (OS X) and select ‘Package Control: Install Package‘. 
<a href="https://tommdaly.files.wordpress.com/2015/01/image4.png"><img title="image" style="display:inline;border-width:0;" border="0" alt="image" src="https://tommdaly.files.wordpress.com/2015/01/image_thumb4.png?w=1204&h=413" width="1204" height="413"></a> 
3. When the packages list appears type ‘SASS‘ and you’ll find the SASS Build System. Select to install it. 
<a href="https://tommdaly.files.wordpress.com/2015/01/image5.png"><img title="image" style="display:inline;border-width:0;" border="0" alt="image" src="https://tommdaly.files.wordpress.com/2015/01/image_thumb5.png?w=966&h=418" width="966" height="418"></a> 
4. Set the Build System to SASS,  In Tools –> Build System –> SASS 
<a href="https://tommdaly.files.wordpress.com/2015/01/image6.png"><img title="image" style="display:inline;border-width:0;" border="0" alt="image" src="https://tommdaly.files.wordpress.com/2015/01/image_thumb6.png?w=621&h=438" width="621" height="438"></a> 
5. Now you can compile your SASS files! Launch your build with <code>Control+B</code> (Linux/Windows) or <code>Command+B</code> (OS X).
**NOTE** if you are not getting you are not getting colors on your SASS – click the bottom right corner and set the Language as SASS
<a href="https://tommdaly.files.wordpress.com/2015/01/image7.png"><img title="image" style="display:inline;border-width:0;" border="0" alt="image" src="https://tommdaly.files.wordpress.com/2015/01/image_thumb7.png?w=795&h=294" width="795" height="294"></a> 


 
<h3>Step 2 – Map Network Folder to O365</h3>
The key to this part is to first log into your O365 site w/ Internet Explorer. I then go to any folder and click the button to Open with Explorer. Then I can usually successfully map the network drive.
PRE-REQUISITES – Your site must be in the trusted sites. I actually add a few *.microsoft[sites] <a title="http://blogs.technet.com/b/sharepoint_made_easy/archive/2013/03/20/map-network-drive-webdav-with-sharepoint-online-o365.aspx" href="http://blogs.technet.com/b/sharepoint_made_easy/archive/2013/03/20/map-network-drive-webdav-with-sharepoint-online-o365.aspx">http://blogs.technet.com/b/sharepoint_made_easy/archive/2013/03/20/map-network-drive-webdav-with-sharepoint-online-o365.aspx</a>
IE > Tools > Internet Options > Security > Trusted Sites [click sites button] 
<a href="https://tommdaly.files.wordpress.com/2015/01/image8.png"><img title="image" style="display:inline;border-width:0;" border="0" alt="image" src="https://tommdaly.files.wordpress.com/2015/01/image_thumb8.png?w=525&h=303" width="525" height="303"></a> 
1. Log into your site with Internet Explorer – be sure to check ‘Keep me signed in’
<a href="https://tommdaly.files.wordpress.com/2015/01/image9.png"><img title="image" style="display:inline;border-width:0;" border="0" alt="image" src="https://tommdaly.files.wordpress.com/2015/01/image_thumb9.png?w=626&h=326" width="626" height="326"></a> 

2. Open up any document library [might look different. this screenshot from small resolution virtual machine]
<a href="https://tommdaly.files.wordpress.com/2015/01/image10.png"><img title="image" style="display:inline;border-width:0;" border="0" alt="image" src="https://tommdaly.files.wordpress.com/2015/01/image_thumb10.png?w=1198&h=460" width="1198" height="460"></a> 
3. Next, do the standard map network drive per your Operating System. I’m running Windows 7.
basically right click on Computer and click Map Network Drive
<a href="https://tommdaly.files.wordpress.com/2015/01/image11.png"><img title="image" style="display:inline;border-width:0;" border="0" alt="image" src="https://tommdaly.files.wordpress.com/2015/01/image_thumb11.png?w=743&h=631" width="743" height="631"></a> 
4. Enter in the site url w/ any subfolder you want [root is fine]. I also check connect using different credentials.
<blockquote>
4.1 Enter in your O365 credentials
</blockquote>
<a href="https://tommdaly.files.wordpress.com/2015/01/image12.png"><img title="image" style="display:inline;border-width:0;" border="0" alt="image" src="https://tommdaly.files.wordpress.com/2015/01/image_thumb12.png?w=995&h=742" width="995" height="742"></a> 
5. SUCCCESS ! 


<a href="https://tommdaly.files.wordpress.com/2015/01/image13.png"><img title="image" style="display:inline;border-width:0;" border="0" alt="image" src="https://tommdaly.files.wordpress.com/2015/01/image_thumb13.png?w=1040&h=605" width="1040" height="605"></a> 
<h4>Step 3 – Install & Setup Scout</h4>
For this you will need to create a local working folder for all CSS. for example I will create a folder on the desktop called ‘MySassExample’
1. Download and Install Scout @ <a title="http://mhs.github.io/scout-app/" href="http://mhs.github.io/scout-app/">http://mhs.github.io/scout-app/</a>
2. Once Scout installs, Open it up and click the + in the bottom left to add a new project
<a href="https://tommdaly.files.wordpress.com/2015/01/image14.png"><img title="image" style="display:inline;border-width:0;" border="0" alt="image" src="https://tommdaly.files.wordpress.com/2015/01/image_thumb14.png?w=985&h=776" width="985" height="776"></a> 
3. Navigate to your local working folder
<a href="https://tommdaly.files.wordpress.com/2015/01/image15.png"><img title="image" style="display:inline;border-width:0;" border="0" alt="image" src="https://tommdaly.files.wordpress.com/2015/01/image_thumb15.png?w=971&h=769" width="971" height="769"></a> 
4. Under Configure, Stylesheet Directories –> set the Input Folder to your local working folder & the Output folder to your network mapped drive (o365)
I set it to output to the Style Library of my site.
<a href="https://tommdaly.files.wordpress.com/2015/01/image16.png"><img title="image" style="display:inline;border-width:0;" border="0" alt="image" src="https://tommdaly.files.wordpress.com/2015/01/image_thumb16.png?w=1201&h=797" width="1201" height="797"></a> 
5. Click the Play Button
<a href="https://tommdaly.files.wordpress.com/2015/01/image17.png"><img title="image" style="display:inline;border-width:0;" border="0" alt="image" src="https://tommdaly.files.wordpress.com/2015/01/image_thumb17.png?w=436&h=172" width="436" height="172"></a> 
 
<h3>Step 4 – The Final Step, Verifying it all works!</h3>
1. With Scout running, Go to your local working folder.
2. Create a new .SCSS file or open an existing one in Sublime Text 2
3. Create some SASS 
<a href="https://tommdaly.files.wordpress.com/2015/01/image18.png"><img title="image" style="display:inline;border-width:0;" border="0" alt="image" src="https://tommdaly.files.wordpress.com/2015/01/image_thumb18.png?w=351&h=233" width="351" height="233"></a> 
4. Save, then CTRL+B to build it. You should get the write ~file output.  <a href="https://tommdaly.files.wordpress.com/2015/01/image19.png"><img title="image" style="display:inline;border-width:0;" border="0" alt="image" src="https://tommdaly.files.wordpress.com/2015/01/image_thumb19.png?w=674&h=440" width="674" height="440"></a>
5. In Scout, you should see …. overwrite .css 
Sometimes you need to give it a few seconds to save the file to o365, the network drive tends to take longer to save files
<a href="https://tommdaly.files.wordpress.com/2015/01/image20.png"><img title="image" style="border-top:0;border-right:0;border-bottom:0;border-left:0;display:inline;" border="0" alt="image" src="https://tommdaly.files.wordpress.com/2015/01/image_thumb20.png?w=727&h=248" width="727" height="248"></a>
** NOTE if you are using an existing file make sure you check it out via SharePoint. Otherwise it won’t save and you’ll see errors in Scout when it tries **
 
<h3>Wrap Up</h3>
The concludes how to setup Scout & Sublime Text 2 to create and update SASS styles sheets which compile to .css and automatically push to O365. The hardest thing I found is mapping the drive successfully. There are many helpful articles on the different errors you might get trying to do so.  It may seen like a lot of steps to get going, but if you have used SASS or LESS before you know how powerful it is and how much time you might potentially save. This blog was meant to help get this setup and show you how you can get started. There are other programs like Scout, but Scout was the only one that I could get to work the way I liked. There are also other editors that you could use if you don’t like Sublime Text 2. Best of luck!
 

<h3>Resources</h3>
More on Scout – <a title="http://www.impressivewebs.com/sass-on-windows-with-scout-app/" href="http://www.impressivewebs.com/sass-on-windows-with-scout-app/">http://www.impressivewebs.com/sass-on-windows-with-scout-app/</a>
Errors Mapping Network Drive – <a title="http://blogs.technet.com/b/sharepoint_made_easy/archive/2013/03/20/map-network-drive-webdav-with-sharepoint-online-o365.aspx" href="http://blogs.technet.com/b/sharepoint_made_easy/archive/2013/03/20/map-network-drive-webdav-with-sharepoint-online-o365.aspx">http://blogs.technet.com/b/sharepoint_made_easy/archive/2013/03/20/map-network-drive-webdav-with-sharepoint-online-o365.aspx</a>

SASS – <a title="http://sass-lang.com/" href="http://sass-lang.com/">http://sass-lang.com/</a>
]]></content:encoded>
<wfw:commentRss>https://tommdaly.wordpress.com/2015/01/03/working-with-sass-style-sheets-in-office-365-sharepoint-2013/feed/</wfw:commentRss>
<slash:comments>1</slash:comments>
<media:content url="https://2.gravatar.com/avatar/be15f0680dfa61960dc5799b7ca508d5ac5beeae683a0e309ac667809e07840e?s=96&d=identicon&r=G" medium="image">
<media:title type="html">tommdaly</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/01/image_thumb.png" medium="image">
<media:title type="html">image</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/01/image_thumb1.png" medium="image">
<media:title type="html">image</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/01/image_thumb2.png" medium="image">
<media:title type="html">image</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/01/image_thumb3.png" medium="image">
<media:title type="html">image</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/01/image_thumb4.png" medium="image">
<media:title type="html">image</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/01/image_thumb5.png" medium="image">
<media:title type="html">image</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/01/image_thumb6.png" medium="image">
<media:title type="html">image</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/01/image_thumb7.png" medium="image">
<media:title type="html">image</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/01/image_thumb8.png" medium="image">
<media:title type="html">image</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/01/image_thumb9.png" medium="image">
<media:title type="html">image</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/01/image_thumb10.png" medium="image">
<media:title type="html">image</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/01/image_thumb11.png" medium="image">
<media:title type="html">image</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/01/image_thumb12.png" medium="image">
<media:title type="html">image</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/01/image_thumb13.png" medium="image">
<media:title type="html">image</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/01/image_thumb14.png" medium="image">
<media:title type="html">image</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/01/image_thumb15.png" medium="image">
<media:title type="html">image</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/01/image_thumb16.png" medium="image">
<media:title type="html">image</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/01/image_thumb17.png" medium="image">
<media:title type="html">image</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/01/image_thumb18.png" medium="image">
<media:title type="html">image</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/01/image_thumb19.png" medium="image">
<media:title type="html">image</media:title>
</media:content>
<media:content url="https://tommdaly.files.wordpress.com/2015/01/image_thumb20.png" medium="image">
<media:title type="html">image</media:title>
</media:content>
</item>
<item>
<title>Delete a Workflow on the Host Web from the App Web</title>
<link>https://tommdaly.wordpress.com/2014/05/14/delete-a-workflow-on-the-host-web-from-the-app-web/</link>
<comments>https://tommdaly.wordpress.com/2014/05/14/delete-a-workflow-on-the-host-web-from-the-app-web/#comments</comments>
<dc:creator><![CDATA[Thomas Daly]]></dc:creator>
<pubDate>Wed, 14 May 2014 23:43:11 +0000</pubDate>
<category><![CDATA[Apps]]></category>
<category><![CDATA[Development]]></category>
<category><![CDATA[SharePoint 2013]]></category>
<category><![CDATA[Workflows]]></category>
<guid isPermaLink="false">http://tommdaly.wordpress.com/?p=670</guid>
<description><![CDATA[below is some sample code to delete a workflow on the host web from your app web. This would be useful in the event you want your App to remove a workflow that you have deployed to the host web. NOTE: you must include a reference to “/_layouts/15/SP.WorkflowServices.js” this file can be downloaded here 1: … <a href="https://tommdaly.wordpress.com/2014/05/14/delete-a-workflow-on-the-host-web-from-the-app-web/" class="more-link">Continue reading Delete a Workflow on the Host Web from the App Web</a>]]></description>
<content:encoded><![CDATA[below is some sample code to delete a workflow on the host web from your app web. This would be useful in the event you want your App to remove a workflow that you have deployed to the host web.
NOTE: you must include a reference to “/_layouts/15/SP.WorkflowServices.js”
this file can be <a href="https://dl.dropboxusercontent.com/u/24839514/TomBlogFiles/deleteWorkflow.js">downloaded here</a>
<div id="codeSnippetWrapper">
<div id="codeSnippet" style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;">
<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 1: var deleteWorkflow = function (workflowName) {</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 2:</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 3: //Using the App Web as the client context</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 4: clientContext = new SP.ClientContext.get_current();</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 5:</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 6: //Get the host web URL from the query string params</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 7: //I have a function getHostWebUrl() - which is not included.</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 8: //http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 9: var hostWebUrl = getHostWebUrl();</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 10:</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 11: //Using the hostWebContext as an AppContextSite</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 12: hostWebContext = new SP.AppContextSite(clientContext, hostWebUrl);</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 13:</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 14: //Get the Workflow Services Manager for the Host web, NOTE: you initialize it with the clientContext & the hostWebContext Web)</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 15: var hostWebWorkflowServicesManager = new SP.WorkflowServices.WorkflowServicesManager.newObject(clientContext, hostWebContext.get_web());</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 16: var hostWebWorkflowDeploymentService = hostWebWorkflowServicesManager.getWorkflowDeploymentService();</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 17: var hostWebDefinitionsCollection = hostWebWorkflowDeploymentService.enumerateDefinitions(false);</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 18:</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 19: //load all the workflow definitions from the host web </pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 20: clientContext.load(hostWebDefinitionsCollection);</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 21: clientContext.executeQueryAsync(function () {</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 22:</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 23: //get the enumerator for all the workflow definitions</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 24: var workflowDefinitions = hostWebDefinitionsCollection.getEnumerator();</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 25: while (workflowDefinitions.moveNext()) {</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 26:</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 27: //set the current definition to a variable</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 28: var workflowDefinition = workflowDefinitions.get_current();</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 29:</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 30: //uncomment to see all the workflows that it finds</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 31: //console.log("Found Workflow : " + workflowDefinition.get_displayName());</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 32:</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 33: //looking for a match on the name of the workflow</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 34: if (workflowDefinition.get_displayName() === workflowName) {</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 35: //using the host web workflow deployment service to delete the workflow definition</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 36:</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 37: hostWebWorkflowDeploymentService.deleteDefinition(workflowDefinition.get_id());</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 38: //this comment will just display what workflow WILL BE deleted </pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 39: console.log("Deleted workflow : " + workflowName + ", " + workflowDefinition.get_id().toString());</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 40:</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 41: //if more than one workflow with the same name is found it will delete all of them</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 42: //the delete will get queued up and executed by the .executeQueryAsync</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 43: //if you don't want that then you have to break out of the while loop</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 44: }</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 45: }</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 46: //this query will execute the delete action</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 47: clientContext.executeQueryAsync(function () {</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 48: //Successfully deleted the workflow</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 49: }, function (sender, args) {</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 50: console.log("Unable to delete workflow : " + workflowName);</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 51: console.log("Reason : " + args.get_message() + "");</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 52: });</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 53: }, function (sender, args) {</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 54: console.log("Failed to load workflows");</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 55: console.log("Reason : " + args.get_message() + "");</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:#f4f4f4;border-style:none;padding:0;"> 56: });</pre>

<pre style="overflow:visible;font-size:8pt;font-family:'Courier New', courier, monospace;color:black;direction:ltr;text-align:left;margin:0;line-height:12pt;width:100%;background-color:white;border-style:none;padding:0;"> 57: };</pre>

</div>
</div>
]]></content:encoded>
<wfw:commentRss>https://tommdaly.wordpress.com/2014/05/14/delete-a-workflow-on-the-host-web-from-the-app-web/feed/</wfw:commentRss>
<slash:comments>2</slash:comments>
<media:content url="https://2.gravatar.com/avatar/be15f0680dfa61960dc5799b7ca508d5ac5beeae683a0e309ac667809e07840e?s=96&d=identicon&r=G" medium="image">
<media:title type="html">tommdaly</media:title>
</media:content>
</item>
</channel>
</rss>

If you would like to create a banner that links to this page (i.e. this validation result), do the following:

Download the "valid RSS" banner.
Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)
Add this HTML to your page (change the image src attribute if necessary):

<a href="http://www.feedvalidator.org/check.cgi?url=http%3A//tommdaly.wordpress.com/feed/"><img src="valid-rss-rogers.png" alt="[Valid RSS]" title="Validate my RSS feed" /></a>

If you would like to create a text link instead, here is the URL you can use:

http://www.feedvalidator.org/check.cgi?url=http%3A//tommdaly.wordpress.com/feed/

Home · About · News · Docs · Terms