My Sharepoint World: Content Editor Web Part

Showing posts with label Content Editor Web Part. Show all posts

Add Print Option to SharePoint Page to print one particular web Part using Content Editor Web Part

Add Print Option to SharePoint Page to print one particular web Part using Content Editor Web Part

When the javascript code point to a particular Web Part by its web part ID, then the print option will try to print only the chosen web part.

<input type="button" ID="printBtn1" OnClick="javascript:void(PrintWebPart())" value="Print only tranSMART WebPart">

<script language="JavaScript">

//Controls which Web Part or zone to print
var WebPartElementID = "WebPartWPQ2";

//Function to print Web Part
function PrintWebPart()
{
var bolWebPartFound = false;
if (document.getElementById != null)
{
//Create html to print in new window
var PrintingHTML = '<HTML>\n<HEAD>\n';
//Take data from Head Tag
if (document.getElementsByTagName != null)
{
var HeadData= document.getElementsByTagName("HEAD");
if (HeadData.length > 0)
PrintingHTML += HeadData[0].innerHTML;
}
PrintingHTML += '\n</HEAD>\n<BODY>\n';
var WebPartData = document.getElementById(WebPartElementID);
if (WebPartData != null)
{
PrintingHTML += WebPartData.innerHTML;
bolWebPartFound = true;
}
else
{
bolWebPartFound = false;
alert ('Cannot Find Web Part');
}
}
PrintingHTML += '\n</BODY>\n</HTML>';
//Open new window to print
if (bolWebPartFound)
{
var PrintingWindow = window.open("","PrintWebPart", "toolbar,width=800,height=600,scrollbars,resizable,menubar");
PrintingWindow.document.open();
PrintingWindow.document.write(PrintingHTML);

// Open Print Window
PrintingWindow.window.print();
PrintingWindow.document.close();

}
}
</script>

We can find the web part ID by viewing the source of a page.

Leave your comments below.

Add Print Option to SharePoint Page using Content Editor Web Part

Add Print Option to SharePoint Page

Print option can be added to a content Editor Web Part. This will enable Printing of all content within a SharePoint Page without the top part and left navigation.

<script type="text/javascript" src="http://sample.com/sites/test/JSFiles/jquery-1.4.2.min.js"></script>

<div>
<input id="printBtn" type="button" Value="Print all WebParts" alt="Print this page" style="margin-top:10px;margin-left:10px;"/>
</div>

<script>

$(document).ready(function()
{
var strlink="";
$("link[rel='stylesheet']").each(function()
{
strlink+="<link rel = 'stylesheet' href='"+$(this).attr('href')+"' type='text/css'/>";
});

$("#printBtn").click(function()
{

var htmlStr ="<html><head>"+strlink+"</head><body>"+$("#MSO_ContentTable").parent().html()+"</body></html>";

var PrintingWindow = window.open("about:blank","","toolbar,width=800,height=600,scrollbars,resizable,menubar");

PrintingWindow.document.open();
PrintingWindow.document.write(htmlStr);
PrintingWindow.document.close();
PrintingWindow.focus();
PrintingWindow.document.getElementById("printBtn").style.display="none";
PrintingWindow.print();

});

});
</script>

Leave your comments below.

Remove Quoted text message from Discussion Board Replies using SPServices\JQuery and Content Editor Web Part.

Remove Quoted text message from Discussion Board Replies using
SPServices\JQuery and Content Editor Web Part.

Step 1: Kindly follow my intital post to understand how java script can be used
in Content Editor Web Part.

Step 2: Refer here to understand about SPServices. This is specialized Jquery
to execute SharePoint related operations.

Step 3: What is Quoted text and why must it be removed from the replies.
In A Discussion Board, this is the way a particular Discussion topic and its replies are displayed.

If we edit the replies to modify its content, it then does not hide the quoted text anymore. This view is cluttered and undesirable. There are no OOTB ways to fix this issue.

Step 4: So one solution would be to remove the quoted text using scripting
while creating the replies itself.

Step 5: Refer the pics below, when the script is embedded within the page, the reply is created without any text.

Step 6: Edit the page, Refer intital post to insert a content editor web part.

Step 7: Write the following code in a text. save as html. upload into SharePoint Document Library. Link this html page to content editor web part or write it directly in its text editor.

<body>

<SCRIPT type=text/javascript src="http://mysite/sites/test/MyDocs/jquery-1.4.2.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="http://mysite/sites/test/MyDocs/jquery.SPServices-0.5.6.min.js"></SCRIPT>
<SCRIPT type=text/javascript>

$(document).ready(function()
  {
  var queryStringVals = $().SPServices.SPGetQueryString();
        var ContentTypeId = queryStringVals["ContentTypeId"];

  ///////// *******************************************************
  ////// NEWFORM.ASPX IS USED TO CREATE NEW DISCUSSION QUESTIONS AND
/////// ALSO ADD REPLIES TO EXISITING DISCUSSIONS\QUESTIONS
/////// CONTENT TYPE 0X0107 INDICATES WHEN NEWFORM.ASPX IS NOW USED
///////TO CREATE REPLIES.
////// CLEAR "Body". remove quoted message.
/////// *******************************************************

if (ContentTypeId == '0x0107')
  {
   //alert(ContentTypeId);
   var bodyField = getTagFromIdentifierAndTitle("TextArea","","Body");
   bodyField.value = "";
  }
   });

</SCRIPT>
</Body>
</html>

Step 8: To remove the identity that the code was generated from Content Editor Web Part, within the Web Part Setting, Under Appearance, For Chrome Type select "None". Click OK. Click Apply. Publish the Page.

Leave your comments below.

Query Discussion Board Replies using SPServices\JQuery and Page Viewer Web Part

Query Discussion Board Replies using SPServices\JQuery and Page Viewer Web Part.

Step 1: Kindly follow my intital post to understand how java script can be used in Content Editor Web Part.

Step 2: Refer here to understand about SPServices. This is specialized Jquery to execute SharePoint related operations.

Step 3: In a Web Part Page, Edit Page and Add Page Viewer Web Part.

Step 4: Write the following code in a text. save as html. upload into SharePoint Document Library. Link this html page to page viewer web part.

Step 5: Create a Discussion Board. Add dropdown column called "Reply Priority". This column is hidden in Discussion[Question] content type. In our case, Column "Reply Priority" is visible only to Message[Reply] content.

Step 6: We are trying to accomplish the following here. Display Replies from all questions and load a single table with a chosen Priority Level.

Consider there are 2 questions, Question 1, has one reply with Priority Level = Low, and Question 2 has one reply with Priority Level = Low. Now we need to extract both of these replies and display in a table when Priority Level = Low is chosen.

When Priority Level = Medium or High then delete these rows and load the table with replies with respective Priority Level.

<head>

<title>Filter Replies </title>

</head>

<body>

<table id="BasicTable" border=0 width="55%" align="left"

style="font-family: Verdana;font-size:8pt" >

<tr>

<td style="width:40%;"><B>Reply type :</B></td>

<select id="DropStudies" onchange="getComboA(this)"

style="font-family: Verdana;font-size:8pt">

<option value="Medium">Medium</option>

</select>

</td>

</tr>

</table>

<B>Main Question</B></td>

<b><B>Reply Details</B></td>

</tr>

</table>

get() ;

function getComboA(sel)

{

var value = sel.options[sel.selectedIndex].value;

LoadTableFunction();

}

function LoadTableFunction()

{

var table = document.getElementById("myJsonDataTable");

if(table.rows.length >1)

{

for(var i = table.rows.length - 1; i > 0; i--)

{ table.deleteRow(i);}

}

get() ;

}

function get()

{

var method = "GetListItems";

var webURL = $().SPServices.SPGetCurrentSite() ;

var list = "DBExample";

var fieldsToRead = "<ViewFields>" +"<FieldRef Name='Name' />"

+"</ViewFields>";

//----------------------------------------------------------------------------

// GET ALL REPLIES WITH CHOSEN REPLY PRIORITY

// CONTENT TYPE = MESSAGE RETURNS ONLY REPLIES

// CONTENT TYPE = DISCUSSION WILL RETURN THE QUESTIONS.

// THAT IS NOT NEEDED HERE.

// RESURCIVEALL QUERY OPTIONS

//------------------------------------------------------------------------------

var query = "<Query><Where><And><Eq><FieldRef Name='ContentType' />

<Value Type='Text'>Message</Value></Eq>";

query = query +"<Eq><FieldRef Name='Reply_x0020_Priority' />

<Value Type='Choice'>" + DropStudies.value +

"</Value></Eq></And></Where>";

query = query + "<OrderBy><FieldRef Name='ID' Ascending='True' />

</OrderBy></Query>";

var qOptions = "<QueryOptions><ViewAttributes Scope='RecursiveAll'/>

</QueryOptions>";

GetData(method,list,webURL,fieldsToRead,query,qOptions,list);

};

function GetData(method,list,webURL,fieldsToRead,query,qOptions,Folder)

{

$().SPServices

({

operation: method,

async: false,

webURL: webURL,

listName: list,

CAMLViewFields: "<ViewFields Properties='True' />",

CAMLQuery: query,

CAMLQueryOptions: qOptions,

completefunc: function (xData, Status)

{

$(xData.responseXML).SPFilterNode("z:row").each(function()

{

// GET ID OF THE REPLY

//--------------------------------------------

var ID = $(this).attr("ows_ID");

// QUESTION IS n[5].toString()

// LINK TO THE QUESTION IS IN var mainQuestion

//-----------------------------------------------------------

var fileDirRef = $(this).attr("ows_FileDirRef");

var n= fileDirRef.split("/");

var mainQuestion = "http://sample.com/sites/" + n[1].toString() + "/" +

n[2].toString() +"/"+ n[3].toString() +

"/"+ n[4].toString() + "/"+ n[5].toString();

mainQuestion = mainQuestion.replace(/[" "]/g, "%20");

// REMOVE THE REPLY FROM THE OTHER DETAILS IN BODY

//----------------------------------------------------------------------

var QuestionDetail = $(this).attr("ows_Body");

var q = QuestionDetail.split("From");

var q1 = q[0].toString();

// REMOVE THE HORIZONTAL LINE

//-----------------------------------------------

var q2 = q1.split("<hr class=ms-disc-quotedtext>");

// REPLY IS q2[0].toString()

// LINK TO THE QUESTION IS IN var directLink

//--------------------------------------------

var directLink = "http:/sample.com/sites/" + n[1].toString() + "/" +

n[2].toString() +"/"+ n[3].toString() +

"/"+ n[4].toString() + "/DispForm.aspx?ID=" + ID.toString();

directLink = directLink.replace(/[" "]/g, "%20") + "&Source=" + mainQuestion;

var reply = q2[0].toString() + "<a href='" + directLink + "'target=_blank>Link to Reply</a>";

$("#myDataTable").append("<tr align='left'>" +

"<td align='left' valign='top'>"+ID+"</td>" +

"<td align='left' valign='top'>

<a href='" + mainQuestion + "'target=_blank>"

+ n[5].toString() +"</a></td>" +

"<td align='left' valign='top'>"+reply+"</td>" +

"</tr>");

});

}

});

}

</script>

</body>

</html>

Step 7: To remove the identity that the code was generated from Page Viewer Web Part, within the Web Part Setting, Under Appearance, For Chrome Type select "None". Click OK. Click Apply. Publish the Page.

Step 8: Refer this post to get Items from SharePoint List and display in SharePoint using Content Editor Web Part and HTML table
.

Leave your comments below.

Get Items from SharePoint List and display in SharePoint using Content Editor Web Part and HTML table

Get Items from SharePoint List and display in SharePoint using Content Editor Web Part and HTML table

Step 1: Kindly follow my intital post to understand how java script can be used in Content Editor Web Part.

Step 2: Refer here to understand about SPServices. This is specialized Jquery to execute SharePoint related operations.

Step 3: Refer here to understand more about SPServices.GetListItems.

Step 4: In a Web Part Page, Edit Page and Add Content Editor Web Part.

Step 5: Create a custom List and populate with records.

Step 6: Write the following code in a text. save as html. upload into SharePoint Document Library. Link this html page to content editor web part or Write code in Web Part's text editor directly.

<html>
<head>
<SCRIPT type=text/javascript src="http://MySPSite.com/sites/test/DocLib/jquery-1.4.2.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="http://MySPSite.com/sites/test/DocLib/jquery.SPServices-0.7.2.min.js"></SCRIPT>
<title>Contents from MycustomList</title>
</head>

<body>

<td><B>Department</B></td>

<td><B>Project</B></td>

</tr>

</table>

get() ;

function get()

{

var method = "GetListItems";

var webURL = $().SPServices.SPGetCurrentSite() ;

var list = "MyCustomList";

var fieldsToRead = "<ViewFields>"+"<FieldRef Name='Name' />" +"</ViewFields>";

var query = "<Query><OrderBy><FieldRef Name='ID' Ascending='True' /></OrderBy></Query>";

$().SPServices

({

operation: method,

async: false,

webURL: webURL,

listName: list,

CAMLViewFields: "<ViewFields Properties='True' />",

CAMLQuery: query,

completefunc: function (xData, Status)

{

$(xData.responseXML).SPFilterNode("z:row").each(function()

{

var ID = $(this).attr("ows_ID");

var title = $(this).attr("ows_Title");

var Dept = $(this).attr("ows_Department");

var Project = $(this).attr("ows_Project");

var EndDate = $(this).attr("ows_End_x0020_Date");

$("#myDataTable").append("<tr align='middle'>" +

"<td align='left'>"+ID+"</td>" +

"<td align='left'>"+ title+"</td>" +

"<td align='left'>"+ Dept+"</td>" +

"<td align='left'>"+ Project+"</td>" +

"<td align='left'>"+ EndDate+"</td>" + "</tr>");

});

}

});

};

</script>

</body>

</html>

Step 7: If you need to remove the identity that the code was generated from Content Editor Web Part, within the Web Part Setting, Under Appearance, For Chrome Type select "None". Click OK. Click Apply. Publish the Page.

Leave your comments below.

Get JSON Web Service Data using Content Editor Web Part and Insert that data into SharePoint List.

Get JSON Web Service Data using Content Editor Web Part and Insert that data into SharePoint List.

Step 1: Kindly follow my intital post to understand how java script can be used in Content Editor Web Part.

Step 2: Refer here to understand more about JSON Web Service.

Step 3: Refer here to understand about SPServices. This is specialized Jquery to execute SharePoint related operations.

Step 4: In a Web Part Page, Edit Page and Add Content Editor Web Part.

Step 5: Write the following code in a text. save as html. upload into SharePoint Document Library. Link this html page to content editor web part or Write code in Web Part's text editor directly.

Step 6: We are trying to accomplish the following here. Using a button "Get JSON Data we will retrieve the JSON data and updata a HTML table. Now another button "Update into SharePoint List" enables you to update the retrieved data into a SharePoint List.

Initially the button to retrieve the JSON data is displayed from the Content Editor Web Part.

When clicked, it retrieves the data and populates a HTML table.Now the button to Update this data into a SharePoint list is also made visible.

When "Update to SharePoint List" is clicked, the first record is displayed. Followed by a message which confirms that this record has been inserted into a SharePoint list.

Alert messages will repeat for all 5 records. Then go to the SharePoint list to confirm if the list has been updated.

The code is as below.

<HEAD>

<TITLE>GetData JSON web service </TITLE>

<script type="text/javascript" src="http://MyJSSite.com/sites/BasicJS/Lib/jquery-1.3.2.min.js"></script>
<script type=text/javascript src="http://MyJSSite.com/sites/BasicJS/Lib/jquery.SPServices-0.5.6.min.js"></SCRIPT>

<SCRIPT type=text/javascript>
var JsonData = "http://test.basic.com//%8766987%7D/%7BA561528C?format=daas-JSON";
function JSONFunction()
{
  var fullurl = JsonData + '&callback=?';
  alert("The JSON URL IS :: " + fullurl);

$.getJSON(fullurl,'',function(data)
   {
   //alert("Inside function-data");
   var receivedData = data.entries;
   alert("Length is :: " + receivedData.length.toString());
   for (var i = 0; i < receivedData.length; i++)
   {
    var linktitle = receivedData[i]['LinkTitle'].toString();
    var type = receivedData[i]['Activity_Type'].toString();
    var edate = receivedData[i]['End_Date'].toString();
    AddRowToTable(i.toString(),linktitle,type,edate);
   }
   document.getElementById('myJsonDataTable').style.visibility = "visible";
   document.getElementById('SpInsertButton').style.visibility = "visible";

   });
}

function AddRowToTable(num,linktitle,type,edate)
{
     $("#myJsonDataTable").append("<tr align='middle'>" +
    "<td align='left'>"+num+"</td>" +
                                "<td align='left'>"+linktitle+"</td>" +
     "<td align='left'>"+type+"</td>" +
    "<td align='left'>"+edate+"</td>" +     "</tr>");

}

<table id="myJsonDataTable" border =1 width="70%" style="visibility:hidden">
<tr align='left' bgcolor="lightBlue">
<td><B>Num</B></td>
<td><B>Title</B></td>
<td><B>Type</B></td>
<td><B>End Date</B></td>
</tr>
</table>

<button id="SpInsertButton" onclick="UpdateSharepointFunction()" style="visibility:hidden">Update into SharePoint List</button>

</BODY>
</HTML>

Step 7: While inserting into SharePoint custom list, this code again retrieves data from JSON to use the latest data.

Step 8: To remove the identity that the code was generated from Content Editor Web Part, within the Web Part Setting, Under Appearance, For Chrome Type select "None". Click OK. Click Apply. Publish the Page.

Step 9: Refer this post to see the data extracted from GeoPlugin JSON Web Service using a Content Editor Web Part.

Leave your comments below.

Add Print Option to SharePoint Page to print one particular web Part using Content Editor Web Part

Add Print Option to SharePoint Page using Content Editor Web Part

Remove Quoted text message from Discussion Board Replies using SPServices\JQuery and Content Editor Web Part.

Step 8: To remove the identity that the code was generated from Content Editor Web Part, within the Web Part Setting, Under Appearance, For Chrome Type select "None". Click OK. Click Apply. Publish the Page. Leave your comments below.

Query Discussion Board Replies using SPServices\JQuery and Page Viewer Web Part

Get Items from SharePoint List and display in SharePoint using Content Editor Web Part and HTML table

Get JSON Web Service Data using Content Editor Web Part and Insert that data into SharePoint List.

Step 8: To remove the identity that the code was generated from Content Editor Web Part, within the Web Part Setting, Under Appearance, For Chrome Type select "None". Click OK. Click Apply. Publish the Page.

Leave your comments below.