Customizing the Office 365 Public Facing Website

For Customizing the public-facing Website that is available with SharePoint Online for Microsoft Office 365 you should go for following options:

Option 1: Out-of-Box Editing

Option 2: Apply Minimal Master Page and customize it using SharePoint Designer

For customizing website through Out-of-Box you can refer this Article : http://office.microsoft.com/en-us/sharepoint-online-small-business-help/step-3-customize-the-public-facing-website-HA102029499.aspx

When you try to customize the website master page through SharePoint Designer 2010 it will gives you different errors. So to avoid these errors firstly copy Minimal Master Page (Create duplicate file) which is located to /_catalogs/masterpage/minimal.master, then customize it in SharePoint Designer 2010. Apply this customized Master Page to all pages.

This is my 50^th Post On SharePoint Development and may be this will be helpful as pervious 49….

SharePoint 2010 ECMAScript/Javascript IntelliSense in Visual Studio 2010

Visual studio 2010 provides great IntelliSense for .Net. But for JavaScript and ECMAScript its required some configuration like adding some references.

We need to reference the debug files in our JS library in Visual Studio.  Simply type the following four lines at the top of our JS library.

JS File:

/// <reference name="MicrosoftAjax.js" />

/// <reference path="file://C:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/14/TEMPLATE/LAYOUTS/SP.core.debug.js" />

/// <reference path="file://C:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/14/TEMPLATE/LAYOUTS/SP.debug.js" />

/// <reference path="file://C:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/14/TEMPLATE/LAYOUTS/SP.Runtime.Debug.js" />

Application Page:

<% #if SOME_UNDEFINED_CONSTANT %>

<script type="text/ecmascript" src="/_layouts/SP.core.debug.js " />

<script type="text/ecmascript" src="/_layouts/SP.Debug.js" />

<script type="text/ecmascript" src="/_layouts/SP.Runtime.Debug.js" />

<% #endif %>

Note: by using an undefined constant, Visual Studio will provide IntelliSense while the <script> element is omitted from the actual page rendering

Important Note: Use for Development Purpose only, remove these statements when going for production environment deployment.

Hint: If it’s not appearing, press CTRL + Shift + J together to update Jscript IntelliSense.

You can add different debug js files reference and you will find it in LAYOUTS or ISAPI folder of SharePoint 14 Hive.

For more information you can refer this MSDN Articles:

1.       Here is the official documentation by Microsoft on how to enable IntelliSense for the ECMAScript object model - How to: Enable ECMA Client Object Model IntelliSense in Visual Studio 2010

2.       This will get you most of the IntelliSense that you care about. If something looks like its missing… you will get a list for the appropriate ones by class/namespace can be found here - ECMAScript Class Library - SharePoint 2010

Screen Cast:

Search debug.js files in 14 Hive



Choosing between ECMAScript and Silverlight while developing Client-Side code in SharePoint 2010

In modern web application design, the requirement to add client-side code is becoming increasing popular. After all, websites that have rich client-side behaviors are now the norm on the Internet. Adding client-side code into your SharePoint solutions is definitely something that will improve the user experience.

Beyond improving the user experience, there are SharePoint design scenarios where client-side code can do what server-side code cannot. Let's examine a simple example. Imagine a scenario in which you are required to develop a sandboxed solution that retrieves content from a public web service on the Internet and then writes this content into a SharePoint list. The problem with using server-side code in a sandboxed solution is that you cannot call out to a web service.

However, you can redesign your sandboxed solution to include custom ECMAScript code or a Silverlight application that calls out to the web service directly from the user's browser. After your client-side code retrieves the content from the web service, it can then write the content into a SharePoint list by using either the client object model or ListData.svc. This example provides yet another motivation for why you might want to include client-side code in a SharePoint solution.

If you decide you want to add client-side code to a SharePoint solution, the next step is to choose between writing custom ECMAScript code-behind pages or developing one or more Silverlight applications. Let's look at the pros and cons of each approach.

ECMAScript has an advantage of reach over Silverlight because it is supported across a larger number of browsers. Furthermore, browsers include built-in support for ECMAScript, whereas Silverlight applications do not run unless the user downloads and installs the Silverlight runtime. Although the download and installation of the Silverlight runtime can be completed over the Internet in a matter of seconds, you must still acknowledge that Silverlight development makes an assumption that the user will trust a Microsoft software component and install it from across the Internet. This might not be a good assumption to make in wide-reach scenarios, such as when you develop a commerce application for the Internet where you want to reach the maximum number of potential users.

In most SharePoint 2010 environments, you can typically assume that it will not cause problems to deploy Silverlight applications with your SharePoint solutions. After all, SharePoint Foundation includes several different Silverlight 3 applications in standard pages, such as the creation page that is available by selecting the More Options command on the Site Actions menu.

The fact that SharePoint 2010 users are required to install Silverlight 3 just to get the complete built-in experience means that you can typically assume that they will already have the Silverlight 3 runtime installed on their computers. If you plan to use Silverlight 4 instead of Silverlight 3, you must assume that users are willing and able to install an updated version of Silverlight on their computers.

The final point to consider when choosing between ECMAScript and Silverlight concerns developer productivity. In this area, Silverlight development is the clear winner. That is because you can work inside Visual Studio 2010 and write your code in C# or Visual Basic. You experience all the benefits of compile-time type checking and IntelliSense as you call methods in the .NET Framework and the client object model. You can also create service references that make it much easier to program against web services, such as ListData.svc.

The experience programming ECMAScript in Visual Studio 2010 is nothing like the experience programming a Silverlight application. There is no compile-time type checking, nor is there any IntelliSense when you program against the client object model. Furthermore, you need advanced programming skills with ECMAScript and ASP.NET AJAX to call out to a web service, such as ListData.svc, or to perform the required thread switching from a callback method before updating something in the UI. If you are just beginning to learn to write client-side code, developing with Silverlight will be a much better option than writing code by using ECMAScript.

Before developing SharePoint client-side application consider following points.

Features	Silverlight	ECMAScript
Easy data retrieval	No	Yes
Easy Programming	No	Yes
User Interface	Very Attractive, No need to more efforts on UI Design.	Totally Depend on web designer
Minimum Users	Good option	-
Maximum Users	Fare option. Because may all users browser does not have Silverlight installed.	Very good option. Because easy to load, support maximum browsers.
Data Processing	Very easy	Difficult to implement
Best Scenario	Great User Interface and Advance data processing like accessing multiple lists and combining its items.	Accessing one list item and display it’s in grid view or detail view.

MSDN Reference Link: http://msdn.microsoft.com/en-us/library/gg552613.aspx

Notifications in Sharepoint 2010

In SharePoint 2010 UI model, there are lots of improvements in Notifications or status, Grid Views, Menus, Popups, etc…

Here I will demonstrate you, How to Display Notifications and Status messages in SharePoint 2010 portal.

We can use these notifications or status to Display, processing messages like “Loading…” “Processing…”

“Wait…” or Status like “Thank you for contacting” “Your request has been processed” or Caught exception messages.

Display Notification (ECMAScripts):

var value = SP.UI.Notify.addNotification(strHtml, bSticky);

strHtml = The message inside the notification.

bSticky = Specifies whether the notification stays on the page until removed. Default notification remains for 5 seconds.

Display Status (ECMAScripts):

var statusId = SP.UI.Status.addStatus([strTitle], strHtml,[atBegining]);

strTitle [Optional] = The title of the status message.

strHtml = The contents of the status message.

atBegining [Optional] = Specifies whether the status message will appear at the beginning of the list.

SP.UI.Status.setStatusPriColor(statusId, strColor); // Sets the priority color of the specified status message.

statusId = The ID of the status message.

strColor = The color to set for the status message.

The following table lists the values and their priority. [Note: color name is in lower case]

Value	Priority
red	Very Important
yellow	Important
green	Success
blue	Information

SP.UI.Status.removeStatus(statusId); // Removes the specified status message.

SP.UI.Status.removeAllStatus(true); // Removes the all status messages.

Overall code (HTML & JavaScript)

<script language="javascript" type="text/javascript">

    ExecuteOrDelayUntilScriptLoaded(Initialize, "sp.js");

    var statusId = '';

    var notifyId = '';

    function Initialize() {

    }

    function AddNotificationAutoHide() {

        notifyId = SP.UI.Notify.addNotification("Loading…", false);

    }

    function AddNotification() {

        notifyId = SP.UI.Notify.addNotification("Loading…", true);

    }

    function RemoveNotification() {

        SP.UI.Notify.removeNotification(notifyId);

        notifyId = '';

    }

    function AddStatus(color) {

        statusId = SP.UI.Status.addStatus("Error", "Invaild input string", true);

        SP.UI.Status.setStatusPriColor(statusId, color);

    }

    function RemoveLastStatus() {

        SP.UI.Status.removeStatus(statusId);

        statusId = '';

    }

    function RemoveAllStatus() {

        SP.UI.Status.removeAllStatus(true);

    }

    function ShowNotificationMessage(tooltip, message, sticky) {

        SP.UI.Notify.addNotification(message, sticky, tooltip, null);

    }

</script>

<input type="button" value="Add Notification(Auto Hide)" onclick="AddNotificationAutoHide()" />

<input type="button" value="Add Notification" onclick="AddNotification()" />

<input type="button" value="Remove Notification" onclick="RemoveNotification()" /> <br /><br />

<input type="button" value="Add Status (Red)" onclick="AddStatus('red')" />

<input type="button" value="Add Status (Green)" onclick="AddStatus('green')" />

<input type="button" value="Remove Last Status" onclick="RemoveLastStatus()" />

<input type="button" value="Remove All Status" onclick="RemoveAllStatus()" />

Use literal control to add notification from server side.

Screen Cast:

Quick Note: Quick Workflow Knowledge

SharePoint 2010 workflows can:

·         Automate common business steps

·         Help manage long-running processes

·         Route documents and forms

·         Collect feedback, approval, or notifications

·         Provide visual indicators of a process

SharePoint 2010 Standard and Enterprise include a selection of ‘out of the box’ workflows.  These tools help you automate the most common business tasks – sharing and collecting feedback on documents.  I see the following workflows used most often:

·         Approval Workflow - Routes the content for approval. You can setup this workflow as serial or parallel plus preset the approvers.

·         Collect Feedback Workflow - Routes the content for feedback. When the workflow completes all the feedback is sent to the originator of the workflow.

·         Collect Signature Workflow - Rather than just sending content for approval, this workflow requires digital signatures on the content.

‘Out of the Box’ Workflows

‘Out of the box’ workflows can be added to any SharePoint document library.  Simply select a template and pick a name.  Your workflow can start whenever a document is added, whenever a document is changed, or both.

Once your workflow is set up, it will auto-magically run when triggered.  Users may also start a workflow manually.

When the workflow starts, it will ask the user to set some rules.  Who should approve the document?  Is there a due date?  And my favorite!  Send a reminder e-mail if SharePoint doesn’t hear from an approver.

Workflows with Visio or SharePoint Designer

When your needs become more complex, SharePoint power users and developers can create custom workflows using drag-and-drop tools.  Workflows are composed of simple building block “activities” and conditional logic.  Workflows run based on events and conditions affecting a document or SharePoint list item.

If you are comfortable with Visio, you can use familiar tools to snap together a SharePoint workflow. Various workflow actions are available, such as Assign Task, Send E-mail, Create List Item, Collect Data from User, Wait for Timer, and more.

Last but, Very Powerful way to implement the workflow is to develop it in Visual Studio (Custom Code).

Workflows can be used to manage projects, track engineering change orders, manage customer service, route mortgage documents, automate human resource tasks – even starting a bidding war between vendors during an RFP process.

Were you timing me?  In just a few minutes I’ve explained how simple – yet powerful – workflows can help you automate your business processes.  Workflows can be designed to improve almost any aspect of your business.  

Hide and Show the SharePoint 2010 Ribbon

If your SharePoint site users are fed up with Ribbon, because most of times SharePoint 2010 Ribbon takes space at top of site.

Ribbon is mostly used by Administrator or Editors, those are very few in count as compare to readers.

Users who have read permission they don't require Ribbon most of times

Following code will Show and Hide the SharePoint 2010 site Ribbon on clicking on buttons. You can write your own code that will automatically Show/Hide the Ribbon.

You can add following code in Master page.

Code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">

            function ShowRibbon() {
                $('#s4-ribbonrow').show();

                $('#s4-workspace').height($(document).height() - $('#s4-ribbonrow').height() * 2);

            }

            function HideRibbon() {

                $('#s4-ribbonrow').hide();

                var newHeight = $(document).height();

                if ($.browser.msie) { newHeight = newHeight - 3; }

                $('#s4-workspace').height(newHeight);

            }

</script>

<input id="Button1" type="button" value="ShowRibbon" onclick="ShowRibbon()" />

<input id="Button12" type="button" value="HideRibbon" onclick="HideRibbon()" />

Enjoy!

SharePoint 2010 Document Management

References:

Get Organized: SharePoint 2010 Content Organizer

Birds of a Feather: SharePoint Document Sets for Better Content Management

Top 10 Reasons SharePoint 2010 Changes the Game

Project Portfolio Management on SharePoint is HOT

Quick Note: Understanding the Relationship Between Taxonomy, Metadata and Content Types

Content Classification consists of three primary elements; a Taxonomy, Metadata, and Content Types.  Taxonomy is a hierarchical classification of terms. Metadata (Site Column or Field) is “data about data” in that it provides context to content, while a Content Type is a collection of Metadata.

The values in a Metadata field could be populated by Taxonomy terms. It is a common misconception that Taxonomy is comprised of Metadata, when in fact it is comprised of Metadata attributes commonly referred to as terms. These attributes are typically used as values in a Metadata field. Example: A Metadata field is named “Department” where the possible values for the “Department” field from the Taxonomy are “Sales”, “IT” and “HR”. The Content Type is named “Proposal” and includes Metadata fields for “Proposal Title”, “Department” and “Proposal Date”.

Quick Note: Office 365 Developer Training Kit available

It’s great news for all SharePoint Developers! Microsoft also announced the “Office 365 Developer Training Kit“.

With the release of this training kit, developers have a great starting point for customizing Office 365.
Guidance that provides developers with advanced guidance on how to develop for Office 365 including SharePoint Online, Exchange Online and Lync Online

 Besides the offline version, there is also an online version named “Office 365 Developer Training Course“.

Links:

1. SharePoint Online Developer Resource Center
2. SharePoint Online: An Overview for Developers

SharePoint 2010: How to create custom list form using InfoPath Designer 2010

Actually, I didn’t created custom list forms in InfoPath, but may be in future for POC purpose I will be use it..

While swing on the internet, I found a very good article on InfoPath form design, so i just want to share this article..

Following is the article link…

http://blog.libinuko.com/2010/03/21/sharepoint-2010-howto-start-customize-list-form-neweditview-using-infopath-designer-2010/

Kristian Kalsing: Using the SharePoint BDC to access SAP data

I was just searching for SharePoint BDC Capabilities and I found a great discussion which gives you an excellent introduction to the BDC, and also includes how the SharePoint BDC access SAP data.

Grate article by MR. Kristian Kalsing.

Link: http://kalsing.blogspot.com/2008/12/using-sharepoint-bdc-to-access-sap-data.html