Office 365 Open Contact Page on Modal Dialog

Office 365 provides the contact gadget which allows visitors of a site to submit contact information. This gadget can be embedded on an ASPX page, and it is usually added to the contact us page. There some instances when we want the users to not have to navigate to another page to submit the contact information and just present them with a modal dialog like the one below:

To provide this feature on your Office 365 public site, you can do the following:

Step one add a new page

Look at the page properties and make sure to uncheck these options:

• Show this page in the navigation bar
• Include Header, footer and Navigation

Step two add the contact gadget and add the message that you want to convey to the user

At this point, we have a page that can be navigated, and it displays none of the master page section. This is the page that we use for the modal dialog. Design this page with the width and height that you want to present to the user. This size is the reference that we need to build the modal dialog. The entire page may have the site width, but you should try to make the gadget fit a certain size. Also add any design that you need. Try adding a logo or banner. Name this file contactform.aspx. Load the page on the browser. It should look something like the image below. (Notice no header, footer and navigation menu)

Step three add the JavaScript

For this step, we are using JQuery and JQuery-Blockui. The Blockui widget allows us to create the modal dialog on the page.  Include the references to these JavaScript in the page where you need the dialog.  Ideally, you will do this on the master page, so that it is included in all your pages. For this however, you need to be using a custom master page. Office 365 has some issues with custom master pages. We will also add a reference to the JavaScript that we will create on the next step.

Step four create the widget

We now need to create a JavaScript file that contains our widget implementation. The widget will basically do the following:

On page load, it adds the HTML that contains the modal dialog.  This is done by appending the HTML to the body of the page. The HTML is just a div element with some CSS style and an iframe element. The iframe uses as source the page that was created on step one.  Make sure to style this div to fit the size that you use. This is nothing new. It is just the basic modal dialog pattern for web pages. This is what the HTML looks like: (this is added to the widget script as a property)

<div id="contactForm" style="width:570px; height:715px;display:none;background:#436c99;border:2px #d5d3d3 solid;"><div style="float:left;font-size:16pt;margin:5px;color:#ffffff;">Contact Us</div><div id="closebtn" style="float:right;top:5px;"><a href="#" onclick="CloseContact();"><img src="../images/close.png" alt="close" border="0"/></a></div><iframe src="contactform.aspx" width="100%" height="90%" frameborder="0" scrolling="no"></iframe></div>

Use the following snippet to implement the Widget:

//this function is used by the contact form page to close the modal dialog

function CloseContact(){

contactWidget.CloseDialog();

}

var contactWidget = {

       Init:function(){

         $('body').append(this.html);

      },

      OpenDialog:function(){

                $.blockUI({ message: $('#contactForm'),centerY:true,css: {

                top:  ($(window).height() - 715) /2 + 'px',

                left: ($(window).width() - 570) /2 + 'px', border:'0px',               

                '-webkit-border-radius': '10px',

                '-moz-border-radius': '10px',width:'570px'

                }});

      },

      CloseDialog:function(){

               $.unblockUI();

      },

       html:'<div id="contactForm" style="width:570px; height:715px;display:none;background:#436c99;border:2px #d5d3d3 solid;"><div style="float:left;font-size:16pt;margin:5px;color:#ffffff;">Contact Us</div><div id="closebtn" style="float:right;top:5px;"><a href="#" onclick="CloseContact();"><img src="../images/close.png" alt="close" border="0"/></a></div><iframe src="contactform.aspx" width="100%" height="90%" frameborder="0" scrolling="no"></iframe></div>'

}

$(document).ready(function(){contactWidget.Init();});

The script is basic. On document ready, it calls the Init function. This adds the html to the DOM. Notice that the HTML is contained by the widget. This allows us to reuse it in several pages by just including the reference to the JavaScript. Save the file and name it contactWidget.js. You can now include in the page the reference to this JavaScript file.

Step five wire the widget

With the widget loaded on the page, the next step is to just wire an element’s click event to the function contactWidget.OpenDialog. This opens the modal dialog and displays the contact form.

Step six handle the back button on the thank you page.

If you load the contact page on the modal dialog, you will notice that after submitting the information, the contact page shows a back button and a message. If you click it, it only takes you back to the contact form. The user still needs to click on the close image to close the dialog. You may be ok with this functionality, but we could also close the dialog after the back button is clicked.  You can do this by overriding the click event on the contactform page using JQuery. The event handler can call CloseContact function in the parent page with the following script:

window.parent.CloseContact();

Happy coding

Office 365 provides the contact gadget which allows visitors of a site to submit contact information. This gadget can be embedded on an ASPX...

Read Article →

SharePoint Custom Form Shows HTML as Text on Lookup Fields

Display forms on SharePoint by default display a link on lookup columns. This allows us to click on the link and edit the record from another list. When creating a custom display form on SharePoint Designer, the form displays the actual HTML instead of rendering the HTML on the lookup columns. For example, see this image:

The form displays text instead of the actual anchor tag. This is because the default output for the XSL transformation is to escape special characters. To address this, we need to modify the XSL template and force the output to render the HTML instead of displaying it as text. This can be done by adding the disable-output-escaping attribute to the xsl:value-of tag.

Open the code view of your form and look for the template that handles the rendering of the fields. Look for the field that has the problem and add the attribute. This is what the tag should look before and after the change:

Before	After
<xsl:value-of select="@FieldName" />	<xsl:value-of select="@FieldName" disable-output-escaping="yes"/>

Save your changes and refresh the page. The link should now be displayed as shown below.

Happy coding.

og-bit.com

Display forms on SharePoint by default display a link on lookup columns. This allows us to click on the link and edit the record from anot...

Read Article →

Set SharePoint Multi-Value field with JavaScript

A multi-value field column in a SharePoint list allows us to store multiple look-up ids. This is an alternative to creating a separate list that has a one-to-many association. For example, an invoice item that needs to be associated to one ore more time entries. For this example, we could define an invoice list with a lookup field that can hold multiple values.

When adding a new record to the list with JavaScript Client Object model, we must use an instance of SP.FieldLookUpValue for each lookup id that needs to be associated to a new record on the list. The following JavaScript snippet shows how a multi-value field can be set to one or many values:

1. var context = SP.ClientContext.get_current();
2. var web = context.get_web();
3. 
   
4. // Get references to the lists we will use
5. var tsList = web.get_lists().getByTitle('Invoice');
6. var listInfo = new SP.ListItemCreationInformation();
7. var tsItem = tsList.addItem(listInfo);       //add new item
8. 
   
9. var fields =['InvoiceNo','TimeEntries'];  //fields to read and set
10. 
    
11. $(fields).each(function(){
12. var field = $("#"+this); //get reference to the control
13. var fieldValue = field.val(); //get the value
14.    
15. if (title =='Weeks'){
16. var items = field.val();         //multi select listbox returns an array      
17. var timeEntries =[];   //array to store the lookup ids
18. for(var idx=0;idx<items.length;idx++){         
19.            var newField = new SP.FieldLookupValue(); //new lookup field instance
20.            newField.set_lookupId(items[idx]); //sets the lookup id
21.           timeEntries.push(newField); //add to the array
22. }
23. fieldValue =timeEntries;    
24. }
26. tsItem.set_item(fieldName,fieldValue );    
27. });
28. tsItem.update();
29. context.executeQueryAsync( //post update
30.     Function.createDelegate(this, onSuccess), 
31.     Function.createDelegate(this, onError));

We use a field array to define all the controls and fields that need to be processed. The HTML controls have their ids set to the field names. This allows us to map the controls to the fields. The IF statement is used to check for the field that has the multiple lookup values. When this field is encountered, we read the value of the Multi-Select list which returns an array of ids. For each id, we create a FieldLookupValue instance and set the lookup id using the set_lookupId method. Each FieldLookupValue is then pushed into the timeEntries array. The last step is to set the item value by calling set_item and passing the array of FieldLookupValues. The call to item.update() sets the query to execute. To post the changes, we call executeQueryAsync and pass the OnSuccess and OnError handler to validate that all went OK or if an error needs to be handled.

1. function onSuccess(sender, args) {
2.    alert('Invoice was updated');
3. }
4. 
   
5. function onError(sender, args) {
6.     alert(args.get_message());     
7. }

Happy coding.
og-bit.com

A multi-value field column in a SharePoint list allows us to store multiple look-up ids. This is an alternative to creating a separate list...

Read Article →

Install-Package Conflict in JQuery Reference when using Package Manager Console

With Visual Studio 2010, we can use the Package Manager Console to install Javascript packages like Knockout and others. The saves a lot of time because all the resources and references associated to the package are downloaded and configured on the project that you are working on. In some instances, we may get an issue where a package depends on a reference to a JavaScript framework that is different to what is configured on your project. To see how we can go about to do handle such conflicts, lets try to add the SignalR package to an MVC 3 project.

• Create an empty MVC 3 Web Project
• Open the Package Manager Console (Tools->Library Package Manager->Package Manager Console)
• Type this Command: install-package signalr

This console is basically a PowerShell console which allows us to execute NuGet commands. In this case the install-package command, tries to download and configure a package. Depending on your configuration, you may get this conflict error:

Install-Package : Conflict occurred. 'jQuery 1.5.1' referenced but requested 'j
Query 1.6.4'. 'jQuery.vsdoc 1.5.1, jQuery.Validation 1.8.0,

It looks like our project is set to use jQuey 1.5.1, but the package has a dependency on jQuery 1.6.4. We need to look at how our project is configured.  Look at the packages.config file in the project.

This file is a NuGet configuration file which is used to track the packages and version. This file is used when we attempt to configure a project using the NuGet commands. It looks at the file, and it checks to make sure that what you want to do does not cause any possible conflicts. In our case, we can see that the project is set to use jQuery 1.5.1. We need to update this setting to be able to import this package in our project.  We also need to make sure that the new jQuery reference is added. Remove the reference to jQuery (first two lines) from the file.

Save the file and on the Package console run the command again.  install-package signalr.  You should now see messages indicating that the file was correctly installed. If you check the file again, you will see that the file is now upgraded with the new jQuery and the signalr files.

You should also look at the Script folder, and you will see that the jquery-1.6.4 files as well as the jquery.signalR js files have been added.

You know just need to make sure to remove the old jquery (1.5) files, and you should be ready to continue.

I hope this helps.
og-bit.com

With Visual Studio 2010, we can use the Package Manager Console to install Javascript packages like Knockout and others. The saves a lot of ...

Read Article →