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

• AngularJS: prevent form validation in Page Edit Mode
• angular jQuery UI autocomplete
• AngularJS: sync $location.search with an input value

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:

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):

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()
}

comments from wordpress

Jens Malmberg — 2013-01-03

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: [![](https://sharepointkunskap.files.wordpress.com/2012/01/isdlg.png "isdlg")](https://sharepointkunskap.files.wordpress.com/2012/01/isdlg.png) So now I update the previous function to this:

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

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).

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

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.