Making a form field disabled in SharePoint with jQuery

With InfoPath on its way out, I have been looking into different options for a form solution. In some cases the simple out-of-the-box new, edit, and view aspx forms are enough (even though they are ugly) with some minor tweaks. One of the most common tweaks I need to make is to make a field disabled (or read-only). By using jQuery to set the field properties to disabled I can control what fields should be read-only.

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

<script type="text/javascript">

$(document).ready(){

$("select[Title='Request Status']").prop("disabled", true);  //disable a dropdown
$("input[Title='Requester']").prop("disabled", true);  //disable a text field

}

</script>


Using the ‘title’ attribute of the element (example: [Title=’Request Status’] ) allows us to select which field to disable. Mark Rackley has a really good post that covers using attributes to select an element.

Google Visualizations Bubble Chart API with SharePoint 2010 & SharePoint 2013

Using the Google Visualization: Bubble Chart Graph API in SharePoint 2010 and SharePoint 2013 along with using JavaScript Client Object Model was very easy and provided a ‘quick win’ for a current project. In this blog  I will go over the steps I used to take advantage of the Google Visualization: Bubble Chart Graph API. The end result in this blog will be:

bubbleChart

 

I first created a simple list that would house the information for the bubble chart. This list consisted of:

  • Title – single line of text – unique to each list item
  • Life Expectancy – Number (2 decimals) – horizontal axis
  • Fertility Rate – Number (2 decimals) – vertical axis
  • Region – Single line of text – will be used for the series of the bubble chart (color of bubble)
  • Population – Number (o decimal) – determines size of bubble

I filled the list with the following information:

listview

 

The following script, included with comments, was to pull the SharePoint list information by using the JavaScript Client Side Object Model and applied to the Google Visualization: Bubble Chart API:

<script src=”https://www.google.com/jsapi&#8221; type=”text/javascript”></script>
<script type=”text/javascript”>

google.load(‘visualization’, ‘1.0’, {‘packages’:[‘corechart’]});

ExecuteOrDelayUntilScriptLoaded(gatherListInfo, ‘sp.js’);

function gatherListInfo() {

var clientContext = new SP.ClientContext.get_current();
var web = clientContext.get_web();
var list = web.get_lists().getByTitle(“Bubble Chart”);

var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml();

this.listItems = list.getItems(camlQuery);
clientContext.load(listItems);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onListItemsLoadSuccess), Function.createDelegate(this, this.onQueryFailed));
}

function onListItemsLoadSuccess(sender, args) {

// Creating Table
var data= new google.visualization.DataTable();

data.addColumn(‘string’, ‘ID’);
data.addColumn(‘number’, ‘Life Expectancy’);
data.addColumn(‘number’, ‘Fertility Rate’);
data.addColumn(‘string’, ‘Region’);
data.addColumn(‘number’, ‘Population’);

var options = { ‘title’:’Bubble Chart Test’,
‘width’:800,
‘height’:600,
‘fontName’:'”Arial”‘,
‘bubble’: {textStyle:{color:’none’}},
‘series’: {‘North America’: {color:’green’}, ‘Europe’: {color:’yellow’}, ‘Middle East’: {color:’blue’}},
‘titleTextStyle’: {color:’black’, fontName:'”Arial”‘, fontSize:28},
hAxis: {title: ‘Life Expectancy’},
vAxis: {title: ‘Fertility Rate’}
};

var listEnumerator = this.listItems.get_count();

for (x = 0; x < listEnumerator; x++) {
var item = this.listItems.itemAt(x);
var id = item.get_item(‘Title’);
var life_expect = item.get_item(‘Life_x0020_Expectancy’);
var fert_rate = item.get_item(‘Fertility_x0020_Rate’);
var region = item.get_item(‘Region’);
var pop = item.get_item(‘Population’);

data.addRow([id, life_expect, fert_rate, region, pop]);

}

var chart = new google.visualization.BubbleChart(document.getElementById(‘chart_div’));
chart.draw(data, options);

}

function onQueryFailed(sender, args) {
alert(‘request failed ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
}
</script>

<div id=”chart_div”></div>

Note the extra quotations around the font name for the TitleTextStyle in the bubble chart options. This was needed for the font value to be carried out in SharePoint. Without the extra quotes the TitleTextStyle font default style displayed.

The last step was to add this script into a document library and used a content editor to link to the script.