I was retrieving Activity data from a Microsoft CRM 2011 REST query. I wanted to have a popup with more information. I decided to use the built in showModalDialog. The problem was that all the examples I found showed how to popup an existing page. I wanted the modal to contain data that didn’t exist anywhere. The solution was to use the following code, specifically create a divElement and set the innerHTML to html that contained the data I want to show. I threw in some typical SharePoint css classes to keep the same look and feel as the rest of the site.
displayActivityModalDialog = function () { var divElem = document.createElement('div'); var htmlOutput = '<div class="ms-bodyareacell"><table>' htmlOutput += '<tr><td width="190" class="ms-formlabel">Type:</td><td class="ms-formbody">' + this.ActivityType + '</td></tr>'; htmlOutput += '<tr><td width="190" class="ms-formlabel">Subject:</td><td class="ms-formbody">' + this.Subject + '</td></tr>'; htmlOutput += '<tr><td width="190" class="ms-formlabel">Date:</td><td class="ms-formbody">' + this.ScheduledStart + '</td></tr>'; htmlOutput += '<tr><td width="190" class="ms-formlabel">Regarding:</td><td class="ms-formbody">' + this.Regarding + '</td></tr>'; htmlOutput += '<tr><td width="190" class="ms-formlabel">Organizer:</td><td class="ms-formbody">' + this.Organizer + '</td></tr>'; htmlOutput += '<tr><td width="190" class="ms-formlabel">Description:</td><td class="ms-formbody">' + this.Description + '</td></tr>'; htmlOutput += '<tr><td width="190" class="ms-formlabel">Other Attendees:</td><td class="ms-formbody">' + this.RequiredAttendee + '</td></tr>'; htmlOutput += '</table></div>' divElem.innerHTML = htmlOutput; var options = SP.UI.$create_DialogOptions(); options.html = divElem; options.title = "Activity details"; options.showClose = true; options.showMaximized = false; SP.UI.ModalDialog.showModalDialog(options); }
Now I can put anything in a showModalDialog!
Comments are closed.