responsive version 1.0 bootstrap 3 and sharepoint wsp...
TRANSCRIPT
Responsive
SharePoint WSP
Edition
Version 1.0
Bootstrap 3 and
Foundation 4
for SP 2013
The Bootstrap 3 and Foundation 4 frameworks integrated with
Microsoft SharePoint 2013, including several master pages for
both SharePoint Foundation and SharePoint Server. It also
includes a Publishing feature for SharePoint Foundation. Based
on Bootstrap version 3.0.0 and Foundation version 4.3.2.
Includes all source files, installation and usage instructions.
Authors: Ugo Brunet
Raphael Londner
Based on the work of :
Eric Overfield
D’arce Hess
Gilda Spencer
RioLinx © 2013 Page 2
Table of Contents
Responsive SharePoint WSP Edition
Table of Contents .......................................................................................................................................................................................... 2
Why Responsive SharePoint WSP Edition? ......................................................................................................................................... 3
What is in this Package? ............................................................................................................................................................................. 5
Installation Instructions ............................................................................................................................................................................... 6
Initial configuration for mobile devices ........................................................................................................................................... 6
Responsive for SharePoint Foundation 2013 solution ............................................................................................................... 7
Publishing for SharePoint Foundation 2013 solution ............................................................................................................... 12
Responsive for SharePoint Server 2013/Office365 sandboxed solution ........................................................................... 17
Customization............................................................................................................................................................................................... 23
SharePoint Server 2013/Office 365 .................................................................................................................................................. 23
How to modify existing Master Pages and Page Layouts .................................................................................................. 23
How to create new Master Pages and new Page Layouts ................................................................................................. 25
SharePoint Foundation (with Publishing Infrastructure) ......................................................................................................... 26
How to modify existing Master Pages ....................................................................................................................................... 26
How to modify existing Page Layouts ....................................................................................................................................... 26
How to create new Master Pages ................................................................................................................................................ 28
How to create new Page Layouts ................................................................................................................................................ 28
RioLinx © 2013 Page 3
Why Responsive SharePoint WSP Edition? This project is based on some of Responsive SharePoint projects on CodePlex originally built by the PixelMill
team (http://responsivesharepoint.codeplex.com/). Although it is a great step forward towards a responsive site
on SharePoint, there are some limitations that can prevent a wide use of responsive frameworks on SharePoint.
First of all, the master pages in this original project are not compatible with SharePoint Foundation 2013,
because they use references to the Microsoft Publishing assembly, which is not present in SharePoint
Foundation environments. This original project also relied on the new 2013 Design Manager, which is only
available in SharePoint Server 2013. Moreover, this dependency on Design Manager also required inconvenient
style sheet adjustments of the responsive master pages in SharePoint Designer for path based site collection
(such as http://ourwebapp/sites/contoso ).
Overall, we felt it was a good idea to build “standard” SharePoint WSP solutions in order to streamline the
deployment process and avoid lengthy customizations and manipulations in SharePoint Designer.
We first decided to build a SharePoint 2013 Foundation compatible version of the PixelMill project.
Unfortunately we had to face some difficulties:
- In SharePoint Foundation, we cannot use the $SPUrl expression builder to reference our style sheets and
scripts in our master pages, because it’s only available with SharePoint Server. We thus had no choice but
to use references to files stored in the SharePoint 15 Hive (inside the layouts folder), and that meant our
solution had to be a farm solution, not a sandboxed.
- We also had to figure out how to use responsive page layouts in SharePoint Foundation, because none
of the default web part page layouts available with SharePoint Foundation are responsive. By looking at
the way SharePoint Foundation implemented its page templates, we managed to build a custom
Responsive Web Part Page content type that allow us to create pages based on a limited number of
responsive page templates, also stored in a sub-folder of the _layouts folder.
Because we were limited by the number of page templates and because it is impossible for a site administrator
to modify those page templates (as she typically doesn’t have access to the SharePoint server), we decided to
provide a Publishing-like feature for SharePoint Foundation 2013 and to use it to provide page templates
that can be stored in a SharePoint library and therefore be easily modified by a site administrator:
- We found the Mund Publishing Infrastructure (http://mundpublishingfeatur.codeplex.com/) but that
solution is only compatible with SharePoint Foundation 2010. We thus first migrated it to be SharePoint
2013 compatible and modified it slightly to fit our requirements. This 2013-compatible version is available
at http://spf2013publishing.codeplex.com/ and is optional.
- We then added 3 additional features to our solution to provide Bootstrap 2, Bootstrap 3 and Foundation
4 page layouts in a specific library of a SharePoint Foundation site (those features have a dependency on
our SharePoint Foundation 2013 Publishing Infrastructure so you will need to deploy it before you can
activate those 3 features). That, any user who has access to SharePoint Designer is able to modify and
create new responsive page templates within a SharePoint Foundation site.
RioLinx © 2013 Page 4
When we were done with this first farm solution, the PixelMill team motivated us to implement a solution that
would be compatible with Office 365, since Office 365 doesn’t support the deployment of farm solutions.
Because we weren’t bound by the limitations of SharePoint Foundation, we were able to build a sandboxed
solution which is compatible with both SharePoint Server 2013 and Office 365. By activating the Publishing
Server features, we are able to provide both our responsive master pages and our responsive page templates in
the ~site/_catalogs/masterpage folder. In this solution, any user with the permissions to deploy a sandboxed
solution can easily and quickly build a SharePoint responsive site in minutes, as well as to add or modify these
files by using SharePoint Designer.
Here is a list of additional improvements we brought to these solutions:
Made all master page MDS-compliant (see Bill Baer’s blog for an introduction to MDS)
Added the left navigation bar as a dropdown menu in mobile views
Added 3-level sub-sites in navigation bar (in Bootstrap 3 only)
Added OpenGraph tags to the page layouts compatible with the SharePoint Foundation Publishing
Infrastructure
Removed the search control when viewed on small screens
Remove the right suite bar controls (Share, Sync, Edit, etc…) when viewed on mobile screens
Remove the Office 365 suite bar links when viewed on mobile screens
Reduced the site logo image when viewed on mobile screens
If you find any issues with these solutions, please provide feedback and comments at the CodePlex project
discussion area, http://responsivesharepoint.codeplex.com/discussions.
RioLinx © 2013 Page 5
What is in this Package? Within the RioLinx.SharePoint.Responsive.zip file you will find 2 directories:
ResponsiveFoundation– This folder contains the WSP farm solution file to be deployed in a SharePoint
Foundation 2013 farm, as well as scripts you can use to easily deploy the WSP solution file as a SharePoint
Administrator. You may also deploy this solution is a SharePoint Server 2013 environment, but you will have to
create your own responsive Page Layouts if you plan to use the SharePoint Server Publishing Infrastructure.
ResponsiveServer – This folder contains a sandboxed WSP solution to be used with the SharePoint Server
Publishing (site collection and site) features activated. This solution is compatible with both SharePoint Server
2013 and Office 365.
RioLinx © 2013 Page 6
Installation Instructions
Initial configuration for mobile devices In order for mobile devices to actually display the responsive pages (and not the default SharePoint mobile
view), there are 2 options:
1. If you have access to the SharePoint file system on your front-end servers, you can disable the mobile
view for all sites in a specific web application’s zone by adding the following in the zone’s web.config
file, inside the <system.web> section:
<browserCaps>
<result type="System.Web.Mobile.MobileCapabilities, System.Web.Mobile, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
<filter>isMobileDevice=false</filter>
</browserCaps>
The significant advantage of this solution is that all sites in that web application are instantly
responsive-capable, but that might not be an available option.
2. If you don’t have access to the SharePoint file system (which is the case in Office 365), you have no
other option than to disable the Mobile Browser View site feature on each and every site and sub-site
that may be accessed by mobile users. This is obviously inconvenient if you have a lot of sites and sub-
sites, but that might be your only choice.
RioLinx © 2013 Page 7
Responsive for SharePoint Foundation 2013 solution 1. Extract the RioLinx.SharePoint.Responsive.zip file on one of your SharePoint web front end server
Navigate to the ResponsiveFoundation folder and run DeployResponsiveFoundation.bat
2. This will deploy your solution globally to all your SharePoint web front-end servers.
3. Next, navigate to the Site Settings page of your site collection and select Site collection features.
Search for the Responsive SharePoint - Master Pages for SharePoint Foundation 2013 feature and
activate it.
4. Next, go back to your Site Settings and select Select Master Page (in the Look and Feel section).
5. Pick the responsive master page (Bootstrap 2, Bootstrap 3 or Zurb Foundation 4.3.2) you want to use
and click on the scope you want it to be used (either this site or all its sub-sites).
RioLinx © 2013 Page 8
6. You should get a Responsive Master Page applied to your site (below Bootstrap 3):
Note: the Bootstrap 3 master page is the only master page capable to show sub-sites down to the 3rd
level. Because of still unresolved CSS issues, the Zurb Foundation 4 master page only shows 1st level sub-sites
and don’t provide any fly-out menus:
RioLinx © 2013 Page 9
7. In order to use the responsive page templates, navigate to Site Contents and select Site Pages:
8. We need to provide the page template library with some responsive layouts. Select Library (in the
SharePoint ribbon) and click on Library Settings. Then, under Content Types, click on Add from
existing site content types.
9. Select Responsive Content Types in the content types drop-down list and add the Responsive Web
Part Page content type. When you’re done, press OK
RioLinx © 2013 Page 10
10. Next, navigate back to your Site Pages library and select Files New document Responsive Web
Part Page:
11. Finally, complete all the required fields, choose the layout you want to use (make sure you select a a
layout template that matches your responsive master page), select the library you want the page to be
created in (e.g. Site Pages) and click Create:
RioLinx © 2013 Page 11
12. You should get a responsive page (decrease your browser width to see the mobile view)
Below is a screenshot of a page created with the Orbit Page Template.
RioLinx © 2013 Page 12
Publishing for SharePoint Foundation 2013 solution The installation of this solution is optional and is only recommended if you want to take advantage of a
lightweight publishing feature in SharePoint Foundation, similar to (but not iso-functional) the Publishing
Infrastructure available in SharePoint Server.
1. Download the SharePoint.Foundation.Publishing.2013.zip file from the SharePoint Foundation 2013
Publishing Infrastructure project on CodePlex (https://spf2013publishing.codeplex.com) and extract it
somewhere on your SharePoint server. Extract it and run the InstallFoundationPublishing.bat
1. Navigate to the SharePoint Central Administration, and under System Settings, click Solution
Management. You should see that the sharepoint.foundation.publishing.2013.wsp is not deployed
to any web application yet. Select it and on the next page, click Deploy Solution
2. Select the Web application on which you wish to enable the solution and click ok
RioLinx © 2013 Page 13
2. Navigate to your site collection, and in the Site Settings activate both the Site Collection and Site
features of Publishing for Foundation. In Site collection features, please activate SharePoint
Foundation Publishing Infrastructure. Then in Manage site features, activate SharePoint
Foundation Publishing.
RioLinx © 2013 Page 14
3. Next, provide your site with some responsive page layouts. Go back to the Site collection features and
activate the features corresponding to the responsive framework you want to use (Bootstrap 2,
Bootstrap 3 or Zurb Foundation 4.3.2):
4. In order to create new pages using those page layouts, navigate to Site Contents and select Web
Pages (under Lists, Libraries, and other Apps). Then click Files (in the ribbon), New document and
select any of the four items.
5. Complete at least the Title and Page Url fields and select the Layout you want to use, then press the
Create button(
RioLinx © 2013 Page 15
Note: the Open Graph fields are used to generate Facebook Open Graph meta tags that can be useful
for external-facing sites – note that the Open Graph Image Url field is not used yet because of an
unresolved issue with how SharePoint generates urls as text).
6. Congratulations, your page should now be responsive! (see screenshot of a Bootstrap 3 Orbit page on
next page)
RioLinx © 2013 Page 17
Responsive for SharePoint Server 2013/Office365 sandboxed solution
1. First, deactivate the Mobile Browser View site feature, otherwise users accessing the site from real,
mobile devices will be defaulted to the SharePoint standard mobile view of the site.
2. Second, make sure that both Site and Web features for SharePoint Server Publishing are activated.
Browse to the Site Settings page and in Site collection features, make sure SharePoint Server
Publishing Infrastructure is activated. Then browse to Manage site features and make sure
SharePoint Server Publishing is activated. If those 2 features are not activated yet, please activate
them.
RioLinx © 2013 Page 18
3. Next, browse to Site Settings and select Solutions (under Web Designer Galleries). Select Upload
Solution in the SharePoint Ribbon. Browse to your local ResponsiveServer folder and upload the
RioLinx.SharePoint.Responsive.Server.wsp file.
4. After uploading the solution, activate it by selecting Activate in the following screen and wait a few
seconds (that screen is not very responsive…) before the screen disappears and the solution appears as
activated :
RioLinx © 2013 Page 19
5. Verify that the Responsive SharePoint - Master Pages for SharePoint Server 2013 site collection
feature has been activated.
6. Now you should be able to apply a responsive Master Page. Go to your Sites Settings and click on
Master Page (under Look and Feel)
7. Select the master page you want to apply to both Site Master Page and System Master Page, and press
OK.
RioLinx © 2013 Page 20
8. You should now have a Responsive site, although the home site is not responsive yet.
\
The following screenshots show a SharePoint Zurb Foundation site as seen in a real LG Android device.
RioLinx © 2013 Page 21
9. In order to use the responsive page layouts, browse to Site Content and select Pages
10. Select Files (in the ribbon), New Document and select Article Page.
RioLinx © 2013 Page 22
11. Finally, complete the required fields and select a page layout that matches the master page you
previously applied. Then click Create.
12. The result should be a Responsive Web Page :
RioLinx © 2013 Page 23
Customization
SharePoint Server 2013/Office 365
How to modify existing Master Pages and Page Layouts
1. In order to modify either the master pages or the page layouts without access to the SharePoint server,
you must use SharePoint Designer. Connect to your site and browse to All files
_catalogs/masterpage and select the master page or page layout you want to modify.
2. Select Edit File Edit File in Advanced mode
RioLinx © 2013 Page 24
You may also download the source code of the WSP solutions and modify or add master pages and page
layouts in the Visual Studio project (that’s our preferred approach, but only works if you can re-deploy the
solution to your server).
RioLinx © 2013 Page 25
How to create new Master Pages and new Page Layouts
1. In order to create either a new master page or a new page layout, you need to use SharePoint
Designer. Connect to your site and go to either Page Layouts or Master Pages, then click on New
Page Layout or Blank Master Page. Then complete the required fields and click OK.
2. Copy and paste the content of an existing, responsive master page or page layout and make the
necessary modifications.
RioLinx © 2013 Page 26
SharePoint Foundation (with Publishing Infrastructure) This section only covers customizations when the SharePoint Foundation Publishing Infrastructure is present in
the SharePoint Foundation farm, mostly because the only other option is to download the source code of
RioLinx.SharePoint.Responsive.Foundation and add additional page layouts in the Layouts/PageTemplates
folder. Since developer-oriented tasks are out-of-scope in this user guide, we only focus on customizations that
can be performed by end users, without requiring access to Visual Studio and the SharePoint file system.
How to modify existing Master Pages
Please refer to the process described above for SharePoint Server 2013/Office 365
How to modify existing Page Layouts
Important Note: modifications to existing page layouts currently only affect new pages, not existing ones (the
SharePoint Foundation Publishing Infrastructure does not yet include the ability to “refresh” existing pages
when the underlying page template has changed).
1. Open your site in SharePoint Designer, navigate to All Files PageLayouts, right-click on the page
layout you want to modify and select Edit File in Advanced Mode.
RioLinx © 2013 Page 27
2. Make your desired modifications and save. For instance, in the screenshot below, we add a footer row
with 2 Web Part Zones in the Bootstrap 3 Banner page layout:
3. Create a new page based on your modified page layout. The changes you made should now appear in
new pages (the screenshot below shows the additional Footer Left and Footer Right Web Part Zones
added to the BS3 Banner page layout):
RioLinx © 2013 Page 28
How to create new Master Pages
Please refer to the process described above for SharePoint Server 2013/Office 365
How to create new Page Layouts
1. Navigate to the root web of your site collection and in the Site Contents page select Page Layouts.
2. Select Files New Document SPF Page Layout
3. In the page that opens, select the proper content type (usually SPF Page Layout), enter a Page Url, a
Title and an optional Description for your new page layout and click OK:
RioLinx © 2013 Page 29
4. Open your site in SharePoint Designer, navigate to All Files PageLayouts, select an existing page
layout that will serve as the base for your new page layout and select Open.
5. Press Ctrl+A, Ctrl+C to select the whole page layout content and copy it to the clipboard. Close the file.
6. Open your site in SharePoint Designer, navigate to All Files PageLayouts, right-click on the page
layout you just created and select Edit File in Advanced Mode.
7. Select the default content of the page and press Ctrl+V to paste the content of the page layout you
opened in steps 4 and 5 above.
8. Add or modify any content you need in new page layout (in the screenshot below, we added a footer
row):
RioLinx © 2013 Page 30
9. Save your file and close SharePoint Designer. You can also optionally press F12 in SharePoint Designer
to open your new page layout in Internet Explorer and verify that it contains the content you put in.
10. Create a new page in the Web Pages library of your site and choose the new page layout you created:
11. Edit your page and verify that the layout matches your new page layout: