Display information in attractive way

We  have requirement that ,we need to display Department and other information  in attractive way.I have completed this using JavaScript with SPService .

Lets start practical…

1) Open SharePoint designer and create web part page

SP1

We have requirement that  fetch data from more than one list.One department have multiple programs .We had done it in  following way….

1) Create one library “Asset” and store jquery.min.js and jquery.SPServices.min.js  files in this library

In page add following code

Code :

<script type=”text/javascript” src=”../Asset/jquery.min.js”></script>

<script type=”text/javascript” src=”../Asset/jquery.SPServices.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function() {

var deptId= getUrlVars()[“deptId”];

//get URL from string
var searchString=getUrlVars()[“searchString”];
//alert(facultyId);
if(window.location.href.indexOf(“deptId”) > -1) {

var query = “<Query>” +
“<Where>” +
“<Eq>” +
“<FieldRef Name=’ID’/><Value Type=’Counter’>”+deptId+”</Value>” +
“</Eq>” +
“</Where>” +

“</Query>”;

var queryFields='<ViewFields>’
+ ‘<FieldRef Name=”ID”/>’

+ ‘<FieldRef Name=”Title”/>’

+ ‘<FieldRef Name=”Description”/>’
+ ‘</ViewFields>’;

}
else if(window.location.href.indexOf(“searchString”) > -1)
{
if(searchString!=””)
{
var query = “<Query>” +
“<Where>” +
“<Contains>” +
“<FieldRef Name=’Title’/><Value Type=’Text’>”+searchString+”</Value>” +
“</Contains>” +
“</Where>” +
“</Query>”;
}
else
{
query=”;
}
var queryFields='<ViewFields>’
+ ‘<FieldRef Name=”ID”/>’

+ ‘<FieldRef Name=”Title”/>’

+ ‘<FieldRef Name=”Description”/>’
+ ‘</ViewFields>’;

}
else
{
query=”;

var queryFields='<ViewFields>’
+ ‘<FieldRef Name=”ID”/>’
+ ‘<FieldRef Name=”Description”/>’

+ ‘<FieldRef Name=”Title”/>’
+ ‘</ViewFields>’;

}
// the Main list – get departments
$().SPServices({
operation: ‘GetListItems’,
async: false,
listName: ‘Department’,
CAMLQuery: query, // add OrderBy and Where later
CAMLViewFields:queryFields,
CAMLRowLimit: 20, //limit to 0 after testing as results will be under 100 max.
completefunc: function (xData, Status) {

var totalRows = parseFloat($(xData.responseXML).find(‘[nodeName=”rs:data”]’).attr(“ItemCount”));
if(totalRows==0)
{
$(“#courseTable”).append(“<tr><td colspan=’2′ height=’20px’>No matches found.Please search again.</td></tr>”);
}

$(xData.responseXML).find(“[nodeName=’z:row’]”).each(function() {

// the FacilityID is a lookup, so split off the ID element to the left of the string
var departmentID= $(this).attr(“ows_ID”);
var departmentName= $(this).attr(“ows_Title”);
var departmentDescription= $(this).attr(“ows_Description”);

 
addDepartmentDetails(departmentName,departmentID,departmentDescription);
//Get departments from Programs list using departmentID
// the Lookup list – output only the Facilities with the same ID
$().SPServices({
operation: ‘GetListItems’,
async: false,
listName: ‘Programs’,
CAMLQuery: ‘<Query><Where><Eq>’ // use the FacilityID from Clinics list for the Query filter
+ ‘<FieldRef Name=”Departments_x003a_ID” /><Value Type=”Counter”>’+departmentID+'</Value>’
+ ‘</Eq></Where></Query>’,
CAMLViewFields: ‘<ViewFields>’
+ ‘<FieldRef Name=”ID” />’
+ ‘<FieldRef Name=”Title” />’

+ ‘</ViewFields>’,

CAMLRowLimit: 20,
completefunc:
function (xData, Status) {

$(xData.responseXML).find(“[nodeName=’z:row’]”).each(function() {
var programName= $(this).attr(“ows_Title”);
var programId= $(this).attr(“ows_ID”);
addPrograms(programName,programId);

});

}
});
});
}
});
});

function addDepartmentDetails(departmentName,departmentID,departmentDescription)
{

//var facultyPics=facultyPhoto.split(“,”);
$(“#courseTable”).append(“<tr>” +
“<td colspan=’2′ class=’courseHeading’><b><a href=’/sites/catalog/SitePages/Department Details.aspx?deptId=”+departmentID+”‘>” + departmentName+ “</a></b></td></tr><tr><td colspan=’2’><hr></td></tr>”);

$(“#courseTable”).append(“<tr><td colspan=’2′ class=’subHeading’>Description</td></tr><tr><td colspan=’2′><hr></td></tr><tr><td colspan=’2′>”+departmentDescription+”</td></tr><tr><td colspan=’2′><hr></td></tr>”);

$(“#courseTable”).append(“<tr><td colspan=’2′ class=’subHeading’>Programs</td></tr><tr><td colspan=’2′><hr></td></tr>”);

}

function addPrograms(programName,programId)
{

$(“#courseTable”).append(“<tr><td colspan=’2′><a href=’/sites/catalog/SitePages/Program Information.aspx?programId=”+programId+”‘>”+programName+”</td></tr>”);

}

$(“#courseTable”).append(“<tr><td colspan=’2’><hr></td></tr>”);
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function(m,key,value) {
vars[key] = value;
});
return vars;
}

</script>

Bind all output to

<table id=”courseTable” width=”100%” cellspacing=”10″></table>

 

We can apply CSS to table for change the look and feel of page ….

I have added circular navigation on lookup value.And the Out Put is……

department

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s