SharePoint 2010 Modal Dialogs – Richer UI’s

By Daryl HumanSenior SharePoint Consultant – SharePoint Konsult

Introduction

• Daryl Human – SharePoint Konsult– ASP.Net Developer for 8+ years– MCTS– SharePoint Consultant for 5+ years– Worked in Finance, Government, Tourism &

Banking industries.

Presentation Agenda

• Introduction to SP.UI.ModalDialog Class• Create a basic popup dialog• Dialog Properties• Adding notifications• Use the OM to create a list.• References• Questions

SharePoint Konsult

• Specialist in SharePoint delivery and support • A division of SMC Enterprise (Pty) Ltd• SMC - Established in 1999 • Microsoft and SAP Partner status• BEE - AAA Level 1 Empowerdex Rated• Staff compliment of 60.• Operating from Cape Town (Head Office),

Johannesburg, Durban and USA

Key SharePoint Offerings• ECRM Maturity Assessment• SharePoint Roadmap• Enterprise Content Management

(DMS, RMS, Social Networking, Scanning & Imaging, BPM)

• Internet, Intranet & Extranet implementations• User Interface/User Experience Services• SharePoint-SAP Integration• Change Management • SharePoint Management Services

Our Customers Include:Public Sector• City of Cape Town• City of Tshwane • PetroSA• TCTA• Services Seta• LG Seta• Broadband Infraco• PGWC• W. Cape Provincial Parliament• Parliament of the RSA• SAMSA• CTICC

Private Sector• Old Mutual • Woolworths• Vodacom• Pick n Pay• LabCorp (USA)• Saudi Aramco (Middle East)• Pioneer Foods• Foord Asset Management• Acsis• SharePoint Konsult • Luxottica/Sunglasses Hut• E-TV

Our PartnersAccess SharePoint Offline / Outlook Integration• Sync SharePoint sites to laptop• Take document libraries offline

SharePoint DRP Management• Data protection• SharePoint storage optimization• SharePoint integration and migration

Ontolica Search• Advanced FAST like features without the cost• Full document preview in search results• Detailed search reports

AIIM SharePoint Certification Program• Internationally recognized SharePoint training for Business Users

The SP.UI.ModalDialog Class

• Useful when some sort of administrative feature or user feedback is required.

• If you look at the SharePoint 2010, you’ll notice a focus on modal views.

• Look at some of the most commonly used properties:

SP.UI.ModalDialog Properties• url: Contains the URL of the page that appears in the dialog.• html: Contains the HTML of the page that appears in the

dialog. Note: if both url and html are specified, url will be used. You need to specify at least one of the two.

• width - The default is 768 if not specified and auto sizing is disabled.

• height - The default is 576 if not specified and auto sizing is disabled.

• args - Contains an object or other data that can be passed to the dialog. Optional.

Creating a basic popup dialog

• Live demo

Setting Properties for the Dialog

• Live demo

Adding Notifications• Live demo• // Dialog callback

function CloseCallback(result, target) { if (result == SP.UI.DialogResult.OK) { //Get id messageId = SP.UI.Notify.addNotification("<img src='_layouts/images/loading.gif'> Creating list <b>" + target + "</b>...", true, "Dialog response", null); //Create list using client OM //createList(target);} if (result == SP.UI.DialogResult.cancel) { SP.UI.Notify.addNotification("Operation was cancelled...", false, "", null); } }

Using the OM to create lists

• Live demo

References• The SP.UI.ModalDialog Class:

http://msdn.microsoft.com/en-us/library/ff408909.aspx• The SP.UI.ModalDialog Properties:

http://msdn.microsoft.com/en-us/library/ff410058.aspx• Blog:

www.dizzyonsharepoint.wordpress.com• Twitter:

@DarylHuman

Questions