Tag Archives: SP2013

Create the Solution in Visual Studio 2012

22 Nov

I want to start putting together some branding stuff to deploy, so I need to create a solution and some base projects before I get started.

I have decided on the following projects to start off with

GISIT.SharePoint.Branding – Masterpage, css, images, page layouts, theme
GISIT.SharePoint.PageComponents – Webparts (if we decide to add apps later we will need to add a different type of project specific to apps but I’m not sure on this yet)
GISIT.SharePoint.Common – This will be a class library for constants or any common SharePoint functions. There are two ways this could be implemented, a class library or a sharepoint project. The difference between these is the class library needs to be added as a dll to the SharePoint package of any other projects (branding and page components wsp’s), whereas the WSP way would allow you to directly deploy and update the dll directly using the wsp built. If something needed to be only changed in the dll such as a constant value, we will have to to an update on either the branding or page components, which I am happy with at this stage.

1. Open Visual Studio

2. Create a new project.
Name it [Company].SharePoint.Branding
Select SharePoint 2013 Empty Project
Change the solution name to [Company].SharePoint

3. Click on the solution and add a new project

4. Select Class Library (or SharePoint 2013 Empty Project if you want to deploy this as a WSP)
Name it [Company].SharePoint.Common

5. Create another new project in the solution.
Select SharePoint 2013 Empty Project
Name it [Company].SharePoint.PageComponents

6. Right click the whole solution and select Rebuild

7. Add the common dll to the branding and page component projects. First go to the branding project and right click Reference. Click on Add Reference.

8. Click on Solution on the left hand side, then select [Company].SharePoint.Common. Click OK

9. Double click on the package for branding.

10. Click on the advanced tab

11. Click on Add, then Add Assembly from Project Output

12. Select [Company].SharePoint.Common then click OK

13. Save the package file and follow the same steps for the Page Components project.

14. The project is now ready for us to start adding content to. Starting with branding.

Advertisements

What’s new in Branding ?

22 Nov

I created the main (and only) site collection with the team site template. Before I start looking into the new branding features I have to figure out what’s new in SharePoint 2013 and decide the best way of creating the master page and theme etc.

Firstly lets look at what we get when we use the Team Site Template

Site Settings

Themes don’t use office themes anymore but instead use two xml files with the extensions .spfont and .spcolor. These are then used in Composed looks.

Themes

Composed Looks are new to SharePoint 2013 and allow users to choose a masterpage, fonts, colors and a background image.

Composed Looks

To create a new composed look, click on new item in the composed looks gallery. Here you can specify the links to your masterpage, spfont, spcolor and an image.

Composed Looks Creation

Composed looks can be applied by clicking on Change the look under Look and Feel in Site Settings.

More info on creating themes and composed looks: http://www.estruyf.be/blog/themes-and-composed-looks-in-sharepoint-2013/

Composed Looks

Lets Activate the Publishing Features

Head to the Site Settings Page and firstly activate the publishing Site Collection Feature. Site Settings > Site Collection Administration > Site Collection Features > Activate SharePoint Server Publishing Infrastructure.

Publishing Features

We have some additional items under Look and Feel now, Design Manager, Device Channels, Import Design Package and Navigation.

Device Channels

This allows you to define a different master-page for different devices. We won’t be implementing device channels, and there’s a couple of posts already that explain this in detail so I will link these

http://blog.mastykarz.nl/device-channels-sharepoint-2013/

http://sharepointbrian.com/2012/07/intro-to-sharepoint-2013-design-manager/

Import Design Package

There is now an option to export design packages, what this includes is changes to the Master Page Gallery, Style Library, Theme Gallery, the Device Channels list and Page content types (msdn article on this). This is a WSP file of the branding components required (excluding  pages, navigation settings, or the term store). This allows designers to export and import design packages without the use of Visual Studio. I will cover this a little more in the next post about implementing branding where I export out one of these packages to take a look at what’s in the WSP.

Navigation

Navigation looks the same other than the new managed metadata navigation. This allows users to define their navigation as a hierarchy in the term store. NOTEEEE this is ooonly useful if you want the navigation to be on one site, yes site, not site collection :(. I was quite looking forward to this, but maybe in future this will be available across at least a whole site collection. To read about setting this up go to this Nothing But SharePoint Post. Heres a link to an MSDN article that covers talking to the metadata navigation programatically http://msdn.microsoft.com/en-us/library/jj163978.aspx. I’d be very interested to see if someone will create custom navigation that programatically talks to the managed metadata navigation that is associated with the top site / main site collection making it cross site and site collection. Maybe one day….

Design Manager

Design manager allows users to manage page layouts, masterpages and the look and feel of the site by mapping the SharePoint files to a file location where they can edit them using Visual Studio, Notepad++, Dreamweaver or any other tool they prefer. The file a user will edit has commented out snippets of SharePoint Masterpage code that they can work around. SharePoint Brian has covered each of the areas of the design manager here.

To demonstrate how the design manager worker with dreamweave Steve Peschka  has written a great step by step guide. This will give you an idea of how SharePoint works with dreamweaver as well as importing an existing html design and turning that into a masterpage. http://blogs.technet.com/b/speschka/archive/2012/07/27/using-dreamweaver-and-design-manager-with-sharepoint-2013.aspx

Lets Activate the web’s Publishing Feature

Go the Site Features and activate SharePoint Server Publishing

This gives us a Pages library, changes the main URL and gives us more options in the Look and Feel menu.

Most of this is the same as it used to be. There is a new option in the Master page  menu which allows you to use the css file associated with your master page (in the master page gallery you can set this on the master page item). All items set in here apply to all channels, so some sizing etc may need to be overwritten in the other device master pages CSS files.

The welcome page url will need to be changed to a page in the pages library. At this stage there isn’t any pages, so you will need to create a default page and point the welcome page url to there.

Image reditions help optimise images for mobile devices, to use this you have to enable the blob cache however. Walk has written a blog post on this for more information: http://blog.mastykarz.nl/image-renditions-sharepoint-2013/

The site url will change from /_layouts/15/start.aspx#/SitePages/Home.aspx to /SitePages/Home.aspx.

What have we decided so far for our branding implementation?

From what I have played around with so far and read, I prefer the idea of creating my own solution for branding and not exporting anything (this seems cleaner and you will see why in my next post). This means the implementation will be very similar to SharePoint 2010, deploying a master page, images and css etc. The main difference being instead of setting the masterpage and css on the spweb object on activation I suspect we will have to insert a new list item into the composed looks list and then set a property on the web which tells it what composed look to use, OR it will be the same as it used to be… We will find out!

Scripting Sites and Content Type Decisions (features vs. scripting vs. Manual)

15 Nov

Sites

Sites are easy to script, and having a small script to create these means when we upgrade to the full release of SharePoint I can just run the script again.

The sites that we will start out using are:

Root Web
It Support Site
Social/Fun Zone Site
Courses
— 2012
—— Course One
—— Course Two
— 2013
—— Course One
—— Course Two

This will change as we properly script the courses once we have a full list as well as have the template implemented. For now a few empty course sites will do for development.

  1. Run up SharePoint 2013 Management Shell
    You may get the below error, but this can be ignored as its a preview issue: This article here mentions this
    could not create a CmdletConfiguration for CmdletName Start-BulkOperation, Cmlde
    tClass , CmdletHelpFile C:\Program Files\Common Files\Microsoft Shared\Web Serv
    er Extensions\15\CONFIG\PowerShell\Help\Microsoft.Office.Education.Institution.d
    ll-Help.xml.
    Cannot process argument because the value of argument “implementingType” is null
    . Change the value of argument “implementingType” to a non-null value.
  2. I have saved the following PowerShell into a file called CreateSites.ps1. I use NotePad++ for editing PowerShell. At this stage all sites will use the team site template.
    $webApp = “http://gisitportal&#8221; #<— Change thisNew-SPWeb -url ($webApp + “/support”) -Name “IT Support” -Template “STS#0”
    New-SPWeb -url ($webApp + “/fun”) -Name “Fun Zone” -Template “STS#0”
    New-SPWeb -url ($webApp + “/social”) -Name “Social Zone” -Template “STS#0”
    New-SPWeb -url ($webApp + “/courses”) -Name “Courses” -Template “STS#0”
    New-SPWeb -url ($webApp + “/courses/2012”) -Name “Courses – 2012” -Template “STS#0”
    New-SPWeb -url ($webApp + “/courses/2012/courseone”) -Name “Course One” -Template “STS#0”
    New-SPWeb -url ($webApp + “/courses/2012/coursetwo”) -Name “Course Two” -Template “STS#0”
    New-SPWeb -url ($webApp + “/courses/2013”) -Name “Courses – 2013” -Template “STS#0”
    New-SPWeb -url ($webApp + “/courses/2013/courseone”) -Name “Course One” -Template “STS#0”
    New-SPWeb -url ($webApp + “/courses/2013/coursetwo”) -Name “Course Two” -Template “STS#0”
  3. Go to All Site Contents (slightly different to normal….) Click on the cogg icon then View Site Contents, this is on the RIGHT TOP OF THE PAGE by the way.
    View Site Contents SP2013
  4. Now you will see your sites (scroll to the bottom past the “apps”). Done!
    Sub Sites SP2013

Content Types and Fields

I’ve always had issues deciding when to use features or scripted content types, or manual… They seem to fit into different situations, heres where I place them

Feature

When…

— The content type won’t change over time
— The content type name and id must stay the same everywhere (for custom functionality relying on this)
— No one wants to run a script or create content types manually
— The user doesnt need to delete the content type

Feature Drawbacks

— Users cant delete content types
— Next time the feature is updated it either wont change anything (particularly fields at a list level), or it will override everything the user has changed
— Users may need to change content types, this means that a developer may have to keep the solution/feature content types up to date. When this is implemented into the clients environment, it can be risky in terms of whether new fields etc will be added properly, particularly at list level. Extra code can be written for a proper upgrade of the feature, but this is a bit of overhead if it isn’t normal practice.

Pros?

— Easy one click deployment for the client depending where they want certain content types.
— Good for deploying content types that are hugely tied to functionality where the id’s and names, and even fields shouldn’t be changed. This also means the content type and fields are created on activation with the other relevant functionality.

Scripted

When…

— There aren’t a large amount of content types
— Content types will change heavily over time, so the user needs full control over them after implementation
— The content type may need to be deleted

Scripted Drawbacks

— Unless the client is using a content type hub, the script will need to be run against each site collection, and any new site collections in future. If the content types do change and there isnt a content type hub an admin or dev may have to keep this script up to date.

Pros?

— Usually deploy once, and from there on a client can fully manage their own content types with no feature restrictions
— Can be re-used accross environments and site collections during initial deployment

Manually Create

When…

— There aren’t many content types or fields on those content types
— There aren’t many site collections (if not using a content type hub)
— The id’s of the fields and content types don’t need to be the same, new content types and fields get a new GUID, so they would be different per site collection (if not using a content type hub)
— You don’t mind re-creating per environment (test, uat and prod)

Creating Drawbacks

— Obviously creating the same thing over and over can be time consuming
— Have to name everything the same and not make mistakes

Pros?

— If there aren’t very many content types, only 1 or 2 environments and not many site collections… this would be less time consuming

Mention of the Content Type Hub…

A Content Type Hub, or Metadata Hub allows users to create content types and fields in one place. They can then publish these fields and content types out to all of the other webs/site collections so there is no need to deal with them at every level. This can be great for documents that are scared across an intranet where there may be multiple team site collections and they all share common document content types for example.

What to do???

For a start, we know what we want for content types and there aren’t many, we don’t need a content type hub, we only have one environment with no plans for more. The easiest thing we can do for this implementation is manually create the content types and fields. One thing to keep in mind, if we did want more environments, it would be best to grab the details of the existing content types and fields and re-create those using a feature or script in other environments. The same would apply for any new site collections.

Infrastructure and Software

12 Nov

Today I am installing SharePoint. Everything else has been set up by Ryan for me yay. Below is the basic infrastructure we have decided to go with, all servers have server 2012 as the OS.

1 Lync 2013 server

2 AD servers

1 Exchange 2012

1 SharePoint 2013

1 SQL 2012

SharePoint (a.k.a Sauron, 1 box)

All of our servers are going to have a lord of the rings related name. I chose Sauron for SharePoint as its massive and all seeing, also it is the main interface/portal users will be going to.

We are going to use autospinstaller to install SharePoint. This is an easy script to run, you just have to update some xml with your own details.

http://autospinstaller.codeplex.com/

I am doing a basic install of just SharePoint and the service apps, I will separately script the content databases, web apps and site collections if we need some (at this stage there will only be one site collection). Visual Studio 2012 will be used for development, so I will install that on my machine.

Issues:

Along the way we had an issue with named instances, “error occurred while establishing a connection to SQL Server“.

User Profile Service (UPS) – Running spautoinstaller the first time failed on the UPS, this may have something to do with the script originaly failing with our database connection issues. Once we sorted out our connection issues and rolled back and started the script from the start again it installed fine with no errors

Visual Designs

8 Nov

I’m a developer or consultant, either way designing isn’t usually my thing. But I thought it would be fun to come up with something for this intranet and our chosen “theme” to the design was going to be windows 8. The reason for the windows 8 type theme is that all of the IT students are going to be using windows 8, so it will go nicely and gives us some colours etc. to work with (instead of using the institutes colours).

So with my colours chosen for me already and a square theme, even I can design!

Home Page

Here’s the home page, as you can see its very square with lots of white space, and amaaaazing colours! love lots of colours…

Course Page

The other pages will have a left hand nav which will be orange, corresponding to the orange colour in the left side on the home page. There is also a grey bar at the top identifying the current site name, or course in this case.

Fun Zone

Simple 🙂

IT Support

A little more colour in this page in the recent issues. This will help users identify what has been resolved or not.

Now that the visuals are done, my HTML cutter uppera will cut this nicely for me to implement soon. So in the mean time I will finish the SharePoint install and start documenting what we need to implement for the solution, configuration wise (maybe do some powershell too yay).

Wireframing and More Requirements

6 Nov

After going over the requirements again I put together some wireframes using Visio. I decided to do 4: home page, course page, student fun zone page and the it support page. Below I will cover each of these pages with the information about what the components of the page should do.

Home Page

Header Components

  • Global navigation across site collection if necessary. This will be a one level hover over menu.
  • Search. People search and search this site will take the keywords and send the user to the search center.
  • MySite – this will take the user to their mysite so they can blog or look at what they are following etc.

Home Components

  • My Courses – Shows the courses the currently logged in user is taking. Clicking on these links will take the user to the course site under courses.
  • My Newsfeed – Shows the currently logged on users following feed. This shows the latest 5 or so.
  • Latest Course Documents – This shows the latest documents from all courses the student is taking.
  • Upcoming Course Events – Shows the upcoming events for all courses the student is taking.
  • Away Today – A rollup of who is away today. Items that include today in their from and to dates will be included, once the end date is met the item will drop off.
  • Tutor Tweets and News – A tabbed control that displays twitter posts from current tutors. The other tab is a rollup of news items from a news/blog site at the top level.

Course Page

  • Left Menu – A list of relevant links set up by the administrator. This should show links related to the home page and any sub sites for group assignments.
  • Course Outline – This is a text area for a description of the course. There is a link at the bottom which will link to the actual course outline which will be uploaded into the course documents library.
  • Latest Course Documents – This shows a rollup of the latest documents in this course.
  • Upcoming Course Events – Shows the upcoming events for this course.
  • Online Class Mates – Shows the currently logged on users that are in the same course.
  • Course Discussions – Shows the latest course discussion items. This is the main discussion forum, the other forums will not be rolled up here.

Student Fun Zone

  • Social Feed – Shows the latest discussion items.
  • Student Tweets – Users can add themselves to the feed or remove themselves.

IT Support

  • Recent Issues – Shows the latest modified issues with information around the status and category.
  • Request Help – Allows a user to directly add an issue from the home page.
  • How To – A list of how to’s with a rating and comments. (Not sure if rating is possible yet????)

The first stage of wireframing is complete, any additional changes I likely wont re-upload, but they will be visible in the visual designs which is next 🙂

Basic Starting Requirements

6 Nov

Requirements starts out with a notepad, pen and an attempt to not think about what may or may not be possible.

After jotting down notes for a while I have the base requirements from GISIT:

  • Home Page. Students need information rolling up.
    – This is a mix of personalised, course and tutor information
    – [Personal] A list of links linking to courses the student is logged in as
    – Personal] A newsfeed of the latest items relevant to what they are following
    – [Course] A list of the latest documents uploaded to the course sites
    – [Course] A list of upcoming course events such as exams or assignment due dates
    – [Tutor] Away today list of tutors who wont make class
    – [Tutor] A list of the latest tweets made by course tutors
  • Courses. Each course needs its own site to hold documents and events etc.
    – Information on the home page for a course will only be related to the current course
    – A course outline with plain text and a link to the full document
    – A list of the current courses latest documents
    – A list of upcoming course events
    – Currently logged on class mates for easy messaging and calling access (using lync integration)
    – Course discussion forum latest posts and comment numbering
  • Student Fun Zone. An area for student ideas and discussions that are unrelated to a course
    – A feed showing the latest discussion forum items with comment counts
    – A twitter feed where students can add their account for rolling up their tweets (or have a hash tag to get stuff to show up)
  • IT Support Page. Somewhere to get how to’s and ask for help.
    – A list of recently added issues with a status on where the fix got to and how many comments have been made
    – A box to add an issue directly from the page
    – A list of How to articles for common issues

From this information I can start putting together some wireframes by jotting down ideas first, then using visio to put them together in a tidier manner that can be used for visual design later.

The next post will show the wireframe first drafts.