Copyright from: blog.collabware.com
In October I posted some tips and tricks with regards to SharePoint 2010 modal dialogs. Now I’m back with some updates for SharePoint 2013.
The Dialog API has not changed much from SP2010 to SP2013. Opening, closing, callbacks, etc are the same as before and you can reference my previous post for all that stuff.
Loading Wait Screen and showWaitScreenWithNoClose
The signature for SP.UI.ModalDialog.showWaitScreenWithNoClose has not changed, but MS has updated the rendering for the UI. It no longer looks different than the default loader, so no more private API calls for us!
The default loading message has now changed to this:
You can bring this up by calling:
1
| SP.UI.ModalDialog.showWaitScreenWithNoClose(SP.Res.dialogLoading15); |
Calling the method with both title and message:
1
| SP.UI.ModalDialog.showWaitScreenWithNoClose('Loading Title', 'Loading Message Here...'); |
Looks like:
Resizing Modal Dialogs
DISCLAIMER: Some of the code below uses private functions/methods of the SP2013 API. I can’t guarantee that this will work throughout the life of SP2013 updates.
The internal variables and methods were updated in the 2013 version of SP.UI.ModalDialog. Logic remains the same and here’s the updated code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
| // wrapper which ensures SP.UI.Dialog.js is loaded before re-size fires.// (if you need to trigger a re-size in your init scripts as the JS library is loaded asyncronously)function resizeModalDialog() { SP.SOD.executeOrDelayUntilScriptLoaded(_resizeModalDialog, 'sp.ui.dialog.js');}function _resizeModalDialog () { // get the top-most dialog var dlg = SP.UI.ModalDialog.get_childDialog(); if (dlg != null) { // dlg.$Q_0 - is dialog maximized // dlg.get_$b_0() - is dialog a modal if (!dlg.$Q_0 && dlg.get_$b_0()) { // resize the dialog dlg.autoSize(); var xPos, yPos, //x & y co-ordinates to move modal to... win = SP.UI.Dialog.get_$1(), // the very bottom browser window object xScroll = SP.UI.Dialog.$1x(win), // browser x-scroll pos yScroll = SP.UI.Dialog.$20(win); // browser y-scroll pos //SP.UI.Dialog.$1P(win) - get browser viewport width //SP.UI.Dialog.$1O(win) - get browser viewport height //dlg.$3_0 - modal's DOM element // calculate x-pos based on viewport and dialog width xPos = ((SP.UI.Dialog.$1P(win) - dlg.$3_0.offsetWidth) / 2) + xScroll; // if x-pos is out of view (content too wide), re-position to left edge + 10px if (xPos < xScroll + 10) { xPos = xScroll + 10; } // calculate y-pos based on viewport and dialog height yPos = ((SP.UI.Dialog.$1O(win) - dlg.$3_0.offsetHeight) / 2) + yScroll; // if x-pos is out of view (content too high), re-position to top edge + 10px if (yPos < yScroll + 10) { yPos = yScroll + 10; } // store dialog's new x-y co-ordinates dlg.$K_0 = xPos; dlg.$W_0 = yPos; // move dialog to x-y pos dlg.$p_0(dlg.$K_0, dlg.$W_0); // set dialog title bar text width dlg.$1b_0(); // size down the dialog width/height if it's larger than browser viewport dlg.$27_0(); } }} |
2010 Experience and Version Detection
When you create a Site Collection in SharePoint 2013, you have the option of using the old 2010 experience. The SP.UI.Dialog.js file that is loaded on the page is different when in 2013 vs 2010 experience mode. Be aware that if you want to use a single artifact for your scripts, you’ll need to have different code branches. You can check in JavaScript by referencing SP.OfficeVersion.majorVersion. It will return a string of either “15” when in 2013 mode or“14” in 2010 mode.
As an example:
1
2
3
4
5
6
7
| function _resizeModalDialog () { if (SP.OfficeVersion.majorVersion == "14") { // SP2010 code here... } else { // SP2013 code here... }} |
No comments:
Post a Comment