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.

Advertisements

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.

Workflow Form Update Required

I encountered an issue when trying to publish changes to an existing workflow. Even though there were no errors when I checked for errors, I received the following message:

The form <form name>.xsn has been customized using InfoPath and may no longer be compatible with this workflow due to field changes. To continue using the existing form, you must first update it using InfoPath. If you no longer wish to keep your customizations, you can delete the form and a new one will be generated when the workflow is published.

Since this was referring to the initiation form that I had not customized I saved the workflow, deleted the initiation form, and published the workflow. This fixed the issue since a new initiation form was created.

If you did make customizations to the form, first try to open the form in InfoPath and republish the form to see if that fixes the issue.

SharePoint 2010 Workflow Features Not Available in the SharePoint 2013 Workflow Platform

With the new workflow infrastructure in SharePoint 2013, some actions, conditions and blocks that were available in SharePoint 2010 are only available in 2013 when using the SharePoint workflow interop. The following features below are available only on the SharePoint 2010 Workflow platform (source).

Actions:

  • Stop Workflow
  • Capture a Version of the Document Set
  • Send Document Set to Repository
  • Set Content Approval Status for the Document Set
  • Start Document Set Approval Process
  • Declare Record
  • Set Content Approval Status
  • Undeclare Record
  • Add List Item
  • Inherit List Item Parent Permissions
  • Remove List Item Permissions
  • Replace List Item Permissions
  • Lookup Manager of a User
  • Assign a Form to a Group
  • Assign a To-Do Item
  • Collect Data from a User
  • Start Approval Process
  • Start Custom Task Process
  • Start Feedback Process
  • Copy List Item (SP Designer 2013 supports only the document-copying action)

Conditions:

  • If current item field equals value
  • If current item field equals value
  • Check list item permission levels
  • Check list item permissions

Blocks:

  • Impersonation block

Data Sources:

  • User Profile lookup

Other features:

  • Visio integration
  • Association Column
  • Content Type Association for reusable workflow
  • ‘Require Manage List/Web Permission’ feature for list/site workflow
  • Globally reusable workflow type
  • Workflow visualization option

To see how to still use these features in SharePoint Designer 2013, check out my Create a 2010 Workflow In SharePoint Designer 2013 post.

Create a 2010 Workflow in SharePoint Designer 2013

In this post I am going to walk through how to create a 2010 workflow in SharePoint Designer 2013 that changes the list item permissions. I will show how to call a SharePoint Designer 2010 workflow from a SharePoint Designer 2013 workflow in a future post.

1. Start SharePoint Designer 2013

2. Navigate to the list or library that you would like to have this workflow associated to

3. In the ‘Workflows’ section of the list information, click New

img1

4. Enter a name and description for the workflow and change the ‘Platform Type’ to SharePoint 2010 Workflow.

img2

6. Rename ‘Step 1’ step container to ‘Start of Workflow’.

7. Add a ‘Log to History List’ action item. – Logging is helpful for times when you need to troubleshoot

8. Click on the ‘this message’ link in the ‘Log to History List’ action item

img3

9. Add a message similar to ‘Update Item Permissions workflow starting…’

10. Click outside of the first step box so that the ‘Impersonation Step’ button becomes active on the ribbon.

11. Click the ‘Impersonation Step’ button on the ribbon.

img4

12. Add the appropriate permissions steps. If you need to remove permissions, use the ‘Remove List Item Permissions’ action. If you need to add permissions, use the ‘Add List Item Permissions’ action. For my example, I am going to remove permissions from the current item that was just created.

13. Click on the ‘these permissions’ link on the ‘Remove List Item Permissions’ action.

img5

14. In the ‘Remove List Item Permissions’ dialog box, click Add.

img6

15. Select the users/groups that need to have their permissions removed by clicking on the ‘Choose…’ button.

img7

16. Select the users/groups that need their permissions removed. To access list the people and groups that currently have access to the SharePoint select the ‘People/Groups from SharePoint site..’ then click Add.

img8

17. A new dialog box will appear to allow you to search for the people/groups. Select the user that needs to have their permissions removed.

img9

18. Select OK and OK again on the Select Users dialog box

img10

19. In the permissions dialog box, choose what permissions need to be removed. In my example, ‘Contribute’ permissions need to be removed. Then select OK

img11

20. Select OK again on the ‘Remove List Item Permissions’ dialog box.

img12

21. Click on the ‘this list’ link in the ‘Remove List Item Permissions’ action.

img13

22. In the Choose List Item dialog box, select ‘Current Item’ and then select OK

img14

23. Add another log after your ‘Remove List Item Permissions’ action to save you some time when troubleshooting in the future.

img15

24. Check for Errors

25. Publish

img16

26. You will be prompted by the message shown below, click OK

img17

That’s it! Pretty simple, right?