Adding links to Suite Bar in Office 365

So we want to add few custom links to the Delta suite bar within Office 356. You can either add it to the Script Editor webpart to add these links for single page or add it to the master page if you want so.

Before:

suitebar_before

After:

suitebar_after

 

<script type="text/javascript">    
    
        $(document).ready(function() {
           var addLinks = "<div class='o365cs-nav-O365LinksItem'><div><a title='Google' class='o365button o365cs-nav-navItem o365cs-nav-workloadLink o365cs-spo-topnavLink o365cs-topnavLink' id='O365_MainLink_ShellMail' role='menuitem' aria-disabled='false' aria-selected='false' aria-label='Google' href='http://google.co.uk'><span>Google</span><div class='o365cs-activeLinkIndicator o365cs-nw-b' style='display: none;'></div></a></div><div style='display: none;'></div></div>";

addLinks +=  "<div class='o365cs-nav-O365LinksItem'><div><a title='Bing' class='o365button o365cs-nav-navItem o365cs-nav-workloadLink o365cs-spo-topnavLink o365cs-topnavLink' id='O365_MainLink_secondLink' role='menuitem' aria-disabled='false' aria-selected='false' aria-label='Bing' href='http://bing.co.uk'><span>Bing</span> <div class='o365cs-activeLinkIndicator o365cs-nw-b' style='display:none;'></div></a></div><div style='display: none;'></div></div>";
        $('.o365cs-nav-O365Links div:first').prepend(addLinks);
     });
   </script>
Advertisements

Using JQuery to hide SharePoint 2013 List Item fields

Hiding unnecessary fields in DispForm.aspx/EditFOrm.aspx is something most of us implement within our SharePoint implementations. Here is a quick way to achieve that using JQuery.
Hiding any List Item fields
So you have many fields in your NewForm.aspx but you want to hide some like in the screenshot. I want to hide the fields I haven’t underlined.

I will click on Edit Page, and add a Script  Editor webpart on the page. From the below script, just change the number in which your fields appear on the page using a 0 index. So to hide the first field, enter 0, second field – enter 1 and so on.


$(document).ready( function() {
$("TABLE.ms-formtable>TBODY>TR:eq(3)").css('display', 'none');
$("TABLE.ms-formtable>TBODY>TR:eq(7)").css('display', 'none');
$("TABLE.ms-formtable>TBODY>TR:eq()").css('display', 'none');
$("TABLE.ms-formtable>TBODY>TR:eq(9)").css('display', 'none');
$("TABLE.ms-formtable>TBODY>TR:eq(10)").css('display', 'none');
})

Also you can do some formatting on your page using Jquery, for example I am making the font as BOLD for the list item entries.

$(".ms-formbody").css("font-weight","bold");

Also,
I want to hide the information in the screenshot, you can add this line as well.

$(".ms-descriptiontext").css("display","none");

Hope this helps someone looking for a similar scenario.

SharePoint 2013: Working with sp.js files and Publishing pages

So you are trying to write Javascript code in SharePoint 2013 and want to load the sp.js file before your custom function is called. And for that you have used.

ExecuteOrDelayUntilScriptLoaded(“your javascript function”, "sp.js");

But it’s not working. Sad, isn’t it ?

The reason is that, with SharePoint 2013 publishing pages the above syntax doesn’t work. You need to register using the below syntax

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', “your javascript function”);

I struggled 2 hours to find this MSDN article which showed me the right way.

Retrieving SharePoint List Items using Javascript in a Custom Webpart

So you want to fetch list items but do not want any post back, yes we can implement that using Javascript within our custom webpart by using a client control. 

Let me explain that in a step by step process
  • Create a new Visual Webart Project in VS 2012.
  • Give it a proper name and make it a Farm level solution.
  • Now delete the existing Visual WebPart item within the solution (to remove the default name) and add a new item – Visual WebPart and give it the desired name.
  • Open ascx file and copy paste the code below









Test


function fetchListItems()
{
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('List Name');
//I am fetching the list items randomly from the first 30 items
var randomNumber = Math.floor((Math.random() * 30) + 1);
var camlQuery = new SP.CamlQuery();

//increase the number within the RowLimit tag to fetch the number of items you wish
camlQuery.set_viewXml('' +
'' + randomNumber + '1');
this.collListItem = oList.getItems(camlQuery);

clientContext.load(collListItem);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

}

function onQuerySucceeded(sender, args) {

var listItemInfo = '';
var listItemEnumerator = collListItem.getEnumerator();

while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
listItemInfo += '\nID: ' + oListItem.get_id() +
'\nTitle: ' + oListItem.get_item('Title') +
'\nBody: ' + oListItem.get_item('Body');

}
alert(listItemInfo.toString());
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

Here I am using client control and not any server control so there will not be any post back experience.
If you wish you can add more functionality to this same webpart and use it in your real world scenario like adding server controls to it and then writing some code behind for it and so on.

Cascading Dropdown in MOSS 2007

What is a Cascaded Dropdown?


A Cascaded dropdown is a combination of two dropdown lists. By selecting a value in the first one the options in the second get filtered according to its “parent” selection.
Sample uses:
Continents – Countries – Cities,
and many others ….

Solution :-


Download the Javascript here

Upload it to any document library in your site (assuming its hidden from users, you will not want users to modify it and give you a shock)

Right click on the javascript we just uploaded and click on “Copy Shortcut”

Now in the custom list New Form/Edit Form, add a Content Editor Webpart and make it hidden

Edit the WebPart properties and click on “Source Editor”

Paste the following line – 


void ParentDropDownList_SelectedIndexChanged(object sender, EventArgs e) 

     ChildDropDownListFieldControl child = (ChildDropDownListFieldControl)
               FindControlRecursive(this.Page, “ChildDropDownList”).Parent.Parent; 
     child.SetDataSource(ParentDropDownList.SelectedValue); 
} 

There you go !!!

Hope this solution works for you.