Today i will show you how can you get internal field names in a SharePoint List Items.
As you know SharePoint have two types of Names – Internal Name and Display Name, it is extremity important when you are developing SharePoint solution get your fields by internal name, the InternalName never changes, you only can change DisplayName, this maintain your solution stable.

So let’s Look some ways to get the Internal Name:

1. Open the List Settings page
2. Under the Columns section, select a column to view the Edit Column page
3. The URL of this page includes the internal name in the query string. For example, the URL for the Created By field includes the following query string List=%7BF641CEF1%2DCDE2%2D49E1%2D9800%2D861A408EF890%7D&Field=Author. The value for the Field parameter, Author, is the internal name for Created By.

You can also apply a sort order on your list view on the column that you want get the internal name, this will generate an URL that contains the Internal Name:

FolderCTID%3D0x012000DDDEBA09D4201845A62AEDBA6A906745-SortField%3DAuthor-SortDir%3DAsc-

Now i will demonstrate how you can get Internal Name by Display Name using SPGetStaticFromDisplay

 

var internalName = $().SPServices.SPGetStaticFromDisplay ({
  listName: "Cars",
  columnDisplayName: "Car Models"
});

Read more: http://sympmarc.com/2015/01/27/get-the-internalname-for-a-sharepoint-list-column/

Thanks

Fábio Carvalho
SharePoint Consultant
|create|it|

The post SharePoint Online – Internal Fields Names & how to use SPServices to get them!!! appeared first on Blog IT.

Today, in this post i will show you how can we display list data in a grid using Rest API in SharePoint Online, 2013 and 2016.
In this example, i will create a table – Cars – with 4 columns:

– Make
– Model
– Price
– Color

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function(){
    $("#btnClick").click(function(){
        var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Cars')/items";
           $.ajax({
              url: requestUri,
              type: "GET",
              headers: {
                  "accept":"application/json; odata=verbose"
              },
              success: onSuccess,
              error: onError
});

  function onSuccess(data) {
     var objItems = data.d.results;
     var tableContent = '<table id="tableCars" style="width:100%" border="1 px"><thead><tr><td>Make</td>' + '<td>Model</td>' + '<td>Price</td>' + '<td>Color</td>' + '</tr></thead><tbody>';
  
     for (var i = 0; i < objItems.length; i++) {
         tableContent += '<tr>';
         tableContent += '<td>' + objItems[i].Make  + '</td>';
         tableContent += '<td>' + objItems[i].Model + '</td>';
         tableContent += '<td>' + objItems[i].Price + '</td>';
         tableContent += '<td>' + objItems[i].Color + '</td>';
         tableContent += '</tr>';
 }
   $('#carsGrid').append(tableContent);
   }
    function onError(error) {
        alert('Error');
   }
  });
});

</script>
<input type="button" id="btnClick" value="Get All Cars"/>
<div id="CustomerPanel">
   <table id='tableCars' style="width: 100%;" border="1 px">
     <tr>
       <td>
          <div id="carsGrid" style="width: 100%"></div>
      </td>
    </tr>
 </table>
</div>

You just need to copy the code and past in a script editor webpart, if you press the button  – Get All Cars –  the result it’s a the following table:

If you are interested to read more, i recommend the following links:
https://msdn.microsoft.com/en-us/library/office/jj860569.aspx
https://msdn.microsoft.com/en-us/library/office/jj164022.aspx

Thanks

Fábio Carvalho
SharePoint Consultant
|create|it|

The post SharePoint Online, 2013 and 2016 – Display list data in grid using Rest API appeared first on Blog IT.

Right now I’m working in a banking area project. It’s a web project and we are using Knockout.JS framework.
We (developers) don’t have access to the project front-end in Production Environment. On the server side we log all errors and debug information into a table in our database. Yes, we don’t have access to our project front-end but we are able to consult (and only with read privileges) our database.

So, when happens a client side error in Production Environment, it’s pretty hard to figure out what’s wrong. All we have is a printscreen from the user.

Sometimes it’s impossible to reproduce the Production Environment error because all the development environments (LOC-DEV-STA-PRE) have different data information and different code versions with different develepments in comparison with Production Environment. So, we really need to get detailed information about client-side errors.

In this post, I’m going to show you how to log only Knockout.JS errors. So, general javascript errors will not be discussed here.

First of all, we need to write an Error Handling Binding Provider. For more information about Custom Bindings Providers please read this blog post. Please be carefull because something may have changed because it’s based on an old knockout.JS version).

// Custom Error Handler.
var MyErrorBindingProvider = function () {

	// Create a binding provider.
    var original = new ko.bindingProvider();

    // check if the element has bindings
    this.nodeHasBindings = original.nodeHasBindings;

    //return the bindings given a node and the bindingContext
    this.getBindingAccessors = function (node, bindingContext) {
        var result = {};

        // catch syntax errors when parsing binding 
        try {
            result = original.getBindingAccessors(node, bindingContext);
        }
		// Something wrong happened...
        catch (e) {
            // do whatever you want. (alert, debug, console.log, send it to server, etc)			
            if (console && console.log) {
                console.log("Error occurred in binding syntax: " + e.message, node);
            }
        }

        // catch errors when evaluating the value of a binding
        ko.utils.objectForEach(result, function (key, value) {
            result[key] = function () {
                var result = null;

                try {
                    result = value();
                }
				// Something wrong happened...
                catch (e) {
					// do whatever you want. (alert, debug, console.log, send it to server, etc)
                    if (console && console.log) {	
                        console.log("Error occurred in \"" + key + "\" binding: " + e.message, node);
                    }
                }

                return result;
            };
        });
        return result;
    };
};

Now that we have our Custom Binding Provider, we need to instantiate it.
Just add it in your document.ready function where you do your applyBindings and etc:

$(document).ready(function () {

	// my viewModel
	var viewModel = {
		firstName: ko.observable("Joao")
	};
	
	// Error Subscription while observables values changed
     ko.bindingProvider.instance = new MyErrorBindingProvider();
	
	// Apply Bindings.
	ko.applyBindings(viewModel);
});

As you have read in the begining of this post, I wrote that we don’t have access to Production environment, so we sent any knockout error to server side in order to be stored in a database table and then we are able to consult it. This can be done with a simple AJAX call. Just send what it’s been showed on console.log in this example.

Finally, here you have an HTML sample to try it by yourself:

<!DOCTYPE html>
<html>
<head>
<title>Knockout.JS Error Handling</title>

<script type='text/javascript' src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
<script type='text/javascript' src='https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'></script>
<script type='text/javascript' src='Index.js'></script>


</head>

<body>

<div>   
    <p>First name: <input data-bind='textInput: firstName' /></p>
	<span>Hello </span><span data-bind='text: firstName'></span>
</div>
</body>
</html>

Now, let’s see the difference between using our error handler and not using it.
For instance, if you forget to close your first data-bind statement:

<div>   
    <p>First name: <input data-bind='textInput: firstName /></p>
	<span>Hello </span><span data-bind='text: firstName'></span>
</div>

With our error handler:

Without our error handler:

For instance, if you are trying to data-bind an undefined observable:

<div>   
    <p>First name: <input data-bind='textInput: firstName' /></p>
	<span>Hello </span><span data-bind='text: lastName'></span>
</div>

With our error handler:

Without our error handler:

That’s it. I hope you enjoy it and have learn something.

The post How to log knockout.js errors appeared first on Blog IT.