0

Bind ColorPicker Control to the sharepoint List field using JSlink

Hello Developers…

I am back to share something new things with you guys. and i am pleasure to sharing.

Today , First of all i m explaining you what is the business requirement .


Definition : I have created custom list(ColorList) in share point  . In this there are two column Title and Color. in the Color column type is Text . now i want to render Color column with color-picker control and save the color code to the share point list  with # . I have uploaded image below.

Captur

You can see what i want as an output.  right ?


Solution : 

first of all i have searched lots of colorpicker.js . At last i have download jquery.colorpicker.js and used it because this Js file give me almost all the functionality which is i required.

http://www.eyecon.ro/colorpicker/

You can find of colorpicker.js from this link .

Once JS is decided upload JS file to share point _catalog folder with proper naming convention . Open Your url in share point designer and Click on “All Files” -> Click on “_catalog” -> Drag An Drop Your file to this folder. Folder is automatically uploaded to the your share point server.

You have to all necessary files upload in share point.

List of files you have to include in share point.


1) colorpicker.css

2)colorpicker.js

3)Layout.js

4)Images of Color picker and layout js in proper folder.


now, open your SharePoint Page on which you want to apply Js link . That must be One or more from the three pages.

1)NewForm.aspx

2)DispForm.aspx

3)View

i have write on NewForms.aspx to fulfill requirement.

Now open NewForms in Edit mode.

Captu2

Right Click On Edit Web part -> select Miscellaneous -> Add Jslink to JSlink Tab -> Save ->Stop editing.

This is the process to bind jslink to NewForm.aspx.


Now i am explaining , What is JSlink in share point ?

-> Jslink  is simple java script to render your control with more user friendliness and attractive. you can use Jsquery,AngualrJS whatever you ant to implement.It’s a purely combination of CSS and JS File for client side rendering.

->You can apply lots of combination to the share point default pages .

What Jslink do excatly?

-> Jslink simply override your control with share-point control .

Now i m coming on code,

Jslink.js

(function () {
// Intialize the variables for overrides objects
var overrideCtx = {};
overrideCtx.Templates = {};
//overrideCtx.OnPostRender = [];
//overrideCtx.OnPostRender.push(function(){OnPostRenderFunc(); });
// Override field data
overrideCtx.Templates.Fields = {
‘Color’:   //Color is our field name which will replace by the color picker control .
{
‘NewForm’: ingredientsNewAndEdit // ingredientsNewAndEdit function to render our HTMl to sharepoint Newforms,aspx
}
};
overrideCtx.OnPostRender = postRenderHandler;
// Register the override of the field
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
function ingredientsNewAndEdit(Ctx)
{
var string = “/_catalogs/masterpage/layout.css,/_catalogs/masterpage/colorpicker.css”
string1=string.split(“,”);
for(var i=0 ; i<string.split(“,”).length;i++)
{
var link = document.createElement(‘link’);
link.id = “Css” + i;
link.rel = ‘stylesheet’;
link.type = ‘text/css’;
link.href = string.split(“,”)[i].toString();
document.getElementsByTagName(‘head’)[0].appendChild(link); //Load CSS file pro-grammatically.
var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
var FieldHtml=”<p><div id=’colorSelector’><div style=’background-color: #0000ff’></div></div></p>”
return FieldHtml;

}
function postRenderHandler(ctx)
{
if(ctx.ListSchema.Field[0].Name == “Color”)
{
$(‘#colorSelector’).ColorPicker({
color: ‘#0000ff’,
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$(‘#colorSelector div ‘).css(‘backgroundColor’, ‘#’ + hex);
}

});

}
}

OnPostRender:

Once your HTMl Control render successfully on page after that you can get that control using this property with out _postback, So you can manipulate with the control’s value property .

It’s amazing datepicker control .

2PNG

You can see the output.

If have any query or suggestion  regarding code , feel free to ask.

SharePointSwagger

Happy Coding 🙂

6

Manipulation with Sharepoint List with flavored of AngularJS and ng-Grid

Hello Developers !!!

i am sharing with such things which i have implemented. i have played with  SharePoint2013 , angularJS and ng-grid and that was seriously amazing.

Now i am going to explain scenario which i have implemented.


What u do If your client require to display SharePoint list data with CEWP(Content Editor web part) and it must be user friendly with highest look and feel ? 


I guess , you guys understand the requirement carefully!!! Now i going to one step ahead . . . .

After listening the requirement , i just thinking which JS has to implement to fulfill Requirement, i have many option like NODE.JS , Angular.JS, JQuery etc . . So i think and tell my self.

Let’s Dipen , ready to Play with Angular.JS

now i have create one custom list in Sharepoint2013. i m not explaining you this thing , because i think it’s out of the track part . but i provide you link to refer for creating list.

http://www.c-sharpcorner.com/UploadFile/644e54/sharepoint-2013-document-library-list-settings/

Now, how many things you have to want to implement this things.


1) Index.HTML //To display the content in CEWP

2)Angular.Js

3)ng-grid.Js and ng-grid.css

4)If  you wan to add bootsrap than call bootstrap.css

5) main.js  // your Scripting Logic and events are handled int his js file


now , i mention below index.HTMl File which i have created.

Index.HTML

<!DOCTYPE html>
<html ng-app=”myApp”>
<head lang=”en”>
<title>CustomList</title>
<link data-require=”bootstrap-css@3.2.0″ data-semver=”3.2.0″ rel=”stylesheet” href=”bootstrap.min.css”/>
<link rel=”stylesheet” type=”ng-grid.css”/>
<link rel=”stylesheet” type=”text/css” href=”style.css”/>
<script src=”jquery-1.8.2.js” type=”text/javascript”></script> // not necessary to add
<script src=”angular.js” type=”text/javascript”></script>
<script type=”ng-grid-1.3.2.js”></script>
<script type=”main.js”></script>
</head>
<body ng-controller=”MyCtrl”>
<div class=”gridStyle” ng-grid=”gridOptions”></div>
</body>
</html>

Step 1 : Here ,  i have declare one <div> and class=”gridStyle” grid style is a inbuilt class of the Angular ng-grid.

  • ng-app : Root Element of the HTML.The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application.The ngApp directive designates the root element of the application and is typically placed near the root element of the page – e.g. on the <body> or<html> tags.

  • ng-Controller: Actually AngularJs is working on basic concept of Modal , View and Controller . ng-Controller is a inbuild property in angular. Now,You have question Right ? Why it is necessary to write? Exactly, it is most important . if you are not include than you can not use your Scripting logic with HTMl element.

    The ngController directive specifies a Controller class.The class contains business logic behind the application to decorate the scope with functions and values.The type of the ng-Controller is “Expression“. ng-controller="as propertyName".

  • ng-grid=”gridOption” is a inbuilt property in Angular. “gridoption” is custome option list which is created by coder in custom js File . ii know you guys are little bit panic or confuse , but trust me , Honestly saying You can understand better , how to work this at end of the post .

Main.JS

var app = angular.module(‘myApp’, [‘ngGrid’]); // myApp is our Root Element of the HTML. Ican say it’s Container to contain the element and data binding.
app.controller(‘MyCtrl’, function($scope,$http) { // Myctrl is controller
$http({
method: ‘GET’,
url: _spPageContextInfo.webAbsoluteUrl + “/_api/web/lists/getByTitle(‘Task’)/items?$select=Title,CustomDate,Modified”, //rest Api to get the a Data from the Sharepoint list .
headers: { “Accept”: “application/json;odata=verbose” }
}).success(function (data, status, headers, config) {
$scope.totalServerItems = data.d.results;
}).error(function (data, status, headers, config) {
alert(“Error Occured” + “Status Code = ” + Status);
});
$scope.gridOptions = {
data: ‘totalServerItems ‘,
columnDefs: [
{field: ‘Title’, displayName: ‘Title’},
{field: ‘CustomDate’, displayName: ‘Date’,cellFilter: ‘date:\’dd-MMM-yyyy\”}]
};

$scope,$http ? What is it ?  . . Wait wait wait … i m going explain it in detail . . . 🙂

Scope As Data-modal :

Scope is the glue between application controller and the view.Both controllers and directives have reference to the scope, but not to each other. This arrangement isolates the controller from the directive as well as from the DOM.

$http A Service

The $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser’s XMLHttpRequest object .Simple language it use to get data from external sources.

columnDefs:[{}]

Column Definition to display the column to gird.There’s  bunch of options available in angular . you can utilize it depending on your requirement.I have used Field which is display no of  column to grid .

Field has two property : 1)field : which is column name which you want to display data or ic an sat binding of data. 2) displayName which renders  the column header or Title on page .

You can find other option From bellow link .

https://github.com/angular-ui/ng-grid/wiki/Defining-columns

now you can Call this index.HTMl file to  Content Editor Web part . and Refresh the page . . . You can see list of data in CEWP and That will be amazing. . .


I  tried my best to describe the concept.I hope, you guys enjoyed this blog . If have an any query , kindly leave your comment.

Happy Coding 🙂