<!--SharePoint CEWP Solution Option Interface
Solution created by Peter Allen
Website: www.bitsofsharepoint.com
Contact info: peter@bitsofsharepoint.com
Created: 11/10/2009
Version 1.0 -->
<!-- This section covers the Configuration table. -->
<div id="configBox">
<table class="table" >
<thead class="thead">
<tr><th class="thTop th" colspan="2">List from any Site - Configuration</th></tr>
</thead>
<tbody class="tbody">
<tr><td class="tdOverview">Overview</td><td class="tdOverviewField">Here is where you will identify the list to be displayed. You will enter in a URL. Go to the list that you would like to display copy the URL and place it below.</td></tr>
</tbody>
</table>
<table class="table" >
<thead class="thead">
<tr><th class="th" colspan="2">OPTIONS</th></tr>
</thead>
<tbody class="tbody">
<tr><td class="tdBBorder line" colspan="2">---- Change only the gray boxes on this page. ----</td></tr>
<!--This section outlines the options available to the enduser to change.
The variable for the script is the derived from the value provided.
There are 10 listed and commented out till needed. Uncomment to use.
Best practice is to use the Rich Text Editor to change the Option, Value
and Help field vs editing in HTML editor.
*******IMPORTANT********
All id's need to be appended to make them unique per solutions.
This will prevent solution deployed together to have conflicting id's
Choose a 5 digit alphanumeric combination like 4r5t6y.
Append this to each <td> id in this table.
Get unique ID from here:
http://www.bitsofsharepoint.com/ExamplePoint/Site/uniqueID.htm
End result should look like this:
id="option1-4r5t6y"
id="option2-4r5t6y"-->
<tr><td class="tdOption">Option</td><td class="tdOptionField ">List URL</td></tr>
<tr><td class="tdValue">Value</td><td id="option1-1a2s3" class="tdValueField"></td></tr>
<tr><td class="tdHelp">Help</td><td class="tdHelpField">Add the URL of the list you would like to view in the gray box above.</td></tr>
<!-- Move this comment marker down to add more options.
When deploying delete the unused table rows.
<tr><td class="tdOption">Option</td><td class="tdOptionField ">[Name]</td></tr>
<tr><td class="tdValue">Value</td><td id="option2" class="tdValueField"></td></tr>
<tr><td class="tdHelp">Help</td><td class="tdHelpField">[Comments]</td></tr>
<tr><td class="tdOption">Option</td><td class="tdOptionField ">[Name]</td></tr>
<tr><td class="tdValue">Value</td><td id="option3" class="tdValueField"></td></tr>
<tr><td class="tdHelp">Help</td><td class="tdHelpField">[Comments]</td></tr>
<tr><td class="tdOption">Option</td><td class="tdOptionField ">[Name]</td></tr>
<tr><td class="tdValue">Value</td><td id="option4" class="tdValueField"></td></tr>
<tr><td class="tdHelp">Help</td><td class="tdHelpField">[Comments]</td></tr>
<tr><td class="tdOption">Option</td><td class="tdOptionField ">[Name]</td></tr>
<tr><td class="tdValue">Value</td><td id="option5" class="tdValueField"></td></tr>
<tr><td class="tdHelp">Help</td><td class="tdHelpField">[Comments]</td></tr>
<tr><td class="tdOption">Option</td><td class="tdOptionField ">[Name]</td></tr>
<tr><td class="tdValue">Value</td><td id="option6" class="tdValueField"></td></tr>
<tr><td class="tdHelp">Help</td><td class="tdHelpField">[Comments]</td></tr>
<tr><td class="tdOption">Option</td><td class="tdOptionField ">[Name]</td></tr>
<tr><td class="tdValue">Value</td><td id="option7" class="tdValueField"></td></tr>
<tr><td class="tdHelp">Help</td><td class="tdHelpField">[Comments]</td></tr>
<tr><td class="tdOption">Option</td><td class="tdOptionField ">[Name]</td></tr>
<tr><td class="tdValue">Value</td><td id="option8" class="tdValueField"></td></tr>
<tr><td class="tdHelp">Help</td><td class="tdHelpField">[Comments]</td></tr>
<tr><td class="tdOption">Option</td><td class="tdOptionField ">[Name]</td></tr>
<tr><td class="tdValue">Value</td><td id="option9" class="tdValueField"></td></tr>
<tr><td class="tdHelp">Help</td><td class="tdHelpField">[Comments]</td></tr>
<tr><td class="tdOption">Option</td><td class="tdOptionField ">[Name]</td></tr>
<tr><td class="tdValue">Value</td><td id="option10" class="tdValueField"></td></tr>
<tr><td class="tdHelp">Help</td><td class="tdHelpField">[Comments]</td></tr>
End of option comment marker. -->
<!--This section outlines the jQuery option. This is required for the solution to work.
This gives the user the ability to use the default external location or to define
where the local copy of jQuery has been housed. -->
<tr><td class="tdOption">Option</td><td class="tdOptionField">jQuery File</td></tr>
<tr><td class="tdValue">Value</td><td id="jQueryJS" class="tdValueField">http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js</td></tr>
<tr><td class="tdHelp">Help</td><td class="tdHelpField">Only change this option if you want to use a local copy of the jQuery file.</td></tr>
<tr><td class="tdBBorder line" colspan="2">---- Change only the gray boxes on this page. ----</td></tr>
</tbody>
</table>
<!-- This section covers the Do Not change area. -->
<p class="line">Please do not Edit, Change or Add any information below this
line.</p>
<hr />
</div>
<style>
/* This CSS section covers the Configuration table. */
#configBox { display:none; }
.table { margin: 1em; border-collapse: collapse; width:95%; }
.th { padding: .3em; border: 1px #000 solid; border-bottom: 3px #000 solid; vertical-align:top; }
.tdOverview { padding: .3em; border: 1px #000 solid; border-bottom: 1px #000 solid; vertical-align:top; width: 50px; }
.tdOverviewField { padding: .3em; border: 1px #000 solid; border-bottom: 1px #000 solid; vertical-align:top; }
.tdOption { padding: .3em; border: 1px #000 solid; border-bottom: 1px #000 solid; border-top: 3px #000 solid; vertical-align:top; width: 50px; }
.tdOptionField { padding: .3em; border: 1px #000 solid; border-bottom: 1px #000 solid; border-top: 3px #000 solid; vertical-align:top; font-weight: bold; }
.tdValue { padding: .3em; border: 1px #000 solid; border-bottom: 1px #000 solid; vertical-align:top; width: 50px; }
.tdValueField { padding: .3em; border: 1px #000 solid; border-bottom: 1px #000 solid; vertical-align:top; background: #DCDCDC; vertical-align:top; }
.tdHelp { padding: .3em; border: 1px #000 solid; border-bottom: 3px #000 solid; vertical-align:top; width: 50px; }
.tdHelpField { padding: .3em; border: 1px #000 solid; border-bottom: 3px #000 solid; vertical-align:top; }
.thTop { font-size: 1.5em; }
.thead { background: #6699CC; }
.tbody { background: #CAE5FF; }
/* This CSS section covers the Do Not change area. */
.line { text-align: center; font-weight: bold; }
#errors { padding: .3em; background-color : #F5D0A9 ; display : none ; margin : 10px ; width:500px; }
/* This CSS section covers the Solution Info table. */
.tableInfo { margin: 1em; border-collapse: collapse; width:500px; }
.thInfo { padding: .1em; border: 1px #E6E6E6 solid; border-bottom: 3px #E6E6E6 solid; border-top: 3px #E6E6E6 solid; vertical-align:top; }
.tdInfo { padding: .1em; border: 1px #E6E6E6 solid; border-bottom: 1px #E6E6E6 solid; vertical-align:top; }
.tdInfoOption { padding: .1em; border: 1px #E6E6E6 solid; border-bottom: 1px #E6E6E6 solid; background-color: #E6E6E6; vertical-align:top; text-align:center; }
.tdInfoOptionHeader { padding: .1em; border: 1px #E6E6E6 solid; border-bottom: 1px #E6E6E6 solid; background-color: #BDBDBD; vertical-align:top; text-align:center; font-weight:bold;}
.tdInfoLabel { text-align:right; font-weight:bold; width: 100px; padding : .3em; border: 1px #E6E6E6 solid; border-bottom: 1px #E6E6E6 solid; vertical-align:top; }
</style>
<!-- This section covers the Solution Info table. Recommended to change the values
using the Rich Text Editor. -->
<DIV class="instructions" style="DISPLAY: none">
<table class="tableInfo" >
<tbody>
<tr><td class="tdInfoOptionHeader ms-vb" colspan="2">Change Options</td></tr>
<tr><td class="tdInfoOption ms-vb" colspan="2">Click <B>Edit</B>, then <B>Modify Shared Web Part</B> then,</td></tr>
<tr><td class="tdInfoOption ms-vb" colspan="2">Click <B>Rich Text Editor</B> to change OPTIONS.</td></tr>
</tbody>
</table>
<!--<table class="tableInfo" >
<thead>
<tr><th class="thInfo" colspan="2">CEWP Solution Info</th></tr>
</thead>
<tbody>
<tr><td class="tdInfoLabel ms-vb">Title:</td><td class="tdInfo ms-vb">List from any Site</td></tr>
<tr><td class="tdInfoLabel ms-vb">Details:</td><td class="tdInfo ms-vb">Show a list from any other site.</td></tr>
<tr><td class="tdInfoLabel ms-vb">Site Name:</td><td class="tdInfo ms-vb">PathToSharePoint</td></tr>
<tr><td class="tdInfoLabel ms-vb">Site URL:</td><td class="tdInfo ms-vb"><a href="http://pathtosharepoint.wordpress.com/2009/03/23/display-a-list-in-another-site-contd/" target="_blank">http://pathtosharepoint.wordpress.com/2009/03/23/display-a-list-in-another-site-contd/</a></td></tr>
<tr><td class="tdInfoLabel ms-vb">Author:</td><td class="tdInfo ms-vb">Christophe Humbert</td></tr>
<tr><td class="tdInfoLabel ms-vb">Version:</td><td class="tdInfo ms-vb">2.0</td></tr>
</tbody>
</table>-->
</DIV>
<!-- This section checks for jQuery being loaded and if not then loads jQuery based on the option value.
Script provided by Paul Grenier from endusersharepoint.com-->
<script type="text/javascript">
if(typeof jQuery=='undefined'){
var jQPath = document.getElementById('jQueryJS').innerHTML.replace(/(<([^>]+)>)/ig,"");
document.write('<script src="',jQPath,'" type="text/javascript"><\/script>');
}
</script>
<script type="text/javascript">
// This script section identifies the variables and the solution script
// Variables are commented out till needed.
// When deploying delete the unused variables.
// *******IMPORTANT********
// The 5 digit alphanumeric combination you chose above needs be applied here
// Append to each #option1.
// Get unique ID from here:
// http://www.bitsofsharepoint.com/ExamplePoint/Site/uniqueID.htm
// End result should look like this:
// $('option1-4r5t6y')
// $('option2-4r5t6y')
// opt14r5t6y
// opt24r5t6y
var opt11a2s3 = $('#option1-1a2s3').text();
//var opt2 = $('#option2').text();
//var opt3 = $('#option3').text();
//var opt4 = $('#option4').text();
//var opt5 = $('#option5').text();
//var opt6 = $('#option6').text();
//var opt7 = $('#option7').text();
//var opt8 = $('#option8').text();
//var opt9 = $('#option9').text();
//var opt10 = $('#option10').text();
// This displays the Solution Info when the user is in Edit Page mode.
$(document).ready(function(){
if ($("#edmc2").length > 0){
$('.instructions').show();
}
});
// This is the error checking section. Below are two examples.
// This error code is designed for a choice variable where there can
// be more then one selection made. This example let the user set the
// box left, right, or center. It checks to make sure that one of the
// choices is entered in. It is case sensitive.
// All error text should be appended to #errors.
//switch (opt1)
//{
//case "right":
// break;
//case "left":
// break;
//case "center":
// break;
//default:
// $('#errors').show();
// $('#errors').append('<br /><b>Filter Box Location</b> is missing "right", "left" or "center".');
//}
// This examples allows you to search a word in the variable. This is
// good for url's where the user needs to point to local files.
// In this example we are making sure that the lytebox.js file/url has
// been entered into the field.
//var textTest = /lytebox.ja/;
//if (opt2.search(textTest) == -1)
//{
// $('#errors').show();
// $('#errors').append('<br /><b>Test</b> The lytebox.js file is missing.');
//}
// Below add your JavaScript or jQuery solution referencing the above variables.
$(document).ready(function(){
// Paste the URL of the source list below:
$("#ListPlaceholder").load(opt11a2s3+" #WebPartWPQ1 .ms-listviewtable",function() {
$("#ListPlaceholder *").removeAttr("id").removeAttr("onclick").removeAttr("onfocus").removeAttr("onmouseover");
$("#ListPlaceholder a").each(function() {
if (
$(this).attr("href").indexOf("?") > 0) {
$(this).attr("href",
$(this).attr("href")+"\&Source="+location.href);}
else {$(this).attr("href",
$(this).attr("href")+"?Source="+location.href);}
});
});
});
</SCRIPT>
<!-- Load and display list - jQuery version --><!-- Questions and comments: Christophe@PathToSharePoint.com -->
<DIV id=ListPlaceholder><IMG src="/_layouts/images/GEARS_AN.GIF"></DIV>