The SPELL Tabs Inline Navigation for SharePoint Pages SPELL Tabs version 1.1.0 January 2014 Author: Christophe HUMBERT User Managed Solutions LLC
Table of Contents About the SPELL Tabs... 2 Instructions... 3 Prerequisites... 3 Installation... 3 Adding tabs to a page (app mode and default settings)... 4 Adding tabs to a page (app mode with custom settings)... 6 About the inline mode... 8 Playing with the options... 8 Tab colors... 9 Hyperlinks... 9 Controls... 9 Reusing your settings... 9 Additional settings... 10 Playing with the layout... 10 Can I do more with the SPELL Tabs?... 11 Known issues and limitations... 11 Inline Tabs: what are my other options?... 11 Terms of Use... 12 Support... 12 Contact Information... 12 Trademark Notice... 12 1
About the SPELL Tabs As more and more content gets pushed into SharePoint, Web Part pages often become overcrowded. Users are forced to scroll down to discover the page content. The SPELL Tabs address this issue: when added to a Web Part zone, they automatically generate a tabbed interface, creating tabs associated with each Web Part present in the zone (cf. figure 1). Thanks to the tabs, the users can identify at a glance and easily reach the specific area they are interested in. Figure 1: tabs building process If you have been using the Easy Tabs in SharePoint 2007 or 2010, you are already familiar with this concept. The SPELL Tabs are a more solid, powerful and user friendly implementation that targets SharePoint 2007, 2010, 2013 and the current version of Office 365 / SharePoint Online (version 16). The SPELL Tabs are a component of SPELL, a program dedicated to the deployment of User Managed Solutions in SharePoint environments. Note: this document applies to the full version of the SPELL Tabs. Some files and features are not available if you are using the gratis version. 2
Instructions Prerequisites To implement the SPELL Tabs, you need owner or designer permissions on a SharePoint site version 2007, 2010, 2013 or Office 365 / SharePoint Online (version 16). For older browsers (like IE 7), additional code is required to supplement missing capabilities. The SPELL default configuration assumes that your SharePoint environment allows Internet access, and loads the additional code from a public Content Delivery Network (CDN). If it is not the case, SPELL needs to be configured to pull the code from SharePoint. SPELL doesn t support Internet Explorer version 6 or before. Installation The installation process is very simple: just upload the files to a document library and you're good to go! You can for example use the Site Assets library present by default in all SharePoint team sites. You can upload the files either at the root level or in a folder, as long as all SPELL files are at the same level. The Tabs require five SPELL components: SPELL1.1.0Core.min.js and SPELL1.1.0WP.min.js contain core SPELL functions. They are also used by other SPELL solutions, which is why they are stored as separate files. SPELL1.1.0InlineNavigation.min.js is the code that builds the tabs. It can also serve as the foundation to build other navigation interfaces. SPELL1.1.0TabsEditorMode.js is the editor mode that helps you configure the Tabs. SPELL1.1.0Tabs.aspx is the page that renders the tabbed interface or the editor, when SPELL is used in app mode. SPELL1.1.0Tabs.txt is a code sample that showcases the use of SPELL in inline mode. Note: if you are a server admin, you can also choose to upload the files in the SharePoint _layouts folder. Note: the gratis version only includes one file, called SPELL1.1.0TabsGratisVersion.aspx Remember: in app mode, the same SPELL Tabs file can be used across sites and even across site collections, as long as you stay in the same domain. If for example your SPELL file is located in http://divisionone.mycompany.com/siteassets/spell/spell1.1.0tabs.aspx, you can use it on any page in http://divisionone.mycompany.com, but not on pages located in http://divisiontwo.mycompany.com. 3
Adding tabs to a page (app mode and default settings) To add the tabbed interface: 1. Go to your SharePoint page and switch to edit mode (Site Actions > Edit page) 2. Add your content to a Web Part zone (the Web Parts you want to tabify) 3. Add a Page Viewer Web Part as the first Web Part in the zone (cf. figure 1), and link it to your SPELL1.1.0Tabs.aspx file (cf. figures 2 and 3) 4. Save the page and exit the edit mode At this point, you should see your tabbed interface on the page. Figure 2: Page Viewer Web Part link 4
Figure 3: Page Viewer Web Part appearance Note: The tabs are not rendered while you are in edit mode. For a clean tab display, set the Page Viewer Web Part chrome type to None, or check the hidden checkbox under layout. Important! The title of each Web Part must be visible on the page. The code relies on the title to build each tab. If a tab displays Item, it means that the Web Part title was not found and the code uses a default name. If you have used the Easy Tabs in the past, you ll notice some key differences with the implementation of the SPELL Tabs: - The Web Part is located where we want the tabs, not at the bottom of the zone - In app mode, we use a Page Viewer Web Part to link to the code 5
Adding tabs to a page (app mode with custom settings) To customize the look of the tabs, you need to operate in two steps. Step 1: Select your options To select your options, open the SPELL1.1.0Tabs.aspx page. In standalone mode, the page automatically turns to editor mode and displays the options (cf. figure 4). Select your options, and then click on the Apply Custom Options button. This will have two actions: - The colors are applied to the preview - The options are added to the url Example: If the default SPELL Tabs url is: /SiteAssets/SPELL/SPELL1.1.0Tabs.aspx When you choose to set the background color of the active tab to Orange, the url becomes: /SiteAssets /SPELL/SPELL1.1.0Tabs.aspx#css.activeBackground=Orange Important! Your options are not saved; they are just added to the URL. Remember to keep a copy of the current URL after you apply your options. Step 2: to include the tabs in the page, follow the procedure explained in the previous section, except that in the Page Viewer Web Part you ll use the url with options included. 6
Figure 4: SPELL1.1.0Tabs.aspx in editor mode 7
About the inline mode SPELL can also be implemented in inline mode. In this case, instead of a Page Viewer Web Part you ll need a Web Part that accepts code. You can use for example a Content Editor Web Part, a Form Web Part or in SP 2013 a Script Editor Web Part. You could also include the code directly in the page or the Master page. The inline mode targets developers. It is recommended for advanced options, or if SPELL needs to be combined with other code present on the page. The app version is the safer, no code way and is recommended for end users. Note: the inline version offers the same customization options as the app mode, but you d need to edit the code to apply the settings, and save a different version for each customization. For standard options, the app version makes maintenance so much easier! Refer to the SPELL1.1.0Tabs.txt file for an example of inline code. Playing with the options The tabbed interface is made of 3 sections (cf. figure 5): Inline tabs (one tab per Web Part) Hyperlinks Controls Figure 5: the 3 sections of the tabbed interface The edit menu reflects this structure, and offers customization options for each section. 8
Tab colors Maybe grey is too bland for your taste, and you d like to see more vivid colors on the tabs? The edit menu allows you to set the tabs background and font color for the 3 states (active/inactive/hover). There s a choice of 147 color names supported by all major browsers. And if this is not enough, or if you need to match a specific color palette, you can enter a hex code (for example #ff4500). Hyperlinks The edit menu allows up to 3 hyperlinks. For each, enter the displayed text and the url. A url starts with // (absolute link) or / (link relative to the current domain). For example, to create a link to Twitter (https://twitter.com), enter the following values: In the text field: Twitter In the URL field: //twitter.com Note: if you need more than 3 hyperlinks, this can be done by editing the SPELL1.1.0TabsEditorMode file. Controls The tabbed interface includes up to 5 controls: View All / Hide All Full Screen / Back to Page Remove Tabs The edit menu allows you to customize the text displayed in each control. If no text is entered then the control is not displayed. Note: after clicking on the Remove Tabs control, the only way to get the Tabs back is to refresh the page. Reusing your settings Once you have customized your Page Viewer Web Part, you can export it and upload it to the site collection s Web Part Gallery, where it becomes available to all sites and pages. 9
Remember: by passing the options in the hash part of the URL, we are ensuring that the exact same page (SPELL1.1.0Tabs.aspx) is leveraged across sites, and even across site collections within a same domain. In terms of performance and maintenance, this is a significant improvement over the Easy Tabs, which are already far more efficient than traditional inline tabs. Additional settings The SPELL Tabs offer additional settings not available through the edit menu. Some can be added directly to the url options, others require editing the code. For the full list of options, visit the SPELL API documentation. Playing with the layout In the previous chapter we reviewed some examples of tab settings. Below are some more features offered by the SPELL Tabs. Leave the first Web Part out of the tabbed interface Easy: move the Page Viewer Web Part to the second position in the page. Have two Web Parts under the same tab Give both Web Parts the same title. Get a link to a specific tab Right click on the tab and copy the link address. You can then forward the link to other users; when they open the page, the tab you selected will automatically be activated. Display form Yes, the SPELL Tabs work in the dispform.aspx. This is actually a very popular use of inline tabs, especially effective when combined with the SharePoint related items feature (not available in SP 2007). 10
Can I do more with the SPELL Tabs? Sure! As the code is accessible from the user s side, we can easily tweak it to meet specific requirements. For example, SPELL also allows us to completely change the layout, and instead of tabs render a vertical menu, a drop-down list or an accordion. To get in touch with us and learn more about SPELL, see the contact information at the end of this document. Known issues and limitations Characters In its standard version, the SPELL Tabs only retain printable ASCII characters and will strip out the rest. If your environment requires non-ascii characters in the tab titles, please contact us. Calendar views in SharePoint 2010, Timeline in SharePoint 2013 The SP 2010 calendar has a resizing bug. This bug affects the SPELL Tabs and the Easy Tabs, as the role of the tabs is basically to do Web Part resizing at runtime. The fix is to give the Web Part that contains the calendar a fixed width. This issue is not present in other versions. In SP 2013 and the current Office 365, you might experience a similar issue with timelines in Tasks lists. Inline Tabs: what are my other options? Inline tabs are very popular in Web design, and several JavaScript libraries offer this feature. One of the most popular in the SharePoint world is jquery UI. It is also present in most major JavaScript frameworks (Twitter Bootstrap, dojo, Kendo UI, etc.). What makes the SPELL Tabs different is their ability to feed from the page itself to generate the tabbed interface (cf. figure 1). This is different from traditional design where each page requires its own, specific html code. The Easy Tabs already relied on this technique, but SPELL is taking it one step further. As we have seen in the previous chapters, with the SPELL Tabs, even core settings like colors are 11
passed as parameters, so the exact same code can be reused across multiple teams and site collections. This translates into better performance and much easier maintenance. Terms of Use Along with the SPELL files you receive an End User License Agreement. Please read it. If you do not accept the terms, you must not install or use the application. Support User Managed Solutions offers support - webinars, forum, and consulting hours via the SPELL program. Please contact us for more details (see information below). Contact Information Christophe HUMBERT SPELL Program - User Managed Solutions LLC E-mail Christophe@UserManagedSolutions.com Phone +1-858-999-6321 Skype ChristopheHumbert Twitter @UserManaged, @Path2SharePoint Website http://usermanagedsolutions.com/spell Blog http://blog.pathtosharepoint.com Trademark Notice Office 365 and SharePoint are registered trademarks of Microsoft Corporation. 12