Tuesday, 26 November 2013

SharePoint 2013 - Responsive SharePoint Design Issues with IE8 and @media tags

UPDATE:  After looking at this again, the answer is yes, I must have been doing something silly.  Guessing the page was not fully refreshing after checking in the Master Page with the changes or something like that, as I haven't changed anything to get it to work, just re-downloaded & re-added the respond.js files.


I've been spending some time with the Responsive SharePoint solution I found on CodePlex here: https://responsivesharepoint.codeplex.com/

and have come across an issue that I am yet to resolve when using Internet Exploer 8 (IE8) to view the page.

Using: Bootstrap-3-server.master

Issue: When using IE8, the top navigation defaults to the mobile view even when full screen (wider than 768px). This is due (i think) to IE8 not reading the .navbar-toggle inside a @media tag, which when wider than 768px, is hidden via display:none. 

Normally, for a solution using bootstrap, to resolve issues with the @media css tag, they ask that you use respond.js which allows IE8 to use @media tags successfully.

I have saved the respond.js file locally on the server and referenced it within the bootstrap-3-master master page but the @media tags are still not being found by IE8.

Has anyone else had/solved this issue? Could it be something silly I'm doing wrong here?

Monday, 25 November 2013

InfoPath 2010 - How Do I Deploy InfoPath Forms & Updates to SharePoint

Deploying an InfoPath form

Once you have developed your InfoPath form, most likely you will need to deploy/publish it to SharePoint so that the information can be stored and reported on.  There are different methods for deployment, which are also dependent on whether you are publishing a fresh form, or updating an old form.

Two methods of Deploying/Publishing Forms

When it comes time to deploy your form to SharePoint, there are two different methods with reasons for and against why and when you would use each.  You can publish the form as a Form Library, or as a SharePoint Content Type.

Deployment Method 1:  As a Form Library
When you publish a form as a Form Library, it will create the library on the SharePoint Site of your choosing, and a copy of the form template can be found here:  http://rootsite/formlibrary/forms/template.xsn

Use this method when you only require one library for the forms and the forms do not get consumed by BizTalk for some other purpose.  The reason to go with this method is because it means a less complex setup of the forms on the SharePoint Site, and doesn’t require us to create a content type just for the form, which in turn keeps SharePoint's back end a bit cleaner.

Pros: Quick to setup.  Automatically creates library for you on the SharePoint Site

Cons:  Can’t re-use the template quickly.  GUID’s for all the template fields will not be the same across Libraries if you need to publish it to multiple locations.

Deployment Method 2: As a Content Type
When you publish a form as a Content Type on SharePoint, that Content Type is available across the entire Site Collection.  This is useful for when a form will be used by multiple departments that each require their own library to store the completed forms.  The difference with this is that the Template for the Content Type needs to be saved within a Document library, so you need to ensure all staff only have Read Only access to that library.

Pros: Form Template is saved as a Content Type to SharePoint, which means you can easily add the Content Type to any Document Library within a few clicks.  So if you need 3 libraries with the same content type for BizTalk it’s quicker to set up.  As it is published as a Content Type, the GUIDs for all the fields in the form will remain the same across libraries in SharePoint, which is a requirement for BizTalk.

Cons: Slower and more complicated to set up correctly.  Once you have published the content type, you still need to create the document library and add the Content type as a selectable option in the library.

Long Story Short:  
If you just need a single library to hold all the form information, just publish it as a Form Library.  If you require multiple libraries to hold the forms and their info, or if you are integrating the form data with other systems, publish it as a content type.

Publishing updates to existing InfoPath forms

If you’re doing it right, you should be saving all the versions of your InfoPath forms using TFS or similar, and deploying your updates to a test environment before pushing them out to your live environment.  With this method of test and publish, sometimes InfoPath can get a bit grumpy about re-using the same SharePoint GUID’s for the form when you re-publish it. 

For this reason, we need to double check that the GUID’s that are currently set against the fields in SharePoint, are the same as the GUID’s that are set against the fields within the form template before publishing.  And if they are not, then change the form template field GUID’s to match what is currently in SharePoint against those same fields.

How to do this:
  • Download a copy of the forms template from it’s current location in SharePoint (template.xsn location above if published as library, where you published the template if published as content type).
  • Open up the form in Design view and go to File > Publish > Export Source Files to a folder on your desktop
  • Do the same thing to your updated version of the InfoPath Form.
  • Open up the manifest.xsf file on both of your forms in Notepad or similar, and about a third of the way down you will find a section that will list all the columns that you have promoted as fields in SharePoint

  • Make sure that each of the ColumnId’s against each ColumnName are the same in both manifests, otherwise update the ColumnId’s in your updated form Manifest.
  • If you had to make changes, save and close the manifest file, then open up the manifest in Design Mode in InfoPath and Publish to SharePoint!

Thursday, 21 November 2013

SharePoint 2013 - Responsive Design

       Just a quick note to say if you haven't heard of it already, then you should check out this solution on CodePlex that is absolutely awesome: http://responsivesharepoint.codeplex.com/

What it contains:
- Responsive resizeable Master Pages & Page Layouts for SharePoint 2013 that work with Twitter's Bootstrap CSS.
- Responsive resizeable Master Pages & Pages Layouts for SharePoint 2013 that work with Zurb's Foundation CSS.

I've tried both briefly but so far prefer the Bootstrap version for the font types and colours.  Although I most of us will be making modifications to suit the clients that we are working with, they are a great starting point to Responsive Design for SharePoint that have been designed very well.

If you don't have time to build your own solution from scratch, this is the perfect starting point to build on top of.  Congratulations and thank you to all who have worked on the project so far!

More to come...