CHUVASH.eu

CHunky Universe of Vigourous Astonishing SHarepoint :)

Tag Archives: ModalDialog

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"
	};
}

Callouts in SharePoint 2013 Preview

While ModalDialog is not default for editing list items in SharePoint 2013 Preview, there is a new “popup” element in SharePoint – callout or popover. I would like to recommend these two blogs when you want discover more:

Andrey Markeev: Callouts (popovers) в SharePoint 2013 Preview (in Russian)

Alex Boev: a three part series:

1. Custom Callouts in the SharePoint 2013 Metro UI: Part 1: Basics
2. Custom Callouts in the SharePoint 2013 Metro UI, Part 2: Actions
3. Custom Callouts in the SharePoint 2013 Metro UI, Part 3: CalloutManager

To get introduced with callouts in SharePoint 2013, you can run this code (from Andrey Markeev’s blog):

myCustomCallout = calloutManager.createNewIfNecessary({
    ID: 'myCallout1',
    title: 'Hello world!',
    content: 'Please, click here.',
    launchPoint: $get('ctl00_DeltaPlaceHolderPageTitleInTitleArea')
});
myCustomCallout.open();

Which will result in:
Custom Callouts in SharePoint 2013 Preview (from Andrey Markeev's blog)

SP.UI.Notify in Modal Dialog

If you open a custom page (not a list item form) in a modal dialog, your notification won’t be shown. The reason is that the notification area (#notificationArea) is inside a hidden div (#s4-ribbonrow). To show this notificationArea we must display the notification area:

var $ribbon = jQuery("#s4-ribbonrow");
if ($ribbon.is(":hidden")) {
	$ribbon.css({"min-height": 0, "height": "0px"})
          .show().children().hide()
          .filter("#notificationArea").show()
}

Run javascript code except it is inside a modal dialog

Want to run some javascript code everywhere, but not in a modal dialog. Because errors are occured, or this code is unnecessary i dialogs. Well here is a solution I have found after some experiments:

$(document).ready(function() {
  if (!window.location.href.match(/isdlg=1/i)) {
    onDocumentReadyExceptItIsInDialog();
  }
});

function onDocumentReadyExceptItIsInDialog() {}

This code checks with Regular Expressions if the url of the parent window contains IsDlg=1, if so nothing happens. In the usual case (not inside a dialog), the javascript code runs.

EDIT: after I wrote this I actually found that this is the way SharePoint itself does:

So now I update the previous function to this:

$(document).ready(function() {
  if (window.location.search.match(/[?&]isdlg=1/i)) {
    return;
  }
  onDocumentReadyExceptItIsInDialog();
});

function onDocumentReadyExceptItIsInDialog() {}

An alternative way to check if it is inside a modal dialog is not SharePoint-specific:

isInIFrame = (window.location != window.parent.location) ? true : false;

But what if it is some other frame element than a modal dialog…

Pass arguments from/to Modal Dialog

To pass arguments from a ModalDialog is easy. Provide some buttons and invoke close function:

SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, someValue);

The first argument is result, it is a enumeration with three alternatives: cancel, invalid and OK.

The value you pass back to the main window can be a simple string, or a complex javascript object.

In this example I’ll create a html element which is hidden (id=”modal-form” class=”s4-die”):

<div id="modal-form" class="s4-die">
   <input type="text" class="todo-text"/><br/>
   <input type="button" value="save"
      onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, {title: 'Johannes', property: $(this).siblings('.todo-text')});"/>
   </div>

Then we get the hidden html element and pass it as options to Modal Dialog, provide a callback (cb).

var t = $("#modal-form").clone(true).removeClass("s4-die").get(0);
function cb(result, value) {
	console.log("result: " + result);
	console.log("value: ");
	console.log("title: " + value.title);
	console.log("property: " + value.property);
}
var options = {
	html: t,
	title: "hej",
	dialogReturnValueCallback: cb }
SP.UI.ModalDialog.showModalDialog(options);

Pay attention to clone function. You must copy your div in order to use it more than one time. Therefore we have refine the selection of the input: $(this).siblings(‘.todo-text’), otherwise wrong input is selected.

A tip for further reading: SharePoint Development blog.

If some values shown on the page must be refreshed, just invoke RefreshPage, like Tobias Lekman suggests.

Pass arguments to Modal Dialog and use it

In options you pass to SP.UI.ModalDialog.showModalDialog you can define args property. It can be any object with any complexity.

var options = {
	//...
	args: {
		title: "title from arguments"
	}
};
SP.UI.ModalDialog.showModalDialog(options);

To use it in a modal dialog, you have to get the args this way:

var args = SP.UI.ModalDialog.get_childDialog().get_args();

It is even better to ensure sp.js is loaded:

ExecuteOrDelayUntilScriptLoaded(function(){
    var args = SP.UI.ModalDialog.get_childDialog().get_args();
    var title = args.title;
    console.log(title);
}, "sp.js");

styra css för modaldialog

Säg du har application page med samma master page som resten av portalen. Men vad göra om du vill ändra css bara om den är i modal dialog. Overrida dina css-regler genom att lägga till .ms-dialog. .ms-dialog är css-klassen som läggs på html-taggen om sidan laddas i modaldialog:

html.ms-dialog body {
  background-color:white;
}

Använd inbyggd ModalDialog

Vill du visa någon formulär, eller längre information kan du använda en snygg (snygg och snygg?) ruta som är default i Sharepoint. Den är i alla fall användbar.

Här är ett litet enkelt exempel, för att illustrera:

var options = {
   url: "http://sverigesradio.se",
   width: 800,
   height: 600,
   allowMaximize: false
};
SP.UI.ModalDialog.showModalDialog(options);

Det finns även möjlighet att ha OK-knappen, alltså som alert i javascript. Kolla den här länken.

Discovering SharePoint

And having fun 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

blksthl

Mostly what I know about SharePoint - CommunicoCuspis