Top Navigation

Suppose you want to create Top navigation , you can use below code.
 We will have list , where we will keep our all data , so it will be dynamic. we can set the order also. We will have selflook for parent child relation.

 SP.SOD.executeFunc('sp.js', 'SP.ClientContext', setTopNavigation);

 function setTopNavigation() {
var leaderclientContext = new SP.ClientContext.get_current();
 var leadermenuList = leaderclientContext.get_web().get_lists().getByTitle('Top Navigation Menu');
 var leadercamlQuery = new SP.CamlQuery();
 leadercamlQuery.set_viewXml('1');
 leadercollListItem = leadermenuList.getItems(leadercamlQuery); leaderclientContext.load(leadercollListItem); leaderclientContext.executeQueryAsync(Function.createDelegate(this, this.onSuccess1), Function.createDelegate(this, this.onFailed1)); }

 function onSuccess1(sender, args) {

 var leaderlistItemData = '';
 var LeaderlistItemEnumerator = leadercollListItem.getEnumerator();
 var gotParent='false';

 // Build Dynamic Homepage Menu

 while (LeaderlistItemEnumerator.moveNext()) {

 var LeaderoListItem = LeaderlistItemEnumerator.get_current();
 // '\nUnique role assignments: ' + LeaderoListItem.get_hasUniqueRoleAssignments();
 var LeaderpTitle = LeaderoListItem.get_item('Title');
 var LeaderoParent = LeaderoListItem.get_item('ParentLink'); if(window.location.href==LeaderoListItem.get_item('URL'))
{
 if(LeaderoListItem.get_item('ImageUrl')!=null || LeaderoListItem.get_item('ImageUrl')=='')

 { var imgeurlbg = LeaderoListItem.get_item('ImageUrl'); //$('#topnavbg').attr('background-image','url("'+ imgeurlbg +'")'); $('#topnavbg').css('background-image', 'url(' + imgeurlbg + ')'); } setImageText(LeaderoListItem.get_item('ImageTitle'),LeaderoListItem.get_item('ImageByLineText')); } // Append menu string if item has no ParentLink if (!LeaderoParent) { leaderlistItemData += '\n

' + LeaderpTitle + ''; if(LeaderoListItem.get_item('URL')==window.location.href) { showBreadCum('','',LeaderpTitle); } // Build menu item's submenu var LeaderlistItemEnumeratorSub = leadercollListItem.getEnumerator(); var LeadersSubHTML = ''; while (LeaderlistItemEnumeratorSub.moveNext()) { var LeaderoListItemSub = LeaderlistItemEnumeratorSub.get_current(); var LeadersParent = LeaderoListItemSub.get_item('ParentLink'); if (LeadersParent) { LeadersParent = LeadersParent.get_lookupValue().toString(); if (LeaderpTitle == LeadersParent) { LeadersSubHTML += '\n

' + LeaderoListItemSub.get_item('Title') + '

'; if((LeaderoListItemSub.get_item('URL')==window.location.href)) { showBreadCum(LeaderpTitle,LeaderoListItem.get_item('URL'),LeaderoListItemSub.get_item('Title')); } } } } if (LeadersSubHTML != '') {leaderlistItemData += '\n

' + LeadersSubHTML + '\n

\n';} else {leaderlistItemData += '';} } } var LeadersMenuHTML = '

\n

' + leaderlistItemData + '\n

\n

'; //alert(sMenuHTML); // Populate menu as soon as we have the data // This will not complete before element has rendered var Leaderobj = document.getElementById('asuTopNav'); if (Leaderobj) {Leaderobj.innerHTML = LeadersMenuHTML ;} }

Show SharePoint Lists in FlexSlider Manner

Show List Item in Flex Slider style.
Suppose you want to show List items (Mainly used to Features article) in flex slider manner like below.

We can do this by using some Jquery files and client object model.

Required files  Jquery min , jquery.flexslider.js , flexslider.CSS can  be downloaded from below location.

 https://drive.google.com/folderview?id=0B75g-_BttAvZSGpDdDM3ckpna0E&usp=sharing

<link rel="stylesheet" href="https://sp.asurion.com/sites/teams/HR/alp/SiteAssets/FlexSliderFiles/flexslider.css" type="text/css"/>

<script src="https://sp.asurion.com/sites/teams/HR/alp/SiteAssets/FlexSliderFiles/jquery.min.js"></script>

<script src="https://sp.asurion.com/sites/teams/HR/alp/SiteAssets/FlexSliderFiles/jquery.flexslider.js"></script>

All these files you will get it from above drive path

Following is the JS file which will fetch data and will create HTML

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getNewsforSlider);

function getNewsforSlider()

{

var  Newscontext = SP.ClientContext.get_current();

   var NewscamlQuery = new SP.CamlQuery();

var Newslist = Newscontext.get_web().get_lists().getByTitle("Trending News");

    NewscamlQuery = new SP.CamlQuery();   

    NewsspItems = Newslist.getItems(NewscamlQuery);

 NewscamlQuery.set_viewXml("<View>" +

                                "<ViewFields>" +                                       

                                       "<FieldRef Name='HomePageImageURL'/>" +                                       

                                    "<FieldRef Name='Title'/>" +    

                                     "<FieldRef Name='ID'/>" +    

"<FieldRef Name='HomePageByline'/>" + 

                                  "</ViewFields>" +

                               "<Query> <OrderBy> <FieldRef Name='Modified' Ascending='False' /> </OrderBy></Query></View>");

    Newscontext.load(NewsspItems);

    Newscontext.executeQueryAsync(Function.createDelegate(this, foodForThoughts), Function.createDelegate(this, onFail));

    }

function foodForThoughts()

{

var NewslistEnumerator = NewsspItems.getEnumerator();

    var Newsitem;

 var AlliNewstems = [];

    while (NewslistEnumerator.moveNext()) {  

Newsitem = NewslistEnumerator.get_current(); 

var divbgimage= Newsitem.get_item('HomePageImageURL');

var divbodytext= Newsitem.get_item('HomePageByline');

var divTitletext= Newsitem.get_item('Title');

var divIDText= Newsitem.get_item('ID');

AlliNewstems.push(" <li  style='background-image:url("+divbgimage +");margin:1px;'><div  class='divTitle' style='height:10% !important;'></div><div class='divbody' style='height:18% !important;'><a href='Javascript:OpenNews("+ divIDText +")'>"+ divbodytext +"</a></div></li>");

    }

  var Newscontent = "<div class='flexslider'><div style='width:100%;height:25px;' align='right'><a style='color:Black;' href=***************/SitePages/AllNews.aspx'>View ALL</a></div><div class='flexslider carousel'><ul class='slides'>" +  AlliNewstems.join() + "</ul></div></div>" ;

$('.newsDiv').append(Newscontent);

 $('.flexslider').flexslider({     animation: "",     animationLoop: false,     itemWidth: 240,     itemMargin: 3   });

}

OpenNews JS

function OpenNews(news_id){var options = {url:"/***********/DisplayNews.aspx?ID=" + news_id,

width: 850,height: 600,dialogReturnValueCallback: function(dialogResult){SP.UI.ModalDialog.RefreshPage(dialogResult)}};SP.UI.ModalDialog.showModalDialog(options);}

You can use below function to increase or decrease length of the items or height width.

$('.flexslider').flexslider({     animation: "",     animationLoop: false,     itemWidth: 240,     itemMargin: 3   });

}

Show Today's Date

How to show Today’s Date in Month Day and Year Manner like below.

Put the JS
var Currentd = new Date();
var Currentmonth = Currentd.getMonth()+1;
var Currentday = Currentd.getDate();
var output = (Currentday<10 ? '0' : '') + Currentday;
var Currentd  = new Date();
var Currentday = Currentd.getDay();
var Extractmonth = ["JAN","FEB","MARCH","APRIL","MAY","JUN","JULY","AUG","SEP","OCT","NOV","DEC"][new Date().getMonth()]
var daytext=["SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY"][(new Date()).getDay()];


and HTML

<div class="DateDiv">
<div style="margin: 10px; border: 2px solid rgb(164, 164, 164); height: 200px; background-color: rgb(210, 210, 210);" class="roundedBox">
<div style="text-align: center; color: rgb(51, 51, 51); font-size: 30px; font-weight: bold; background-color: rgb(241, 241, 241);"><script language="javascript">document.write(Extractmonth);</script>DEC</div>
<div style="text-align: center; color: rgb(67, 181, 224); font-size: 80px; font-weight: bold;"><script language="javascript">document.write(output);</script>14<div style="color: rgb(0, 0, 0); font-size: 30px;"><script language="javascript">document.write(daytext);</script>MONDAY</div></div>
</div>
</div>

Client Object model to read sharepoint Calendar Data

How to show 2 calendar’s Data through Client object Model In some cases we need to show combined data from 2 or many calendars row by row manner Like below, so there is no way

Use below code to get the data and show like above, in below code “Calendar name1 “ Is first calendar and Calendar name 2 is the second calendar GetDevCalendarItems() gets data for first calendar , we have applied pagesize to get 10 items only if you want you can use DateOverlap and month to get the months data. GetProcessCalendarItems() gets data for 2nd calendar. After getting both calendar data we are combines it and sorting it ascending or descending. And finally we are creating HTML like above.

$(document).ready(function() { ExecuteOrDelayUntilScriptLoaded(GetDevCalendarItems, "sp.js");     });
var Calendarcontext,
    web,
    CalendaspItems,
    position,
    nextPagingInfo,
    previousPagingInfo,
    CalendarlistName = 'Calendar name1,
    pageIndex = 1,
    pageSize = 10,
    Calendarlist,
    CalendarcamlQuery,
    sortColumn = 'Title';


  var Calendarcontext;
   var CalendarcamlQuery;
    var Developmetsitems = [];
    var Processitems = [];
    var Allitems = [];
    var Developmetcontent;
    var Processcontent;


function GetDevCalendarItems() {
  Calendarcontext = new SP.ClientContext.get_current();
   CalendarcamlQuery = new SP.CamlQuery();

    Calendarlist = Calendarcontext.get_web().get_lists().getByTitle(CalendarlistName);
    CalendarcamlQuery = new SP.CamlQuery();    
  CalendarcamlQuery.set_listItemCollectionPosition(position);
    CalendarcamlQuery.set_viewXml("<view>" +
                                "<viewfields>" +                                      
                                       "<fieldref name="EventDate">" +                                      
"<fieldref name="Title">" +
                                  "</fieldref></fieldref></viewfields>" +
                               "<query> <where> <geq> <fieldref name="EventDate"> "+
      "<value includetimevalue="TRUE" type="DateTime"><today></today></value> </fieldref></geq> </where>"+
" <orderby> <fieldref ascending="True" name="EventDate"> </fieldref></orderby></query> "+
                               "<rowlimit>" + pageSize + "</rowlimit></view>");

    CalendaspItems = Calendarlist.getItems(CalendarcamlQuery);
    Calendarcontext.load(CalendaspItems);
    Calendarcontext.executeQueryAsync(Function.createDelegate(this, onSDevuccess), Function.createDelegate(this, onFail));
}

function GetProcessCalendarItems()
{
  Calendarcontext = new SP.ClientContext.get_current();
Calendarlist = Calendarcontext.get_web().get_lists().getByTitle(Calendar name 2);
    CalendarcamlQuery = new SP.CamlQuery();
   CalendarcamlQuery.set_listItemCollectionPosition(position)
    CalendarcamlQuery.set_viewXml("<view>" +
                                "<viewfields>" +                                      
                                       "<fieldref name="EventDate">" +                                      
"<fieldref name="Title">" +
                                  "</fieldref></fieldref></viewfields>" +
                               "<query> <where> <geq> <fieldref name="EventDate"> "+
      "<value includetimevalue="TRUE" type="DateTime"><today></today></value> </fieldref></geq> </where>"+
" <orderby> <fieldref ascending="True" name="EventDate"> </fieldref></orderby></query> "+
                               "<rowlimit>" + pageSize + "</rowlimit></view>");

    CalendaspItems = Calendarlist.getItems(CalendarcamlQuery);
    Calendarcontext.load(CalendaspItems); Calendarcontext.executeQueryAsync(Function.createDelegate(this, onProcessSuccess),Function.createDelegate(this, onFail));
}

function onSDevuccess() {

    var CalendarlistEnumerator = CalendaspItems.getEnumerator();

    var item;

    while (CalendarlistEnumerator.moveNext()) {
        item = CalendarlistEnumerator.get_current();
        //Developmetsitems.push("
<br />
" + item.get_item('Title') + "<br />
" + item.get_item('EventDate').format("MM/dd/yyyy")  + "<br />
Development Oppertunities<br />

");
Allitems.push({date: item.get_item('EventDate').format("MM/dd/yyyy"), title: "-" + item.get_item('Title'),Category:'DevelopmentOppertunities'});      

    }

    Developmetcontent = Developmetsitems.join();
   GetProcessCalendarItems();
}
function onProcessSuccess() {

   var CalendarlistEnumerator = CalendaspItems.getEnumerator();

    var item;

    while (CalendarlistEnumerator.moveNext()) {
        item = CalendarlistEnumerator.get_current();
        Allitems.push({date: item.get_item('EventDate').format("MM/dd/yyyy"), title: "-" + item.get_item('Title'),Category:'Process'});      
    }

Allitems.sort(function(Newsa,Newsb) {
    return new Date(Newsa.date) - new Date(Newsb.date);
});


var Keydates;
var keydatesitemcount =keydatesitemcount = Allitems.length;

for ( var newcount = 0; newcount  &lt; keydatesitemcount; newcount ++ ) {
    var News = Allitems[newcount];
  Keydates = Keydates + "" + News.date + "<br />
" + News.title  + "<br />
"+  News.Category +"<br />

";

}
 Keydates = Keydates .replace('undefined','');
    var finalContent= "<br />
" + Keydates +"<table class="KeyDates"></table>
";
    $('#CalendarContent').html(finalContent);

}