CHUVASH.eu

CHunky Universe of Vigourous Astonishing SHarepoint :)

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

8 responses to “SharePoint Modal Dialog as AngularJS directive

  1. Thomas Deutsch 2013-02-25 at 11:29

    Hi Anatoly.
    I also work with SharePoint and Angular.
    There is a different way to detect the edit-mode – you can use the app-tokens. But i have a problem.
    If you would use this url in your app (with the hash prefix : #)
    ~appWebUrl/Content/index.html#?{StandardTokens}

    then the StandardTokens would not get added to the page call.
    it would simply be ~appWebUrl/Content/index.htm – and i do not know why.

    If you would make the call without the # – the app-tokens are added.
    Do you have any solution for this problem?

    • Anatoly Mironov 2013-02-25 at 11:35

      Hi Thomas! Wow! Really nice to hear that there are more people who are working with Angular in SharePoint. We can share our expieriences. Unfortunately I haven’t worked with SharePoint apps yet, so I haven’t any solution for the mentioned issue. But I can take a look at it. Do you also want to detect the edit mode? Or is it something else? As far I know, you can’t use {StandardTokens} in the url after the #. SharePoint won’t parse them because they are not in the location.search.

  2. Thomas Deutsch 2013-02-25 at 17:14

    I would love to exchange some expieriences.
    Here you can find all the Token you will get, when an app-part is called:
    http://blog.sharepointalist.com/2013/02/sharepoint-2013-app-part-tokens.html

    There is also a “editMode” param i need to use in my angular app.
    When there is no workaround for the # issue, i think it would make sense to read the string manually.
    var params = document.URL.split(“?”)[1].split(“&”);
    and then call he angular url with the params … i will try this 🙂

    • thomasdah 2013-02-25 at 17:38

      It worked! … i made a start.html with one line of JS-code in the hader:
      self.location = ‘index.html#/?’ + document.URL.split(‘?’)[1];

      As you can see, i called my index.html and angular gets all SP params ;D yeah!

      • Anatoly Mironov 2013-02-26 at 23:02

        It is awesome! I want to investigate more. Angular seems to be a very powerful tool in the powerful SharePoint!

    • Anatoly Mironov 2013-05-17 at 10:21

      Hi, Thomas. I have tried out the editMode. like the SharePointalist says. But unfortunately, the editMode is “1” (true) only when your are editing your app part, not if the host page is beeing edited.

  3. John 2014-12-10 at 00:10

    Hi Anatoly
    I’m trying to pass values from the modalOptions button action to create a dynamic html variable. The show function works file but I see no modal dialog pop up. Any ideas?
    Thank you.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Вула Чăвашла

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

Discovering SharePoint

And going crazy doing it

Bram de Jager talking Office 365, SharePoint and Azure

My view and thoughts on Productivity and more.

My programming life

and everything in between

SharePoint Development Lab by @avishnyakov

It is a good place to share some SharePoint stories and development practices.

SharePoint Dragons

Nikander & Margriet on SharePoint

RealActivity - Real-time and trustworthy

Blog site of founder, RealActivty - Paul J. Swider

Mai Omar Desouki - Avid SharePointer

Egyptian & Vodafoner - Senior SharePoint Consultant

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

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, ya mama

Treacle tarts for great justice

... And All That JS

JavaScript, Web Apps and SharePoint

%d bloggers like this: