July 6, 2012

Issue with RichTextbox in SP:Modal Dialog Box


When you have a RichTextBox in your custom form which you need to display as a Sharepoint: Modal Dialog Box, some times we dont see correct rendering of the Control on the form.

Reason: This is because, the form is not having any reference to the CSS.
So to get rid of this issue, we need to add the below <Link> tags as to inherit the css classes and add the below <Body> tag for exact rendering of the controls.


<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/forms.css?rev=jBv2mfQnEZ0HhQvHMOlmFQ%3D%3D"/>

<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/search.css?rev=T%2Bhraxktc1A8EnaG5gGMHQ%3D%3D"/>

<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css?rev=iIikGkMuXBs8CWzKDAyjsQ%3D%3D"/>

<body scroll="yes" onload="if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();">

Showing a form in Sharepoint: Modal Dialog Box


Below is the javascript code-snippet to show a custom form in Modal-dialog Box:

-- Add the code in <Script> tags
    function OpenDialog(strPageURL) {
        var dialogOptions = SP.UI.$create_DialogOptions();
        dialogOptions.url = strPageURL; // URL of the Page
        dialogOptions.width = 750; // Width of the Dialog
        dialogOptions.height = 500; // Height of the Dialog
        dialogOptions.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
to capture dialog closed event
        SP.UI.ModalDialog.showModalDialog(dialogOptions); // Open the Dialog
        return false;
    }

    function CloseCallback(result, target) {
        location.reload(true);
    }

-- Call the function as shown below
<a class="MBbuttontop" href="/Admin/SitePages/CalendarAdd.aspx" onclick="javascript:return OpenDialog('/Admin/SitePages/CalendarAdd.aspx');" target="_blank"><span>Add Calendar</span></a>

Note: So when you click on "Add Calendar" link you will shown a Modal-Dialog popup with your custom form.

Migrate SharePoint 2010 Infopath to SharePoint Online

 Below are the steps to follow to migrate the Infopath data to SP Online.