ThInl

he SP

ine Nav

ELL T

vigation

Tabs

n for Sha

 

 

SPELL Ta

July 2013

 

Author:

Christoph

User Ma

 

arePoin

bs versio

3 

he HUMB

naged So

t Pages

n 1.0.0 

BERT 

olutions LL

s 

LC 

 

  

Table of 

About the

Instructio

Prerequ

Installa

Adding

Adding

About t

Playing w

Tab col

Hyperli

Contro

Reusing

Additio

Playing

Can I do

Known 

Inline Tab

Terms of 

Support ..

Contact In

 

 

 

f Contents 

e SPELL Tabs .

ns ................

uisites ..........

tion .............

 tabs to a pag

 tabs to a pag

the inline mo

ith the option

ors ...............

nks ..............

ls ..................

g your setting

onal settings .

g with the layo

o more with t

issues and lim

bs: what are m

Use ..............

.....................

nformation ...

.....................

.....................

.....................

.....................

ge (app mode

ge (app mode

de ................

ns .................

.....................

.....................

.....................

gs ..................

.....................

out ...............

the SPELL Tab

mitations ......

my other opti

.....................

.....................

.....................

 

.....................

.....................

.....................

.....................

e, default sett

e, custom sett

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

bs? ................

.....................

ons? .............

.....................

.....................

.....................

......................

......................

......................

......................

tings) .............

tings) ............

......................

......................

......................

......................

......................

......................

......................

......................

......................

......................

......................

......................

......................

......................

The SPE

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

LL Tabs  Ju

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

.....................

ly   

......................

......................

......................

......................

......................

......................

......................

......................

......................

......................

......................

......................

......................

......................

......................

......................

......................

......................

......................

......................

....... 2 

....... 3 

....... 3 

....... 3 

....... 3 

....... 5 

....... 7 

....... 7 

....... 7 

....... 8 

....... 8 

....... 8 

....... 9 

....... 9 

..... 10 

..... 10 

..... 10 

..... 11 

..... 11 

..... 11 

 

  

About  

As more a

Users are 

The SPELL

tabbed in

to the tab

 

Figure 1: t

 

If you hav

concept. T

SharePoin

For a live 

 

The SPELL

Solutions 

 

 

the SPELL

and more con

forced to scr

L Tabs addres

terface, creat

bs, the users c

tabs building 

ve been using

The SPELL Tab

nt 2007, 2010

example, che

L Tabs are a c

in SharePoin

L Tabs 

ntent gets pus

roll down to d

ss this issue: w

ting tabs asso

can identify a

process 

g the Easy Tab

bs are a more

0, 2013 and Sh

eck out the ho

omponent of

t environmen

shed into Sha

discover the p

when added t

ociated with e

t a glance an

bs in SharePoi

e solid, powe

harePoint On

ome page of t

f SPELL, a pro

nts. 

arePoint, Web

page content.

to a Web Part

each Web Par

d easily reach

int 2007 or 20

rful and user 

line (Office 3

the SharePoin

gram dedicat

The SPE

b Part pages o

. 

t zone, they a

rt present in t

h the specific 

010, you are 

friendly impl

365). 

nt User Toolk

ted to the de

LL Tabs  Ju

often become

automatically

the zone (cf. 

area they are

already famil

lementation t

kit. 

ployment of 

ly   

e overcrowde

y generate a 

figure 1). Tha

e interested i

liar with this 

that targets 

User Manage

ed. 

anks 

in. 

 

ed 

 

  

Instruc 

Prerequi 

To implem

2007, 201

For older 

Internet a

(CDN). If n

SPELL doe

 

Installati 

The instal

You can fo

upload th

The Tabs 

SP

SP

us

SP

fo

SP

The js file

Remembe

you stay i

http://div

in http://d

 

Adding t 

To add th

1. G

2. A

 

ctions 

isites 

ment the SPEL

10, 2013 or Sh

browsers (lik

access (defau

not, the code

esn’t support 

ion 

lation proces

or example u

e files either 

require 5 SPE

PELL1.0.0Tab

PELL1.0.0Cor

sed by other 

PELL1.0.0Inlin

oundation to 

PELL1.0.0Tab

s are used by

er: the same S

n the same d

visionOne.myC

divisionOne.m

tabs to a pag

e tabbed inte

o to your Sha

dd to a Web 

LL Tabs, you n

harePoint On

ke IE 7), additi

lt configuratio

 can be store

Internet Exp

ss is very simp

se the Site As

at the root le

ELL componen

s.aspx is the 

e.min.js and S

SPELL solutio

neNavigation

build other n

sForm.min.js

y SPELL1.0.0Ta

SPELL Tabs fil

omain. If for 

Company.com

myCompany.c

ge (app mo

erface: 

arePoint page

Part zone the

need owner o

line (Office 36

ional code is 

on), the code

d in a ShareP

lorer version 

ple: just uploa

ssets library p

evel or in a fo

nts: 

page that ma

SPELL1.0.0Co

ons, which is w

.min.js is the 

navigation inte

s is only used 

abs.aspx inte

le can be used

example your

m/SiteAssets/

com, but not o

de, default 

e and switch t

e Web Parts y

or designer pe

65). 

required to s

e can be loade

Point library, a

6 or before.

ad the files to

present by de

lder, as long 

anages the tab

ore.min.js con

why they are 

code that bu

erfaces. 

in edit mode

rnally; you’ll 

d across sites

r SPELL file is 

/SPELL/SPELL1

on pages loca

settings) 

to edit mode 

you want to ta

The SPE

ermissions on

upplement m

ed from a pub

along with SP

o a document

efault in all Sh

as all files are

bbed interfac

ntain core SPE

stored as sep

uilds the tabs.

, to build the

never call the

s and even acr

located in 

1.0.0Tabs.asp

ated in http://

(Site Actions 

abify (your co

LL Tabs  Ju

n a SharePoin

missing capab

blic Content D

PELL. 

t library and y

harePoint team

e at the same

ce and its edit

ELL functions.

parate files. 

. It can also se

 edit form. 

em directly. 

ross site colle

px, you can us

//divisionTwo.

 > Edit page) 

ontent) 

ly   

nt site version

ilities. If you 

Delivery Netw

you're good t

m sites. You c

e level. 

t menu. 

. They are als

erve as the 

ections, as lon

se it on any p

.myCompany

n 

have 

work 

o go! 

can 

so 

ng as 

page 

y.com. 

 

  

3. A

SP

4. Sa

At this po

Figure 2: P

 

Figure 3: P

 

dd a Page Vie

PELL1.0.0Tab

ave the page 

int, you shou

Page Viewer 

Page Viewer 

ewer Web Pa

s.aspx file (cf

and exit the 

uld see your ta

Web Part link

Web Part app

rt as the first

f. figures 2 an

edit mode 

abbed interfa

 

k 

 

pearance 

 Web Part in 

d 3) 

ace on the pa

The SPE

the zone (cf. 

ge. 

LL Tabs  Ju

figure 1), and

ly   

d link it to your 

 

  

Note: The

  

Importan

each tab. 

default na

 

If you hav

of the SPE

‐ W

‐ Th

‐ Th

 

Adding t 

To custom

Step 1: Se

To select 

turns to e

Select you

‐ Th

‐ Th

Example: 

If the defa

/SiteAsset

When you

/SiteAsset

 

Importan

url when y

Step 2: fo

full url, op

 

 

e tabs are not

t! The title of

If the tab titl

ame. 

ve used the Ea

ELL Tabs in ap

We use a Page

he Web Part 

he Page View

tabs to a pag

mize the look 

elect your opt

your options,

edit mode and

ur options, an

he colors are 

he options ar

ault SPELL Ta

ts/SPELL/SPE

u choose to se

ts /SPELL/SPE

t! The option

your options 

ollow the sam

ptions include

t rendered wh

f each Web Pa

e says “Item”

asy Tabs in th

pp mode: 

e Viewer Web

is located wh

wer Web Part 

ge (app mo

of the tabs, y

tions 

, open the SP

d displays the

nd then click o

applied to th

re added to th

bs url is: 

LL1.0.0Tabs.a

et the backgr

ELL1.0.0Tabs.

s are not save

are final. 

e procedure 

ed. 

hile you are in

art must be v

”, it means th

he past, you’ll

b Part to link t

here we want 

should not be

de, custom 

you need to o

PELL1.0.0Tabs

e options (cf. f

on the “Apply

he preview 

he url 

aspx 

round color o

aspx#css.acti

ed; they are j

as in the prev

n edit mode.

visible on the p

at the Web P

l notice some

to the code 

the tabs, not

e hidden as it

settings) 

operate in two

s.aspx page. In

figure 4). 

y Custom Opt

f the active ta

veBackgroun

just added to 

vious section,

The SPE

page. The cod

Part title was n

e key differen

t at the botto

t serves as th

o steps. 

n standalone 

tions” button

ab to “Orang

nd=Orange 

the url. Reme

, but in the Pa

LL Tabs  Ju

de relies on th

not found an

ces with the 

om of the zon

e container f

 mode, the p

n. This will hav

e”, the url be

ember to mak

age Viewer W

ly   

he title to bui

d the code us

implementat

e 

or the tabs 

age automat

ve two action

ecomes: 

ke a copy of t

Web Part use 

ild 

ses a 

tion 

ically 

ns: 

the 

the 

 

  

Figure 4: S

 

 

SPELL1.0.0Tabs.aspx in ed

 

it mode 

The SPELL Tabs  Ju

 

ly   

 

  

About th 

SPELL can

need a W

Part or in 

The inline

altered, o

safer, “no

 

Note: the 

the code t

the app ve

 

Playing 

The tabbe

In

H

C

 

Figure 5: t

 

The edit m

 

Tab colo 

Maybe gr

menu allo

There’s a 

need to m

 

he inline mo

n also be impl

eb Part that a

SP 2013 a Sc

e mode target

or if the code 

o code” way a

inline version

to apply the s

ersion makes

g with the

ed interface is

nline tabs (on

yperlinks 

ontrols 

the 3 sections

menu reflects

ors 

ey is too blan

ows you to se

choice of 147

match a specif

ode 

emented in in

accepts code

ript Editor W

ts developers

needs to inte

and is recomm

n offers the sa

settings, and s

 maintenance

e options 

s made of 3 s

e tab per We

s of the tabbe

s this structur

nd for your ta

t the tabs bac

7 color names

fic color palet

nline mode. I

. You can use

eb Part. 

s. It is recomm

eract with oth

mended for en

ame customiz

save a differe

e so much eas

ections (cf. fi

eb Part) 

ed interface

re, and offers 

ste, and you’

ckground and

s supported b

tte, you can e

n this case, in

 for example 

mended when

her code pres

nd users. 

zation option

ent version fo

sier! 

gure 5): 

customizatio

d like to see 

d font color fo

by all major b

enter a hex co

The SPE

nstead of a Pa

a Content Ed

n the original 

ent on the pa

s as the app m

r each custom

on options for

more vivid co

or the 3 state

browsers. And

ode (for exam

LL Tabs  Ju

age Viewer W

ditor Web Par

form needs t

age. The app 

mode, but yo

mization. For 

r each section

olors on the t

es (active/inac

d if this is not 

mple #ff4500)

ly   

Web Part you’

rt, a Form We

to be significa

version is the

ou’d need to e

standard opt

 

n. 

abs? The edit

ctive/hover).

enough, or if

. 

ll 

eb 

antly 

e 

edit 

tions, 

t 

f you 

 

  

 

Hyperlin 

The edit m

For each, 

current do

For examp

In

In

Note: if yo

 

Controls 

The tabbe

V

Fu

R

The edit m

control is 

Note: afte

page. 

 

Reusing  

Once you 

collection

 

Remembe

page (SPE

domain. In

which are

 

ks 

menu allows u

enter the dis

omain).  

ple, to create

n the text field

n the URL field

ou need more

s 

ed interface in

iew All / Hide

ull Screen / B

emove Tabs 

menu allows y

not displayed

er clicking on 

your setting

have custom

n’s Web Part G

er: by passing

ELL1.0.0Tabs.

n terms of pe

e already far m

up to 3 hyper

splayed text a

e a link to Twi

d: Twitter 

d: //twitter.c

e than 3 hype

ncludes up to

e All 

ack to Page 

you to custom

d. 

the “Remove

gs 

mized your Pag

Gallery, wher

g the options 

.aspx) is lever

erformance an

more efficient

rlinks.  

and the url. A 

tter (https://

com 

erlinks, this ca

o 5 controls:

mize the text 

e Tabs” contro

ge Viewer We

e it becomes 

in the hash p

raged across 

nd maintenan

t than traditio

url starts wit

twitter.com),

an be done by

displayed in e

ol, the only w

eb Part, you c

available to a

art of the UR

sites, and eve

nce, this is a s

onal inline tab

The SPE

th // (absolut

, enter the fo

y editing the S

each control.

way to get the

can export it 

all sites and p

RL, we are ens

en across site

significant im

bs. 

LL Tabs  Ju

e link) or / (li

ollowing value

SPELL1.0.0Tab

 If no text is e

e Tabs back is 

and upload it

pages. 

suring that th

e collections w

provement o

ly   

nk relative to

es: 

bsForm file.

entered then 

to refresh th

t to the site 

he exact same

within a same

ver the Easy T

o the 

the 

e 

e 

e 

Tabs, 

 

  

 

Addition 

The SPELL

directly to

‐ A

 

‐ R

 

Playing w 

In the pre

offered by

 

Leave the

Easy: mov

 

Have two

Give both

 

Link to a s

Right click

open the 

 

Display fo

Yes, the S

especially

2007). 

 

 

 

nal settings 

L Tabs offer a

o the url optio

dd a title abo

emove the ro

with the lay

evious chapte

y the SPELL T

e first Web Pa

ve the Page V

o Web Parts u

h Web Parts th

specific tab 

k on the tab a

page, the tab

orm 

SPELL Tabs wo

y effective wh

dditional sett

ons, others re

ove the tabs:  

ounded corne

out 

r we reviewe

abs. 

art out of the

Viewer Web P

under the sam

he same title

and copy the 

b you selected

ork in the disp

hen combined

 

tings not avai

equire editing

#intro=myTi

ers:  #css.radi

ed some exam

e tabbed inter

Part to the sec

me tab 

. 

link address. 

d will automa

pform.aspx. T

d with the Sha

ilable through

g the code. He

tle 

us=0 

mples of tab s

rface 

cond position

You can then

atically be act

This is actually

arePoint “rela

The SPE

h the edit me

ere are some

ettings. Below

n in the page.

n forward the

tivated. 

y a very popu

ated items” fe

LL Tabs  Ju

enu. Some can

e simple exam

w are some m

e link to other

ular use of inl

eature (not a

ly   

n be added 

mples: 

more features

r users; when

ine tabs, 

vailable in SP

s 

 they 

P 

 

  

Can I do  

Sure! 

First, ther

allows dif

And we ca

specific re

existing fr

SPELL also

menu or a

of SPELL N

To get in t

document

 

Known is 

Character

In its stan

If your en

 

Calendar 

The SP 20

the tabs is

calendar a

This issue

 

Inline T 

Inline tab

most pop

(dojo, Ken

 

more with 

re are some m

fferent tab sty

an go further

equirements. 

rameworks lik

o allows us to

a drop‐down 

Nav). 

touch with us

t. 

ssues and li

rs 

dard version,

vironment re

views in Sha

010 calendar h

s basically to 

a fixed width

 is not presen

Tabs: wha

s are very po

ular in the Sh

ndo UI, etc.). 

the SPELL T

more options 

yles to coexis

. As the code

For example

ke jQuery UI. 

o completely c

list. This is do

s and learn m

mitations 

, the SPELL Ta

equires non‐A

rePoint 2010

has a resizing

do Web Part 

. 

nt in other ve

at are my

pular in Web 

harePoint wor

Tabs? 

available wit

t on a same p

 is accessible 

, just changin

change the la

one by a mod

more about SP

abs only retai

ASCII characte

0 

g bug. This bu

resizing at ru

ersions (SP 20

 other op

design, and s

rld is jQuery U

h the full vers

page. 

from the use

ng a couple lin

ayout, and ins

dule called SP

PELL, see the c

in printable A

ers in the tab 

g affects the 

untime. The fi

07, SP 2013, 

ptions? 

several JavaS

UI. It is also p

The SPE

sion – for exa

er’s side, we c

nes will make

stead of tabs 

ELL Nav (SPEL

contact inform

ASCII characte

titles, please

SPELL Tabs a

ix is to give th

new Office 3

cript libraries

present in mo

LL Tabs  Ju

ample the “cl

can easily twe

e the tabs com

render for ex

LL Tabs actua

mation at the

ers and will st

 contact us. 

nd the Easy T

he Web Part t

65). 

s offer this fe

st major Java

ly   

ass” option th

eak it to meet

mpatible with

xample a vert

ally being a su

e end of this 

trip out the re

Tabs, as the ro

that contains

ature. One of

aScript framew

hat 

t 

h 

tical 

ubset 

est. 

ole of 

s the 

f the 

works 

 

  

What mak

interface.

serves mu

The Easy T

the previo

the exact 

performa

 

Terms  

Along wit

accept the

 

Suppor 

User Man

more deta

 

Contac 

Christoph

SPELL Pro

E‐mail Phone Skype Twitter Website Blog  

 

kes the SPELL

 While in trad

ultiple pages. 

Tabs already 

ous chapters,

same code c

nce and muc

of Use 

h the SPELL f

e terms, you 

rt 

naged Solutio

ails, see the S

ct Informa

he HUMBERT 

ogram ‐ User M

Christophe@+1‐858‐999‐ChristopheH@UserManahttp://Userhttp://blog.

L Tabs differe

ditional desig

relied on this

 with the SPE

can be reused

h easier main

iles you recei

must not inst

ns offers supp

SPELL program

ation 

Managed Solu

@UserManag‐6321 Humbert aged, @Path2ManagedSolupathtosharep

nt is their abi

n each page r

s technique, b

ELL Tabs, even

d across multi

ntenance. 

ve an End Us

tall or use the

port ‐ webina

m page, or co

utions LLC 

gedSolutions.c

2SharePointutions.com/Spoint.com 

ility to feed fr

requires its o

but SPELL is ta

n core setting

ple teams an

ser License Ag

e application.

ars, forum, co

ntact us (see

com 

PELL  

The SPE

rom the page

wn html code

aking it one s

gs like colors a

nd site collect

greement. Ple

 

onsulting hou

 information 

LL Tabs  Ju

e itself to buil

e, with SPELL

step further. A

are passed as

ions. This tra

ease read it. I

rs ‐ via the SP

below). 

ly   

d the tabbed 

L the same co

As we have se

s parameters,

nslates into b

f you do not 

PELL program

de 

een in 

, so 

better 

m. For