Wednesday 10 April 2013

SharePoint 2013 - Configuring PowerShell

Powershell is great! Love it or hate it, it's become an essentially and awesomely powerful tool for SharePoint admins everywhere. But getting it up and running on a new server still presents the usual problems wtih permissiosns, configurations, version conflicts and a few wee hacks.

There's a lot to be done before you can run the Add-PsSnapIn command.

Step 1 - Installation

If you didn't run up the server yourself, then the first thing you'll want to do is make sure that Powershell, PowerShell ISE and the SharePoint 2013 Management Shell are all available.

Step 2 - Set-ExecutionPolicy

You will then want to set the script execution policy for the local machine to something useful like RemoteSigned, on your dev box anyway.

You can check this using:

> Get-ExecutionPolicy -Scope LocalMachine

And set it with:

> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope LocalMachine

Lovely. At this point if u fired up the SP2013 Management Shell you'd likely receive the error below.

Add-PsSnapin : Cannot load Windows PowerShell snap-in Microsoft.SharePoint.Powe
rShell because of the following error: Could not load file or assembly 'file://
/C:\Windows\Microsoft.Net\assembly\GAC_MSIL\Microsoft.SharePoint.PowerShell\v4.
0_15.0.0.0__71E9BCE111E9429C\Microsoft.SharePoint.PowerShell.dll' or one of its
 dependencies. This assembly is built by a runtime newer than the currently loa
ded runtime and cannot be loaded.
At C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\CONF
IG\POWERSHELL\Registration\SharePoint.ps1:3 char:13
+ Add-PsSnapin <<<<  Microsoft.SharePoint.PowerShell
    + CategoryInfo          : InvalidArgument: (Microsoft.SharePoint.PowerShel
   l:String) [Add-PSSnapin], PSSnapInException
    + FullyQualifiedErrorId : AddPSSnapInRead,Microsoft.PowerShell.Commands.Ad
   dPSSnapinCommand

Yes, even after all this time there are still version conflicts to overcome.

So I created a powershell.exe.config file and saved it to the PS home directory in \Windows\System32\WindowsPowerShell\v1.0. Don't ask me why, but on native 64-bit systems, the 32-bit version is still used and the directory for PS v3 is still v1.0.

<configuration>
    <startup useLegacyV2RuntimeActivationPolicy="true">
        <supportedRuntime version="v4.0.30319"/>
        <supportedRuntime version="v2.0.50727"/>
    </startup>
</configuration>

Don't evern try to make these changes with the 64-bit version or you will run into a world of new problems with system directory redirects back to the 32-bit locations.

Terrific! Try to add the SharePoint Powerhsell Snap-In again and you're now likely to receive this.

The local farm is not accessible. Cmdlets with FeatureDependencyId are not registered.

Hmmm.... I ran off the usual check-list:

  • I'm a local admin and farm admin.
  • I ran the shortcut as Administrator.
  • I modified the shortcut to add the -version 2 flag as per SP 2010 fix (and then removed it).

All to no avail.

The culprit in this case was a SQL Admin who had failed to add the SharePoint farm admins group to the securityadmin and db_owner roles. :\

Hope this helps someone else.

Friday 22 March 2013

SharePoint Designer 2013 - No Design View But a Solution Exists

Yes, it's true, people. The Design View has been removed in Microsoft's latest release of SPD - and there's no plans to bring it back. The developer team offer the following explanation:

With SharePoint Server 2013 embracing new web standards for client side rendering of pages such as JavaScript, JSON, and OData, there is no longer a need to support a visual web page editor within SharePoint Designer.

Excerpt from Changes to the Design View in SharePoint Designer 2013

When you consider that SPD was the ONLY product that EVER understood and could show design-time visualisation of SharePoint components, this decision simply beggers belief. And it's not like this has made the application more stable or stopped it from randomly re-writing your source code either!

The Bad News

So front-end designers no longer need a design view, huh? We'll just hand-code our dataview webparts I suppose. :\ But wait. It gets worse. Gone too are the ability to add connections, change query scope, and add conditional formatting via the GUI! Embracing new web standards while ignoring the XML/XSLT transformation and CAML query pain us poor end users have to go through. Thanks - not!

The Good News

So what's the solution? I'm glad you asked.

While it may not be supported - and probably won't be possible with future versions of SharePoint - you can still connect to an SP 2013 site using SPD 2010. Yup, you heard me. What's more, you can still visually add and modify your DVWPs in the manner to which we've all grown accustomed. There is one trick though.

If you try to open a list form directly, you'll get a blank design window. The trick is to create an aspx page first and then add your Data View(s) to that. Bingo!

I prefer to add an Empty Data View and then connect to the required Data Source. This gives you more control over what to insert and how to insert it. Configure your web parts as you usually do, then export and upload them to your wp gallery for re-use across your site.

In my next post I'll walk through an Online Learning site that I built which takes advantage of many customised list forms and multiple form submissions within modal dialogs.

Wednesday 27 February 2013

SharePoint 2013 - Branding Master and Layout Pages [ in Dreamweaver! :D ]

SharePoint 2013 offers a radically different approach to creating Master and Layout Pages for your sites. It introduces the new Design Manager in what I can only guess is an attempt to "dumb things down" for the new wave of web designers out there who no longer cut HTML by hand.

This new experience promises to make things vastly simpler by letting you use the HTML editor of your choice to develop your pages. Promises....but falls well short.

It does this by allowing you to import your design files in order to produce a master page which you then painstakingly have to shred in order to make anything happen. A distinct lack of documentation on how to achieve this caused additional headaches but...after failing several times to do it the right way, I decided to go down the path of least resistance and do it in reverse.

Creating your master page

I initially considering taking one of the OOTB publishing masters and duplicating this as my base but SP2013 won't let you do this. Custom masterpages are reliant on two files which are connected: the .master and the design-time .html file. The latter is the file you edit in order to influence the .master file.

So let's get started!

Go to the Design Manager and let's do things a little differently. I'll explain why as we go along.

Design Manager

  1. Skip steps 1 and 2 and move straight to 3 where you're asked to map a network drive to your site's masterpage gallery. When mapping the drive omit the &qout;_catalogs/masterpage/&qout; from the end and just go straight to your site's root. The reason for this is that you will want access to your entire site when we set up the remote site in Dreamweaver (or any other design tool).
  2. Now go to step 4 and select the Create a minimal master page link. Name it accordingly and once created, click the link to display the page in the browser. Bland, huh? But believe me, if you know how to mark-up and style HTML, this is FAR easier than working the other way around.
  3. Now open the Snippets gallery at top-right. This is where you can start adding the global elements you want for your page.
A word about Snippets

Upon opening the Snippets gallery you should be presented with the Top Navigation preview and mark-up. The preview window looks decidely bare. One of the reasons for all the bloated and mostly redundant markup is that SharePoint tries to include READ ONLY preview code so that the placeholder looks vaguely useful when viewed in your third-party design tool.

However, for top and vertical navigation elements this placeholder content is created using your existing site structure and navigation settings. If you haven't created any sites or pages then this is more than useless.

This leaves you with two options. Either go ahead and create some susbites and pages in advance to get a reliable preview of your final site. Or ignore it. I'd suggest the former. Despite all the bloated mark-up it's worth keeping in mind that this code is destined for our HTML file, which is used for preview purposes only.

Create your Site Structure and Navigation

So go ahead and do that now. Create some pages and subsites as per your final site structure just to flesh these snippets out. And also apply your site navigation settings. Then head back to Snippets so you'r eready for the next stage.

Create a Dreamweaver Site

If you're following best practice then the site you mapped a drive to will be on your development server. If not, it doesn't really matter but the ultimate goal behind all this branding work is that we will be creating a design package for distribution to production sites once we're done.

  1. If you haven't already authenticated a connection to your mapped drive. Do that now.
  2. Then create a new site. Name it and create a local site path.
  3. Then click Servers and add your mapped drive letter e.g. Z:\ in the server folder, and add the URL to your site.
  4. Click OK and connect to your site, showing the remote server files and you may notice something interesting. There's no _catalogs directory in which to draw down our masterpage! But never fear, just because Dreamweaver can't see this virtual directory, doesn't mean it can't connect to it.
  5. So open up your local site and create the folder structure we'll need for our branding files and also to fool SharePoint.
  6. Now copy your master HTML file across to this location. You can get to the masterpage gallery by typing _catalogs\masterpage after your drive letter.
  7. Switch back to Dreamweaver, select your master and Get this file. We've just created our virtual connection to this location - even though we still can't see it in the remote files!
  8. Now let's open our masterpage in preparation of adding our snippets.

Adding Snippets

Let's do some additional preparation by adding some DIV elements into the page in order to accept the snippets we'll be adding. Notably your site header for Site Logo, Site Title, Sign In, Search and Top Navigation snippets - assuming that's where you want them to go.

I'd also suggest creating a new css file for custom branding and style overrides. And also get all your image resources ready.

Now that we've done all the prep work it's time to start adding our snippets.

  1. Start with the Top Navigation and take a moment to look at some of the customisation settings. There's a lot you can do here to affect the appearance and functioanlity of this control. I prefer to leave the appearance settings alone and craft my own css styles to handle this.
  2. A couple of settings you may want to adjust, however, are under the Customization - Top Navigation ( AspMenu ) section.
    • StaticDisplayLevels: 2 [shows first-level of subsites as static items
    • MaximumDynamicDisplayLevels: 0 [default - no limit. Will show all levels of subsites and pages.]
  3. Click Update to apply your changes. Then copy the HTML snippet and paste it into the relevant container in your HTML master.
  4. Continue to do the same with the remaining placeholders and your page should start to take shape.

Web Parts and Other Elements

You'll notice that the Snippets gallery also allows you to add web part instances to your masterpage (and layouts). This is very powerful and a vast improvement when compared with the developer hell you had to go through to do this in previous versions.

Adding web parts to your master is completely optional and will depend on your requirements. Regardless, I would suggest leaving this for your layout pages, where they will then become editable via the UI.

You can also add Security Trimmed elemtns, Edit Mode panels and Device Channel specific content areas. Again, this will depend on your own requirements and I won't delve into any detail here.

Who > Ate > My > Breadcrumbs??

Looking at your page, you may be wondering why there is no Breadcrumb snippet available either here, or in the Layouts page Snippet gallery. This drove me batty for quite some time until I realised that a broken form of breadcrumb control was in fact on the page and embedded within the DeltaPlaceHolderPageTitleInTitleArea placeholder. Why? I have no idea.

Far too much time was spent trying to work out which SharePoint control was need to properly render these in the manner we're all used to - i.e. You are here: Home > Subsite > Subsite

Google relieved me somewhat by letting me know I was not alone with this issue and I eventually found a solution using the asp sitemap provider below. So just go ahead and add that to your page, or save it for your layouts if you choose not to have this globally visible.

Quick Launch - Vertical Navigation

Another oddity which I've yet to crack is the Vertical Navigation snippet. In the OOTB masterpages this displays your site menu as you would expect. But on appplication pages (such as People and Groups) it hides the site menu and either displays nothing, or the custom nav provider for those pages.

I tried all manner of tricks and additional placeholders to get this to work, even copying from the Oslo master, but still couldn't achieve this. I have to assume it's achieved with javascript but couldn't be bothered trying to work out how. If anyone does, please leave a comment.

In the end I crafted some javascript of my own that allowed the end user to hide/show this container as required on my system.master.

You can jQuery enable your site by simply adding a script reference after the customJSUrl tag.

Stylin'!

Now it's time to go ahead and and start adding styles to your elements. This is not a CSS tutorial but I would at least hope that you have applied a unique ID to all your DIVs so you're in a position to do this in a logical and structured manner.

I can save you some pain by at least showing you where you can safely reference your custom CSS files though. Inside the SharePoint:CssLink block is not the place. :) Add them just after this in order to give them priority. Tis avoids having to use the !important attribute all over the pace in your style overrides.

Wrapping up...

OK by now your masterpage should have taken shape. Of course it'll take quite a few previews in the browser before you get things just right. Upload the page to the server and then refresh the master preview in your browser.

When you're happy it's time to move onto creating layout pages. A word of warning here: get your masterpage right before creating your layout pages. If you have to re-edit your master for any reason, SharePoint forces you to re-attach your layout pages via the UI. This can have undesirable results and even break them due to server-side rewriting of your code. Yes...really.

Creating your Layout Page(s)

Back in Design Manager, skip past Edit Display Templates (another powerful feature which you can explore later) and move onto step 6. I won't spend a lot of time re-iterating what's already been said. You're essentially following the same method we used for creating the masterpage.

The only difference is that you will now be adding all your publishing page placeholders to the page, many of which are not present (for whatever reason) in the newly created layout page. There are also Edit Mode panels, Security Trimmed elements and web parts which you can use at your leisure.

Custom Content Types

If you have custom content types with additional fields, these may not be available in the snippets gallery. You can, hoever still reference them in your pages. You just need to know the field type and name (or ID preferably) and then add it to your page.

The example below assumes a Single Line of Text field.

Edit Mode Panels

These panels display only when the page is in Edit mode and can be very helpful to content authors by allowing them to add content that may otherwise only be added or modified via the Edit Properties form.

Good examples of this are the page Title and Rollup Image fields. I've provided my source below as a guide to help you get started.

Web Part Zones

WPZs are great. They provide wads of functionality to your pages and you can put them all over the place. There is really only one thing to be aware of here. SharePoint creats a unique ID for every web part zone you create. You can rename this to whatever you like but the important thing to note is that if you're creating more than one layout page (which you no doubt will) these IDs should map the the relevant zone(s) in each one. Otherwise your web parts will disappear when you change layout!

For example, if you have a Top and Bottom web part zone in one layout, you will want to make sure you use the same IDs in your other layout pages.

When you're done styling and layig out your new pages, go ahead and upload these too.

Conclusion

As you can see, there is a world of difference when it comes to creating and branding your sites in SP2013. In many ways I think Microsoft did a great job. Hopefully documentation will be provided soon to make it easier for people to add the myriad controls and other functionality to both master and layout pages.

An example of this is adding Rating and Comments fields to a publishing page layout. In my previous post I explained just how easy it is to do that...once you know how.

I hope you found this article useful and, as ever, I am open to any comments, suggestions, or corrections you may have to offer.

SharePoint 2013 - Add Ratings and Comments to Publishing Pages

Ok, I'm probably putting the horse before the cart here, as branding master and layout pages in SP2013 is a massive leap from what we were all used to in previous versions. But I just wanted to show how simple it is to get some of the new social features happening in publishing pages.

SP2013 offers a whole new way of branding. You can add page content fields and other elements to your layouts via the Snippets gallery in the new Design Manager. There are a couple of issues I have with this though:

  1. The generated code includes wads of redundant markup.
  2. The available fields are limited to what's in the default publishing page content type.

That being said, once you work out which controls are what and the prefix required, it's a breeze to just add these yourself. I'm stocking up my own gallery with trimmed snippets of my own which I may publish wholesale in another post.

Add Snippets

If you're familiar with SP2010 branding then adding these elements to 2013 is not significantly different. You just need to wrap your tags in the new comment format. First add SharePointPortalControls tag prefix.

<!--SPM:<%@ Register TagPrefix="SharePointPortalControls" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->

Then add our controls that use this prefix and namespace.

<!--MS:<SharePointPortalControls:AverageRatingFieldControl ID="PageRatingControl" FieldName="AverageRating" runat="server"/>-->
<!--MS:<SharePointPortalControls:SocialCommentControl ID="CommentControl" runat="server"/>-->

It's as simple as that. Drop them in a div, add a touch of css styling and voila!