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

Removing Title from SharePoint List, not such a good idea

I had a previous post called Removing 'Title' from a SharePoint List but its caused some problems namely when you enter values into the List and then try to edit them. It seems that editing is removed by default when you remove Title and you have to go into Actions -> Edit in Datasheet to make changes. However, because I have a custom list this doesn't work. So the quick solution is keep Title and simply rename it to suit your List. This is easily done because Title doesn't have to be a unique value.

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.

Appreciating how fast you can Develop on SharePoint

I've been working with SharePoint now for just over a month and I have to admit building a web application is quick and fairly easily. My first impressions of the platform were not good and I may have been a bit harsh on some points, but I do still feel if this application was to grow it would need a relational database. I know it is possible to import a relational database into SharePoint but the way SharePoint is set up for this project it's not possible.

SharePoint has helped so much with the speed of the development, I could not have gotten this far with the prototype if I was building it from scratch using ASP or JSP or PHP etc. It is also a testament to Microsoft for the support they have for their products. There are so many official resources on top of the large number of developer communities, which has helped immensely in troubleshooting and I've gotten some fantastic tips.

Everything is not exactly clear sailing as I am finding some restrictions developing for the platform. In some cases I can see where lower level coding would provide an easy solution but on SharePoint you need to use a work around. I suppose on the other hand lower level coding would be time consuming and in the end, there are work arounds. Solutions for SharePoint has forced me to think in a different way than I am used to when creating products for the web, and that has to be a good thing.

At the moment I'm working on two problems I'm having with SharePoint. One of which I've just about solved and I will post up a tutorial when I'm finished.

Removing 'Title' from a SharePoint List

Every time you create a List that pesky 'Title' field is automatically created. This post will explain how to get rid of it.

EDIT -> Have a look at This Post before proceeding

A new List;


Step 1
To start click Settings > List Settings


The Settings Page;



Go to Advance Settings under General Settings and check the radio button to 'Yes' where it says 'Allow Management of Content Types?'.


Once you click okay your back in the Settings Screen. Scroll down to Item under Content Types and then click on Title.


Once Title is clicked select the radio button 'Hidden (Will not appear in forms)' and press OK.

That gets rid of the 'Title' field.


Optional
Change the Views
On the Settings page scroll down to 'Views' and click on 'All Items'


Now here you can select what Items will be in all the Views presented to the user. Select which ones you want and what positions you want them at.


Once you press OK and then go to create a new Item you should only have the Items you have selected here within the new Item form. I'll post up any other solutions as I discover them.