This post was most recently updated on August 5th, 2024
In SharePoint list setting under advanced Settings link, SharePoint provide option for Launch forms in a dialog box. But it’s very difficult to manage responsiveness and other custom control management in the dialog box.. So in this post I share how to Open a List Form in a Bootstrap Modal Dialog Box.
Steps:
- Create page and open in share point designer.
- In PlaceHolderMain add following CSS and JS files.
<asp:Content ContentPlaceHolderId=”PlaceHolderMain” runat=”server”>
<link rel=”stylesheet” type=”text/css” href=”https://SiteAssets/Styles/css/bootstrap.min.css” ms-design-css-conversion=”no” />
<link rel=”stylesheet” type=”text/css” href=”//SiteAssets/Styles/css/DialogForm.css” ms-design-css-conversion=”no” />
<script type=”text/javascript” src=”https:/SiteAssets/Styles/js/jquery-2.1.4.min.js”></script>
<script type = “text/javascript” src = “https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>
<script type=”text/javascript” src=”https://SiteAssets/Styles/js/DialogForms.js”></script> - Insert New Item Form of required list in page page. This will generate code of new form in <table> structure.
- Edit table structure into bootstrap model div so add bellow code into <xsl:template name=”dvt_1.rowinsert”>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960<xsl:template name="dvt_1.rowinsert"><xsl:param name="IsInsertMode" /><xsl:variable name="Pos">_new</xsl:variable><xsl:choose><xsl:when test="$IsInsertMode = '1'"><tr><td><!--Convert table structure into Bootstrap Model Box--><div id="msDialogWrap" class="modal fade msDialogWrap" role="dialog"><div class="modal-body formModelDialog newFormWrap"><div class="formFieldSets formFieldSetOne" id="formFieldOne"><div class="form-group"><label class="col-xs-12 control-label col-sm-3" for="Title"> Title<span class="ms-formvalidation"> *</span></label><div class="col-xs-12 col-sm-9 title"><SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}"/><SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="New"/></div></div><div class="form-group"><label class="col-xs-12 control-label col-sm-3" for="FirstName"> First Name</label><div class="col-xs-12 col-sm-9"><SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="FirstName" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@FirstName')}"/><SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="FirstName" ControlMode="New"/></div></div><div class="form-group"><label class="col-xs-12 control-label col-sm-3" for="Title"> Last Name</label><div class="col-xs-12 col-sm-9 lastName"><SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="LastName" __designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@LastName')}"/><SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="LastName" ControlMode="New"/></div></div><div class="form-group"><div class="col-xs-12 col-sm-12"><input type="button" value="Submit" class="btn btn-default submitData"/></div></div></div></div><xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1"><tr><td colspan="99" class="ms-vb"><span ddwrt:amkeyfield="ID" ddwrt:amkeyvalue="ddwrt:EscapeDelims(string(@ID))" ddwrt:ammode="insert"></span></td></tr></xsl:if></div></td></tr></xsl:when><xsl:otherwise><tr><td width="100%" class="ms-vb"><a href="javascript: {ddwrt:GenFireServerEvent('__cancel;dvt_1_form_insertmode={1}')}">insert</a></td></tr></xsl:otherwise></xsl:choose></xsl:template>
- Add custom class to Save and Cancel button. Below I add class mainSaveBtn mark as a rectangle.
- Add below js code in document ready.
1234567891011121314151617$(document).ready(function(){$('.btn-info').click(function(){$('#msDialogWrap').modal({backdrop: 'static'});});//TriggerSubmit when Click on Submit btn$( ".formFieldSetThree .submitData").on( "click", function() {var TitleValue = $('.title input').val();if (TitleValue!='') {$(".mainSaveBtn input[value$='Save']").trigger("click");}else {alert('Please First Enter Title and then Submit Form.');}});}); - Add following css to open dialog.
.formModelDialog{
top: 25%;
color: #444;
background-color: #E1E2E3;
max-width: 767px;
min-height: 380px;
margin: 0px auto;
font-family:Segoe UI,Segoe,Tahoma,Helvetica,Arial,sans-serif;
font-size: 16px;
box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.47);
border: 1px solid black;
} - Add button in page to open dialog box.
1<button type="button" class="btn btn-info btn-lg">Open New Form Modal</button>
- At last click on above button to open dialog box.
