Adding custom RTE Table Styles to SharePoint 2013

Out of the box SharePoint RTE provides 12 table styles and there are scenarios where we need to add new table styles.

As seen above, there are 12 table styles and to this we will add two more table styles

SharePoint provides extensibility framework to add custom table styles and in this post we will examine how to add custom table styles to the RTE. We can add as many table styles as we want but we need to follow some naming conventions so that RTE knows to add those custom table styles

In order to add new table styles, we need to extend "ms-rteTable" class and we need to prefix our own name to "ms-rteTable".

If we don't use "ms-rteTable" then new table styles wont appear in the table drop down.

Steps:

 

 

1. Create a new CSS class and I created a class name called customRTETableStyles.css
2. To this css class, I have created the below styles
4. In the above CSS class, I have created my own table style by extending ms-rteTable and I have given the same as "ms-rteTable-myCustomTable"
5. -ms-name: Give some name to property that you wanted to see in the table style drop down.
6. In this case I have given the name as "My Custom Table" and this name will appear at the bottom of all the table styles
7. Save the above CSS file into any sharepoint document library and preferably "Style Library"
8. Refer that css file in your master page
9. Edit any Rich HTML Field or Content Editor Web Part
10. Insert Table and highlight the table and go to Design tab in the ribbon
11. Under table styles, you should see our new table style as shown below

If you select the above table style, the table inside the Rich HTML Field and Content Editor Web Part will have that table style and in this case it is having the following features

1. Table header will be having blue back ground
2. Table border will be having gray color
3. Padding is 10px


In order to add new RTE table style, copy the above code and replace "myCustomTable" with new name and new RTE table style will appear





 

Using jquery templates to display sharepoint list data on the client side using JSOM

The following post will provide a scenario where you want to format sharepoint list data data using jquery template and everything on the client side using JSOM

As every body might aware that SharePoint online wont allow server side coding and everything needs to be written on the client side only

In the SharePoint online world, the developer should be using JSOM to retrieve the sharepoint data. Once the data is retrieved, the data should be presented to the user in a presentable way and in this post we will see how you can use jQuery, jQuery Templates to display SharePoint list data.

For this post, I will consider a SharePoint list called Customers and I have the following list columns inside that Customers list

1. First Name
2. Last Name
4. Email

When displaying the data, I wanted to combine First Name and Last Name and I want the email to be an hyperlink for the First Name and Last Name and I want to display the data as an unordered list. The final output will look something like this

This post will explain how we can do the same in SharePoint online using JSOM, JQuery and JQuery Templates

The first step in getting the data from the sharepoint list is to get reference to SharePoint and to get a reference to SharePoint context we need to load required Sharepoint JS file and the JS that needs to be loaded is SP.js. The following code snipped will show that information


In the above function we have created a small function called GetSharePointListData and to that function we are passing the list name and the CAML query that needs to be executed on the list, there is also an anonymous function called OnGetSuccess and we will discuss more on this later in this post
We have created another function called getData and in this function we will fire a request to SharePoint and fetch the data.



The following code will show the information on how to get context to SharePoint



Once you get a context to SharePoint, the next step will be, try to get context to the current web and the list from which you want to retrieve the list items and display the results




Once we set all the context, fire an async request to SharePoint and the following code will show that information



In order to display the data in the format that we require, we need to store the data on the client side that is retrieved from the SharePoint.

To store the data on the client side, we will use JSON and in the above code snippet, we are using dataset[] variable for that purpose.

For each and every item that we are getting from the sharepoint, we are storing that information in JSON array and we are using the following code snippet to store the data into JSON array



 Once we get all the data, we return the data from the function using the anonymous function that we are passing as a parameter to _getData function

onGetSuccess(that.DataSet);

that.DataSet contains all the sharepoint list data in json format. The following code will show how the list data looks like in JOSN format



If there is any error that SharePoint returns, we are capturing that information in another anonymous function and in that function we are calling another function called _onFail and in that function you can capture sharepoint error and update the UI accordingly.

Once we have the JSON data, we can make use of JQuery and JQueryTemplate plugins to display the data accordingly. We can make use of other plugins such as UnderScore or some other plugins for displaying the data. In this post we are using jQueryTemplates for displaying the data

The following code will show, how we can call the function GetSharePointListData and pass the required parameters. The following code snippet will show that information

GetSharePointListData(spListName, camlQuery, function (data) {
    $("#customerTemplate").tmpl(data).appendTo("#ulCustomer");
});

 In the above code snippet, #customerTemplate is the jquery template where we have written how the data should be displayed and formatted and more on this later in this post

To that template we are passing the data (JSON data) and we are appending the completed HTML to ul tag with the name "ulCustomer"

The following code snippet will show customerTemplate html template with the place holders for the data that is coming from JSON data



I am displaying the data in un-ordered list format, where FirstName and LastName becoming an hyperlink and on clicking of the hyperlink, default email client will open

The final output of the data will look like this

References

jQuery Template: http://plugins.jquery.com/loadTemplate/1.4.4/

Let me know your comments on this post
 

How to get all versions of a sharepoint list using JSOM

There are many scenarios where the user wants to retrieve the SharePoint list item versions. In SharePoint 2013 world, Microsoft recommends to use client side libraries  to do most of the operations.

In this post we will see how we can retrieve SharePoint list item version using client side SharePoint libraries and especially using JSOM

Here are the steps I used to retrieve list item version using JSOM

Step 1:

Get the list name and try to retrieve the list items data for which you need the versions

 

spList name is the SharePoint list from which you want to retrieve the list items

camlQuery helps in getting the required data from the sharepoint list

SP.SOD.executeFunc(key, functionName, fn)  - Refer to the following link for more information on  this function

Step 2:

The below code gives the versions of all the items for the given list name.

The below steps explains the above code in more detail

 

Get the reference to SharePoint context and the below code will show the snippet for getting sharepoint context

 

 

Get the reference to current sharepoint web  and the list with the help of sharepoint context reference that we got from the above code snippet

 

 

Get individual list items. Fire an async query and get individual list items.

 

 

Every list item in sharepoint lists is like url and any list item will be represented as 'path to site collection/Lists/list name/'+id+'_.000'.  id represents the current list id

 

Get reference to individual list item info with the following code snippet

web.getFileByServerRelativeUrl(filePath) and execute the code 

 

get_versions() api will give all the versions of the current list item.  

Execute the query async again after calling the function get_versions().

 

 

 get_url() will have the information regarding the version history number of the list item 

 

Once versioning has been enabled, version data can be accessed from a special virtual directory called _vti_history

 

Refer the following url for more information on version number for the sharepoint list items

SharePoint Version Numbers

 

Once we get the list item version, the other obvious questions was, how to get the data associated to that version.

 

There are api's available to get the list data associated to that history version and what I found was, accessing the list item from the version history will always give me file not found error. So the only way to get the list item data for that version number is to use some html scrapping and by using some jquery syntax

 

Version history data of a particular list item can be accessed from a sharepoint url as shown below

 

Site collection complete url/Lists/ListName/DispForm.aspx?ID=265&VersionNo=1024

 

ID = 265 represents the current list item id and VersionNp 1024 represents major version 2 of the list item

 

In that page, list item data are enclosed with in a table with a called "ms-formtable" and with the help of some jquery we can get all the data from that class.

 

I have used the below jQuery code to get all the list item data