SPPELL TTabs (Gratis Veersion)  Inline Navvigation n for ShaarePoint Pagess     

 

      SPELL Tabs Gratis Version  July 20133    Author: Christophhe HUMB BERT  User Managed So olutions LLLC   

SPELL Taabs (Gratis V Version)  July 

 

 

Table off Contents    e SPELL Tabs ...................................................................................... .................................................. 2  About the Instructions ..................................................................................................... .................................................. 3  Prerequ uisites ............................................................................................... .................................................. 3  Installation .................................................................................................. .................................................. 3  Adding tabs to a pagge (app mode e) .............................................................. .................................................. 3  About tthe inline mode ................................................................................ .................................................. 5  Playingg with the opttions ............................................................................. .................................................. 5  Reusingg your settinggs .................................................................................. .................................................. 7  Playingg with the layo out ............................................................................... .................................................. 7  Can the e SPELL Tabs d do more? ..................................................................... .................................................. 8  Known issues and lim mitations ...................................................................... .................................................. 8  bs: what are m my other options? ........................................................ .................................................. 9  Inline Tab Terms of Use ................................................................................................... .................................................. 9  nformation ........................................................................................ .................................................. 9  Contact In  

 

 

   

 

SPELL Taabs (Gratis V Version)  July 

 

 

About the SPELLL Tabs    ntent gets pusshed into ShaarePoint, Webb Part pages o often becomee overcrowdeed.  As more aand more con Users are forced to scrroll down to d discover the p page content..  when added tto a Web Partt zone, they aautomaticallyy generate a  The SPELLL Tabs addresss this issue: w tabbed interface, creatting tabs asso ociated with e each Web Parrt present in tthe zone (cf. figure 1). Thaanks  to the tab bs, the users ccan identify at a glance and easily reachh the specific area they aree interested iin.   

  Figure 1: ttabs building process    If you havve been usingg the Easy Tab bs in SharePoiint 2007 or 20010, you are already familliar with this  concept. SSPELL Tabs is a more solid,, powerful an nd user frienddly implementtation that taargets ShareP Point  2007, 201 10, 2013 and SSharePoint O Online (Office 365).  This document appliess to the gratis version of th he SPELL Tabss (provided att no cost), and d is based on  SPELL version 0.9.2.  eck out the ho ome page of tthe SharePoinnt User Toolkkit.  For a live example, che SPELL Tab bs is a component of SPELLL, a program d dedicated to the deployment of User M Managed Solu utions  in SharePoint environm ments.   

   

 

SPELL Taabs (Gratis V Version)  July 

 

 

Instrucctions   

Prerequiisites    ment the SPELLL Tabs, you n need owner o or designer peermissions on n a SharePoin nt site version n  To implem 2007, 201 10, 2013 or Sh harePoint Online (Office 36 65).  To work w with older bro owsers (like IEE 7), this version requires IInternet acceess as the code used to  suppleme ent missing caapabilities is located on a p public Contennt Delivery Neetwork (CDN)).   

Installatiion    ple: just uploaad the files (SSPELL0.9.2Tab bs.js, SPELL0.9 9.2Tabs.aspx and  The installation processs is very simp license) to o a documentt library and yyou're good to go! You cann for examplee use the Sitee Assets librarry  present by default in all SharePoint team sites. ds the tabs. SPPELL0.9.2Tab bs.js is used byy  SPELL0.9.2Tabs.aspx iss the “app” paage that build nternally; you u’ll never call it directly.  SPELL0.9.2Tabs.aspx in   er: the same SSPELL Tabs fille can be used d across sitess and even acrross site colleections, as lon ng as  Remembe you stay in the same domain.   If for exam mple your SPEELL file is at http://division nOne.myComppany.com/SitteAssets/SPELLL0.9.2Tabs.a aspx,  you can use it on any p page located iin http://divissionOne.myCo Company.com m, but not on p pages located d in  http://divvisionTwo.myCompany.com m.   

Adding ttabs to a pagge (app mode)    erface:  To add the tabbed inte e and switch tto edit mode  (Site Actions  > Edit page)  1. Go to your ShaarePoint page e Web Parts yyou want to taabify (your co ontent)  2. Add to a Web Part zone the ewer Web Part as the first Web Part in  the zone (cf. figure 1), and d link it to your  3. Add a Page Vie SP PELL0.9.2Tabs.aspx file (cff. figures 2 and 3)  4. Saave the page and exit the edit mode  At this point, you shou uld see your taabbed interfaace on the pa ge.   

   

 

SPELL Taabs (Gratis V Version)  July   

  Page Viewer Web Part linkk  Figure 2: P  

  Figure 3: P Page Viewer Web Part app pearance       

   

 

 

SPELL Taabs (Gratis V Version)  July 

 

  hile you are in n edit mode. Note: Thee tabs are nott rendered wh    art must be vvisible on the ppage. The codde relies on th he title to buiild  Important! The title off each Web Pa each tab. If the tab title cannot be ffound, the cod de will use thee default valuue “Item”.    he past, you’lll notice somee key differences with the implementattion  If you havve used the Eaasy Tabs in th of the SPEELL Tabs in ap pp mode:  ‐ ‐ ‐

We use a Page W e Viewer Web b Part to link tto the code  Th he Web Part is located wh here we want the tabs, nott at the botto om of the zone  Th he Page View wer Web Part should not be e hidden as itt serves as the container for the tabs 

 

About th he inline mo ode    e mode targetts developerss, and is not available with  the gratis veersion. The ap pp version is tthe  The inline safer, “no o code” way aand is recomm mended for en nd users.   

Playing w with the opttions    m options direectly in the ap pp  The gratiss version doessn’t include aan edit menu. You can still  apply custom url.    of edit menu a available with h the full verssion, check ouut this blog po ost:  Note: for an example o http://blo og.pathtosharrepoint.com/2 /2013/06/17/s /spell‐tabs‐com mmercial‐andd‐free‐version ns‐now‐availa able/     on a first exam mple how cusstom settingss work.  Let’s see o What we’ve done so faar:  ‐ ‐ ‐

We uploaded t W the two files tto a library, fo or example thhe default Sitte Assets libraary:  htttps://collabo oration.myCo ompany.com//SiteAssets/ We selected a  W site (for exam mple PMO) an nd a page (fo r example Daashboard.aspxx):  htttps://collabo oration.myCo ompany.com//PMO/ProjecctSite1/Pagess/Dashboard..aspx  We added We W b Parts to a zone, the firstt is a Page Vieewer Web Parrt linking to th he SPELL Tabs file:  htttps://collabo oration.myCo ompany.com//PMO/SiteAsssets/ SPELL0.9.2Tabs.aspxx   

   

 

SPELL Taabs (Gratis V Version)  July 

 

  Note: as every N ything is happ pening in the ssame domainn, we can omiit the “http….com” part of  f the  urrl and just enter /PMO/SiteAssets/ SPELLL0.9.2Tabs.aaspx as link.   Experiment 1: changing the default background color  Maybe grey is too blan nd for your taste, and you’d like to see  more vivid co olors on the tabs? Go backk to  edit mode e, and in the ssettings of the Page Viewe er Web Part, m modify the URL link as folllows (changes in  bold):  /PMO/SiteAssets/ SPELL0.9.2Tabs.aaspx#css.activveBackgroun d=darkorangge  e edit mode, yyou should se ee the active  tab displayed d with a dark‐‐orange  As soon as you exit the backgroun nd!  If dark‐oraange is not yo our color, the ere’s a choice of 147 color  names suppo orted by all m major browserrs.  And if thiss is not enouggh, or if you n need to match h a specific coolor palette, yyou can enterr a hex code, for  example:  /PMO/SiteAssets/ SPELL0.9.2Tabs.aaspx#css.activveBackgroun d=#ff4500    heets (the lannguage used iin Web design to describe the  Trrivia: “css” sttands for Casccading StyleSh lo ook and forma atting of a W Web page).    how the SPELLL apps work: the options are stored dirrectly in the ffragment part of the URL ((also  So this is h called the e hash part ass it is identifie ed by a startin ng “#”).  The use o of the hash paart to store paarameters is n not specific too SPELL, it hass become a standard technique  in recent years. You caan see it on sittes such as tw witter.com orr kayak.com . It is also pressent in SharePoint  ere it is a key component o of the “minim mal downloadd strategy”.  2013, whe   Some more examples  Now that we understand how the ssettings are sttored, here arre some moree examples fo or you to try o out:  ‐

‐

‐

ove the tabs:  Add a title abo PMO/SiteAsse ets/ SPELL0.9 9.2Tabs.aspx# #intro=myTitlle  /P   Remove the ro ounded corne ers:  /P PMO/SiteAsse ets/ SPELL0.9 9.2Tabs.aspx# #css.radius=0     Add a “remove e” tab control:  /P PMO/SiteAsse ets/ SPELL0.9 9.2Tabs.aspx# #remove=X   

   

 

SPELL Taabs (Gratis V Version)  July 

 

  Hyperlinkks  By defaultt the tabs include one link to the “Path to SharePoinnt” blog.   A link is id dentified by tw wo paramete ers: title and u url. Here is hoow you can ovverwrite the first link with h a  link to htttp://bing.com m:   /PMO/SitteAssets/ SPEELL0.9.2Tabs.aspx#links.0.title=Bing;lin nks.0.url=//biing.com  If you justt want to rem move the first link, enter an n empty title:   /PMO/SiteAssets/ SPELL0.9.2Tabs.aaspx#links.0.ttitle=    nt to add morre links:  If you wan #links.0.tiitle=Bing;linkks.0.url=//bin ng.com;links.1.title=Homee;links.1.url=//Default.aspxx    Note: in the above exa ample, the abssolute link (Biing) start withh //, the relative link (site home page) start  with /    arated by sem mi‐colons.  Note: opttions are sepa  

Reusing your settinggs    mized your Pagge Viewer We eb Part, you ccan export it and upload itt to the site  Once you have custom collection n’s Web Part G Gallery, where it becomes available to aall sites and p pages.    er: by passing g the options in the hash part of the UR RL, we are enssuring that th he exact samee  Remembe page is leveraged acro oss sites, and eeven across ssite collection s within a sam me domain. In terms of  scalabilityy and mainten nance, this is a significant improvementt over the Eassy Tabs, whicch are alreadyy far  more efficcient than thee inline tabs o offered by traditional librarries like jQuerry UI.     

Playing w with the layout    evious chapter we reviewe ed some exam mples of tab s ettings. Below w are some m more featuress  In the pre offered byy the SPELL Tabs. 

   

 

SPELL Taabs (Gratis V Version)  July 

 

  e first Web Pa art out of the e tabbed interrface  Leave the Easy: movve the Page V Viewer Web P Part to the seccond positionn in the page. Link to a sspecific tab  Right clickk on the tab aand copy the link address. You can thenn forward thee link to otherr users; when they  open the page, the tab b you selected d will automaatically be acttivated.  orm  Display fo Yes, the SSPELL Tabs wo ork in dispform m.aspx (the EEasy Tabs donn’t). This is acctually a very popular use o of  inline tabss, especially e effective whe en combined w with the SharrePoint “relatted items” feaature (not  available in SP 2007).   

Can the SPELL Tabs do more?    Sure!  more options available with the full verssion – for exaample the “class” option th hat  First, therre are some m allows diffferent tab styyles to coexist on a same p page.  And we caan go further. As the code is accessible from the useer’s side, we ccan easily tweeak it to meett  specific re equirements. For example, just changin ng a couple linnes will makee the tabs com mpatible with h  existing frrameworks likke jQuery UI.  SPELL also o allows us to o completely cchange the laayout, and insstead of tabs render for exxample a verttical  menu or aa drop‐down list. This is do one by a mod dule called SP ELL Nav (SPELLL Tabs actuaally being a su ubset  of SPELL N Nav).  To get in ttouch with uss and learn m more about SP PELL, see the ccontact inform mation at thee end of this  documentt.   

Known isssues and limitations    Characterrs  In its standard version,, the SPELL Taabs only retaiin printable A ASCII characteers and will sttrip out the reest.  equires non‐A ASCII characte ers in the tab  titles, please contact us.  If your environment re    

 

   

 

SPELL Taabs (Gratis V Version)  July 

 

  0  Calendar views in SharePoint 2010 010 calendar h has a resizingg bug. This bug affects the  SPELL Tabs and the Easy TTabs, as the ro ole of  The SP 20 the tabs iss basically to do Web Part resizing at ru untime. The fiix is to give th he Web Part tthat containss the  calendar aa fixed width.  This issue is not presen nt in other ve ersions (SP 2007, SP 2013,  and new Offiice 365).   

Inline TTabs: whaat are my other op ptions?    Inline tabs are very popular in Web design, and sseveral JavaS cript librariess offer this feature. One off the  n most majorr JavaScript  most popular in the Sh harePoint worrld is jQuery U UI. Tabs are aalso present in frameworrks (dojo, Ken ndo UI, etc.).  What makkes the SPELLL Tabs different is their abiility to feed frrom the pagee itself to build the tabbed  interface. While in trad ditional design each page rrequires its o wn html codee, with SPELLL the same code  serves mu ultiple pages.  The Easy TTabs already relied on thiss technique, b but SPELL is taaking it one sstep further. A As we have seeen in  the previo ous chapters, with the SPEELL Tabs, even n core settinggs like colors aare passed ass parameters,, so  the exact same code ccan be reused d across multiple teams annd site collections. This translates into b better  performance and much easier main ntenance.   

Terms of Use    Along with the SPELL files you receive an End Usser License Aggreement. Pleease read it. If you do not  accept the e terms, you must not insttall or use the e application.    

Contacct Informaation    Christoph he HUMBERT ‐ SPELL Progrram  User Man naged Solutions LLC  E‐mail  Phone  Skype  Twitter  Website  Blog   

   

@UserManaggedSolutions.ccom  Christophe@ +1‐858‐999‐‐6321  ChristopheH Humbert  @UserManaaged, @Path2 2SharePoint http://UserManagedSolu utions.com/SPELL   http://blog.pathtosharep point.com