CHUVASH.eu

CHunky Universe of Vigourous Astonishing SHarepoint :)

Tag Archives: angularjs

SharePoint Modal Dialog as AngularJS directive

ng-sp-modal

It has already become a series of posts in my blog about the combination of AngularJS and SharePoint:

And it will be more. Some of them are a pure angular stuff, some of them are really for SharePoint.

In this post post I’ll show how to create a directive for a sharepoint modal dialog (SP.UI.ModalDialog). There is already a modal dialog implementation in the Angular UI project, but it uses the bootstrap modal dialog. But it custom attributes for angular”>is not that hard to create an own directive for showing sharepoint modal dialogs. I’ve called the new directive ng-sp-modal (ngSpModal). Here is this:

var ngSpModal = function() {

	link: function (scope, element, attrs, controller) {
		var dialog,
			defaults = { html: element.get(0), showClose: false },
			getOptions = function () {
				var options = scope.$eval(attrs.ngSpModal);
				return angular.extend(defaults, options);
			};
			fireSpModal: function (value) {
				if (value) {
					var opts = getOptions();
					dialog = SP.UI.ModalDialog.showModalDialog(opts);
				} else {
					dialog &&  dialog.close();
				}
			};
		// Watch for changes to the directives options
		scope.$watch(attrs.ngShow, fireSpModal, true);
	}

	return {
		require: '?ngShow',
		link: link
	};
};

window.myApp = angular.module('myApp', ['ui.directives']);

myApp.directive('ngSpModal', [ngSpModal]);

The new ng-sp-modal directive depends on ng-show. When your expression or value for ng-show for your html area is true, then a sharepoint modal dialog will open. This is achieved through a $watch command. The html area which is used to create will be copied to the modal dialog. I have used it for forms. To use it, just place this directive into your html element that you want be shown in a modal dialog. Here is a simple example to achieve what it is shown in the screenshot pasted above.

<div ng-sp-modal="modalOptions" ng-show="formShown">
    Here is the html markup for your modal dialog
    <input type="button" ng-click="formShown = false" value="Close modal">
</div>
<input type="button" ng-click="formShown= true" value="Open modal">

Here is the very simple angular controller to let it work:

function someCtrl($scope) {
	$scope.modalOptions = {
		height: 100,
		width: 300,
		title: "Yeah"
	};
}
Advertisements

AngularJS: prevent form validation in Page Edit Mode

I work on a cool project where AngularJS is used for rendering of business data in a SharePoint portal. One of the beautiful parts of AngularJS is the client validation. AngularJS understands the new html5 attributes like “required” and pattern, which makes the markup and javascript concise and semantic.

Recently I ran into a problem: The SharePoint webparts which had html forms with required fields were impossible to add to a page in the web browser, neither was it possible to edit the pages with these webparts. When I clicked on “Save”, the page tried to validate and failed.

The solution for this is very elegant, like much of the AngularJS. If you don’t show your angular form, it won’t validate. So just use any method to detect the edit mode on a SharePoint page. I created a helper function for that.

function isEditMode() {
    var publishingEdit = window.g_disableCheckoutInEditMode,
		form = document.forms[MSOWebPartPageFormName],
		input = form.MSOLayout_InDesignMode || form._wikiPageMode;	
	return !!(publishingEdit || (input && input.value));
}

In the angular controller, just define the part of it which shouldn’t be there when you are editing a page, by using ng-hide="editMode":

<div ng-contoller="PhoneCallCtrl">
   <ng-form ng-hide="editMode">
      <input type="text" required>
   </ng-form>
</div>

editMode is a $scope variable in your controller. So the last thing to do is to get the editMode value by invoking the previously defined isEditMode function:

function PhoneCallCtrl($scope, $http) {
	$scope.editMode = isEditMode();
}

Ajax and editMode

Another usage of this approach could be preventing of ajax calls when the page is being edited. There is already an example of this idea (calling ajax only in a view mode) in the standard SharePoint 2013. When you edit a page which has a Microfeed webpart. It won’t get any data until you save the page and switch to the normal page mode.

angular jQuery UI autocomplete

Angular JS is one of the most developed MVC frameworks in the javascript world. Angular UI is a huge UI-centric extension of AngularJS (it is more or less like jQuery UI to the jQuery). It uses much jQuery UI and Twitter Bootstrap and provides many own components like modal dialogs, maps, tooltips, masked inputs and much more. And all this is easy to implement in your code just by adding a directive:

<input ui-date>

Much cleaner than listening on $(document).ready, traversing the DOM and appending the datepicker in your code:

<input id="myDate">

 

$(document).ready(function() {
   var input = $("#myDate");
   input.datepicker();
});

All this code is invoked but outside your app code.

ui-autocomplete

Unfortunately Angular UI has no official autocomplete directive. There is a discussion about it on many forums. There are some working implementations. But they are not complete. I looked at how ui-date is implemented. jQuery UI Datepicker and jQuery UI Autocomplete have one in common. They are relying on a set of options. To create a directive for each option would make the html code too dirty. Here is a directive ui-autocomplete which I have written that (like ui-date) takes a options object as parameters. This options object has to be appended to the $scope variable in the angular controller:

var uiAutocomplete = function() {
	return {
		require: '?ngModel',
		link: function(scope, element, attrs, controller) {
			var getOptions = function() {
				return angular.extend({}, scope.$eval(attrs.uiAutocomplete));
			};
			var initAutocompleteWidget = function () {
				var opts = getOptions();
				element.autocomplete(opts);
				if (opts._renderItem) {
					element.data("autocomplete")._renderItem = opts._renderItem;
				}
			};
			// Watch for changes to the directives options
			scope.$watch(getOptions, initAutocompleteWidget, true);
		}
	};
};
angular.module('ui.directives').directive('uiAutocomplete', [uiAutocomplete]);

Example code

<div ng-controller="AutoCompleteCtrl" class="ui-widget">
    <input placeholder="Search..." ng-model="term" ui-autocomplete="autocompleteOptions"/>
</div>

Here is the angular controller:

function AutoCompleteCtrl($scope, $http) {
	var search = function(request, response) {
			var callback = function(data) {
				response(data);
			};
			$http.get("/api/orders/search?q=" + $scope.term)
				.success(callback);
		},

		gotoOrderDetails = function (id) {
			window.location = "/orders/" + id;
		},

		_renderItem = function (ul, item) {
			return $("<li>")
				.data("item.autocomplete", item)
				.append("<a>" + item.title + "</a>")
				.appendTo(ul);
		},

		select = function (event, ui) {
			if (ui.item) {
				gotoOrderDetails(ui.item.orderId);
			}
		};

	$scope.autocompleteOptions = {
		minLength: 1,
		source: search,
		select: select,
		delay: 500,
		_renderItem: _renderItem
	};
}

To get the options inside the directive a function called $eval is used.

Here a standard set of jQuery UI Autocomplete is used and one more: _renderItem. It is not included in the default autocomplete options, but in my case I needed to define custom rendering logic for my items.

Enjoy

Edit 2013-02-15:

I have sent a pull request angular ui. See the details here

Edit 2013-02-23:

I have added support for uiConfig and change scope.$watch invokation based on Pull Request Feedback. I also published a small gist which shows how a simple ui-autocomplete can be used.

AngularJS: sync $location.search with an input value

I have used AngularJS for a while and to me this seems to be the best MVC javascript framework.

Today I wanted to implement a search which uses an input and a hash query string like in google. The input value and url have to be synced like:

index.html#?term=something

To do this we have to inject $location into our angular control. See the Angular Guide about $location. Then we have to observe both the $scope.term (which is bound to the input value) and $location.search().

<!doctype html>
<html ng-app>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js">
    </script>
    <script src="project.js"></script>
  </head>
  <body>
    <h2>Hash Search</h2>
    <div ng-controller="SearchCtrl">
        <input type="text" ng-model="term"/>
    </div>
  </body>
</html>

and javascript (project.js):

function SearchCtrl($scope, $location) {

	var termKey = "term";

	$scope.$watch(function () { return $location.search(); }, function() {
	  $scope.term = $location.search()[termKey] || "";
	});
	
	$scope.$watch('term', function(term) {
	   $location.search(termKey, term);
	});
	
}

In order to be able to listen to changes on $location.search, you have to provide an anonymous function in $watch. Thanks to Renan Tomal Fernandes’ answer on stackoverflow.

Вула Чăвашла

VulaCV - Чăвашла вулаттаракан сайт

Discovering SharePoint

And going crazy doing it

Bram de Jager - Coder, Speaker, Author

Office 365, SharePoint and Azure

SharePoint Dragons

Nikander & Margriet on SharePoint

Paul J. Swider - RealActivity

RealActivity is a specialized Microsoft healthcare services and solution advisory firm.

Cameron Dwyer | Office 365, SharePoint, Outlook, OnePlace Solutions

Office 365, SharePoint, OnePlace Solutions & Life's Other Little Wonders

paul.tavares

Me and My doings!

Share SharePoint Points !

By Mohit Vashishtha

Jimmy Janlén "Den Scrummande Konsulten"

Erfarenheter, synpunkter och raljerande om Scrum från Jimmy Janlén

Aryan Nava

| Blockchain | Serverless Architecture | Microservices Architecture | DevOps | AWS Lambda | Teraform |

SPJoel

SharePoint for everyone

SharePointRyan

Ryan Dennis is a SharePoint Solution Architect with a passion for SharePoint and PowerShell

SharePoint 2020

The Vision for a Future of Clarity

Aharoni in Unicode

Treacle tarts for great justice

... And All That JS

JavaScript, Web Apps and SharePoint

blksthl

Mostly what I know about SharePoint - CommunicoCuspis