Responsive SharePoint WSP Edition

Transcription

1 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 and Foundation version 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

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 Responsive for SharePoint Server 2013/Office365 sandboxed solution Customization SharePoint Server 2013/Office How to modify existing Master Pages and Page Layouts How to create new Master Pages and new Page Layouts SharePoint Foundation (with Publishing Infrastructure) How to modify existing Master Pages How to modify existing Page Layouts How to create new Master Pages How to create new Page Layouts RioLinx 2013 Page 2

3 Why Responsive SharePoint WSP Edition? This project is based on some of Responsive SharePoint projects on CodePlex originally built by the PixelMill team ( 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 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 ). 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 ( but that solution is only compatible with SharePoint Foundation 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 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 3

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, RioLinx 2013 Page 4

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 5

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= , 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 subsites, but that might be your only choice. RioLinx 2013 Page 6

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 7

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 3 rd level. Because of still unresolved CSS issues, the Zurb Foundation 4 master page only shows 1 st level sub-sites and don t provide any fly-out menus: RioLinx 2013 Page 8

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 9

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 10

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 11

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 ( 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 12

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 13

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 14

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 15

16 RioLinx 2013 Page 16

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 17

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 18

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 19

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 20

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 21

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 22

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 23

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 24

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 25

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 26

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 27

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 28

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 29

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: RioLinx 2013 Page 30