Optimal Training Group

Today I needed to use REST API to insert data into a list and I also needed to retrieve the id of the new inserted item. The code below successfully inserted my data into the list but the success handler wasn’t firing.

$.ajax({
	url: fullUrl,
	type: "POST",
	data: JSON.stringify({
		'__metadata': { 'type': 'SP.Data.Travel_x0020_RequestListItem' },
		'Guidance1': guidance1,
		'Guidance2': guidance2,
		'Guidance3': guidance3
		}),
	headers: {
		"accept": "application/json;odata=verbose",
		"content-type": "application/json;odata=verbose",
		"X-RequestDigest": $("#__REQUESTDIGEST").val()
	},
	success: function(data){
		alert("Retried id of new inserted item"+data.d.Id);
		console.log(data.d.Id);
	},
	error: function(data){
		alert("Epic fail");
	}
});
}

After a bit of googling and being on SharePoint stack exchange, it was suggested that I change “type” to “method”. Once I did that, it worked.

$.ajax({
	url: fullUrl,
	method: "POST",
	data: JSON.stringify({

I hope this helps someone.

While trying to update an item in a SharePoint 2013 list, something I’ve done many times before, I received the following error:

Error: “SCRIPT5007: Unable to get property ‘apply’ of undefined or null reference. File: ScriptResource.axd, Line 5, Column: 298”

Here’s the code that generated that error:

var siteUrl = _spPageContextInfo.webAbsoluteUrl
var clientContext = new SP.ClientContext(siteUrl);
var oList = clientContext.get_web().get_lists().getByTitle('Document Approval');
var oListItem = oList.getItemById(promise.responseJSON.d.results[0].ID);

oListItem.set_item('Role Status', roleStatus);
oListItem.update();

clientContext.executeQueryAsync(
 Function.createDelegate(this, this.onAddSucceeded),
 Function.createDelegate(this, this.onAddFailed)
);

function onAddSucceeded(sender, args){
  console.log("Item successfully updated!");
}

function onAddFailed(sender, args){
  console.log("Request Failed");
}

The problem was in the way I was referencing the functions (onAddSucceeded and onAddFailed). Using the ‘this’ keyword means that both onAddSucceeded and onAddFailed are part of the object which they aren’t. So the following modification worked, thanks to SharePoint stackexchange.

var siteUrl = _spPageContextInfo.webAbsoluteUrl
var clientContext = new SP.ClientContext(siteUrl);
var oList = clientContext.get_web().get_lists().getByTitle('Document Approval');
var oListItem = oList.getItemById(promise.responseJSON.d.results[0].ID);

oListItem.set_item('Role Status', roleStatus);
oListItem.update();

clientContext.executeQueryAsync(
 onAddSucceeded,onAddFailed
);

function onAddSucceeded(sender, args){
  console.log("Item successfully updated!");
}

function onAddFailed(sender, args){
  console.log("Request Failed");
}

Hope that makes sense. Love to hear from you.

I was stumped the other day with something that I thought would be easy.  I had a form and on the form a radio button with three options.  All I wanted to do was grab the value and I was having a hard time doing so.  I was able use the code below to do so.

var btn =  document.querySelector("input[name^='ctl00$ctl40$g']:checked").value

Note: the value returned is not the actual value you want but the value generated by SharePoint such as ‘ct100’, ‘ct101’, etc.

What you have to do is associate each of the generated values with your actual values and use a condition to test and take the appropriate action.  For example, if ‘ct100’ represent ‘Vanila’, you could do something such as the below.

    if (btn=='Vanila'){
      /*Do Something*/
    }

Hope this was helpful. If you have another method, please share.

Thanks and happy coding! 🙂

Recently, I created a custom survey form with JSOM (JavaScript Object Model) as my choice for inserting data into a SharePoint list form.  It worked perfectly on my test site but when I moved it to our live SharePoint site, I received the following error.
**Uncaught TypeError: Cannot read property ‘get_current’ of undefined**

  var ctx = new SP.ClientContext.get_current(); //**<--ERROR HERE**
        var cList = ctx.get_web().get_lists().getByTitle('2018Survey');

        var itemCreateInfo = new SP.ListItemCreationInformation();
        var listItem = cList.addItem(itemCreateInfo);
        listItem.set_item('CurrentSharePointRole', this._qs("#CurrentSharePointRole").value);
        listItem.set_item('SharePointYammerUseful', this._qs("#SharePointYammerUseful").value);
        listItem.set_item('SharePointYammerUsefulWHY', (this._qs("#SharePointYammerUsefulWHY").value) ? this._qs("#SharePointYammerUsefulWHY").value : "N/A");
        listItem.set_item('AttendedBrownBag', this._qs("#AttendedBrownBag").value);

The site that I moved my code to was heavily customized and it was a publishing site.  I’m not sure if it was the customization or the publishing feature that made my JSOM code to break but after much digging and debugging, I added the following libraries to my html and it worked perfectly.

/_layouts/sp.core.js
/_layouts/sp.runtime.js
/_layouts/sp.js

I hope this helps someone.  Thanks and please leave a comment if you find this helpful or insightful. Also, you are welcome to provide any feedback.  I can take it.  🙂

In the past few weeks, I have been fascinated with how easy VUE.js is to learn and to use.  Not only is it easy to use but it easily integrates with SharePoint.  For those of you not familiar with VUEJS, it is a JavaScript framework that makes development much fun and efficient.  Out of all the frameworks (angular, react, etc), I found vuejs to be straightforward without the complexities of a lot of frameworks.

In this blog post, I will show you how to do something very simple, which is to render SharePoint list data onto a page using VUEJS.  But first, lets understand the foundation of how VUEJS works.  First, you must have a reference to the vue library in your page, like so

To start, we will create an instance of VUE. “Every Vue application starts by creating a new Vue instance with the Vue function.” For us to link data to our view, we must add properties to our data object. The data property will contain the data that will be displayed in our html, in this case message.  There are many types of properties we can add to our vue instance such as “method”, “created”, but we will go over that later and probably in future blog posts.  Here’s an example of creating an instance of VUE.

Here’s a link to JSBIN with the code above https://jsbin.com/safapen/edit?html,output

Change the message in the data property of the Vue instance and watch how reactive the HTML is.

Now that we have that out of the way.  How do we get this to work in SharePoint?

I have a list called ‘siteAdmins’ with 4 columns (‘Email‘, ‘First Name‘, ‘Last Name‘, and ‘Phone‘).

Here’s the html code with explanation of what’s happening

In the code above, the following line loops through the ‘user’ array and builds the rows to our table as it populates the cells with data from our list.

We use the ‘v-for‘ directive to achieve the looping.

Here’s the js code with my VUE instance with some detail.

In the image above, I have a generateData function that’s not really doing anything. I kept it in there just to show that you can have any number of functions within the data method that you can call upon. Here’s the results showing the rendered data from my list and the effects of v-for and v-if directive.

Rendering the data in an html table is just an option. You could have also used DIV’s.

Here’s the jsbin that shows the same code but the data is coming from https://jsonplaceholder.typicode.com. This site is a “REST service that you can use whenever you need some fake data.”   Here’s the fake data.

Have you ever had to deal with the ‘Multiple-Selection List box’ in InfoPath? What a headache it can be if you are  not familiar with how to get the selected values.

I am using an infoPath 2013 form with SharePoint. I had a multiple selection list box called request with the following values “Software, Space (West Only), Workstation, Mobile Device (Region & Employees only)”. 

I created a rule on form submit with the following condition: 

Condition: Value = “Mobile Device (Region & Employees only)” 

Rule type: Action 

Run these actions:* Set a field’s value: Status = “Pending”

It basically reads, if the selected value of ‘Requesting'(shows as Value) is equal to “Mobile Device (Region & Employees only)” , set the ‘Status’ value, found in SharePoint, to “Pending”.  Well, that didn’t work and it took me a while to figure it out. Thanks to Data (That’s what I call google-Someone should create a search engine called ‘Data’ like the star trek dude), I was lead to infoPathDev site and got the help I need.

Here was the solution:

When you create your rule and are in the condition area, “Select a Field or Group” –> Choose your Multiple-Selection List field name (‘Requesting’ for me)–>”Show advanced view”–>Expand the folder and select ‘value’–>In the select drop down below, select ‘Any occurrence of Value’–>Click ‘Ok’ and ‘Ok’.

It will now read, if any occurrence of ‘Requesting’ is equal to “Mobile Device (Region & Employees only)”, set the ‘Status’ in SharePoint.

Hope that helps someone.

InfoPath your way to the top. 🙂