2

Get recurring event from calendar list using Angular JS

Getting recurring event from calendar list using Angular JS is some bit tricky.
I am going to implement through CEWP(Content editor web part) in SharePoint.

1. Create HTML file for display events description(Angular View)


<html ng-app="myApp">
	<head lang="en">
		<script src="jquery.min.js"></script> 
		<script src="angular.min.js"></script>
		<script type="text/javascript" src="main.js"></script> 
	</head>
	<body>
        <div ng-app="myApp" ng-controller="myCtrl">
            <div ng-repeat="result in results">   
                <div>{{result.Title}}</div>
                <div>{{result.Description}}</div>
                <div>{{result.StartTime}}</div>
                <div>{{result.Location}}</div>
            </div>
        </div>
	</body>
</html>

Give the reference of Jquery and Angular js from your SharePoint site.

If you want to display upcoming limited(suppose top 5) events then you can add condition which is inbuilt facility of Angular JS

Add condition(ng-if) in Angular repeat section

<div ng-repeat="result in results" ng-if="$index < 4">   

2. Now Create one JavaScript which will get all events from calendar event list and check event start date with current date and display only feature events only.


var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) 
{
    $scope.results = [];
	var currSiteUrl = _spPageContextInfo.siteAbsoluteUrl;
	var webUrl, calendarListName;
	webUrl= currSiteUrl;
	calendarListName='Events'; 	
	wsURL = webUrl + "/_vti_bin/Lists.asmx";	 
    $scope.request =
        "<soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'> <soap:Body>" +
        "<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>" +
        "<listName>" + calendarListName+ "</listName>" +
        "<query>" +
        "<Query>" +
        "<Where>" +
           "<DateRangesOverlap>" +
           "<FieldRef Name='EventDate' />" +
           "<FieldRef Name='EndDate' />" +
           "<FieldRef Name='RecurrenceID' />" +
           "<Value Type='DateTime'><Year/></Value>" +
           "</DateRangesOverlap>" +
        "</Where>" +
        "</Query>" +
        "</query>" +
        "<queryOptions>" +
        "<QueryOptions>" +
            "<ExpandRecurrence>TRUE</ExpandRecurrence>" +
        "</QueryOptions>" +
        "</queryOptions>" +
        "</GetListItems>" +
        "</soap:Body></soap:Envelope>";
 
	var results1 = [];
	$http({
        method: 'POST', 
        url: wsURL, 
        async: false,
        data: $scope.request, 
        headers: {
            'Content-Type': 'text/xml; charset=\"utf-8\; action="http://schemas.microsoft.com/sqlserver/reporting/2010/03/01/ReportServer"'
        }
    })
    .success(function(xData, status, headers, config){       
        if (status === 200)
        {
             var root = $(xData);
                    root.find("listitems").children().children().each(function () {
						$this = $(this);
						var ids = $this.attr("ows_UniqueId").split(";");
						var rec = $this.attr("ows_fRecurrence");
						results1.push({
							"StartTime": $this.attr("ows_EventDate"),
							"EndTime": $this.attr("ows_EndDate"),
							"Title": $this.attr("ows_Title"),
							"Recurrence": (rec === "1" ? true : false),
							"Description": $this.attr("ows_Description"),
							"Location":$this.attr("ows_Location"),
							"Guid": ids[1],
							"Id": ids[0],
						});
                });
        }
	    var filtered_item = [];
	    for (var i = 0; i < results1.length; i++) 
		{
			var current_Time = new Date().getTime()
			var Start_Time = new Date(results1[i].StartTime).getTime();
			if (Start_Time  >= current_Time) {
				filtered_item.push(results1[i]);
			}
		}
      $scope.results =  filtered_item;
    })
    .error(function(data, status, headers, config){
        console.log('In Error');
        console.log(data);
    }); 
});

To get the recurrence event we have added parameter “ExpandRecurrence” with value “True” by which we can identify that event is recurrence or not.

In output you will get Title, Description, Start time and location of event. You can customize as per your requirement and apply css also.

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 🙂

3

Sharepoint Error “A type named ‘SP.Data.DemoYourListItemas’ could not be resolved by the model. When a model is available, each type name must resolve to a valid type.” While adding list item in list using REST API

Hello Developers..

Today while playing with REST API i got some mysteries error like “A type named ‘SP.Data.DemoListItemas’ could not be resolved by the model. When a model is available, each type name must resolve to a valid type.

After working on it i found solution and cause of due to which error occur.

Let me tell you that this error occur during inserting list item in list using REST API. While adding item in list we must pass “ListItemEntityTypeFullName” of list so that REST API can know type of list.

So now question is that how to find ListItemEntityTypeFullName of list.

You need to make REST query and fire in as url like:

http://SharePointFarm:1000/Tag/Site/_api/Web/Lists/GetByTitle(YourListNameWithApostophe)?$select=ListItemEntityTypeFullName

Run this REST url in browser. You will get ListItemEntityTypeFullName in output.

FireShot Capture -  - http___bidsp03_1000_student_StudentRecords__api_Web_Lists_GetByTitle('todol

Now add this list type in your REST Query.

var listurl = _spPageContextInfo.webAbsoluteUrl + “/_api/Web/Lists/GetByTitle(‘ListItem’)/Items”;
var data = {
__metadata: { ‘type’: ‘SP.Data.ListType‘ },
Title:’Test’,
}

$.ajax({
url: listurl ,
type: “POST”,
async : false,
headers: {
“accept”: “application/json;odata=verbose”,
“X-RequestDigest”: $(“#__REQUESTDIGEST”).val(),
“content-Type”: “application/json;odata=verbose”
},
data: JSON.stringify(data),
success: function (data) {
console.log(data);
},
error: function (error) {
alert(JSON.stringify(error));
}
});

Now you will not get any error like this while adding item in list using REST API.

Happy Coding…!!