SPELL Tabs Evaluation Version

SPELL Tabs Evaluation Version Inline Navigation for SharePoint Pages SPELL Tabs v 0.9.2 Evaluation Version May 2013 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)... 3 About the inline mode... 5 Playing with the options... 5 Reusing your settings... 7 Playing with the layout... 7 Can I do more with the SPELL Tabs?... 8 Known issues and limitations... 8 Future Developments... 9 Inline Tabs: what are my other options?... 9 About the Current Release... 9 Terms of Use... 10 Contact Information... 10 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 taba 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. SPELL Tabs is a more solid, powerful and user friendly implementation that targets SharePoint 2007, 2010, 2013 and SharePoint Online (Office 365). In this document, we are going to explore the latest release of the SPELL Tabs (version 0.9.2). The evaluation files will allow you to test the tabs live in your own environment. For a live example, check out the home page of the SharePoint User Toolkit. SPELL Tabs is a component of SPELL, a program dedicated to the deployment of User Managed Solutions in SharePoint environments. 2

Instructions Prerequisites To implement the SPELL Tabs, you need owner or designer permissions on a SharePoint site version 2007, 2010, 2013 or SharePoint Online (Office 365). For older browsers (like IE 7), the evaluation version requires Internet access as the code used to supplement missing capabilities is located on a public Content Delivery Network (CDN). Installation The installation process is very simple: just grab the two files (SPELLv0.9.2CoreTemplateWPNav.js and SPELLv0.9.2TabsAppModeDemo.aspx) from the downloads section, upload them 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. SPELLv0.9.2CoreTemplateWPNav.js was built for the demo, it is a bundle of 4 SPELL modules (Core, Micro-Templating, Web Part Interaction, Inline Navigation). SPELLv0.9.2TabsAppModeDemo.aspx is the app page that builds the tabs. Remember: 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, you can use it on any page located in http://divisionone.mycompany.com, but not on pages located in http://divisiontwo.mycompany.com. Adding tabs to a page (app mode) To add the tabbed interface: 1. Go to your SharePoint page and switch to edit mode (Site Actions > Edit page) 2. Add to a Web Part zone the Web Parts you want to tabify (your content) 3. Add a Page Viewer Web Part as the first Web Part in the zone (cf. figure 1), and link it to your SPELLv0.9.2TabsAppModeDemo.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. 3

Figure 2: Page Viewer Web Part link Figure 3: Page Viewer Web Part appearance 4

Note: The tabs are not rendered while you are in edit mode. Important! The title of each Web Part must be visible on the page. The code relies on the title to build each tab. If the tab title says Item, it means that the Web Part title was not found. If you have used the Easy Tabs in the past, you ll notice some key differences with the implementation of the SPELL Tabs in app mode: - We use a Page Viewer Web Part to link to the code - The Web Part is located where we want the tabs, not at the bottom of the zone - The Page Viewer Web Part should not be hidden as it serves as the container for the tabs About the inline mode SPELL can also be implemented in inline mode - not featured in this demo, as the objective is to showcase the app mode. The procedure for the inline version is similar to the app version, except that 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. The app version is the safer, no code way and is recommended for end users. We ll also see in the next chapter that it offers an interesting way to memorize the tab settings. Playing with the options The evaluation sample has been condensed into two files, and some parts like the settings menu are included. It doesn t mean that you won t be able to tweak the options on the contrary this is an opportunity to get a hands on experience and understand how the app mode deals with custom settings. Note: if you d like to see an example of SPELL settings menu, check out the SPELL Charts demo. Note: the inline version offers the same customization options, but you d need to edit the code to apply the settings, and save a different version for each customization. The app version makes maintenance so much easier! 5

So let s see how settings work with a first example. What we ve done so far: - We uploaded the two files to a library, for example the default Site Assets library: https://collaboration.mycompany.com/siteassets/ - We selected a site (for example PMO) and a page (for example Dashboard.aspx): https://collaboration.mycompany.com/pmo/projectsite1/pages/dashboard.aspx - We added Web Parts to a zone, the first is a Page Viewer Web Part linking to the SPELL Tabs file: https://collaboration.mycompany.com/pmo/siteassets/ SPELLv0.9.2TabsAppModeDemo.aspx Note: as everything is happening in the same domain, we can omit the http.com part of the url and just enter /PMO/SiteAssets/ SPELLv0.9.2TabsAppModeDemo.aspx as link. Experiment 1: changing the default background color Maybe grey is too bland for your taste, and you d like to see more vivid colors on the tabs? Go back to edit mode, and in the settings of the Page Viewer Web Part, modify the URL link as follows (changes in bold): /PMO/SiteAssets/ SPELLv0.9.2TabsAppModeDemo.aspx#css.activeBackground=darkorange Do you see the difference? Now the active tab should be displayed with an orange background! If darkorange is not your color, 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: /PMO/SiteAssets/ SPELLv0.9.2TabsAppModeDemo.aspx#css.activeBackground=#ff4500 Trivia: the settings name css stands for Cascading StyleSheets (the language used in Web design to describe the look and formatting of a Web page). So this is how the SPELL apps work: the options are stored directly in the fragment part of the URL (also called the hash part as it is identified by a starting # ). The use of the hash part to store parameters is not specific to SPELL, it has become a standard technique in recent years. You can see it on sites such as twitter.com or kayak.com. It is also present in SharePoint 2013, where it is a key component of the minimal download strategy. 6

Some more examples Now that we understand how the settings are stored, here are some more examples for you to try out: - Add introduction text above the tabs: /PMO/SiteAssets/ SPELLv0.9.2TabsAppModeDemo.aspx#intro=myIntroText - Remove the rounded corners: /PMO/SiteAssets/ SPELLv0.9.2TabsAppModeDemo.aspx#css.radius=0 - Add a remove tab: /PMO/SiteAssets/ SPELLv0.9.2TabsAppModeDemo.aspx#remove=X Note: the above examples apply to the evaluation version 0.9.2. The option names might differ in SPELL v1 and above. 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. Remember: by passing the options in the hash part of the URL, we are ensuring that the exact same page 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. 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. Link to a specific tab Right click on the tab and copy link address. You can then forward the link to other users, it ll open the page and automatically activate the page you selected. 7

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). Can I do more with the SPELL Tabs? Yes! First, there are some more options we haven t tackled in this evaluation version for example the class option that allows different tab styles to coexist on a same page. And we can go further. As the code is accessible from the user s side, we can easily tweak it to meet specific requirements. For example, just changing a couple lines will make the tabs compatible with existing frameworks like jquery UI. SPELL also allows us to completely change the layout, and instead of tabs render for example a vertical menu or a drop-down list. This is done by a module called SPELL Nav (SPELL Tabs actually being a subset of SPELL Nav). Do not take SPELL at face value! If you have specific needs that SPELL doesn t seem to address, let us know and we ll take up the challenge! See the various ways to contact us at the end of this document. Known issues and limitations Characters In its standard version, the SPELL Tabs only retains 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 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 (SP 2007, SP 2013, new Office 365). 8

Future Developments The SPELL Tabs are already feature rich, and at this point should cover most needs. Future developments will mainly be in the two following directions: Look and feel: variations of the tabs compatible with popular frameworks (jquery theme roller, dojo toolkit, SharePoint themes, etc.) Other types of inline navigation: vertical menu, drop-down menu, etc. Remember: SPELL is a User Managed Solution. All the code is accessible from the user s side and can be extended to meet specific requirements. 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 (dojo, Kendo UI, etc.). What makes the SPELL Tabs different is their ability to feed from the page itself to build the tabbed interface. While in traditional design each page requires its own html code, with SPELL the same code serves multiple pages. 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 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. About the Current Release The development of SPELL started in 2010. Since Spring 2012, SPELL has been implemented by a handful of early adopters, ranging from small businesses to teams in Fortune 500 companies. The launch of version 1 is scheduled for June 2013. You are welcome to share your thoughts on the evaluation version so that we can incorporate your feedback in version 1. 9

Terms of Use The SPELL Tabs evaluation version can be downloaded from this page. There is no enforced time limit for the evaluation. The full version (SPELL Tabs or SPELL Nav) requires a license for use in production. Licenses can be obtained via a subscription to the SPELL program, please visit this page or contact us for details. Contact Information Christophe HUMBERT 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 10