Showing posts with label SharePoint Links List. Show all posts
Showing posts with label SharePoint Links List. Show all posts

1/22/2011

Book Update

 

Update! The book’s done! 

See here for the update and here for more about the book.

 

 

I made a big mistake during my presentation at the Columbus SharePoint Saturday… I mentioned that I was working on a book and that it would soon be available.  What was that about “the best-laid plans of mice and men?” As an instructor I get to teach up to forty hours a week, and each classroom hour requires three to eight hours of prep time. Over the last few months I’ve had a heavy class load and little free time for the book. (I keep letting work get in the way of hobbies and book writing!)

Several people have been pestering me about “is it out yet?” So let me tell a little about the book and maybe why it’s taking longer than expected.

 

SharePoint® 2007 and 2010 Customization for the Site Owner

by Michael T. Smith

 

There are a lot of books for SharePoint administrators and SharePoint developers, and even a few for SharePoint end users. But there is not much available for the site owner, especially on quick and easy site customization. Over the last five years I have probably trained at nearly a thousand site owners and written a lot blog articles with tips and tricks for site owners. Most of the blog articles were from site owner questions during or after class that really made me think about how to solve the problem without writing custom code. Most of these articles have been fairly short and to the point: add this web part, copy and paste this JavaScript or CSS. Each time I have written one of these blog articles I have wished I had the time to expand the article to explain more about the how and why of the solution, or to explain the logic of how I figured out how to do it so you could create more customizations like the one in the article. So I started writing the book…

The book has these goals: take what I’ve done in the blog articles as a start and then greatly expand the number of tips and tricks, explain how the tricks work, show how they can be expanded to other uses, and provide a few chapters on basic SharePoint, HTML, CSS and JavaScript skills. The first edition of the book fully supports both SharePoint 2007 and 2010 . If you have not upgraded to 2010 yet, you will one day and will want to know how to make sure these tricks still work.

 

About the other 80%

Writing a book fits the 80 / 20 rule. The first 80% of the work takes 80% of the time, and the remaining work also takes 80% of the time.  :-(   My biggest challenge in this project is knowing when to stop. It seems I can always find just one more way to do something, one more trick or one more screen capture. Where possible I’m rewriting each tip to work in SharePoint 2007 and SharePoint 2010, and as often as possible using the same code for both. I’m also adding jQuery versions of some of the examples for those who are already working with jQuery. I’m testing every trick in Internet Explorer 6 to 8 and FireFox and rewriting the JavaScript to work with all of these browsers. (really fun, let me tell ya…)

 

Book Progress

Most of the chapters are finished and are now being proof read by some nasty critics. The cover art still needs to be done. The index needs to be created. When all of that is done, the book needs to be submitted and a test copy printed to see if everything “works”, things like margins, images, cover art, etc.

 

How it will be published

I don’t see this book ever being finished. There’s just too many things I’m learning about SharePoint everyday. Books published though the traditional channels rarely get updated and I want to update the book as needed. So I am going the “self published” route using a service owned by Amazon.com. It will be first released in print format and I hope to move the book into Kindle and other electronic formats as I get time.

 

A supporting web site

The book will have a version number!  (Should I start with a beta release?)  For that and a number of other reasons the book will also have a supporting web site. There you will find all of the source code, a number of the tricks as downloadable web parts along with any new additions. So don’t get upset if you see a version 1.1 of the book after you bought 1.0. The changes will be on the site.

 

Here’s the current, but still incomplete, table of contents:

(This will change over the next few weeks…)

 

+ Chapter 1 - Read Me First
+ Chapter 2 - An HTML Primer
+ Chapter 3 - A CSS Primer
+ Chapter 4 - A JavaScript Primer
+ Chapter 5 - Hacking Tips!
+ Chapter 8 - Web Part Must Knows
+ Chapter 9 - The Content Editor Web Part
+ Chapter 10 - User Interface Customization
+ Chapter 11 - List and Library Customization
+ Chapter 12 - Surveys
+ Chapter 13 - Links Lists
+ Chapter 14 - Task Lists
+ Chapter 15 - Calendars
+ Chapter 16 - Security Tricks
+ Chapter 17 - Sound, Video, Silverlight and Flash!

 

 

Be patient!  I working as fast as I can.    :-)

12/29/2010

SharePoint: Convert a Links list to a Dropdown list (updated!)

 

This is an updated version of an older blog article. The updates include support for both SharePoint 2007 and 2010 and for better multiple browser support.

Updated again to include a Content Query Web Part (CQWP) example.

 

Problem: There is never enough room on your SharePoint home page. So what do you do if you have a long list of vendor links you would like to display on the home page. You would usually use a Links list and add a Links list web part. But it takes up too much space. How about a simple dropdown list?

   image

 

Solution: Yet another Content Editor Web Part (CEWP) trick!  A CEWP and some JavaScript…

   image

                   image

Steps:

  1. Create your links list and add your links
  2. Add the link list’s web part to the page
  3. Add a Content Editor Web Part (CEWP) to the page just under the links list web part
  4. Modify the CEWP and set its title (or set its Chrome to none to hide the title)
  5. Click Source Editor and then copy and paste the HTML and JavaScript from below
  6. Edit the JavaScript to change the word “Links” to the name of your links list web part (title of the web part, not the title of the actual list, although they may be the same)
    if (x[i].summary == "Links") to
    if (x[i].summary == "Your Links List Title")
    The best way to confirm this name is to right-click the web part page and search for "summary=" and copy and paste the name
  7. Exit the edit mode and test it

 

The Code:

<!-- the dropdown list for the link items -->
<select name="JumpToList" id="JumpToList"
    onchange="javascript:JumpToUrl(JumpToList.options[JumpToList.selectedIndex].value)">
  <option>Jump to ...</option>
</select>

<script>
// CEWP trick from techtrainingnotes.blogspot.com! 

var linksListSummaryName = "Links Use the … (your list summary name here!) …"

function JumpToUrl(url)
{
    location.href = url;
}

//code to hide the links list and populate the select list

//Find the link list and hide it
var x = document.getElementsByTagName("TABLE") // find all of the Tables 
var LinkList;
var i=0;
for ( i=0; i<x.length; i++ ) 
{
  if (x[i].summary == linksListSummaryName)
  {
    //
    LinkList = x[i];

    //hide the links list web part (tables in tables in tables ...)
    // Note: while testing, you may want to comment out the next line
    x[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none";
    break;
   } 
}

if (LinkList)
{
  //Copy all of the links from the link list to the select list
  var ToList = document.getElementById("JumpToList");

  var links = LinkList.getElementsByTagName("A"); // find all of the links
  for ( i=0; i<links.length; i++ ) 
  {
    if (links[i].onfocus)
    {
      if (links[i].onfocus.toString().indexOf("OnLink(this)") > -1)
        { ToList.options[ToList.length] = new Option(links[i].innerHTML, links[i].href); }
    }
  }
}
else
{
  alert("Link list named '" + linksListSummaryName + "' not found")
}
</script>

 

Want to add a new “Add New Link” link?

Add the following just after the </select> tag in the code above (your the URL to your list!).

<br>
<a href="http://yourserver/sites/yoursite/Lists/Links/NewForm.aspx">Add new link</a>

 

Dropdown list for a Content Query Web Part.

While the approach is similar to a links list, the HTML generated by a CQWP is a bit different. Below is the code for a CQWP.

Steps:

  1. Create your CQWP
  2. Add the CQWP to the page
  3. Optional: Modify the CQWP and set it’s Chrome to none
  4. Add a Content Editor Web Part (CEWP) to the page just under the CQWP
  5. Modify the CEWP and set its title (or set its Chrome to none to hide the title)
  6. Click Source Editor and then copy and paste the HTML and JavaScript from below (note that there is a 2007 and a 2010 version)
  7. Edit the JavaScript to change the “linksListSummaryName = ” value to the name of your CQWP (view the source of the page and search for the web part’s name) 
  8. Exit the edit mode and test it

 

The Code – 2007 version:

<!-- the dropdown list for the link items -->
<select name="JumpToList" id="JumpToList"
    onchange="javascript:JumpToUrl(JumpToList.options[JumpToList.selectedIndex].value)">
  <option>Jump to ...</option>
</select>

<script>
// CEWP trick from techtrainingnotes.blogspot.com! 
// for a CQWP


// copy the following from the "<td title="Content Query Web Part - ..."  line in the page's HTML
var linksListSummaryName = "Content Query Web Part - Use to display a dynamic view of content from your site on a web page"

function JumpToUrl(url)
{
    location.href = url;
}

//code to hide the links list and populate the select list

//Find the link list and hide it
var x = document.getElementsByTagName("TABLE") // find all of the Tables 
var LinkList;
var i=0;
for ( i=0; i<x.length; i++ ) 
{
  if (x[i].childNodes[0].childNodes[0].childNodes[0].title == linksListSummaryName)
  {
    LinkList = x[i].parentNode.parentNode.nextSibling;

    //hide the links list web part (tables in tables in tables ...)
    // Note: while testing, you may want to comment out the next line
    x[i].parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none";
    break;
   } 
}

if (LinkList)
{
  //Copy all of the links from the link list to the select list
  var ToList = document.getElementById("JumpToList");

  var links = LinkList.getElementsByTagName("A"); // find all of the links
  for ( i=0; i<links.length; i++ ) 
  {

    if (links[i].href.indexOf("CopyUtil.aspx")>0)
    {
      ToList.options[ToList.length] = new Option(links[i].innerHTML, links[i].href);
    }
  }
}
else
{
  alert("Link list named '" + linksListSummaryName + "' not found")
}
</script>

 

The Code – 2010 version:

<script>
// CEWP trick from techtrainingnotes.blogspot.com! 
// for a CQWP


// copy the following from the "<td title="Content Query Web Part - ..."  line in the page's HTML
var linksListSummaryName = "Content Query - Displays a dynamic view of content from your site."

function JumpToUrl(url)
{
    location.href = url;
}

//code to hide the links list and populate the select list

//Find the CQEW and hide it
var x = document.getElementsByTagName("TD") // find all of the Tables 
var LinkList;
var i=0;
for ( i=0; i<x.length; i++ ) 
{
  if (x[i].title == linksListSummaryName)
  {
    LinkList = x[i].parentNode.parentNode.parentNode.parentNode.parentNode.nextSibling;

    //hide the links list web part (tables in tables in tables ...)
    // Note: while testing, you may want to comment out the next line
    x[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.display="none";
    break;
   } 
}

if (LinkList)
{
  //Copy all of the links from the link list to the select list
  var ToList = document.getElementById("JumpToList");

  var links = LinkList.getElementsByTagName("A"); // find all of the links
  for ( i=0; i<links.length; i++ ) 
  {

    if (links[i].href.indexOf("CopyUtil.aspx")>0)
    {
      ToList.options[ToList.length] = new Option(links[i].innerHTML, links[i].href);
    }
  }
}
else
{
  alert("Link list named '" + linksListSummaryName + "' not found")
}
</script>

.

Note to spammers!

Spammers, don't waste your time... all posts are moderated. If your comment includes unrelated links, is advertising, or just pure spam, it will never be seen.