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, @"
");
}
}
Showing posts with label JQuery. Show all posts
Showing posts with label JQuery. Show all posts
Friday, September 18, 2009
Tuesday, September 8, 2009
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/
Subscribe to:
Posts (Atom)