Tuesday, 14 June 2016

Open list based form in dialog box on button click.

1] Create list in sharepoint
2] Open SharePoint designer.
3] Click on "List and Library" at left side panel and select list.
4] Click on list form in list setting tab.


5] Create .js file and past below code and stored in folder of "style library".

<script src="http://code.jquery.com/jquery-1.9.1.js"> </script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><script src="/Style%20Library/jquery-1.7.2.js" type="text/javascript"></script><script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script><style type="text/css">

    .buttonsave{
    background:666699;
    width:150px;
        margin-top:10px !Important;
        border:1px solid #25729a; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:14px;font-family:arial, helvetica, sans-serif; padding: 6px 6px 6px 6px; text-decoration:none; display:inline-block;font-weight:bold; color: #FFFFFF;
        background-color: #8ed058;

    }
#MSOZoneCell_WebPartWPQ4
{
    margin-top:-90px !Important;
}
.s4-wpcell ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth
{
    margin-top:-90px !Important;

}
.buttonsave:hover{
    border:1px solid #1c5675;
    background-color: #36780f;
    /*background-image: -webkit-gradient(linear, left top, left bottom, from(#26759e), to(#133d5b));
    background-image: -webkit-linear-gradient(top, #26759e, #133d5b);
    background-image: -moz-linear-gradient(top, #26759e, #133d5b);
    background-image: -ms-linear-gradient(top, #26759e, #133d5b);
    background-image: -o-linear-gradient(top, #26759e, #133d5b);
    background-image: linear-gradient(to bottom, #26759e, #133d5b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#26759e, endColorstr=#133d5b); */
}
</style><script type="text/javascript">
function AddNewProject() {
    var webUrl = _spPageContextInfo.siteAbsoluteUrl;    
    url =webUrl +'/Lists/CMR/4M.aspx?IsDlg=1';
    // OpenNewFormUrl(url);  
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', OpenNewFormUrl(url));
}

function OpenNewFormUrl(url) {
    var options = {
        allowMaximize: false,
        showClose: true,
         

    };
    SP.SOD.executeFunc('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', function () {
        SP.UI.ModalDialog.commonModalDialogOpen(url, options,RefreshPage, null);
    });
    function RefreshPage()
    {
       // location.reload(true);  
    }

}
</script>
<div>
   <button class="buttonsave" onclick="AddNewProject();return false;" size="150px">Add New CR</button></div>


6] then edit a page where you want to open this dialog bix.
7] Add content editor web part and refer .js file.
8] Click on Add CR button , dialog box will be opened.






No comments:

Post a Comment