JQuery with Template

Tutorial from
http://weblogs.asp.net/jan/archive/2010/10/05/getting-started-with-jquery-templates-and-sharepoint-2010.aspx

 

 
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>


<script id="tasktemplate" type="text/x-jquery-tmpl">
    <li>
        <b class="ms-rteFontSize-4">${Title}</b> - ${StatusValue}
        <div>{{html Description}}</div>
    </li>
</script>

<ul id="tasksUL"></ul>

<script type="text/javascript">
    $(document).ready(function () {
        $.getJSON(
            "../_vti_bin/listdata.svc/Tasks?$filter=StatusValue ne 'Completed'", null,
            function (data) {
     alert("hello " + data.d.results);
               $("#tasktemplate").tmpl(data.d.results).appendTo("#tasksUL");
     
            });
    });</script>

CAML LEFT JOIN

Trying to do a left join with CAML and found out that the only way to do it is if the lists are join with the ID field.

My Lists are set up this way,




Data for ActionList



Data for SubjectList


Here is the code that returns the data table for two columns from those two list.

        private DataTable getActionSubjectListData()
        {
            string[] fields = { "Title", "SubjectName" };
            foreach (string s in fields)
            {
                BoundField bf = new BoundField();
                bf.DataField = s;
                bf.HeaderText = s;
                spgActionSubjectList.Columns.Add(bf);
            }

            DataTable dt = new DataTable();

            dt.Columns.Add(new DataColumn("Title", Type.GetType("System.String")));
            dt.Columns.Add(new DataColumn("SubjectName", Type.GetType("System.String"))); 

            SPSite oSite = SPContext.Current.Site;
            SPWeb oWeb = SPContext.Current.Web;
            
            SPList actionList = oWeb.Lists["ActionList"];
            SPList subjectList = oWeb.Lists["SubjectList"];
            SPField actionSubjectID = actionList.Fields["SubjectID"];
            SPField subjectTitle = subjectList.Fields["Title"];
            SPField subjectIDD = subjectList.Fields["SubjectID"];
            SPQuery query = new SPQuery();

            query.Joins = "<Join Type='LEFT' ListAlias='SubjectList'>" +
                    "<Eq>" +
                    "<FieldRef Name='" + actionSubjectID.InternalName + "' RefType='Id'/>" +
                    "<FieldRef List='SubjectList' Name='ID'/>" +
                    "</Eq>" +
                    "</Join>";

            query.ProjectedFields = "<Field Name='SubjectName' Type='Lookup' List='SubjectList' ShowField='" + subjectTitle.InternalName + "'/> ";
            

            query.ViewFields = "<FieldRef Name='SubjectName' />" +
                                "<FieldRef Name='Title' />" ;

            query.Query = ""; 

            SPListItemCollection items = actionList.GetItems(query);

            foreach(SPListItem sli in items)
            {
                SPFieldLookupValue lkpSubjectName = new SPFieldLookupValue(sli["SubjectName"].ToString());
                 
                    dt.Rows.Add(sli.Title, lkpSubjectName.LookupValue);
            }
            return dt;
        }

Web Part

JavaScript CEWP Query and Set Data

JavaScript help from http://www.mredkj.com/tutorials/tablebasics3.html

Create a simple list call Books, and then try pasting this into a CEWP.

<table id="mytbl">
  <thead>
  <tr>
    <th colspan="2">header...</th>
  </tr>
  </thead>
  <tbody></tbody>
</table>
<script type="text/javascript">




SP.SOD.executeOrDelayUntilScriptLoaded(example, 'SP.js');

function example() {
    var ctx = new SP.ClientContext.get_current();
    var oBooksList = ctx.get_web().get_lists().getByTitle('Books');
    var caml = new SP.CamlQuery();
    caml.set_viewXml("<View></View>");
    this.allBooks = oBooksList.getItems(caml);
    ctx.load(this.allBooks);

    ctx.executeQueryAsync(
            Function.createDelegate(this, this.onSucceededCallback),
            null);
}

function onSucceededCallback(sender, args) {
    var enumerator = this.allBooks.getEnumerator();
    while (enumerator.moveNext()) {
        var listItem = enumerator.get_current();
        addRowInnerHTML("mytbl","ID: " + listItem.get_id() + ", Title: " +
                        listItem.get_item("Title"));
    }
}

function addRowInnerHTML(tblId, txt)
{
  var tblBody = document.getElementById(tblId).tBodies[0];
  var newRow = tblBody.insertRow(-1);
  var newCell0 = newRow.insertCell(0);
  newCell0.innerHTML = '<input type="input" value="book" style="color: blue;" />';
  var newCell1 = newRow.insertCell(1);
  newCell1.innerHTML = txt;
}</script>

JavaScript CEWP with Client Context

This gets the last inserted item in table TestJS which has columns ID, Title, URL.

<a href="javascript:TEST()">Click ME!</a><script type="text/javascript">


function TEST() 
{
// var myQueryString = '<View/>'; 

 var myQueryString = "<View><Query><OrderBy><FieldRef Name='Created' Ascending='False' /></OrderBy></Query><RowLimit>1</RowLimit></View>";
 
 var myContext = new SP.ClientContext.get_current();
 var myWeb = myContext.get_web(); 
 var myList = myWeb.get_lists().getByTitle('TestJS'); 
 var myQuery = new SP.CamlQuery();  
 myQuery.set_viewXml(myQueryString); 
 myItems = myList.getItems(myQuery); 

 myContext.load(myItems,'Include(ID, Title, URL)'); 

 myContext.executeQueryAsync(Function.createDelegate(this, TestSuccess), null); 

}

function TestSuccess(sender,args)
{
 var county = myItems.get_count(); 
 
 var tEnumerator = myItems.getEnumerator(); 


 var tDetails = '';

 var currentEnum;
  while(tEnumerator.moveNext())
  {
   currentEnum = tEnumerator.get_current(); 
   tDetails = tDetails + ' ' + currentEnum.get_item('Title')
  + ' ' + currentEnum.get_item('URL'); 
   
  }


alert("Query Result: " + tDetails);

alert("Last value: " + currentEnum.get_item('URL'));

}</script>