Footer links web part

Hi Folks,

I contributed to a reusable component for my team's contribution project. Using ecma script, we are fetching data from SharePoint list and displaying it to Script editor web part. We did some sorting/filtering using Caml query.

List Settings:

Output:

FooterTest.aspx

more > is navigating to NavigatePage.aspx.
NavigatePage.aspx

Common CSS Used for "FooterTest.aspx" and "NavigatePage.aspx":

<style>

.outerDiv

{

       width:1100px;

       margin-top:10px;

       border-top:1px solid #ccc;

       padding:10px 0 0;

       clear:both;

}

.col {  

         float: left;

         padding: 30px 0 0 35px;

  width: 310px; 

}

.col li{

  text-decoration:none;

}

.col ul

{

  float:left;

  list-style: none;

  margin: 0;

  padding: 0;

  border-top:1px solid #0B0719;

}

.col li

{

  border-bottom: 1px dotted #BDBDBD;  

  float: left;

  height: 35px;

  margin: 3px 0;

  padding: 0;

  width: 310px;

}

.col li:last-child

{

    border:none;

}

.col li a

{    

  color: black;

  display: block;

  float: left;

         font: normal 12px Arial;

  padding: 10px 0 0 19px;

  text-decoration: none;

}

</style>





Ecma Script Used for "FooterTest.aspx"

1   <script type="text/javascript" src="../../SiteAssets/jquery-1.11.1.js"></script>

<script type="text/javascript" src="../../SiteAssets/jquery-1.11.1.min.js"></script>

<script language="javascript" type="text/javascript">

    var clientContext;

    var website;

    var list;

    var items;

    var html = '<div class="col"><ul>';

    var index = 0;

    var lIndex = 0;

    // Make sure the SharePoint script file 'sp.js' is loaded before your

    // code runs.

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

    // Create an instance of the current context.

    function sharePointReady() {

        clientContext = SP.ClientContext.get_current();

        website = clientContext.get_web();

        list = website.get_lists().getByTitle('TestFooter');

        var camlQuery = new SP.CamlQuery();

        camlQuery.set_viewXml('<View><Query><Where><And><Eq><FieldRef Name=\'IsActive\'/>' +

        '<Value Type=\'Boolean\'>1</Value></Eq><IsNotNull><FieldRef Name=\'Url\'/></IsNotNull></And></Where><OrderBy><FieldRef Name=\'DisplayOrder\' Ascending=\'TRUE\' /></OrderBy></Query></View>');

         items = list.getItems(camlQuery);

        clientContext.load(items);      

        clientContext.executeQueryAsync(onRequestSucceeded, onRequestFailed);

    }

    function onRequestSucceeded() {

        var itemCount = items.get_count();

        console.log(itemCount);

        var enumerator = items.getEnumerator();

        while (enumerator.moveNext()) {           

            var listItem = enumerator.get_current();

            var rotatorTitle = listItem.get_item('Title');

            var rotatorUrl = listItem.get_item("Url");

            var rotatorIsActive = listItem.get_item('IsActive');

            GetData(rotatorTitle, rotatorUrl);

        }      

        $("#siteOwner").append(html);       

    }

    function onRequestFailed(sender, args) {

        alert('Error: ' + args.get_message());

    }

    function GetData(rotatorTitle, rotatorUrl) {

        if (lIndex < 16) {

                if (index <= 4) {

                    html += "<li><a href=" + rotatorUrl + ">" + rotatorTitle + "</a></li>";

                    index++;

                    lIndex++;

                }

                else if (lIndex == 15) {                  

                    html += '<li><a href="https://accobrands.sharepoint.com/ITCompliance/Pages/NavigatePage.aspx"> more > </a></li></ul></div>';

                    lIndex++;

                }

                else {

                    index = 0;

                    html += '<li><a href=' + rotatorUrl + '>' + rotatorTitle + '</a></li></ul></div><div class="col"><ul>';

                }

            }

            else {

                //No action needed

            }

       

    }

</script>

<div id="siteOwner" class="outerDiv">

</div>

Ecma Script Used for "NavigatePage.aspx"

<script type="text/javascript" src="../../SiteAssets/jquery-1.11.1.min.js"></script>

<script type="text/javascript" src="../../SiteAssets/jquery-1.11.1.min.js"></script>

<script language="javascript" type="text/javascript">

    var clientContext;

    var website;

    var list;

    var items;

    var html = '<div class="col"><ul>';

    var index = 0;

    var lIndex = 0;

    var mIndex = 0;

    // Make sure the SharePoint script file 'sp.js' is loaded before your

    // code runs.

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

    // Create an instance of the current context.

    function sharePointReady() {

        clientContext = SP.ClientContext.get_current();

        website = clientContext.get_web();

        list = website.get_lists().getByTitle('TestFooter');

        var camlQuery = new SP.CamlQuery();

        camlQuery.set_viewXml('<View><Query><Where><And><Eq><FieldRef Name=\'IsActive\'/>' +

        '<Value Type=\'Boolean\'>1</Value></Eq><IsNotNull><FieldRef Name=\'Url\'/></IsNotNull></And></Where><OrderBy><FieldRef Name=\'DisplayOrder\' Ascending=\'TRUE\' /></OrderBy></Query></View>');

        items = list.getItems(camlQuery);

        clientContext.load(items);

        //clientContext.load(website);

        clientContext.executeQueryAsync(onRequestSucceeded, onRequestFailed);

    }

    function onRequestSucceeded() {

        var itemCount = items.get_count();

        console.log(itemCount);

        mIndex = itemCount - 4;

       

        var enumerator = items.getEnumerator();

        while (enumerator.moveNext()) {

            var listItem = enumerator.get_current();

            var rotatorTitle = listItem.get_item('Title');

            var rotatorUrl = listItem.get_item("Url");

            var rotatorIsActive = listItem.get_item('IsActive');

            GetData(rotatorTitle, rotatorUrl);

        }

        $("#siteOwner").append(html);

        //alert(website.get_url());

    }

    function onRequestFailed(sender, args) {

        alert('Error: ' + args.get_message());

    }

    function GetData(rotatorTitle, rotatorUrl) {       

            if (index <= 4) {

                html += "<li><a href=" + rotatorUrl + ">" + rotatorTitle + "</a></li>";

                index++;

                lIndex++;

            }

            else if (lIndex == mIndex) {

                html += '<li><a href=' + rotatorUrl + '>' + rotatorTitle + '</a></li></ul></div>';

            }           

            else {

                index = 0;

                html += '<li><a href=' + rotatorUrl + '>' + rotatorTitle + '</a></li></ul></div><div class="col"><ul>';

            }

    }

</script>

<div id="siteOwner" class="outerDiv">

   

</div>