Showing posts with label Office365. Show all posts
Showing posts with label Office365. Show all posts

Office365 Weather WebPart

A while ago I wrote a Sharepoint web part that displayed a 5 day weather forecast for a user configurable location using Met Office data from the Azure Datamarket. I wanted to try porting this web part to Office365, to see if I could overcome the challenges of working predominantly client side using Javascript.

With the help of jQuery to make ajax requests to the Datamarket and a cryptographic library to encrypt the username and password that is included in the ajax request headers I've managed to accomplish this goal.

One of the major challenges was to overcome the cross site scripting issues, where I was making requests to the Datamarket from the Office365 domain. The Datamarket supports the oData standard well from a .Net Framework perspective, but it requires user interaction to allow the request from a purely web client or javascript approach. Internet Explorer has an object called a XDomainRequest which is specifically designed for cross site data requests, the only problem is that you can't include any headers, which means that authentication was ruled out. Aparently IE 10 will work the same way that Chrome does now and properly support jQuery CORS. So, I had to compromise and change internet explorer's security settings to allow cross site data requests.

I've just published the code in a CodePlex project here: http://o365Weather.codeplex.com

Using jQuery & Windows Azure Marketplace

I'm trying to create an Office365 webpart that displays a 5 day weather forecast. The sandbox restrictions mean that I can't call the data service from the server side code, so I need to make the call client side.

Marketplace data is accessible as JSON, so using jQuery and a cryptography library called crypto.js to handle the authentication I should be able to return some data.

Here is a simple htm page that demonstrates a working call to the Azure Marketplace, the username can be anything but the password should be your Primary Account Key from the data subscription.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Windows Azure Data Market</title>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script> 
    <script type="text/javascript" src="http://crypto-js.googlecode.com/files/2.5.3-crypto-min.js"></script>   
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            var user = "{username}";
            var pwd = "{primary account key}";
            $.support.cors = true;
            $.ajax({
                type: "GET",
                beforeSend: function (xhr) {
                    var bytes = Crypto.charenc.Binary.stringToBytes(user + ":" + pwd);
                    var base64 = Crypto.util.bytesToBase64(bytes);
                    xhr.setRequestHeader("Authorization", "Basic " + base64);
                },
                url: "https://api.datamarket.azure.com/DataGovUK/MetOfficeWeatherOpenData/Site?$top=100&$format=json",
                dataType: "json",               
                success: function (data) {
                    alert('success!');
                },
                error: function (jqXHR, textStatus, errorThrown) {                    
                    alert(errorThrown.message);
                }
            });
        })
    </script>
</head>
<body>

</body>
</html>

Add jQuery to Office365 Solutions

Becuase of the restrictions on Sharepoint 2010 Sandboxed solutions it's essential to be able to write functional code client side, as you are very restricted on what you can do on the server.

Writing Javascript can be extremely labourious without the assistance of some helper libraries like jQuery, and adding javascript links and code is even a challenge in a sandboxed solution.

Here's a cool way of adding jQuery code to Office365 or Sharepoint Online sandboxed solutions.

protected override void RenderContents(HtmlTextWriter writer)
        {
            StringBuilder js = new StringBuilder();

            js.AppendLine("$(document).ready(function(){");
            js.AppendLine(" alert('hello world!');");
            js.AppendLine("});");

            base.RenderContents(writer);

            writer.AddAttribute(HtmlTextWriterAttribute.Type, "text/javascript");
            writer.AddAttribute(HtmlTextWriterAttribute.Src, "//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js");
            writer.RenderBeginTag(HtmlTextWriterTag.Script);
            writer.RenderEndTag();

            writer.AddAttribute(HtmlTextWriterAttribute.Type, "text/javascript");
            writer.RenderBeginTag(HtmlTextWriterTag.Script);
            writer.WriteLine(js.ToString());
            writer.RenderEndTag();           
        }  

“Remote Desktop Links” Custom List in Office365

I have a lot of servers that I connect to using remote desktop. Windows only remembers the last 10 servers to which you connected. There are some 3rd party applications that manage your connections, but I wanted to use Sharepoint and not install another local application.

I wanted to use a Sharepoint list to store and manage my Remote Desktop Connections. I also wanted to be able to click on a hyperlink to open the connection.

There are several obstacles to this goal:

  1. There is no protocol for opening Remote Desktop Connections via a URL.
  2. Even if there was Sharepoint won’t let you use it. It will only allow http:// or https:// in a hyperlink column.
  3. The hyperlink column doesn’t give you the option of launching the link in a new window.

If I were using an on premise Sharepoint implementation I might consider creating a custom column, but I want this to work in Office365.

Creating a rdp:// URL Protocol

This will need a Registry tweak to add a new url protocol to mstsc.exe. Here is a reg file which will update the Registry with the new rdp:// protocol.

Windows Registry Editor Version 5.00
HKEY_CLASSES_ROOT\rdp]@="URL:Remote Desktop Connection" "URL Protocol"=""
HKEY_CLASSES_ROOT\rdp\DefaultIcon]@="C:\\WINDOWS\\System32\\mstsc.exe"
HKEY_CLASSES_ROOT\rdp\shell]
HKEY_CLASSES_ROOT\rdp\shell\open]
HKEY_CLASSES_ROOT\rdp\shell\open\command]@="cmd /V:ON /s /c set url=%1 && set url=!url:rdp:=! && set url=!url:/=! && start C:\\WINDOWS\\system32\\mstsc.exe /v:!url!"

Once you’ve updated your registry you will be able to create url links like this one which, when opened will launch a new Remote Desktop Connection to the server:

rdp://server

Save the above into a file called Remote Desktop Protocol.reg. The idea is to make this reg file available through the Sharepoint site for first time users who don’t have it. There is a problem in that because you won’t be able to upload a reg file to the Site Assets library, so I suggest adding it to a Remote Desktop Protocol.zip file first.

Create a redirect page

Sharepoint won’t let us use our new rdp:// protocol in a hyperlink column, so to get around this limitation we need to create a redirect page we can use in a hyperlink column and pass it the link we really want to open in the query string.

Open up your site in Sharepoint Designer. Select All Files under Site Objects, click the File button on the Ribbon and choose to create a new ASPX file.

Name the file redirect.aspx and copy in the markup below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta name="WebPartPageExpansion" content="full" />
    <title>Remote Desktop</title>
 </head>
 <body>
    <script type="text/javascript">
      window.open(window.location.search.substring(1));
      window.history.back()
    </script>
  </body>
</html>

Create the Custom List

Open up your site and create a new Custom List and add a new hyperlink column to it.

Create a new list item and enter the following in the Hyperlink Url:

https://companyweb.sharepoint.com/site/redirect.aspx?rdp://server

If you have applied the registry tweak, when you open the link you should see a new Remote Desktop Connection open up.

Finally, I edited the default page and added some text along with a link to the Remote Desktop Protocol.zip file which I added to the Site Assets library. I also added a List Web Part to display a customised view of just the hyperlink column from my Custom List.  Here’s what it looks like:

Sharepoint 2010 "Hyperlink with Picture" Column Type

I've recently published my latest CodePlex project. It's a Sharepoint 2010 Custom Field Type that extends the SPUrlField type to allow you to have an image instead of a text description as the link.

When creating a new column, the feature adds a new type called "Hyperlink with Picture"



The new column is exactly the same as a Hyperlink type column, but instead of displaying the link as the description text, it shows an image instead.



When editing a list item you enter the target url and the url to the image you want to display for the link



When you view the list item the image will display and open the target url link when clicked

Sharepoint 2010: Resource Booking WebPart

I had a request to build a simple generic, configurable, weekly resource booking web part for Sharepoint 2010.  Here is a list of the design goals that we set:
  • Ability to have multiple resource booking webparts on a single Sharepoint Web
  • The available resources should be configurable by the end users
  • A weekly view of bookings
  • Ability to easily identify resources that can be booked and to filter the weekly view
  • Validation to guard against double bookings
  • Ability to delete bookings you created
  • Defaults to make creating new bookings quick and easy
  • Use AJAX to avoid ugly post backs (page reloads)
The resulting Sharepoint Feature contains a WebPart which is deployed at Site level and can be used in any site within the Site Collection.  A Web level Feature contains List Templates for the Resource list and the Bookings list which can be activated by any site administrator that wants to use the Resource Bookings WebPart.

The Resource Booking WebPart has two custom properties to link it to the Resource list and the Bookings list.  The Resource list is included on the Quick Launch menu, while the Bookings list in not.  It's possible to change this, of course, along with list permissions and adding your own views to the Bookings list to extend functionality for the users.

Below is a screenshot of the Resource Booking WebPart.


The Resource Booking WebPart defaults to show the current week starting on a Monday.  At the top it shows the week start date and end date, there are arrow buttons to navigate to the previous and next weeks.

Each box shows the Bookings for a particular day sorted in time order.  Bookings with a red cross next to them are one's made by the currently logged on user, clicking the red cross will delete the booking.  You can only delete your own bookings using the WebPart, you could open the Bookings list and delete bookings from there if you have sufficient permissions.  Hovering the mouse over a booking will popup who own's that booking, as shown in the screenshot.

In the bottom right hand corner is a list of all the resources that are available for booking.  This list is created from the Resources list which is managed by the users.  Checking the boxes against the resources will filter the view to show only those bookings against the selected resources.  You can filter the view and still navigate to previous or next weeks keeping the chosen filter in effect.

To create a new booking simply click on the icon.  Below is a screenshot of the New Resource Booking view:


The From time defaults to the current time and the To time to the current time plus one hour.  The Owner will default to the currently logged on user.  All of the fields are required and there is validation in place to ensure there is no double booking of resources.  The validation error message will tell you who has the resource booked when the times they have it reserved.