I recently had to integrate jCarousel into a SharePoint web part. Since jCarousel is a plugin for jQuery, it means I also had to get jQuery integrated with SharePoint. In order to accomplish this, I followed some good feature packaging instructions found from a few different blog posts:
SharePoint jQuery Deployment Feature
SharePoint + jQuery = Stay Here Feature
SharePoint Slideshow Web Part
After figuring out how to package jCarousel and jQuery using SharePoint delegate controls, I was ready for business with the implementation of the web part.
The web part itself was nothing fancy. I used a Repeater control to generate the list item (LI) elements with the content I needed in the carousel. I wrapped the Repeater in an unordered list (UL) which was wrapped in a DIV tag that had the runat attribute set to server. So basically, I just followed the mark up instructions provided in the jCarousel documentation.
The wrapping DIV tag was used in my webpart code to initialize jCarousel. The code snippet below shows how I implemented it:
protected override void OnLoad(EventArgs e)
{
if (!Page.ClientScript.IsStartupScriptRegistered(this.GetType(), this.ClientID))
{
Page.ClientScript.RegisterStartupScript(this.GetType(), this.ClientID, @"
");
}
}
Friday, September 18, 2009
Thursday, September 10, 2009
18 ways to improve your Body Language!!!
There is no specific advice on how to use your body language. What you do might be interpreted in several ways, depending on the setting and who you are talking to. You’ll probably want to use your body language differently when talking to your boss compared to when you talk to a girl/guy you’re interested in. These are some common interpretations of body language and often more effective ways to communicate with your body.
First, to change your body language you must be aware of your body language. Notice how you sit, how you stand, how you use you hands and legs, what you do while talking to someone.
You might want to practice in front of a mirror. Yeah, it might seem silly but no one is watching you. This will give you good feedback on how you look to other people and give you an opportunity to practise a bit before going out into the world.
Another tip is to close your eyes and visualize how you would stand and sit to feel confident, open and relaxed or whatever you want to communicate. See yourself move like that version of yourself. Then try it out.
You might also want observe friends, role models, movie stars or other people you think has good body language. Observe what they do and you don’t. Take bits and pieces you like from different people. Try using what you can learn from them.
Some of these tips might seem like you are faking something. But fake it til you make it is a useful way to learn something new. And remember, feelings work backwards too. If you smile a bit more you will feel happier. If you sit up straight you will feel more energetic and in control. If you slow down your movements you’ll feel calmer. Your feelings will actually reinforce your new behaviours and feelings of weirdness will dissipate.
In the beginning easy it’s to exaggerate your body language. You might sit with your legs almost ridiculously far apart or sit up straight in a tense pose all the time. That’s ok. And people aren’t looking as much as you think, they are worrying about their own problems. Just play around a bit, practice and monitor yourself to find a comfortable balance.
1. Don’t cross your arms or legs – You have probably already heard you shouldn’t cross your arms as it might make you seem defensive or guarded. This goes for your legs too. Keep your arms and legs open.
2. Have eye contact, but don’t stare – If there are several people you are talking to, give them all some eye contact to create a better connection and see if they are listening. Keeping too much eye-contact might creep people out. Giving no eye-contact might make you seem insecure. If you are not used to keeping eye-contact it might feel a little hard or scary in the beginning but keep working on it and you’ll get used to it.
3. Don’t be afraid to take up some space – Taking up space by for example sitting or standing with your legs apart a bit signals self-confidence and that you are comfortable in your own skin.
4. Relax your shoulders – When you feel tense it’s easily winds up as tension in your shoulders. They might move up and forward a bit. Try to relax. Try to loosen up by shaking the shoulders a bit and move them back slightly.
5. Nod when they are talking – nod once in a while to signal that you are listening. But don’t overdo it and peck like Woody Woodpecker.
6. Don’t slouch, sit up straight – but in a relaxed way, not in a too tense manner.
7. Lean, but not too much – If you want to show that you are interested in what someone is saying, lean toward the person talking. If you want to show that you’re confident in yourself and relaxed lean back a bit. But don’t lean in too much or you might seem needy and desperate for some approval. Or lean back too much or you might seem arrogant and distant.
8. Smile and laugh – lighten up, don’t take yourself too seriously. Relax a bit, smile and laugh when someone says something funny. People will be a lot more inclined to listen to you if you seem to be a positive person. But don’t be the first to laugh at your own jokes, it makes you seem nervous and needy. Smile when you are introduced to someone but don’t keep a smile plastered on your face, you’ll seem insincere.
9. Don’t touch your face – it might make you seem nervous and can be distracting for the listeners or the people in the conversation.
10. Keep you head up - Don’t keep your eyes on the ground, it might make you seem insecure and a bit lost. Keep your head up straight and your eyes towards the horizon.
11. Slow down a bit – this goes for many things. Walking slower not only makes you seem more calm and confident, it will also make you feel less stressed. If someone addresses you, don’t snap you’re neck in their direction, turn it a bit more slowly instead.
12. Don’t fidget – try to avoid, phase out or transform fidgety movement and nervous ticks such as shaking your leg or tapping your fingers against the table rapidly. You’ll seem nervous and fidgeting can be a distracting when you try to get something across. Declutter your movements if you are all over the place. Try to relax, slow down and focus your movements.
13. Use your hands more confidently – instead of fidgeting with your hands and scratching your face use them to communicate what you are trying to say. Use your hands to describe something or to add weight to a point you are trying to make. But don’t use them to much or it might become distracting. And don’t let your hands flail around, use them with some control.
14. Lower your drink – don’t hold your drink in front of your chest. In fact, don’t hold anything in front of your heart as it will make you seem guarded and distant. Lower it and hold it beside your leg instead.
15. Realise where you spine ends – many people (including me until recently) might sit or stand with a straight back in a good posture. However, they might think that the spine ends where the neck begins and therefore crane the neck forward in a Montgomery Burns-pose. Your spine ends in the back of your head. Keep you whole spine straight and aligned for better posture.
16. Don’t stand too close –one of the things we learned from Seinfeld is that everybody gets weirded out by a close-talker. Let people have their personal space, don’t invade it.
17. Mirror - Often when you get along with a person, when the two of you get a good connection, you will start to mirror each other unconsciously. That means that you mirror the other person’s body language a bit. To make the connection better you can try a bit of proactive mirroring. If he leans forward, you might lean forward. If she holds her hands on her thighs, you might do the same. But don’t react instantly and don’t mirror every change in body language. Then weirdness will ensue.
18. Keep a good attitude – last but not least, keep a positive, open and relaxed attitude. How you feel will come through in your body language and can make a major difference. For information on how make yourself feel better read 10 ways to change how you feel and for relaxation try A very simple way to feel relaxed for 24 hours.
You can change your body language but as all new habits it takes a while. Especially things like keeping you head up might take time to correct if you have spent thousands of days looking at your feet. And if you try and change to many things at once it might become confusing and feel overwhelming.
Take a couple of these body language bits to work on every day for three to four weeks. By then they should have developed into new habits and something you’ll do without even thinking about it. If not, keep on until it sticks. Then take another couple of things you’d like to change and work on them.
First, to change your body language you must be aware of your body language. Notice how you sit, how you stand, how you use you hands and legs, what you do while talking to someone.
You might want to practice in front of a mirror. Yeah, it might seem silly but no one is watching you. This will give you good feedback on how you look to other people and give you an opportunity to practise a bit before going out into the world.
Another tip is to close your eyes and visualize how you would stand and sit to feel confident, open and relaxed or whatever you want to communicate. See yourself move like that version of yourself. Then try it out.
You might also want observe friends, role models, movie stars or other people you think has good body language. Observe what they do and you don’t. Take bits and pieces you like from different people. Try using what you can learn from them.
Some of these tips might seem like you are faking something. But fake it til you make it is a useful way to learn something new. And remember, feelings work backwards too. If you smile a bit more you will feel happier. If you sit up straight you will feel more energetic and in control. If you slow down your movements you’ll feel calmer. Your feelings will actually reinforce your new behaviours and feelings of weirdness will dissipate.
In the beginning easy it’s to exaggerate your body language. You might sit with your legs almost ridiculously far apart or sit up straight in a tense pose all the time. That’s ok. And people aren’t looking as much as you think, they are worrying about their own problems. Just play around a bit, practice and monitor yourself to find a comfortable balance.
1. Don’t cross your arms or legs – You have probably already heard you shouldn’t cross your arms as it might make you seem defensive or guarded. This goes for your legs too. Keep your arms and legs open.
2. Have eye contact, but don’t stare – If there are several people you are talking to, give them all some eye contact to create a better connection and see if they are listening. Keeping too much eye-contact might creep people out. Giving no eye-contact might make you seem insecure. If you are not used to keeping eye-contact it might feel a little hard or scary in the beginning but keep working on it and you’ll get used to it.
3. Don’t be afraid to take up some space – Taking up space by for example sitting or standing with your legs apart a bit signals self-confidence and that you are comfortable in your own skin.
4. Relax your shoulders – When you feel tense it’s easily winds up as tension in your shoulders. They might move up and forward a bit. Try to relax. Try to loosen up by shaking the shoulders a bit and move them back slightly.
5. Nod when they are talking – nod once in a while to signal that you are listening. But don’t overdo it and peck like Woody Woodpecker.
6. Don’t slouch, sit up straight – but in a relaxed way, not in a too tense manner.
7. Lean, but not too much – If you want to show that you are interested in what someone is saying, lean toward the person talking. If you want to show that you’re confident in yourself and relaxed lean back a bit. But don’t lean in too much or you might seem needy and desperate for some approval. Or lean back too much or you might seem arrogant and distant.
8. Smile and laugh – lighten up, don’t take yourself too seriously. Relax a bit, smile and laugh when someone says something funny. People will be a lot more inclined to listen to you if you seem to be a positive person. But don’t be the first to laugh at your own jokes, it makes you seem nervous and needy. Smile when you are introduced to someone but don’t keep a smile plastered on your face, you’ll seem insincere.
9. Don’t touch your face – it might make you seem nervous and can be distracting for the listeners or the people in the conversation.
10. Keep you head up - Don’t keep your eyes on the ground, it might make you seem insecure and a bit lost. Keep your head up straight and your eyes towards the horizon.
11. Slow down a bit – this goes for many things. Walking slower not only makes you seem more calm and confident, it will also make you feel less stressed. If someone addresses you, don’t snap you’re neck in their direction, turn it a bit more slowly instead.
12. Don’t fidget – try to avoid, phase out or transform fidgety movement and nervous ticks such as shaking your leg or tapping your fingers against the table rapidly. You’ll seem nervous and fidgeting can be a distracting when you try to get something across. Declutter your movements if you are all over the place. Try to relax, slow down and focus your movements.
13. Use your hands more confidently – instead of fidgeting with your hands and scratching your face use them to communicate what you are trying to say. Use your hands to describe something or to add weight to a point you are trying to make. But don’t use them to much or it might become distracting. And don’t let your hands flail around, use them with some control.
14. Lower your drink – don’t hold your drink in front of your chest. In fact, don’t hold anything in front of your heart as it will make you seem guarded and distant. Lower it and hold it beside your leg instead.
15. Realise where you spine ends – many people (including me until recently) might sit or stand with a straight back in a good posture. However, they might think that the spine ends where the neck begins and therefore crane the neck forward in a Montgomery Burns-pose. Your spine ends in the back of your head. Keep you whole spine straight and aligned for better posture.
16. Don’t stand too close –one of the things we learned from Seinfeld is that everybody gets weirded out by a close-talker. Let people have their personal space, don’t invade it.
17. Mirror - Often when you get along with a person, when the two of you get a good connection, you will start to mirror each other unconsciously. That means that you mirror the other person’s body language a bit. To make the connection better you can try a bit of proactive mirroring. If he leans forward, you might lean forward. If she holds her hands on her thighs, you might do the same. But don’t react instantly and don’t mirror every change in body language. Then weirdness will ensue.
18. Keep a good attitude – last but not least, keep a positive, open and relaxed attitude. How you feel will come through in your body language and can make a major difference. For information on how make yourself feel better read 10 ways to change how you feel and for relaxation try A very simple way to feel relaxed for 24 hours.
You can change your body language but as all new habits it takes a while. Especially things like keeping you head up might take time to correct if you have spent thousands of days looking at your feet. And if you try and change to many things at once it might become confusing and feel overwhelming.
Take a couple of these body language bits to work on every day for three to four weeks. By then they should have developed into new habits and something you’ll do without even thinking about it. If not, keep on until it sticks. Then take another couple of things you’d like to change and work on them.
Tuesday, September 8, 2009
Creating tabbed windows in Sharepoint with jQuery
To get this working you need a Page Layout. I use one for our Home Page, called SiteHomePage.aspx. Open the page in your favorite editor (or take Sharepoint Designer), grab a cup of coffee and get started!
Set up the base structure with XHTML
I first started by creating the base structure. This is basically nothing else than a list with the Tab-titles and some DIVS for the Tab-content. The Tab-content will be added later using Web Part Zones.
Adding layout using CSS
Next, you need some CSS to make it display like tabs. I used these styles:
#tabs ul.tabNavigation{
margin: 0;
padding: 0;
list-style: none;
height: 22px;
/* Push the tabs 1px down to hide the top-border of the tabbedWindow */
position: relative;
top: 1px;
}
#tabs ul.tabNavigation li{
float: left;
padding: 0;
margin: 0 5px 0 0;
background: none;
}
#tabs ul.tabNavigation a{
background: url("tab_out.gif") no-repeat 0 0;
width: 172px;
display: block;
padding: 4px 0 3px;
}
#tabs ul.tabNavigation a.selected{
background-image: url("tab_click.gif");
}
#tabs ul.tabNavigation a span{
padding: 0 10px;
}
#tabs div.tabbedWindow{
padding: 10px;
background-color: #ecf4f2;
border: 1px solid #998b7d;
}
And finally, jQuery
Now you only need the magic to get this clickable - and that's where jQuery jumps in. I use the PlaceHolderAdditionalPageHead to load the jQuery library and the JavaScript functions in the header of the page.
That's all it takes to get it working. Smooth, easy and simple. And highly effective, I really like the way it works!
Set up the base structure with XHTML
I first started by creating the base structure. This is basically nothing else than a list with the Tab-titles and some DIVS for the Tab-content. The Tab-content will be added later using Web Part Zones.
Adding layout using CSS
Next, you need some CSS to make it display like tabs. I used these styles:
#tabs ul.tabNavigation{
margin: 0;
padding: 0;
list-style: none;
height: 22px;
/* Push the tabs 1px down to hide the top-border of the tabbedWindow */
position: relative;
top: 1px;
}
#tabs ul.tabNavigation li{
float: left;
padding: 0;
margin: 0 5px 0 0;
background: none;
}
#tabs ul.tabNavigation a{
background: url("tab_out.gif") no-repeat 0 0;
width: 172px;
display: block;
padding: 4px 0 3px;
}
#tabs ul.tabNavigation a.selected{
background-image: url("tab_click.gif");
}
#tabs ul.tabNavigation a span{
padding: 0 10px;
}
#tabs div.tabbedWindow{
padding: 10px;
background-color: #ecf4f2;
border: 1px solid #998b7d;
}
And finally, jQuery
Now you only need the magic to get this clickable - and that's where jQuery jumps in. I use the PlaceHolderAdditionalPageHead to load the jQuery library and the JavaScript functions in the header of the page.
That's all it takes to get it working. Smooth, easy and simple. And highly effective, I really like the way it works!
Paging large content in SharePoint using jQuery
The case
Imagine you had a Publishing Page with a large chunk of content in the body (PublishingPageContent field for example). While you might just throw it to the users/visitors to read in one piece, it’s definitely much neater to split the content into pages.
The requirements
The only requirement posted by the author of the thread was that you should see the complete content while editing the page but have the paging enabled while in display mode.
Looking at the above many different solutions appear on the horizon. To keep it simple and relatively lightweight I suggested using JavaScript for paging and a wrapper control to conditionally load the JavaScript (display mode only).
The solution
As I’ve already mentioned I’ve chose for JavaScript above servers-side controls to achieve the goal. In order to provide similar experience you would have to use AJAX, to display another page without an annoying postback.
Working with JavaScript is not as straight-forward as we – .NET developers – would like it to be. Especially in such scenario as described above, when you have to obtain a piece of HTML, split it into chunks, and provide paging controls with the paging functionality. To simplify working with JavaScript I have decided to use jQuery – a powerful library which is being used in many web projects nowadays.
Using the functionality that I have created, paging your own content comes down to entering the JavaScript snippet below:
See it working live.
The ins and outs
I started off with breaking the whole thing into work items. I came up with the following list:
Read the content of the given wrapper (eg. div)
Split the retrieved content into chunks (eg. into paragraphs)
Provide controls to display pages
Display page based on the provided number of chunks per page
Wrap it all in a class so it at least pretends to be reusable
Retrieving content using jQuery and splitting it into chunks is really simple. The more-challenging part is to display the particular page and provide the paging controls.
Using the chunks stored during the script initialization and the information about the number of chunks per page I came up with the following function:
The showPage function takes one parameter: the number of the page you want to display (1-based). Because arrays in JavaScript are 0-based you have to subtract 1 from the page number to retrieve the proper items from the chunks array. Using a simple calculation (current page x number of items per page to (current page x number of items per page) + number of items per page) you can retrieve the right items from the array. There is one thing you have to consider however. Assuming you have 7 chunks with 3 chunks per page it gives you 3 pages. Using the calculation above you would try to retrieve the 8th item from the array which would result in an exception. To prevent it I have added a check which retrieves the items only if the index is lower than the number of chunks.
Rendering the paging controls is quite straight-forward. Looping through the number of pages I add a list item with a link to the showPage function. The links are being added to all pages except the current so that you can easily track which page you are looking at.
Accessibility
The solution I have made uses the concept of progressive enhancement. The accessible POSH (Plain Old Semantic HTML) is being extended with JavaScript which provides the extra paging functionality. No matter whether you’re using an assistive technology, or having a JavaScript disabled the visitors are always able to get to the content.
For more refer:http://blog.mastykarz.nl/paging-large-content-sharepoint-jquery/
Imagine you had a Publishing Page with a large chunk of content in the body (PublishingPageContent field for example). While you might just throw it to the users/visitors to read in one piece, it’s definitely much neater to split the content into pages.
The requirements
The only requirement posted by the author of the thread was that you should see the complete content while editing the page but have the paging enabled while in display mode.
Looking at the above many different solutions appear on the horizon. To keep it simple and relatively lightweight I suggested using JavaScript for paging and a wrapper control to conditionally load the JavaScript (display mode only).
The solution
As I’ve already mentioned I’ve chose for JavaScript above servers-side controls to achieve the goal. In order to provide similar experience you would have to use AJAX, to display another page without an annoying postback.
Working with JavaScript is not as straight-forward as we – .NET developers – would like it to be. Especially in such scenario as described above, when you have to obtain a piece of HTML, split it into chunks, and provide paging controls with the paging functionality. To simplify working with JavaScript I have decided to use jQuery – a powerful library which is being used in many web projects nowadays.
Using the functionality that I have created, paging your own content comes down to entering the JavaScript snippet below:
See it working live.
The ins and outs
I started off with breaking the whole thing into work items. I came up with the following list:
Read the content of the given wrapper (eg. div)
Split the retrieved content into chunks (eg. into paragraphs)
Provide controls to display pages
Display page based on the provided number of chunks per page
Wrap it all in a class so it at least pretends to be reusable
Retrieving content using jQuery and splitting it into chunks is really simple. The more-challenging part is to display the particular page and provide the paging controls.
Using the chunks stored during the script initialization and the information about the number of chunks per page I came up with the following function:
The showPage function takes one parameter: the number of the page you want to display (1-based). Because arrays in JavaScript are 0-based you have to subtract 1 from the page number to retrieve the proper items from the chunks array. Using a simple calculation (current page x number of items per page to (current page x number of items per page) + number of items per page) you can retrieve the right items from the array. There is one thing you have to consider however. Assuming you have 7 chunks with 3 chunks per page it gives you 3 pages. Using the calculation above you would try to retrieve the 8th item from the array which would result in an exception. To prevent it I have added a check which retrieves the items only if the index is lower than the number of chunks.
Rendering the paging controls is quite straight-forward. Looping through the number of pages I add a list item with a link to the showPage function. The links are being added to all pages except the current so that you can easily track which page you are looking at.
Accessibility
The solution I have made uses the concept of progressive enhancement. The accessible POSH (Plain Old Semantic HTML) is being extended with JavaScript which provides the extra paging functionality. No matter whether you’re using an assistive technology, or having a JavaScript disabled the visitors are always able to get to the content.
For more refer:http://blog.mastykarz.nl/paging-large-content-sharepoint-jquery/
Using JQuery (client side JavaScript) to handle an ‘All’ option for SharePoint (edit)form checkboxes
Sometimes there are easy solutions to easy problems. All it takes is a little thinking outside of the box.
Prerequisites/knowledge:
SharePoint: Intermediate
HTML: Advanced
JavaScript: Intermediate/advanced
.Net: None
Scenario:
In a SharePoint entry form the user can select multiple values from a list. This should include an “All” option so in a long list the user can select or de-select all values with one click.
So the interface should look like:
Give this functional design to a SharePoint developer and he/she will come up with either:
This is not possible with SharePoint
This requires developing a new field control
I’ll handle this server-side
Another approach
Let’s take a step back, forget SharePoint and just summarize what actions needs to happen (as if you instructed another human being to perform those actions)
When the All option is clicked do:
Is the All option checked?
Then check all other checkboxes
Else uncheck all other checkboxes
That’s all!
So put on your SharePoint cap again.
These actions need to happen client-side (inside the browser).
We want to attach a click handler to the All checkbox and when clicked it should toggle all the other checkboxes. (Note to self: there can be multiple groups of checkboxes on an entry form)
If you have HTML & JavaScript experience you’re still with me and probably already thinking of a technical solution. Yes we need the _SPBodyOnloadWrapper here. And when you have (more then) some DOM experience you can attach code to the HTML INPUT tags.
We’ll care about the How later. First lets analyze the HTML code SharePoint delivers and see how the checkboxes are defined.
Let’s view the source of the entry/edit form.
The HTML code Sharepoint generates
I tidied the HTML a bit. As you can see every (input) checkbox has a unique id. We can fairly assume that SharePoint generates these so we can’t use hardcoded IDs. Now we need to come up with an approach to ‘execute’ Step 1
“Then check all other checkboxes”
Note that the IDs are all sequentially numbered; so apart from the last 2 digits all IDs (within one group) are the same.
Basically we want to extend the INPUT tag of the All option with an extra JavaScript function
The DOM battle plan:
The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.
So with the DOM INPUT element for the All option we want to:
IF an All option is clicked we want to:
execute JavaScript code which:
takes the ID of the clicked option
cuts of the last 2 digits
Uses that ID to toggle the other DOM elements.
If you’re a programmer you’re already seeing the complex JavaScript manipulation of HTML DOM elements this takes.
If you are not a programmer you probably don’t have a clue what I’m talking about… but do read on!
Enter JQuery
jQuery is a JavaScript library that helps you keep your code simple and succinct by addressing some of the complexities of Document Object Model (DOM) scripting and Ajax interaction. It helps you get right to the point and express yourself in the fewest possible characters and was initially created by John Resig in early 2006. It comes as a single JavaScript file with optional plugins containing all the common DOM, Event, Effects, and Ajax functions.
With JQuery the JavaScript we have to add to the SharePoint page:
$(”.ms-RadioText[title=’All’] :checkbox”).click(function(){
var otherids = (this.id).substring(0, (this.id).length-2 );
$(”input[id^=’”+otherids+”‘]”).attr( “checked” , (this.checked)?”checked”:”" );
});
YES! That’s all it requires. Sometimes a solution is as simple as the problem. Provided you use the right tools.
This requires the JQuery JavaScript library. But I’m sure you can come up with similar code using MooTools or Sciptalicious. BTW the JQuery library is also used by Google and many other major sites.
It’s (compressed) footprint is only 20k; compare that to the xxxK Microsoft SharePoint itsef loads in various supporting JavaScript libraries and you have to agree it’s a minimal but o so valuable extension to your SharePoint environment.
Step by step
$(”.ms-RadioText[title=’All’] :checkbox”).click(function(){
JQuery selection of DOM objects which apply to the rules:
Is class ms-Radiotext
Which:
Have the tile attribute ‘All’
Which:
Are of type: checkbox
A function is attached to the Click event:
var otherids = (this.id).substring(0, (this.id).length-2 );
chops off the last 2 digits of the clicked (=this) identifier.
$(”input[id^=’”+otherids+”‘]”).attr( “checked” , (this.checked)?”checked”:”" );
The key here is the ^=
This Jquery statement matches all DOM input elements which id attribute start with the given id
It then sets the attribute “checked” to either “checked” or an empty string
});
Closes the function.
Using it in SharePoint
[to be extended]
Add the JQuery.js library to a document library. Note the complte path to it
Create a custom List ‘Vistted Continents’
Create a column ‘continents’ with the values (including ‘All’)
Open a New entry for the list
Add a Content Editor WebPart to the NewForm page (how to: see Adding WebParts to Form pages (to be written))
See: Google: ToolpaneView=2
Paste in the code
//Script Highlighter: http://tohtml.com/jScript/
(The whole JQeury initialisation code can be placed in a MasterPage; that would bring the CEWP code to just the 3 lines of code)
Additional notes:
A SharePoint choice field can only store 255 characters; so the user gets a warning/error when the total number of characters for all selected values exceeds 255 characters!
Must read JQuery references
JQuery homepage
http://www.jquery.com/
Good examples can be found on other sites:
JQuery (chainable events) examples
http://codylindley.com/blogstuff/js/jquery/
Simple JQuery examples
http://markc.renta.net/jquery/
50+ JQuery examples
http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html
45 even cooler examples
http://outatime.wordpress.com/2008/03/06/45-fresh-out-of-the-oven-jquery-plugins/
Rule library – manipulating CSS attributes
http://flesler.webs.com/jQuery.Rule/
Prerequisites/knowledge:
SharePoint: Intermediate
HTML: Advanced
JavaScript: Intermediate/advanced
.Net: None
Scenario:
In a SharePoint entry form the user can select multiple values from a list. This should include an “All” option so in a long list the user can select or de-select all values with one click.
So the interface should look like:
Give this functional design to a SharePoint developer and he/she will come up with either:
This is not possible with SharePoint
This requires developing a new field control
I’ll handle this server-side
Another approach
Let’s take a step back, forget SharePoint and just summarize what actions needs to happen (as if you instructed another human being to perform those actions)
When the All option is clicked do:
Is the All option checked?
Then check all other checkboxes
Else uncheck all other checkboxes
That’s all!
So put on your SharePoint cap again.
These actions need to happen client-side (inside the browser).
We want to attach a click handler to the All checkbox and when clicked it should toggle all the other checkboxes. (Note to self: there can be multiple groups of checkboxes on an entry form)
If you have HTML & JavaScript experience you’re still with me and probably already thinking of a technical solution. Yes we need the _SPBodyOnloadWrapper here. And when you have (more then) some DOM experience you can attach code to the HTML INPUT tags.
We’ll care about the How later. First lets analyze the HTML code SharePoint delivers and see how the checkboxes are defined.
Let’s view the source of the entry/edit form.
The HTML code Sharepoint generates
I tidied the HTML a bit. As you can see every (input) checkbox has a unique id. We can fairly assume that SharePoint generates these so we can’t use hardcoded IDs. Now we need to come up with an approach to ‘execute’ Step 1
“Then check all other checkboxes”
Note that the IDs are all sequentially numbered; so apart from the last 2 digits all IDs (within one group) are the same.
Basically we want to extend the INPUT tag of the All option with an extra JavaScript function
The DOM battle plan:
The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.
So with the DOM INPUT element for the All option we want to:
IF an All option is clicked we want to:
execute JavaScript code which:
takes the ID of the clicked option
cuts of the last 2 digits
Uses that ID to toggle the other DOM elements.
If you’re a programmer you’re already seeing the complex JavaScript manipulation of HTML DOM elements this takes.
If you are not a programmer you probably don’t have a clue what I’m talking about… but do read on!
Enter JQuery
jQuery is a JavaScript library that helps you keep your code simple and succinct by addressing some of the complexities of Document Object Model (DOM) scripting and Ajax interaction. It helps you get right to the point and express yourself in the fewest possible characters and was initially created by John Resig in early 2006. It comes as a single JavaScript file with optional plugins containing all the common DOM, Event, Effects, and Ajax functions.
With JQuery the JavaScript we have to add to the SharePoint page:
$(”.ms-RadioText[title=’All’] :checkbox”).click(function(){
var otherids = (this.id).substring(0, (this.id).length-2 );
$(”input[id^=’”+otherids+”‘]”).attr( “checked” , (this.checked)?”checked”:”" );
});
YES! That’s all it requires. Sometimes a solution is as simple as the problem. Provided you use the right tools.
This requires the JQuery JavaScript library. But I’m sure you can come up with similar code using MooTools or Sciptalicious. BTW the JQuery library is also used by Google and many other major sites.
It’s (compressed) footprint is only 20k; compare that to the xxxK Microsoft SharePoint itsef loads in various supporting JavaScript libraries and you have to agree it’s a minimal but o so valuable extension to your SharePoint environment.
Step by step
$(”.ms-RadioText[title=’All’] :checkbox”).click(function(){
JQuery selection of DOM objects which apply to the rules:
Is class ms-Radiotext
Which:
Have the tile attribute ‘All’
Which:
Are of type: checkbox
A function is attached to the Click event:
var otherids = (this.id).substring(0, (this.id).length-2 );
chops off the last 2 digits of the clicked (=this) identifier.
$(”input[id^=’”+otherids+”‘]”).attr( “checked” , (this.checked)?”checked”:”" );
The key here is the ^=
This Jquery statement matches all DOM input elements which id attribute start with the given id
It then sets the attribute “checked” to either “checked” or an empty string
});
Closes the function.
Using it in SharePoint
[to be extended]
Add the JQuery.js library to a document library. Note the complte path to it
Create a custom List ‘Vistted Continents’
Create a column ‘continents’ with the values (including ‘All’)
Open a New entry for the list
Add a Content Editor WebPart to the NewForm page (how to: see Adding WebParts to Form pages (to be written))
See: Google: ToolpaneView=2
Paste in the code
//Script Highlighter: http://tohtml.com/jScript/
(The whole JQeury initialisation code can be placed in a MasterPage; that would bring the CEWP code to just the 3 lines of code)
Additional notes:
A SharePoint choice field can only store 255 characters; so the user gets a warning/error when the total number of characters for all selected values exceeds 255 characters!
Must read JQuery references
JQuery homepage
http://www.jquery.com/
Good examples can be found on other sites:
JQuery (chainable events) examples
http://codylindley.com/blogstuff/js/jquery/
Simple JQuery examples
http://markc.renta.net/jquery/
50+ JQuery examples
http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html
45 even cooler examples
http://outatime.wordpress.com/2008/03/06/45-fresh-out-of-the-oven-jquery-plugins/
Rule library – manipulating CSS attributes
http://flesler.webs.com/jQuery.Rule/
Friday, September 4, 2009
Subscribe to:
Posts (Atom)