In this article we will see how we can to get data from a content editor webpart from one page and display it in another page using a custom webpart.
If you are new to webpart development you can check out my previous post about Hello world SharePoint Web Part for Beginners
Add the following code in the RenderWebPartmethod of the webpart you are creating. The code and comments are self explanatory. Please pose a comment if you have any problem in understanding the code.
SPSite site = new SPSite("http://mysite">http://mysite"); // create object of the site
SPWeb web;
Microsoft.SharePoint.WebPartPages.SPLimitedWebPartManager mgr = null;
web = site.OpenWeb();
mgr = web.GetLimitedWebPartManager("Pages/mypage.aspx", System.Web.UI.WebControls.WebParts.PersonalizationScope.User);//http://mysite/Pages/mypage.aspx will be the URL of the source page
foreach (System.Web.UI.WebControls.WebParts.WebPart wp in mgr.WebParts)
{
if (wp.Title == "My RichTextEditor") //My RichTextEditor is the webpart title
{
SPWebPartPages.ContentEditorWebPart webPart = (SPWebPartPages.ContentEditorWebPart)wp;
output.Write(webPart.Content.InnerText);
}
}
In this article we will see how we can hide the BreadCrumb in a single page. We are also going to do it without using the SharePoint Designer. We are going to do it by using a content editor web part.
1. Go to Site Actions –> Edit Page –> Add a Content editor web part
2. Write following code in to content editor web part
<style rel="stylesheet" type="text/css" />
.ms-pagebreadcrumb{display:none; }
</style>
Save the changes and exit edit mode or publish the page
Step 3 : Now your page should look like this
In this article we will see how to Change the row Background color based on the value of a column in a sharepoint list and we will be doing it using jQuery.
Below is a screenshot of a Task Tracker whose rows are highlighted based on the percentage complete.
Here is how you can do it.
1. Create Sharepoint list
2. Edit allitems.aspx page and add a content editor web part and copy the below jQuery code to that webpart.
<script type="text/javascript">
$(document).ready(function(){
$Text = $("td .ms-vb2:contains('Not Started')");
$Text.parent().css("background-color", "#461B7E");
var myelement = $Text.parent().parent();
$Text = $("td .ms-vb2:contains('Completed')");
$Text.parent().css("background-color", "#4CC417");
$Text = $("td .ms-vb2:contains('In Progress')");
$Text.parent().css("background-color", "#EAC117");
});
</script>
In this article we will see how to highlight list a row on mouse over using jQuery.
Lets get started
1. Create a Sharepoint list
2. Edit allitems.aspx page and add a content editor web part and copy the below jquery and mouser over style to that webpart.
<script type="text/javascript">
$(document).ready(function()
{
$('td.ms-vb2').hover(function() {
$(this).parent().addClass("highlight");
// On mouseout, remove classes
}, function() {
$(this).parent().removeClass("highlight");
});
}); </script>
<style>
.highlight {background-color:#9AFEFF}
</style>
SharePoint does not allow creating two columns with the same name. If you still try to create more than 1 column with the same name then you will be prompted with an error message.
“The column name that you are entered is already use or reserved. Choose another name.”
But in many cases we may need two columns with same label. In this post we can see a work around for creating two labels with same text. Below is what we are going to achieve.
- Create the second column with a special character(City#)
- Edit the Newform.aspx and Editform.aspx page and insert a content editor web part in the below of the list web part.
Note: you can append the following query string ?pageview=shared&toolpaneview=2 to the URL (http://mysite/ Lists/job/NewForm.aspx?pageview=shared&toolpaneview=2) to open in edit mode.
- Copy and paste the below code in the content editor web part using source editor.
<script type="text/javascript">// <![CDATA[
var tables;
tables = document.getElementById('ctl00_m_g_a3ac2436_2405_4e04_8afd_fa6f84b65d1b_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_TextField').parentNode.parentNode.parentNode.parentNode.parentNode;
var i;
var str;
for(i=0;i
<tables.rows.length;i++) { str = tables.rows[i].cells[0].innerHTML; if(str.indexOf('#') > 1)
tables.rows[i].cells[0].innerHTML =str.replace("#", "");
}
}
// ]]></script>
Note: In the above code ctl00_m_g_a3ac2436_2405_4e04_8afd_fa6f84b65d1b_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_TextField is the ID one of the column in that list, for identifying parent table. (You can get it by viewing the Source code of the page).
By default SharePoint doesn’t give us the option for adding group heading while adding or editing an item to a SharePoint List. In this tutorial we will see how we can group similar columns and give a subheading and make our new form more interesting. We will use Javascript for this and we are going to do it without using the SharePoint editor. Below is what we are going to achieve.
- Create a column with the name of heading you want
- Edit the Newform.aspx and Editform.aspx page and insert a content editor web part in the below of the list web part.
Note: you can append the following query string &pageview=shared&toolpaneview=2 to the URL (http://mysite/ Lists/job/NewForm.aspx?pageview=shared&toolpaneview=2) to open in edit mode.
- Copy and paste the below code in the content editor web part using source editor.
<script type="text/javascript">// <![CDATA[
var tables;
var i;
var str;
// identify the parent table.
tables = document.getElementById('ctl00_m_g_a3ac2436_2405_4e04_8afd_fa6f84b65d1b_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_TextField').parentNode.parentNode.parentNode.parentNode.parentNodefor(i=0;i
<tables.rows.length;i++)
{
str = tables.rows[i].cells[0].innerHTML;
str = str.substring(34,43);
switch(str){
case 'Permanent':
tables.rows[i].cells[1].style.backgroundColor = '#cccccc';
tables.rows[i].cells[0].style.backgroundColor = '#cccccc';
tables.rows[i].cells[0].innerHTML = '<b>Permanent Address</b>';
tables.rows[i].cells[1].innerHTML = '';
break;
case 'Temprary ':
tables.rows[i].cells[1].style.backgroundColor = '#cccccc';
tables.rows[i].cells[0].style.backgroundColor = '#cccccc';
tables.rows[i].cells[0].innerHTML = '<b>Current Address</b>';
tables.rows[i].cells[1].innerHTML = '';
break;
}
}
// ]]
</script>
Note: In the above code ctl00_m_g_a3ac2436_2405_4e04_8afd_fa6f84b65d1b_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_TextField is the ID one of the column in that list, for identifying parent table. (You can get it by viewing the Source code of the page).
And in the image you can see two columns with same title (City). In the next post we can see the work around of creating two columns with same name.
In Moss 2007 we can limit the number of characters in a text filed. But if you want alert the user when the limit is exceeded then exceeding the characters length then we can use this script .
1. Go to Site Actions -> Edit Page.
Note: If the Edit option is disabled then you can go to edit mode by appending the following text to the url.
?pageview=shared &toolpaneview=2
3. Add a Content Editor Web Part below that web part that has the text box. Add this java script in it.
<script type="text/java script">
var content=document.getElementById('id of the Text Box'); //You can get the ID of the Text Box by vieweing the Page Source.
content.onkeyup=function()
{
setlength(this,10) //Text length is limited to 10 chars
};
function setlength(obj,maxlen)
{
if(this.id) obj = this;
var remaningChar = maxlen - obj.value.length;
if( remaningChar <= 0)
{
alert('Character Limit exceeds!');
return false;
}
else
{return true;}
}
</script>
