Developing for SharePoint Online (Cloud Based SharePoint Site)

In the previous post I spoke about a point in the project where I wanted to do some specific things with the site. I also spoke about some difficulties I encountered. In this post I'll clarify the issues I'm facing. To begin with I'll describe the setup I am working with. It is a Microsoft BPOS (Business Productivity Online Services) SharePoint site. This is a cloud based SharePoint site based on SharePoint Server 2007. I access the site in an internet browser through a URL like this one https://exampleemeamicrosoftonlinecom-1.sharepoint.emea.microsoftonline.com/. Any changes I've made to the SharePoint site have been done in an internet browser or through SharePoint Designer. To edit a cloud based SharePoint site in SharePoint Designer simply click on the "open site" button and enter the URL used to access the site in the browser and then enter a username and password associated with the site.

Up until this point in the project  it has been sufficient to develop in an internet browser and through SharePoint Designer. However, now the site needs to function in very specific ways. These include;

• Dynamically calculating (calculating in real time) a result from three SharePoint drop down menus and presenting the result to the user before they commit the value to a SharePoint List.
• Populating the left hand side of a paired list box from a SharePoint List
• Each value in the left hand side must be associated to a control number when they are added to the right hand side of the paired list box. When the user commits the values to a SharePoint List both the value and the control number must be together.
• When the user adds a value to the right hand side of a second paired list box then a completion date must be appended to each value on the right hand side of that paired list box.

Initially I was going to use JavaScript for the first problem but I was unsure of using it with SharePoint drop down menus. A friend suggested that it would be messy to use JavaScript and to simply use the SharePoint APIs. This lead to the problem of setting up Visual Studio with a SharePoint BPOS site. I posted my problem on a couple of forums, the best answer coming from the TechNet forum. Basically Visual Studio is not built to develop for remote SharePoint sites and using a shared SharePoint environment means that it is not possible to deploy solutions built with compiled code.

Now I'm in the position where I have to use client-side code such as JavaScript for the functionality I need and also look at different ways around my other problems. So far I've got the problem of dynamically calculating the values just about done. There is still an issue of using the drop down menus with a List. I will continue to find work arounds for the problems as this prototype has to be developed on the setup I was given. If this was not just a prototype I would not recommend developing on a cloud based SharePoint site.

SharePoint Designer or Visual Studio

I've come to a point in the project where I want to do very specific things, such as calculate values from drop down menus in real time, and display the result to the user. For me, the obvious solution to this problem is to use some JavaScript. However, because SharePoint uses a server side language that converts to HTML for internet browsers -have a look at the source in SharePoint Designer and then view the page source in an internet browser, different? This is why I don't think JavaScript is the best solution here; SharePoint is simply not built for the use of it in this way. I'm now looking at using the SharePoint APIs in Visual Studio instead. I just have to figure out how to use Visual Studio with a cloud based SharePoint server. I'm getting this error when I try to set it up;

EDIT: It's not possible to remotely develop with Visual Studio


Anyway while I sort this problem out I've been looking at when you should use SharePoint Designer and when you should use Visual Studio when developing for SharePoint. The quick answer can be found in the name of the products;

• SharePoint Designer = Web Design
• Visual Studio = Web Development

SharePoint Designer

• Web page presentation and branding
• Some coding and custom functionality but is mainly built as a no code solution
• Customising the layout, using CSS and designing a master page

Visual Studio

Through some research I've found that you must use Visual Studio 2005/2008 when developing for SharePoint 2007. Visual Studio 2010 has limited functionality for SharePoint 2007 which I find really strange. I suppose it's a way of phasing out SharePoint 2007. So when to use Visual Studio;

• For people who can code and don't rely on a WYSIWYG editor
• Extend SharePoint functionality with your custom code
• Design custom workflows
• Creating custom features and event handlers

Navigating using a drop down list and inserting values in the drop down list to a SharePoint List

Essentially the web application I'm working on contains three categories where everyt piece of data in the application falls under. An example of this would be where each person who visits the website falls under one of three age categories 18-25, 26-35 and 36-50. Depending on what age category they're in would produce a webpage with products marketed at them in a drop down list.

So how in SharePoint do you present the user with a unique set of products depending on what category they fall under? I decided to use some JavaScript that was called when the user selected their cateory from a drop down list. When selected the drop down would simply navigate to an unique page that contained the same custom form which I created in the post Populating a 'Drop Down List' from a SharePoint List but each page's drop down menus would be populated from a different SharePoint List. So the user selects that they are 18-25 and the drop down list on the page would have products marketed at them. If the user selects 26-35 the drop down list is populated with different products than the 18-25 category and so on.

To get the JavaScript working I placed it between the <head> tags on the master page of the SharePoint site. Location of master page is shown in the picture below and the JavaScript code is also below;

<head>
    <script language="JavaScript">
        <!--
            function navigate(form) {
            var OptionIndex=form.ProductTypeURL.selectedIndex;
            parent.location = form.ProductTypeURL.options[OptionIndex].value;}
        //-->
    </script>
</head>

The drop down menu was created with the following code;

<select name="AgeURL" size="1" language="javascript" onchange="navigate(this.form);">
   <option selected="">18-25 </option>
   <option value="middle.aspx">26-35</option>
   <option value="oldest.aspx">36-50 </option>
</select>

I decided the easiest way to insert the values from the above drop down menu into a SharePoint List was to have a text field that would be pre-populated with the value selected in the drop down. So if the value selected in the drop down was 35-50 then the value in the text field was 35-40. 

In SharePoint Designer create a text field like the one below;

Click the arrow beside the text field and assign it to the data field, essentially what SharePoint List do you want the value in the text field to go into.

The text field would not be visible to the user. The full code for this text field is;
<asp:TextBox runat="server" id="ff15{$Pos}" __designer:bind="{ddwrt:DataBind('i',concat('ff15',$Pos),'Text','TextChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Person_x0020_Age')}" text="18-25" visible="false" />

The main areas to note in the above code are;

• text="18-25" - change from text="{@FSObjType}" to insert your value
•  visible="false" /> - add this to make the field invisible to user

SharePoint Designer Error when Opening SharePoint Page

I've been adjusting and changing the Custom List Form I created in the post Populating a 'Drop Down List' from a SharePoint List and I've run into an error. When I try to open the Web Part page with the Custom List Form in SharePoint Designer 2007 I get the following error;

The server could not complete your request.

Contact your Internet service provider or Web

server administrator to make sure that the

server has the FrontPage Server Extensions or

SharePoint Services installed.

For more specific information, click Details

button.

When I click the 'Details' button I get the following text;

soap:ServerServer was unable to process request. ---> An unexpected error occurred while opening this page. For assistance, contact your site administrator.

Now I think it has something to do with inserting the Custom List Form on the page and then going ahead and changing the List in SharePoint. For example I have changed some drop down menus to drop down menus with  an area for the user to put their own value along with other changes to how the user can input data into the List.

Changing the highlighted area above has the following effect on the user input;

From

Drop Down

To

Drop Down with optional value

As you can see on top of the 'not being able to open the page' issue, I'm having an issue with populating the drop down list when I add an area for the user to specify their own value, but that for another post. I think the best thing to do is meticulously plan out how the user will enter their details and then create a custom list form. But I'm kind of tinkering around with inputs to make the application as user friendly as possible, so I think inputs will inevitably change.

Anyway the current solution for this problem is deleting the page and starting again. When I find a better solution I'll post it up.

Populating a 'Drop Down List' from a SharePoint List

I've been playing around with SharePoint Lists and I've found a handy way of populating a drop down list in SharePoint with another SharePoint List. Here is a quick guide;

In this example I'm creating a place where a user enters their name and then selects what country they are from. So I create two Lists

• User Details
• Countries

User Details will have two columns; 'Name' and 'Country'.

Step 1
Create the Custom Lists
Site Actions > Create > Custom List
Add columns;

Settings > Create Column
or Settings > List Settings > Create Column

The above screen shot is of the Country column being created within the User Details List. Notice that instead of filling in a list of countries in this column I simply put 'none' in the "Type each choice on a separate line" box. I'm not listing countries here because I want to populate this from a SharePoint List that I've made called Countries.

Step 2
Now create a Document Library
Site Actions > Create > Document Library

Then create a Web Part page. Choose the layout as a full page and add it to the document library just created.

Step 3
Launch SharePoint Designer and open up the Web Part page just created.


Delete the 'click to insert Web Part' from the page and add a Custom List form to the page.
Insert > SharePoint Controls > Custom List Form...


Then select the List you want to populate, in this case it's the User Details List.

Now right click where the Country drop down is and select the following;
Format Item as > Drop Down List

Make sure the drop down list, which will now have unbound, is not selected (click beside it). Go over to the right of SharePoint Designer 2007 to the window with the tabs Toolbox, Data Source Library... etc. and click the 'Data Source Library' tab.
*If it is not there go to the top toolbar (File, Edit, View...) and click on Task Panes -> Data Source Library.

Find the List that you want to populate the drop down with, in this case the Countries list will populate the drop down. Click the list and click inset data source control.

Now go back to the drop down and click the little arrow and then click Data Fields.

A window will pop up, the first option is the data field just leave it as this is the one selected (although you can change it if you want). In this case the data field selected is Country in the User Details List.

There is also an option here to present the user with data from one column in the List and once selected by the user a value is entered from a different column in the List from a corresponding row. This is handy if you want a description for the data presented to the user but want a number value to be entered into the List.

Step 4
All that needs to be done now is to change the view the user gets when they are creating a new Item from the default view to your new Web Part page with the custom form.

Go to the Lists on the left hand side of SharePoint, expand Lists and then right click the User Details List and click Properties.

Then in list properties click the 'Supporting Files' tab and do two things

• *Very important that under 'Content type specific forms:' you change it from 'Folder' to 'Item'.
• Then change the 'New item form' to the Web Part page with the custom form (Pages/userdetails.aspx) by pressing browse and locating you new page.

All done. Now when a user clicks 'New Item' in SharePoint they will be brought to the Web Part page and the drop down list will be populated from another SharePoint List.