UX & IA Design Thinking

You may say that Modal windows are what pop up were 10 years ago. Like them or hate them they have become an essential UI design element for almost any website or application. Recently I have started to see a transition of how these screens are being used. We first started seeing modals about 8 years ago when a developer named Lokesh Dhakar created a Javascript Library called “Light Box”. It was a very simple way of putting focus on one image at a time and graying out everything else. This became so popular that many people starting to throw anything and everything in these smaller focused screens. Some people call them Dialog boxes, others call them Modals but they really all mean the same thing. The main purpose is to present the user with additional information while putting the main parent page on hold until they are done. Of course with any UI design element they have been misused and abused in many different ways. I have seen some applications that have more than 3 levels of moda...

If you have ever added custom elements to your master page above or below the standard DIV tags you will notice that they start appearing in the SharePoint 2010 Modal windows when you don’t want them to. The simple fix is to use the class “s4-notdlg” on your custom element to hide it when viewing the modal pop up windows. To give you a better idea of what I am talking about I added in a simple DIV tag right above the s4-ribbon row DIV: The inline CSS below is just to make it stand out. <div class="my-customdiv">Here is my custom header</div> <style> .my-customdiv{     background-color: #009;     border-bottom: 4px #FFF solid;     text-align: center;     color: #FFF;     font-size: 10pt;     font-weight: bold;     padding: 10px;     height: 30px; } </style> Here is what the site looks like ...

To continue the conversation with the modal pop up window, I was asked the following great question: “ What if your list has different content types, each having their own form? Is there a way to make this pop-up specific to the form of a certain content type?” The answer is yes it is quite easy to link the pop-up modal window to a unique content type: You would use the same approach but you would add in the Content Type ID to the end of the URL string: <a onclick="javascript:NewItem2(event, &quot;http:// sitename /_layouts/listform.aspx?PageType=8&amp;ListId={ 49E3BDCF-9C06-413D-A7B8-413F2E8F6B0D }&amp; ContentTypeId=0x01005C9243AA25668B4CAACB42C41B0D360600052ECA5C1544864D9F9B7BF90A874A4F&amp; RootFolder=&quot;); javascript:return false;" href="/_layouts/listform.aspx?PageType=8&amp;ListId={ 49E3BDCF-9C06-413D-A7B8-413F2E8F6B0D }&amp; ContentTypeId=0x01005C9243AA25668B4CAACB42C41B0D360600052ECA5C1544864D9F9B7BF90A874A4F&...

So in my last post I simply wanted to show an input form in a SharePoint 2010 modal window. This got my creative juices flowing and I wanted to experiment a little. I found out that you can easily display anything in the Modal window that you wanted. Web Site: Bing <a onclick="javascript:NewItem2(event, &quot; http://www.bing.com&quot;); javascript:return false;" href=" http://www.bing.com/" target="_self">Show Bing In Modal Window</a> Image <a onclick="javascript:NewItem2(event, &quot; http://sitename/Images/image.png&quot;); javascript:return false;" href="/images/image.png/" target="_self">Show Image</a> Video/Games This does not really work since most video’s open up in a separate application like Window Media Player and not within the browser. However you can use things like flash .swf files to show in the modal window. <a onclick="javasc...

I was asked by a client recently if there was a way to create a hyperlink to a New Item Form anywhere within a site but still get the rich experience of the Modal pop-up window that grays out the background. (Note this is for SharePoint 2010 Only…) I basically took the code directly from the “Add new item” and the “Add Document” link within the list view. What this allows you to do is simply add in the following code to any content editor web part, Master page, or Page Layout in any site collection and display the form to be filled out. The user will get the nice experience of the modal window and not have to navigate away from their current page. This could be used for example a feedback form that is included in the master page so whenever someone wants to give feedback it is always going back to a central list. The only that is required for you to know is the List ID and the site name. Full Code For a List Item: <a onclick="javascript:NewItem2(event, &quot...