Add scollbar to autocomplete in spservice is easy.We need to overtire css.
$().SPServices.SPAutocomplete({
sourceList: “Product”,
sourceColumn: “LinkTitle”,
columnName: “txtNewProductValue”,
filterType: “Contains”,
CAMLQuery: camlQuery ,
highlightClass: “ms-bold”,
uniqueVals: true,
ignoreCase: true,
numChars: 1,
slideDownSpeed:”fast”,
debug: true,
});
//add css for add scrollbar
$(‘#SPAutocomplete_’).css({“max-height”:”150px”,”overflow-y”:”auto”,”overflow-x”:”hidden”});
}
Output is
“Power of SharePoint” is very nice book to understand administration and development concept in SharePoint .Very well written.If you are going for interview you must read this book.
G0 and grab this book http://1drv.ms/1hlxOyl
Very nice and well written blog .Please refer
http://sharepointgeorge.com/2012/configuring-active-directory-ad-ds-in-windows-server-2012/
We have develop the conversion and selling platform for UVA in SharePoint .
Look @ this video
For any website , branding is very important because
A word is a word, and a picture is worth a thousand…but a brand is
worth a million
So before doing branding in SharePoint find out the answer of following questions and then start customization.
- One of the first decisions to make is which version of SharePoint will be used for the project?
- Is there an existing website or SharePoint site that the new SharePoint site will replace?
- What screen resolution will be targeted for your SharePoint branding
- What browsers and operating systems will be supported by your SharePoint site
- Will master pages or SharePoint themes be used to create the branding? Will both be required?
- Will this be a new design or will it be based on some existing branding?
- Is there an existing corporate style guide that needs to be followed?
- Are there any stylistic requirements, such as preferred or disliked colors, fonts, or imagery?
- Who will the audience be?
- What sort of navigation is required? Horizontal navigation? Vertical navigation? Both?
- Will any third-party Web Parts or controls be needed?
- How will the branding be deployed to the production SharePoint server?
- What is the time frame to deliver the new branding?
After getting answer of these question start SharePoint designer and start branding.
I dont like the menu of SharePoint 2013 its toooo UGLY…
Lets change it.
My changed menu ….so Sexy
1) Open as usual SharePoint designer .
2)Check that which master page application is using
In master page paste following CSS.
and add for parent menu
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item
{
/*margin-right:30px;
border:1px solid transparent;
font-size:15px;*/
margin-right:1px;
border:1px solid rgb(207, 120, 0);
display:block;
background:rgb(207, 120, 0);
color:white;
text-decoration:none;
padding:0 10px;
margin-top:20px;
padding-top:7px;
padding-bottom:7px;
}
For child menu
li.dynamic
{
/*display:list-item;*/
display:list-item;
border-bottom:1px solid white;
display:block;
background:rgb(207, 120, 0);
color:white;
text-decoration:none;
padding:0 10px;
}
TO change font color
.ms-core-header .ms-core-listMenu-item,
.ms-core-header .ms-core-listMenu-item:link,
.ms-core-header .ms-core-listMenu-item:visited,
.ms-core-header .ms-tv-item:link,
.ms-core-header .ms-tv-item:visited,
.ms-core-header .ms-tv-header:link,
.ms-core-header .ms-tv-header:visited
{
color:white;
}
And we are done with sexy menu….
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
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……
itsoutlook.wordpress.com 