Category Archives: Menus

SPELL Nav, the successor of the Easy Tabs

Posted on by

The SPELL library is reaching version 0.8 this month. My main achievement in this release is the completion of the “Inline Navigation” module.

SPELL supports SharePoint 2007, 2010, 2013 and Office 365, and to demonstrate it I have updated all my sites:

All pages run the same version of SPELL, and the look of each menu is controlled via options. The idea is the same as with the original Easy Tabs – reuse the Web Part titles to automatically generate the navigation – but the code has been completely refactored. It is now more solid, for example when it comes to synchronization with the rest of the page, styling, print preview, and inclusion in wiki pages. It also offers more features:

  • Option to have more than one Web Part per tab
  • Compatible with display forms (this is especially useful if like me you are a fan of the “Related Items” feature)
  • Direct link to activate a specific tab (for example access the SharePoint Hosting section on the UMS home page)
  • Can be implemented in the middle of a zone, not necessarily at the top
  • Can include hyperlinks to external page (see the demos)
  • etc.

If you have subscribed to the SPELL interest list, you’ll receive a code sample by the end of this month.

As I have already mentioned, I consider that the Easy Tabs code is obsolete and I won’t update it. Also, it has become more and more time consuming to support such UI widgets because of the increasing number of SharePoint versions, browsers and supported devices (for example tablets and mobile), so I am more careful than before when it comes to releasing such tools.

That said, I understand that not everybody is willing to subscribe to the SPELL program. To allow end users to enjoy a smooth upgrade to SP 2013, in the next couple months I’ll publish in the SharePoint User Toolkit a lightweight version of the SPELL Nav that will cover most of the features offered by the current Easy Tabs.

[Update] SPELL Tabs: commercial and free versions now available

A dynamic website built on Office 365

Posted on by

I mentioned it on twitter a couple weeks ago, Bradshaw & Weil has launched its new public website based on Office 365: http://www.bradshawweil.com

In an article last year, I expressed my frustration with the current Office 365 public sites, for which building dynamic pages requires more effort than it should. Well, it doesn’t mean that it cannot be done, and Bradshaw & Weil is one of these sites that take advantage of both the traditional list management capabilities of SharePoint and the features specific to Office 365.

The site content is managed by the site admins in SharePoint lists. For example, when you open Topics.aspx?Menu=For%20Individuals SharePoint will filter the Topics list to only display the topics tagged “For Individuals”. Topics.aspx?Menu=For%20Individuals&Topic=Motorcycle%20Insurance will only display the information related to motorcycle insurance, and will pull from the Insurance Carriers library only the logos of the carriers that offer this specific service. Thanks to the dynamic behavior and the use of querystrings in the URL (“Menu” and “Topic”), a single page handles all the topics, where with a static site 20 pages would be needed. And if a new topic gets added to the Topics library, this will automatically create a new entry in the menu.

Besides content management, the site gets all the benefits from working with Office 365. The business users have a convenient interface, the Site Design tool, to customize the header, footer and layout of the pages, without having to call a SharePoint consultant for every minor change. And the gadgets allow them to include convenient features like contact forms that would be hard to implement on a regular SharePoint site.

The site also gets help from jQuery. Note in particular:

All these plugins pull content from SharePoint lists and libraries (menu items, images, logos, phone numbers, website links). Here again, no need to call the designer every time a logo gets added or a phone number changes!

For this project, I worked directly with Jared Morgan, vice president. This was a great experience, as the company has been using SharePoint for several years, and Jared knew exactly what to aim for.

As you explore the site, feel free to post your comments or questions below, and Jared and I will be happy to post additional details.

And if your company is interested in a test drive of Office 365, drop me a line and I’ll be happy to send you an invitation for a free trial.

Rounded corners and dog ears

Posted on by

dogears

As I was working on the labs for my live online workshop, I did some experiments with the last release (v 2.01) of the jQuery corner plugin.

This plugin takes the edge off corners and replaces it with various shapes (rounded, beveled, notched, etc.). I have applied two examples – rounded corners and dog ears – to Web Part headers on this page:
http://www.pathtosharepoint.com/Calendars/Pages/Workshops.aspx

The shapes are not always as neat as with other methods (that use images or the canvas element), but its ease of use and versatility make this plugin a excellent solution. Note that I said “not always”… the plugin is smart enough to apply the latest css standards if your browser recognizes them. To see this, try out the rounded corners of my above example in different browsers.

For the participants in the September 23rd “tabbed interfaces” online workshop, note that we’ll see how this technique can be applied to the Easy Tabs and the default SharePoint navigation.

If you want to try out this effect on Web Part headers, as in my example, here is the code I used (Only one line of jQuery!):

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$(".ms-WPHeader").parent().parent().parent().css("background-color","palegreen").corner("dog top");
</script>

(Remember to modify the script to point to your own copy of jQuery and jQuery corner)

Update [9/14/2009]: I have made a slight change to the code, it now works cross-browser: validated in IE7/IE8, Firefox 3.5, Safari 4.0 and Google Chrome (the initial code was IE only).

A Content Editor Web Part for every home!

Posted on by

In this post, I am going to describe a technique that allows end users to control multiple SharePoint pages from a central location. As the title suggests, the cornerstone is the Content Editor Web Part.

I’ll first describe the implementation, then I’ll show it at work on two examples: a cross-site menu and a “Breaking News” scenario. We’ll complete our tour with a live demo.

Continue reading →

A drop-down menu, the SharePoint way

Posted on by

twolevels

Six months ago, I showed on a simple example how to reuse the default SharePoint drop-down menu. As Larry reminded me, it’s time for me to keep the promises I made and share more advanced solutions.

The solution I am going to detail adds two features:
– two levels instead of one
– the menu items are pulled from a SharePoint list

Visit my SharePoint site for a live demo.

There are various ways to pull content from a SharePoint list. I have chosen to use SharePoint Designer and the Data View Web Part for this example, as it is very convenient when working with grouped items.

Continue reading →

Live demos

Posted on by

livedemoBy popular demand, I have set up a public SharePoint site to showcase my customizations. This should be especially useful for dynamic behaviors, which are not easy to describe in a blog.

I am using a free service offered by fpweb.net.

The site currently features:
– the expand/collapse buttons
– a simple drop-down menu
– the tiny calendar
– a hover effect on the calendar

See them in action here:
http://8002.freesharepoint2007.com/default.aspx

In the future, I plan to add a download section, and give contributor access to some parts of the site. Let me know if you have other suggestions!

Styles/CSS and the display property

Posted on by

One principle of Web design is the separation between content and presentation. HTML provides the structure of the page, while CSS (Cascading Style Sheets) tells how it should be displayed.

Themes in SharePoint (Site Actions | Site Settings | Site Theme) are a good example. Changing the theme doesn’t modify the structure of your site, it just changes its look by calling a different style sheet.

One key style property is “display”. By setting its value to “none”, we can hide an element, so that our site visitors cannot access it (though the element actually remains in the page structure). “Display=none” is often used to hide buttons or menu options on a page.

Continue reading →

Events in HTML calculated columns

Posted on by

In this post I am going to show how to tweak the look of a contacts list using an HTML calculated column.

What makes a contacts list? Usually, you’ll first want to identify the right contact (name, role/responsibilities). Then you need a way to get in touch with him/her, usually through an e-mail address and a phone number. A picture will add a warm touch to the e-relationship you have started…

In my example I have chosen the following behavior:
– on page load, only the full name is displayed
– when hovering over the name, a pop-up displays the picture, the job title and the phone number
– a click allows me to send an e-mail to the contact

Continue reading →