Chunking Content – Part 2

Posted July 27, 2010 by Larry
Categories: Writing

In Part 1 I discussed some of the benefits of chunking content and some of the challenges we face developing a layout for content. Today I am going to describe Information Types. One of the most challenging tasks of communicating is to identify the specific content your users needs. That is, what questions are your users trying to answer as they navigate through the content? Information Types categorize key technical and business information according to the purpose of the communication, from the user’s perspective. Information types should also have specific formatting and presentation guidelines.

Information Types

Nearly all business and technical communication can be classified into six major information types or categories, which are based on the purpose of the information for the user.

  • Principal – a statement designed to guide behavior
  • Process – series of events
  • Procedure – set of steps a user needs to perform to complete task
  • Concept – a general idea to defines a class or group
  • Structure – contains parts and boundaries
  • Fact – a statement that is true

Principal
Use this type when it looks like fact, prerequisite or criteria. This allows users to understand what is required.
Example:
Do not use the chair within 24 hours of gluing.
Use only all natural wood polish for the best shine.

Process
This type shows how things work, conditions, results. The entire perspective on a situation or issue. The who, what, when, where, why and how.

Example:
To understand how it happens, not how to do it. Use for diverse audience, different needs.

Procedure
This type is used to give detailed instructions when the user needs to know how to do something or when and how to make a decision. An active language that instructs the reader similar to a step action table.

Example:

STEP ACTION
1 Start here.
Note: additional text.

IF THEN
True Do this
False Do that
2 Click Import
3 Click OK

Concept
This type is used when we have the need to define a new term/idea. When we need to describe why or what something is and how to recognize multiple instances.

Example:
Definitions
Critical attributes

Structure
This type describes to the user what something looks like including identification of its individual parts.

Example:
Illustration
Conceivably a drawn picture of

Fact
This type is used when we need to communicate results, decisions specifications or research data.

Information types are useful if you don’t have source materials. It helps to flush out and reveal gaps.

Today we reviewed six of the most commenly used Informaation Types and how they are used. This also included a brief defination and a few examples. In Part 3 we will discuss the four Design Principles.

  • Chunking
  • Labeling
  • Relevance
  • Consistenacy

Design Principals provide a set of guidelines for the writers so the content they develop is structured and organized effectivly for the user.

Chunking Content – Part 1

Posted July 19, 2010 by Larry
Categories: Writing

I recently was in the process of helping out a fellow SP colleague with a SP wiki. In one of her articles she went into depth about the benefits and ease of editing a SP wiki. Another respected colleague disagreed about some of the benefits and posed some in-depth responses regarding the ease of edit and co-authoring. It got me thinking back to my technical writing training. Originally, when I first began working in my current position I knew coding fairly well, mostly the back end stuff at least. I was just starting to learn some of the front end writing techniques.
My company put me through much training at that time which related to how to organize content through mapping and chunking.

Challenges of Creating Content

Creating content so users can easily find it is one of the biggest challenges, especially web-based. Reasons for this are:

  • The wall of text
  • Hard to read
  • They get lost in cyberspace
  • Data is organized in a confusing way

Challenges the authors face with creating the content include

  • Organizing and presenting content for reading on screen
  • Understanding technology constraints or limits
  • Helping users understand
    • Where they are relative to the content
    • How to move around, navigate

The benefits of chunking content are:

  • Quicker and easier to access – Users can find the information they need an average of 20-40% faster than unmapped content
  • Improved clarity, reduction in errors – Users make fewer errors because the content is clear, easy to understand, complete and correct
  • Visible organization – Users understand how the author has chunked the content, since logic of the organization and structure is apparent and consistent
  • Completeness – mapping content exposes gaps in information and facilitates producing an accurate, useful and complete deliverable.
  • Faster learning – new information is learned more quickly, therefore reducing time.
  • Simplified writing approach – This provides a standard for new writes. Allows them to hit the ground running.
  • Greater efficiency – writer training in this method report improvement of 10-30%. Over 95% trained in these writing techniques spend less time debating where and how to start.
  • Improved analysis – The analytical approach determines what should and should not be included in the content making it easier to spot gaps or inconsistencies.
  • Better organization – using organization and presentation principals we can make better decisions on how to organize and structure content.
  • Easier update – Modular units of text are updated more easily than traditional writing
  • Reuseable content – Modular units are easily reused in multiple locations within a document set, curriculum or web site.
    • Example: the use of XML or HTML a modular unit can be written once and displayed many times and in different ways depending on the context or medium.
  • Quality control
    • Increased quality of work
    • Reduce training time
    • Increase productivity
  • Cost containment
    • Improved effectiveness
    • Quick to production
  • Knowledge management
    • This unique structure provides the ideal basis for designing and structuring information repositories
    • Efficient use of assets – chunked data is easier to find, use, reuse or modify when necessary

When writing content there are several factors to keep in mind.

  • Purpose – what is the root purpose of the content?
  • Audience
    • What does the audience already know? (What not to include)
    • What does the audience need to learn? (What to include)
  • Existing materials – what exists, if any?
  • Subject Matter Experts -
    • Have they been identified?
    • Will they be available when writing takes place?
  • Compliance – Are there any legal requirements?
  • Technology analysis – What (tools) do you need consider in a web-based deliverable?

Tools

Display tools – is the audience accessing and viewing the content

  • in a browser (type and version)?
  • In an on-line reader (adobe PDF)?
  • Cell-phone display window
  • on a smart phone or portable device?

Audience tools – does the user have hardware/software needed?

  • Access to view content?
  • ability to play audio or video?
  • Browser version/type?
  • Required plug-ins for viewing or listening

Content development tools

  • How are we required to develop the content?
    • MS Word
    • HTML
    • SGML or XML
    • Multimedia authoring tool
    • Graphics or animation
    • Help file authoring (RoboHelp)
    • SharePoint Wiki

Content conversion – is it required that content be converted to another media type?

  • HTML
  • PDF
  • XML files
  • Help files

Content management – Who?

  • uploads files
  • updates files
  • eliminates out of date files
  • Content owner, authorizes read or write access for content updates

Today I briefly reviewed the highlights and benefits of chunking content. Also touched on the difficulties for readers and authors when compiling the content. Once we understand the principals of chunking content, the users and the media type output we will save time developing the content. Users save time finding what they need. Development of the content becomes repeatable and reusable. In Part 2 I will describe the “Information Types” and their detail. Also we’ll discuss the Maps and Blocks, which make up Information Types.

excerpts taken from Information Mapping v2

Copyright

Posted July 1, 2010 by Larry
Categories: jquery

Any and all post can be freely distrubuted as long as credit is provide back to the original source.

The MIT License

Copyright (c) 2009-2010

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

src – Using an external JavaScript

Posted July 1, 2010 by Larry
Categories: jquery

Using an External JavaScript
If you want to run the same JavaScript on several pages, without having to write the same script on every page, you can write a JavaScript in an external file.

Save the external JavaScript file with a .js file extension.

Note: The external script cannot contain the tags!

To use the external script, point to the .js file in the “src” attribute of the tag:

Example:

<html>
<head>
<script type="text/javascript" src="/Scripts/xxx.js"></script>
</head>
<body>
</body>
</html> 

Or in a CEWP

<script type="text/javascript" src="/Scripts/jquery.js"></script>
<script type="text/javascript" src="/Scripts/jquery.corner.js"></script>
<script type="text/javascript" src="/Scripts/jquery.cookie.js"></script>

To begin, you must have a location to store your .js files. I have created a Document Library on my parent site and named it “Scripts”. All my .js files are uploaded to this Library. I do this at the parent level because it makes it easy to create the reference. All references will point to the same library, just different source files.
Scripts Library

This document library contains all .js files. The path or URL to the library is boxed in red in the address bar. That’s src = Doc Lib URL + filename.
File Shortcut
or right click on the .js
select copy shortcut
Paste URL in src

This has to be done for each file. if the path/URL is incorrect, scripts will not function. To create a relative path to my jquery file my script tag will look like this

<script type="text/javascript" src="/sites/globalmp/Scripts/jquery.1.4.2.js"></script>

SharePoint: Wiki Bookmarks Part 2 – Tabs

Posted June 29, 2010 by Larry
Categories: jquery

In Part 1 I discussed some of the issues and a possible work around for the limitations a SharePoint Wiki offers. When I received the original request I had no idea of the amount of content they were dealing with. What was discussed in Part 1 is a reasonable good practice, but not something we want to go back and rework. I knew there could be a simple script solution that when implemented would fix the issue, but my skills are limited in that area so I reached out to Alexander again. Sure enough a few lines of code later and it worked like a champ.
The request was asking for a top navigation with simple alpha characters that linked throughout the page. Today’s post will discuss how we went about setting this up and implementing it.
Let’s start with the navigational structure. I looked over this several times. Each time I was drawn back to a tab navigational structure. They are much cleaner and perform fairly well. I used an existing theme from jqueryUI. This would make it easier to apply a different theme with little to no maintenance. The theme in this demonstration is “Smoothness”. I made two adjustments to the CSS and that was only for the active tab. I also incorporated cookies and rounded corners. I will discuss each part and how to implement it. Here is a preview:
Preview

There are several files you will need before you begin. I use a Scripts library to store them.

In a sub folder “jqueryUI-1.8.2″ I store the UI files and images. A theme can be found and downloaded from here.

  • jquery-ui-1.8.2.custom.min.js
  • jquery-ui-1.8.2.custom.css
  • images, included with the theme

In addition to the files will also be a few lines of code to pull everything together.

To start we need a basic template that can be added to the Wiki page. This template will make it easier to add or modify content. Below is the basic HTML code that can be utilized as a starting template. It is broken into to two parts, the tab navigation and the content. The tabs should remain similar with little to no change. Your content will be plugged into the div areas they fit according to your requirements. This code should be added to your wiki page source. This is the foundation of each wiki page in your library.

Adding HTML to your wiki source

  1. create a wiki page
  2. edit the wiki page
  3. edit the HTML source
  4. remove existing HTML source
  5. paste the HTML template into the source
  6. Click OK


Results will be a wiki template

Wiki HTML source code template

<!-- Begin Tab Navigation -->
<div id="tabs">
	<ul>
		<li><a href="#tab-a">A</a></li>
		<li><a href="#tab-b">B</a></li>
		<li><a href="#tab-c">C</a></li>
		<li><a href="#tab-d">D</a></li>
		<li><a href="#tab-e">E</a></li>
		<li><a href="#tab-f">F</a></li>
		<li><a href="#tab-g">G</a></li>
		<li><a href="#tab-h">H</a></li>
		<li><a href="#tab-i">I</a></li>
		<li><a href="#tab-j">J</a></li>
		<li><a href="#tab-k">K</a></li>
		<li><a href="#tab-l">L</a></li>
		<li><a href="#tab-m">M</a></li>
		<li><a href="#tab-n">N</a></li>
		<li><a href="#tab-o">O</a></li>
		<li><a href="#tab-p">P</a></li>
		<li><a href="#tab-q">Q</a></li>
		<li><a href="#tab-r">R</a></li>
		<li><a href="#tab-s">S</a></li>
		<li><a href="#tab-t">T</a></li>
		<li><a href="#tab-u">U</a></li>
		<li><a href="#tab-v">V</a></li>
		<li><a href="#tab-w">W</a></li>
		<li><a href="#tab-x">X</a></li>
		<li><a href="#tab-y">Y</a></li>
		<li><a href="#tab-z">Z</a></li>
	</ul>
<!-- End Tab Navigation -->
<!-- Begin Content -->
	<div id="tab-a" class="tab_content">
		Content A </div>
	<div id="tab-b" class="tab_content">
		Content B </div>
	<div id="tab-c" class="tab_content">
		Content C </div>
	<div id="tab-d" class="tab_content">
		Content D </div>
	<div id="tab-e" class="tab_content">
		Content E </div>
	<div id="tab-f" class="tab_content">
		Content F </div>
	<div id="tab-g" class="tab_content">
		Content G </div>
	<div id="tab-h" class="tab_content">
		Content H </div>
	<div id="tab-i" class="tab_content">
		Content I </div>
	<div id="tab-j" class="tab_content">
		Content J </div>
	<div id="tab-k" class="tab_content">
		Content K </div>
	<div id="tab-l" class="tab_content">
		Content L </div>
	<div id="tab-m" class="tab_content">
		Content M </div>
	<div id="tab-n" class="tab_content">
		Content N </div>
	<div id="tab-o" class="tab_content">
		Content O </div>
	<div id="tab-p" class="tab_content">
		Content P </div>
	<div id="tab-q" class="tab_content">
		Content Q </div>
	<div id="tab-r" class="tab_content">
		Content R </div>
	<div id="tab-s" class="tab_content">
		Content S </div>
	<div id="tab-t" class="tab_content">
		Content T </div>
	<div id="tab-u" class="tab_content">
		Content U </div>
	<div id="tab-v" class="tab_content">
		Content V </div>
	<div id="tab-w" class="tab_content">
		Content W </div>
	<div id="tab-x" class="tab_content">
		Content X </div>
	<div id="tab-y" class="tab_content">
		Content Y </div>
	<div id="tab-z" class="tab_content">
		Content Z </div>
<!-- End Content -->
</div>

We could circumvent the dynamic tabs and possibly just make them links to bookmarks, but with all the on-line reference material I have developed I have learned that scrolling content in not user friendly and not a best practice. Using this method content can now be chunked into smaller logical pieces. This makes it easier to use and find your specific content as opposed to a wall of text that makes you dizzy to stare at.

Moving on to the code and making this work. There were three pieces I combined to get the functionality. The first piece provided by Alexander from sharepointjavascript.wordpress.com is a small jQuery code that replaces the href up to the “#” with the existing page URL. The reason we needed to do this is when the page is edited the URL is that of the EditForm.aspx. This is not the final URL of your page. This script allows you to now easily create bookmarks in your wiki.

$(".ms-wikicontent a").each(function(){
var thisHref = $(this).attr('href');
var index = thisHref.indexOf('#');
if(index>0){
$(this).attr('href',thisHref.substring(index));
}
});

Add rounded corners and cookies

// Corners
$("#tabs ul li").corner("top 10px");
//$("#tabs ul li").corner("top 8px").parent().css('padding', '4px').corner("round 10px")
// cookies
$(function() {
$("#tabs").tabs({
cookie: {
// store cookie for a day, without, it would be a session cookie
expires: 1
}
});
});

Now to finish this and pull it all together we need to add a CEWP to each wiki page.

  1. On the Site Action menu select Edit Page.
  2. At the bottom of the wiki is a web part zone, Click add web part
  3. Add CEWP
  4. Click Source Editor
  5. Add the code below
  6. Update src reference to match you requirements

What does this mean “Update src reference to match you requirements”? If you look back at the source code for the template you will notice in the Content part Content A, Content B, Content C, etc. Thios text should be replaced with your text.

Content A corresponds to tab A, Content B corresponds to tab B and so on. This layout or structure can be best described as a dictionary or glossary and is only a starting point. The name and labels can be change to fit your requirements.

Add CEWP
This script will be added to the CEWP. Remember to upate your src references to match your paths.

<script type="text/javascript" src="/sites/globalmp/JavaScripts/jquery-latest.min.js"></script>
<link type="text/css" href="jqueryUI-1.8.2/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jqueryUI-1.8.2/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$(".ms-wikicontent a").each(function(){

	var thisHref = $(this).attr('href');
	var index = thisHref.indexOf('#');
	if(index>0){
		$(this).attr('href',thisHref.substring(index));
	}
});

// Corners
$("#tabs ul li").corner("top 10px");
//$("#tabs ul li").corner("top 8px").parent().css('padding', '4px').corner("round 10px")
// cookies
$(function() {
	$("#tabs").tabs({
		cookie: {
		// store cookie for a day, without, it would be a session cookie
			expires: 1
			}
		});
	});
</script>
 

Each page the script is added to, with the template, will provide tab navigation along with cookies, remembering the user’s last selection. Also including internal or page bookmarks that are fully functionally.

SharePoint: Wiki Bookmarks

Posted June 18, 2010 by Larry
Categories: jquery

I have recently received a request from Kerri Abraham,
“Larry, I have a request. For years I’ve tried to come up with a generic way of creating anchors in a wiki so that the code could be used across sites. The problem with the WYSIWYG editor is that it modifies the code to relative links, linking me back to the edit page instead of the .aspx. No SPDesigner. Here is the direction I’ve been testing…”

When I first thought about this I figured it was pretty simple. In fact several posts I’ve read explained it could be done and would be done through the source.

My first attempt was perfect, just as I expected. I began making some modifications and then got ready to draft my reply when it all failed. I was getting the same error. What happens is creating any kind of a link in wiki, using the source editor, SP appends the page URL to the beginning. So when on the EditForm.aspx making edits, this is the URL that gets added. Now each anchor links back to the edit page. This simply will not work.

starting with your wiki home page URL like this:

/sites/globalmp/Bookmarks/Home.aspx

adding a link to a bookmark, when saved goes from this:

<a href="#top">Top of page</a>

to this:
<a href="/sites/globalmp/Bookmarks/Forms/EditForm.aspx#top">Top of page</a>

I began trying a script workaround. Something that could be applied to a CEWP because use of SPD was not an option. I know jquery could probably achieve this task, but my skill level is not quite there yet. So I posted a request on one of my favorite blogs and made a request of Alexander from SharePoint Javascripts. He has proved to be a master with jquery.

So in the mean time I began playing with my own solution. Hacking all the jquery I can and then it finally hit. The simplest solution right in front of my face. If we are linking to a bookmark with in the page, why not add the page URL to the anchor?

Change this:

<a href="#top">Top of page</a>

to this:

<a href="/sites/globalmp/Bookmarks/Home.aspx#top">Top of page</a>

This worked perfectly. I added a table across the top of my wiki that included a simple navigation and throughout the wiki I added links back to the top of the page. They all successfully worked. Here was my final code, mostly comprised of text. You can of course apply formatting and update the page URL to matct your requirements.

<DIV class=ExternalClassF5DD20F2B7E24D8AA406FE7CCA0B90F8>
<DIV>
<TABLE style="DISPLAY: inline; FONT-SIZE: 1em; BORDER-COLLAPSE: collapse" border=1>
<TBODY>
<TR>
<TD class=ms-rtetablecells style="VERTICAL-ALIGN: top">
<DIV><A href="/sites/globalmp/Bookmarks/Home.aspx#What_is_Lorem_Ipsum">What</A></DIV></TD>
<TD class=ms-rtetablecells style="VERTICAL-ALIGN: top">
<DIV><A href="/sites/globalmp/Bookmarks/Home.aspx#Where_Does_It_Come_From">Where</A></DIV></TD>
<TD class=ms-rtetablecells style="VERTICAL-ALIGN: top">
<DIV><A href="/sites/globalmp/Bookmarks/Home.aspx#Why_Do_We_Use_It">Why</A></DIV></TD>
<TD class=ms-rtetablecells style="VERTICAL-ALIGN: top">
<DIV><A href="/sites/globalmp/Bookmarks/Home.aspx#Donec">Donec</A></DIV></TD>
<TD class=ms-rtetablecells style="VERTICAL-ALIGN: top">
<DIV><A href="/sites/globalmp/Bookmarks/Home.aspx#Nulla">Nulla</A></DIV></TD>
<TD class=ms-rtetablecells style="VERTICAL-ALIGN: top">
<DIV><A href="/sites/globalmp/Bookmarks/Home.aspx#Dolor">Dolor</A></DIV></TD>
<TD>
<DIV><A href="/sites/globalmp/Bookmarks/Home.aspx#Ut">Ut</A></DIV></TD>
<TD>
<DIV><A href="/sites/globalmp/Bookmarks/Home.aspx#Morbi">Morbi</A></DIV></TD></TR></TBODY></TABLE></DIV>
<DIV><STRONG><FONT size=3><A name=top>Welcome to your wiki library!</A></FONT></STRONG><BR>You can get started and add content to this page by clicking <B>Edit</B> at the top of this page, or you can learn more about wiki libraries by clicking [[How To Use This Wiki Library]].<BR><BR><STRONG>What is a wiki library?</STRONG><BR><BR><I>Wikiwiki</I> means quick in Hawaiian. A wiki library is a document library in which users can easily edit any page. The library grows organically by linking existing pages together or by creating links to new pages. If a user finds a link to an uncreated page, he or she can follow the link and create the page.<BR><BR>In business environments, a wiki library provides a low-maintenance way to record knowledge. Information that is usually traded in e-mail messages, gleaned from hallway conversations, or written on paper can instead be recorded in a wiki library, in context with similar knowledge.<BR><BR>Other example uses of wiki libraries include brainstorming ideas, collaborating on designs, creating an instruction guide, gathering data from the field, tracking call center knowledge, and building an encyclopedia of knowledge.</DIV>
<P style="FONT-STYLE: italic; TEXT-ALIGN: right"><A href="/sites/globalmp/Bookmarks/Home.aspx#top">&lt;back to top&gt;</A></P>
<DIV>
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget enim lacus. Sed eu convallis mi. Sed euismod, odio sit amet scelerisque molestie, enim dui eleifend purus, quis dapibus metus nibh vitae ipsum. Curabitur varius, mauris et vestibulum suscipit, tortor arcu sollicitudin urna, non egestas massa augue vel diam. Phasellus adipiscing nisl vel nibh pellentesque vitae commodo massa gravida. Proin congue congue dolor in facilisis. Integer gravida, enim ac gravida rhoncus, urna odio gravida tellus, nec viverra lectus eros viverra leo. Praesent non adipiscing purus. Cras vitae turpis sit amet diam ultricies iaculis. Mauris scelerisque magna at turpis tempus feugiat. Proin semper ipsum sed enim pretium vestibulum. Curabitur vel porta sapien. Vestibulum suscipit adipiscing magna, pretium fringilla lacus fringilla a. Duis posuere ipsum in quam pharetra cursus. Suspendisse ac nunc nec ante rutrum aliquam. Maecenas ultrices augue sit amet mauris rhoncus viverra. Cras ut lorem nec erat malesuada suscipit. Mauris congue suscipit elit ac aliquam. Cras vestibulum elementum mattis. Aenean mollis euismod purus accumsan convallis. </P>
<P>Duis vitae sem ac elit dapibus malesuada at tempus urna. Proin mollis vulputate tellus nec iaculis. Duis aliquet sollicitudin convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam auctor imperdiet nibh sed semper. Nullam sollicitudin quam et ligula fermentum imperdiet. Aenean mi mi, commodo eu tristique sed, commodo at nunc. Cras ut sem est. Phasellus leo est, tristique eu dapibus id, mollis eget mauris. Aenean mauris lectus, aliquam vitae gravida quis, facilisis eget purus. Aliquam tempor sollicitudin adipiscing. Maecenas nec quam sapien, scelerisque rhoncus ligula. Sed sed mollis ante. </P></DIV>

<DIV><A name=What_is_Lorem_Ipsum><STRONG>What is Lorem Ipsum</STRONG></A></DIV>
<DIV>
<P>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</P></DIV>
<DIV></DIV>
<P style="FONT-STYLE: italic; TEXT-ALIGN: right"><A href="/sites/globalmp/Bookmarks/Home.aspx#top">&lt;back to top&gt;</A></P>
<DIV><A name=Where_Does_It_Come_From><STRONG>Where Does It Come From</STRONG></A></DIV>
<P>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. </P>
<P>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </P>
<P style="FONT-STYLE: italic; TEXT-ALIGN: right"><A href="/sites/globalmp/Bookmarks/Home.aspx#top">&lt;back to top&gt;</A></P>
<DIV><A name=Why_Do_We_Use_It><STRONG>Why Do We Use It</STRONG></A></DIV>
<P>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</P>
<P style="FONT-STYLE: italic; TEXT-ALIGN: right"><A href="/sites/globalmp/Bookmarks/Home.aspx#top">&lt;back to top&gt;</A></P>
<DIV><A name=Donec><STRONG>Donec ut nisi arcu</STRONG></A></DIV>
<P>Nec pulvinar nulla. Sed sit amet lectus non mauris volutpat commodo. Curabitur justo purus, eleifend et fermentum porttitor, mattis condimentum orci. Sed risus enim, vehicula vitae gravida sed, adipiscing ac erat. Donec pulvinar nibh nisl, id mollis quam. Maecenas sed turpis nec nulla molestie molestie eget ac urna. Vestibulum ultrices, metus ut fringilla euismod, arcu velit malesuada magna, et vehicula erat elit id nunc. Integer aliquam velit at felis ultrices aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum laoreet massa vel facilisis. Donec porta dui at ante sagittis id lacinia est tincidunt. Vivamus lacinia tincidunt auctor. Vivamus ligula mauris, viverra nec molestie quis, bibendum a neque. Morbi tempus orci mi. Phasellus in commodo orci. Etiam pulvinar adipiscing libero, vitae molestie nibh semper ut. </P>
<P style="FONT-STYLE: italic; TEXT-ALIGN: right"><A href="/sites/globalmp/Bookmarks/Home.aspx#top">&lt;back to top&gt;</A></P>
<DIV><A name=Nulla><STRONG>Nulla suscipit</STRONG></A></DIV>
<P>Dui non congue eleifend, massa ante bibendum massa, a eleifend risus velit a ante. Nunc tincidunt nunc in neque congue sed ullamcorper erat ornare. Nulla non lectus non sem porttitor convallis. Nam interdum eleifend orci, quis dictum urna malesuada ut. Duis vel mauris sit amet orci porta pellentesque. Suspendisse potenti. Vestibulum imperdiet tempus leo ut luctus. Nam eget nisl a lectus aliquet dignissim sit amet at lorem. Maecenas ornare aliquam tristique. Integer vitae dui nec turpis placerat pretium a a tortor. Etiam sit amet ante nibh. Integer a urna nibh. Sed a lectus mauris, in tincidunt arcu. </P>
<P style="FONT-STYLE: italic; TEXT-ALIGN: right"><A href="/sites/globalmp/Bookmarks/Home.aspx#top">&lt;back to top&gt;</A></P>
<DIV><A name=Dolor><STRONG>Dolor sit amet</STRONG></A></DIV>
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus turpis a ante mattis at convallis eros tempor. Aenean vel vehicula ipsum. Phasellus tortor diam, adipiscing vitae dignissim quis, tempus ac erat. Vestibulum tempor ante non metus feugiat porttitor. Donec interdum tincidunt tristique. Aenean eget orci sem. Phasellus id diam ante. Phasellus placerat iaculis interdum. Praesent lacus risus, viverra faucibus posuere in, tincidunt porta eros. Quisque lobortis iaculis turpis, eu posuere ipsum placerat nec. Integer sit amet nibh turpis, ut sodales nisi. In sollicitudin augue ac sapien consequat eu mollis augue molestie. </P>
<P>Quisque risus ipsum, rutrum eu tincidunt et, bibendum id purus. Maecenas pellentesque porta orci, quis ultrices risus aliquam at. Vivamus ut risus et lacus congue euismod. Mauris mattis, lacus in vestibulum egestas, lacus nibh tempor urna, a convallis dolor augue eget urna. Maecenas dui magna, eleifend ut facilisis quis, sagittis et odio. Morbi lectus nisi, euismod non pharetra in, congue ac elit. Morbi nec arcu eros. Vestibulum fringilla, libero non sagittis euismod, augue elit ultricies arcu, vitae egestas nulla dolor quis purus. Nullam et purus nec ante facilisis gravida nec ac erat. Nullam ut metus orci. Suspendisse malesuada nisl a dui aliquet pharetra. Mauris metus augue, scelerisque eget sodales vitae, feugiat ut velit. </P>
<P>Donec ut nisi arcu, nec pulvinar nulla. Sed sit amet lectus non mauris volutpat commodo. Curabitur justo purus, eleifend et fermentum porttitor, mattis condimentum orci. Sed risus enim, vehicula vitae gravida sed, adipiscing ac erat. Donec pulvinar nibh nisl, id mollis quam. Maecenas sed turpis nec nulla molestie molestie eget ac urna. Vestibulum ultrices, metus ut fringilla euismod, arcu velit malesuada magna, et vehicula erat elit id nunc. Integer aliquam velit at felis ultrices aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur </P>
<P style="FONT-STYLE: italic; TEXT-ALIGN: right"><A href="/sites/globalmp/Bookmarks/Home.aspx#top">&lt;back to top&gt;</A></P>
<DIV><A name=Ut><STRONG>Ut ornare aliquam</STRONG></A></DIV>
<P>Libero ut ornare. Quisque iaculis mattis augue, et hendrerit quam pretium et. Cras a pellentesque diam. Aenean consequat imperdiet suscipit. Aenean id augue sit amet mi egestas ornare ut et justo. Integer elementum iaculis commodo. Fusce pulvinar, elit at dictum imperdiet, est nulla sodales erat, ut vestibulum nulla turpis pretium urna. Donec et ligula quis lorem pretium mollis. Vivamus aliquet consequat lacus, eget bibendum nisi posuere id. Proin laoreet sem orci, et dictum quam. Nunc dignissim risus sed tellus pulvinar sit amet imperdiet dui blandit. Morbi augue lacus, vulputate ornare ullamcorper ac, pretium sit amet augue. </P>
<P>Curabitur aliquam tempus urna, nec semper mauris dapibus vel. Ut feugiat adipiscing ligula ac placerat. Mauris aliquet pharetra nisl, at suscipit justo porta a. Ut dui ipsum, egestas vel lobortis id, imperdiet non lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis interdum dictum. Quisque in neque elit. Donec eu dolor erat, ut bibendum eros. Suspendisse nulla purus, fringilla nec lobortis in, placerat sed lorem. Aliquam iaculis velit et metus consectetur egestas. Etiam euismod suscipit mattis. Vivamus egestas leo at lorem facilisis rhoncus. Mauris leo lectus, volutpat ut dapibus a, consequat tincidunt diam. Aliquam eu arcu vitae orci varius pellentesque non at mauris. Maecenas ut sapien elit, sed consequat augue. </P>
<P style="FONT-STYLE: italic; TEXT-ALIGN: right"><A href="/sites/globalmp/Bookmarks/Home.aspx#top">&lt;back to top&gt;</A></P>
<DIV><A name=Morbi><STRONG>Morbi</STRONG></A></DIV>
<P>Morbi congue interdum ultrices. Maecenas sed massa eu lectus dapibus suscipit. Fusce lorem elit, tristique sed ultrices ac, eleifend nec odio. Integer molestie, risus id commodo convallis, est massa convallis eros, nec scelerisque nisi nunc vitae odio. Quisque faucibus euismod eros, quis ultrices ante pulvinar vitae. Sed vitae ligula lorem, ac luctus odio. Fusce ac felis nec mi placerat cursus. Morbi luctus eleifend elit non faucibus. Duis egestas pharetra nulla, quis ullamcorper nisi accumsan vel. Nulla cursus malesuada nisi, id congue erat malesuada id. Pellentesque tempor est eu lacus porta ultrices. Sed suscipit porttitor nisi et ultricies. Morbi in libero id est iaculis vestibulum sed eget eros. Nullam rhoncus ante at neque iaculis et eleifend magna bibendum. Nunc varius semper urna, ut adipiscing massa fringilla pharetra. Quisque a lorem dictum nibh sodales elementum at quis libero. Donec lobortis nisi nec risus placerat auctor. Quisque sagittis magna a nunc eleifend id tempor nulla convallis. </P>
<P>Sed malesuada tincidunt neque, convallis rutrum urna egestas in. Maecenas et dolor quam, ut volutpat mauris. Suspendisse ut neque in eros facilisis ullamcorper. Integer pellentesque diam augue. Nullam ut tellus risus, vitae sollicitudin velit. Integer accumsan, magna at consectetur vulputate, purus tortor auctor sem, at rutrum lorem sem vitae velit. Praesent quam neque, sollicitudin vitae fringilla sed, elementum vel sem. Proin a porttitor nibh. Aenean laoreet ullamcorper neque et consectetur. Sed imperdiet diam eget augue imperdiet pretium. Phasellus a sem libero. Donec et augue magna. Etiam suscipit tellus augue, vel tristique nunc. Maecenas ac iaculis felis. Mauris non dui nulla. Nunc posuere cursus tristique. Vestibulum faucibus eros gravida dui pulvinar id tincidunt velit tempor. Etiam at nisi quis lorem tempus sodales in ac lacus. Praesent porttitor arcu a turpis sodales vel condimentum magna gravida. </P>
<P style="FONT-STYLE: italic; TEXT-ALIGN: right"><A href="/sites/globalmp/Bookmarks/Home.aspx#top">&lt;back to top&gt;</A></P></DIV>

Select All – Document Library Relink or repair.aspx

Posted April 29, 2010 by Larry
Categories: jquery

When InfoPath form template is published to a SharePoint Form Library, SharePoint creates references to the form template in the forms library where new files are being saved. Sometimes during the publishing of changes, regular updates or the Form Library is moved to a new location, the references in the InfoPath form files continue to point to an old template. In order to fix the references in the form, files need to point to the new form template location. There are several ways to fix the broken links to the template. I will discuss the Relink operation and how to make this easier to use.

Some of the libraries I have had to work with contained several thousand files. This can take some time trying to update these links, especially using SharePoint OOB Relink page. By default it is set to view 100 items at a time and each item has to be selected. This image is a snapshot of a typical OOB Relink page

I will discuss how to change the RowLimit, to view more items, and how to add some jQuery to get a select all function. It is important to keep in mind that setting the RowLimit to an excessive amount could task your server. I do not recommend any more than 200-300 items per view or page.

Let’s get into setting the RowLimit. This tip was provided to me by Alexander at SharePoint JavaScripts who has been doing some great work in the SharePoint community. Keep up the great work.

To Edit RowLimit for relink.aspx we will modify the view from within SharePoint using a small “hack”

STEP ACTION
1 Get the view GUID from the relink view

NOTE: view page source and search for ctx.view

2 Copy value with the braces

NOTE: like this {439B16F7-B588-4E87-9558-7B33E9E5FADF}

3 Go to another view in that list
4 Select Modify this view
5 In the URL replace the view GUID at &View=
6 Reload the page
7 At bottom of page, change Item Limit to 200
8 Click OK

I have found using a text editor makes it easier to swap out the GUIDs. Your RowLimit now should reflect your changes.

Now comes the code for Select All. There is little explanation for this.

  1. Add a CEWP to the page.
  2. Copy the code
  3. paste it into the CEWP
  4. update jQuery reference for your library (this version of jQuery is 1.4.2)
  5. Save it and your done.

<script type="text/javascript" src="../../Scripts/jquery-latest.min.js"></script>
<script type="text/javascript">
/**************************************
* Larry Pfaff
* jaxkookie@gmail.com
* last modified: 2010 - Apr - 29
* v. 1
***************************************
* Edit Rowlimit for relink.aspx	
* Modify the view from within SharePoint with a small "hack"
* 1. Get the view GUID from the relink view 
*	NOTE: view page source and search for ctx.view
* 2. Copy value with the braces 
*	NOTE: like this {439B16F7-B588-4E87-9558-7B33E9E5FADF}
* 3. Go to another view in that list 
* 4. Select Modify this view 
* 5. In the URL replace the view GUID at &View= 
* 6. Reload the page 
* 7. At bottom of page, change Item Limit to 200 
* 8. Click OK 
***************************************
*/

str = "<input type='checkbox' id='cbSelectAll' title='Select/Unselect All' style='border:2px solid green;' />";

$(document).ready(function() {
	$("TH.ms-vh2-nograd:contains('Relink')").html(str);
	
	$("#cbSelectAll").click(function() {
		var checked_status = this.checked;
		$("input:checkbox").each(function() {
			this.checked = checked_status;
		});
	});	
});
</script>

Results



Choice field Multiple select, multiple columns – Part 3

Posted April 26, 2010 by Larry
Categories: jquery, WSS

We have reached the final stretch. In parts 1 and 2 I discussed applying the SharePoint (SP) trick for Calculated Columns(CC) to read a Choice field multiple select, why two CC were needed to apply this work around. Also discussed the formula for both CCs. Today will will wrap this up with the final pieces.

To wrap this up we now need to add some styles and scripts. Below are the applied styles. For the demonstration I have added a right border. What I noticed through testing is that depending on the browser and screen resolution that border makes the alignment stand out and if it is off slightly you can tell. I would suggest not to use any borders because none of the other columns are using borders and it would make this modification appear seamless.

On your list page, below the list view, add a Content Editor Web Part (CEWP). Include these styles. This will format the table and text.

<style type="text/css">
.opts {
width:75px;
border-right:1px solid #c0c0c0;
padding:2px;
background-color:transparent;
}
.name {
width:100px;
border-right:1px solid #c0c0c0;
padding:2px;
background-color:transparent;
}
.table {
background-color:transparent;
border-collapse:collapse;
}
</style>

Next we will need to apply the HTMLcc script. This script is the key for converting the html to readable display. Go to Christophe’s site and read how to implement this script. His site is one of the best one’s out there.

The last script that needs to be implemented helps redefine the header. By default this is only one column, but gives the apearence of multiple columns. Below is a simple string replace script. Two things you will need to change in this script.

  1. var – your header output and labels
  2. column name you want to replace

In my example my headers are labeled Opt1, Opt2… and my column name “Display” is what I am replacing. In the same CEWP add this script.

<script type="text/javascript">
//String for header cells
var sVal = "<div style='margin:0 0 0 6px;'><table class='table ms-vh2'><tr><th class='ms-vb name'>Name</th><th class='ms-vb opts'><span style='width:75px'>Opt1</span></th><th class='ms-vb opts'><span style='width:75px'>Opt2</span></th><th class='ms-vb opts'><span style='width:75px'>Opt3</span></th><th class='ms-vb opts'><span style='width:75px'>Opt4</span></th><th class='ms-vb opts'><span style='width:75px'>Opt5</span></th></tr></table></div>";
var theTHs = document.getElementsByTagName("TH");
var i=0;
var THContent = " ";
while (i < theTHs.length)
{
  try
  {
    THContent = theTHs[i].innerText || theTHs[i].textContent;
    if (THContent.indexOf("Display") == 0)
    {
     theTHs[i].innerHTML = THContent.replace(/Display/,sVal).replace(/Display/g,sVal);
    }
  }
  catch(err){}
  i=i+1;
}
</script>

Here is your final result.

In Conclusion
Wer were able to have a multiple select choice column in a list. Use two CCs to parse user input into the appeareance of multiple columns and create headers for these column by applying styles, a simple string replace script and the HTMLcc script.

Choice field Multiple select, multiple columns – Part 2

Posted April 6, 2010 by Larry
Categories: jquery

Previously I left off discussing a request I received. Is it possible to parse the data from a Choice multiple select across multiple columns? The answer is yes and today we will discuss some of the nuts and bolts. By default SharePoint (SP) combines options. Although there are probably many ways to achive this out come today we will walk through how to implement this through the use of calculated formula and a single script.

Once I understood that using two Calculated Columns(CC) the process became much easier to achive.

When I tried this with only one CC with the calculated formula I would get an error applying the SP CC trick. Selecting any of the field types returned an error until I created the second CC.

My list has four fields related to this post. Create each one following the directions below.

  1. Name – single lin text
  2. WorkType - Choice – checkboxed(allow multiple select) no default option – No allow fill in
  3. WorkTypeChoices - calculated field
  4. Display - calculated field

Name field could be substituted as Title it is only a reference we use later in the CC Display output.

WorkType field contains 5 choices. For this demo the options used:
Choice 1
Choice 2
Choice 3
Choice 4
Choice 5

Note: If any more choices are added this could task the limits of the CC and other options may need to be implemented.

WorkTypeChoices is set equal to WorkType. To make this work So has to be tricked into reading the choice field. The reason for this is SP wasn’t designed to read any field type but a single line text. To begin:

  1. create WorkType as a single line text field
  2. create WorkTypeChoice as a calculated field
  3. set WorkTypeChoice equal to WorkType (=[WorkType])
  4. delete WorkType field
  5. recreate WorkType field with the same name
  6. select Choice – checkboxed(allow multiple select) No default value – No Allow ‘Fill-in’
  7. Click OK

Any items selected and posted from Worktype will display in WorkTypeChoices as such:

#;Choice 1#;Choice 3#;Choice 4#;

Display field has a complex formula. The best part about this field is we will get the value from WorkTypeChoice. No other tricks or work arounds will need to be applied.

You should expect already that to achieve multiple columns we will need some form of a table. The formula below will build that table, set column width, apply style and account for SP errors. To manage the character limitation I added styles.

If we break down the formula to one IF statement this is what we have:

IF(NOT(ISERROR(FIND("Choice 1",[WorkTypeChoice]))),"<span style='width:75px;'>Choice 1</span>","<img src='/_layouts/images/blank.gif' height='0' width='75px'>")

If value or option 1 (Choice 1) is found then add a span tag with a set width and return the value, else if false it returns a blank.gif with a set width and height. Just setting a column width did not produce the same results. This image was necessary to retain the width for empty or blank cells. Now the formula is applied for each option (Choice). When the value is found return the value, else return the blank image.

="<DIV><table Class='table ms-vb2'><tr>
<td class='name'>"&IF(Name<>"",Name,"")&"</td>
<td class='opts'>"&IF(NOT(ISERROR(FIND("Choice 1",[WorkTypeChoice]))),"<span style='width:75px;'>Choice 1</span>","<img src='/_layouts/images/blank.gif' height='0' width='75px'>")&"</td>
<td class='opts'>"&IF(NOT(ISERROR(FIND("Choice 2",[WorkTypeChoice]))),"<span style='width:75px;'>Choice 2</span>","<img src='/_layouts/images/blank.gif' height='0' width='75px'>")&"</td>
<td class='opts'>"&IF(NOT(ISERROR(FIND("Choice 3",[WorkTypeChoice]))),"<span style='width:75px;'>Choice 3</span>","<img src='/_layouts/images/blank.gif' height='0' width='75px'>")&"</td>
<td class='opts'>"&IF(NOT(ISERROR(FIND("Choice 4",[WorkTypeChoice]))),"<span style='width:75px;'>Choice 4</span>","<img src='/_layouts/images/blank.gif' height='0' width='75px'>")&"</td>
<td class='opts'>"&IF(NOT(ISERROR(FIND("Choice 5",[WorkTypeChoice]))),"<span style='width:75px;'>Choice 5</span>","<img src='/_layouts/images/blank.gif' height='0' width='75px'>")&"</td></tr>
</table></DIV>"

Applying styles also help with control of the table output. Without the styles the formatting does not match up. Here are the styles used for this table output.

<style type="text/css">
.opts {
width:75px;
border-right:1px solid #c0c0c0;
padding:2px;
background-color:transparent;
}
.name {
width:100px;
border-right:1px solid #c0c0c0;
padding:2px;
background-color:transparent;
}
.table {
background-color:transparent;
border-collapse:collapse;
}
</style>

Today we discussed the formula to output choice multiple select across multiple columns and the styles applied for the table. In the wrap up I will discuss how to put all the pieces together and also how to break the header cell up to have matching headers for each column.

Choice field Multiple select, multiple columns – Part 1

Posted March 24, 2010 by Larry
Categories: WSS

I was recently asked if it was possible to parse the options from a Choice Multiple Select field and display the options in columns where the result of option one would display in column one, either blank or the selected value. When I first thought about this I figured it could be as easy as getting the value through the use of a Calculated Column (CC) and return the results in a table format similar to this:

MyChoiceMultipleSelect
Choice 1       Choice 5
  Choice 2 Choice 3 Choice 4  
  Choice 2     Choice 5

My first attempt using the CC wasn’t very successful. Although I could trick the calculated field into reading the Choice Multiple select field, when I updated my formula to return my values it would only return an error #VALUE!. I knew there was a way to trick the CC into reading the field, but I needed a way around the error.

At this point I decided to use a second CC field. The first CC1 would read my Choice field and the second CC2 would read my first CC1. This would give me the ability to read the Multiple select field, apply the work around and not have to mess with it again allowing me to make changes to my final CC2 anytime in the future. This direction proved to be much more successful. Now CC1 was displaying values like:
#;Choice 1#;Choice 3#;Choice 4#;.

At least now I had something to work with. With data returning to CC1 I could now return my data to multiple columns with the addition of a formula in CC2, including HTML table tags, I displayed my results so it appeared to look like it was in multiple columns. My initial formula reqauired some tweaking, but eventually I was able to make this work. With some additional work I was also able to modify the column header to look like multiple column headers as it appears below. In Part 2 I will discuss the formulas and scripts used to create the table format in a single cell.
Columns


Follow

Get every new post delivered to your Inbox.

Join 43 other followers