Lately I’ve been working with various open source frameworks and integrating them into SharePoint to improve the UI and overall user experience.

Two of  these awesome frameworks are Twitter Bootstrap created by the guys (@fat and @mdo) at Twitter and jsRender by BorisMoore and can be found at https://github.com/BorisMoore/jsrender

“Optimized for high-performance pure string-based rendering, without DOM or jQuery dependency.”

-Boris Moore

Some of the key elements I am using are:

• Fluid Grid System
• jQuery Plugins such as Collapse, Modal and Typeahead to name a few.
• jsRender

As we all know, there is always room to improve on areas SharePoint falls behind or lacks richness in terms of functionality.   One of the simple enhancements one of my projects called for is the ability to search for people and have the much coveted (ok not all true) intellisense showing matches on a dropdown list.

Integrating Bootstrap On The Master Page

The first thing you want to do is include the framework dependencies such as js and CSS files.  Depending on the type of project, I either deploy as a Solution or simply upload to a place on the root of my Site Collection.

My Master Page top section looks something like this -

Once this is in place, one can use the various plugins and UI elements as needed across the site.

Using Typeahead  For Contact Search Autocomplete

These are the steps I took to quickly make use of the jQuery Typeahead plugin.

•  Declare a search box <input type=”text” id=”PeopleSearchBox”>
• Use whatever client side method you are used to to call the SharePoint Search and assign the results to an Array.  In my case I called it Person[]
• On the top of your page, inside a script tag, initialize the Typeahead plugin and wire it up to the search box as shown below.

The People Search Autocomplete using the Bootstrap Typeahead Plugin

When a user starts typing, the search function makes a call with the keyword typed in the search box.  As you can see, I have a function that queries SharePoint and handles populating my Person Array.

 Using jsRender for Display Templates

jsRender is extremely easy to use, and super powerful.  I am using it to create rendering templates or “Display Templates” of results from various data calls.  Such is the case for a Colleague Widget I created as well.

You can use jsRender and pass the Array of Objects and specifying the Display Template as such.

On my next post I will demonstrate how to use the Grid System from Bootstrap within a Master Page and Page Layout!

Enjoy!
Oscar

After working on my Windows Phone App, I decided I needed to target other platforms.  The most obvious one being iOS which is in the works, but also Android why not?  Doing a little research I stumbled upon the Adobe Flex Builder 4.6 (ok it was actually a recommendation from a good friend of mine @jonathanhartsf who is all about social game development at @IdleGames).

Anyway, while setting up my project and getting acquainted with the frameworks and IDE, I realized there are lots and lots of similarities between developing Windows Phone Apps using VS2010 and XAML and Flex 4.6 using MXML.  Naturally you can follow the MVC pattern using adobe Flex as well.  Anand has a great list of these frameworks and quick reviews  at http://www.anandvardhan.com/2008/11/13/popular-flex-frameworks

Here are some observations and similarities:

Data Access

There are various data sources you can tap into – HTTPService, Web Services, Cold Fusion, PHP, ASP.NET, MySQL, SQL Server  and more.  You can visually create connections to said services and you are done!  Or, you can use the declarative language + script tags to wire up handlers and manipulate the data however you wish and easily bind to various components such as Lists, Grids etc.

Declarative language (XAML and MXML)

It is quite nice to be able to declare an http service object in this manner

<mx:HTTPService id=”myHTTPRequest” url=”http://mysite/myproj/requestsomething.aspx” useProxy=”false” method=”POST”>
<mx:request xmlns=”">
<username>{username.text}</username>
<emailaddress>{emailaddress.text}</emailaddress>
</mx:request>
</mx:HTTPService>

Application Views

Much like the Windows Phone Apps, you can create various Views or App Tabs.  Once created, you can use <fx:Script> tags to write code within the view.  In addition, you can declare various non-visual objects using the <fx:Declarations> tag.

Application Templates (think XAML Templates)

As I was developing my WP7 App (Windows Phone), I realized that is super convenient to render data based on Templates and reuse them across the App.  This is also possible using Adobe Flex using itemRenderer  (http://www.adobe.com/devnet/flex/videotraining/exercises/ex4_03.html), and so having experience doing this on VS2010 using XAML, it was easy to implement on Flex.

There is a whole lot more I am learning and will share in the near future.

Thanks,
Oscar

A good friend of mine visited from DC, we decided to meet up in Vegas and among other things enjoy aerobatics.

Now back to work

My wife and daughter very happy we made time this year despite the hectic Holiday party-mania

My daughter and I created these two greeting cards on her new arts and crafts table.  Merry Christmas and Happy New Year!

You probably already know that branding the PerformancePoint Site is a good undertaking and you should consider doing it on your branding efforts.  But what if you just need the shortcut to the PerformancePoint Dashboard Designer within a page or even your own design?

Her is a quick tip, just drop this code into either a Layout Page or Master Page or Form WebPart:

 <script type="text/javascript">
function ULSrFH(){var o=new Object;o.ULSTeamName="PerformancePoint Monitoring Service";o.ULSFileName="ppssample.aspx";return o;}
    // <![CDATA[
    var navBarHelpOverrideKey = "WSSEndUser";
    function OpenDD()
    {ULSrFH:;
      var designerRedirect = "_layouts/ppswebparts/designerredirect.aspx";
      var siteCollection = "/";
      var siteLocation = "/YOURSITENAME/";
      var siteCollectionUrl = location.protocol + "//" + location.host + siteCollection;
      var siteLocationUrl = siteLocation.replace(siteCollection,"");
      designerRedirect = siteLocation + designerRedirect + "?SiteCollection=" + siteCollectionUrl + "&SiteLocation=" + siteLocationUrl;
      location.href = designerRedirect;
    }
    // ]]>
  </script>

<button onclick="javascript: OpenDD(); return false;">
                    <img align="absmiddle" alt="Run Dashboard Designer" src="/_layouts/images/PPSSiteTemplateRun.png"
                        height="36px" width="36px" />&nbsp;<span class="ppsma-fpbbt">Run Dashboard Designer</span>
                </button>

You can easily style the button etc.

Enjoy,
Oscar

As you probably already know SharePoint 2010 has added functionality when dealing with multiple Time Zones.  There are two areas aside form the Web Application level where a user can set this preference.  The first is managed at the site level via the Site Settings > Regional Settings page.

The second is managed at the user level via the My Regional Settings page accessible via the User actions menu where a user can choose a Region other than the one configured on the Site as shown in figure 3.

FIGURE 3 – The User Settings menu

FIGURE 3 – The My Regional Settings Page

So this is easily configured via the browser when you do not have a plethora of sites to provision, but  most projects I work on are fairly large – and many of these are regional implementations, so we typically have scripts to handle large intranet deployments.

With PowerShell you can easily provision SharePoint sites programmatically and configure many of their properties!  One of the properties that we are setting for both MySites (via a provisioning receiver) and Location-based sites is the Regional Settings.

Here is a code snippet that allows you to set the Time Zone when provisioning a sub-site based on the Time Zone ID desired.

$web = New-SPWeb -url ($intraneturl + "/NewDehli") -name "New Dheli"  -Template ($PubPortalGenericTemplate)
$web.RegionalSettings.TimeZone.ID = 23 # (UTC+05:30) Chennai, Kolkata, Mumbai, New Delhi $web.Update()

This short post really isn’t anything new as it relates to typical .NET core development.  But I think at times while working on SharePoint projects we forget those same techniques apply.

Prime example is using the DataItem object properties declaratively rather than wiring to the OnRowDataBound Handler.  And yes, there are times when you must wire up to that handler.

EXAMPLE: Declaratively access SPListItem Properties within User Control
My User Control needs to display various metadata of my SPListItem (DataItem).  This is how I simply did in a declarative manner.

Notice the Title ItemTemplate Column – I dynamically build a link which opens the Modal Dialog via a built in function.

The SPListItem contains the ParentList Property and that itself contains additional properties, so I just chain it as in ParentList.ParentWeb.Site.Url !

And The Outcome…

The Modal Dialog shows up like this when I click on the Title

And that’s my contribution for today!

Thanks,
Oscar

I’ve been extremely focused on a major SharePoint 2010 global implementation and barely have time for anything else (except now only because I am a bit sick).  The features we are implementing are very much needed and I believe many other companies will want to implement them as well.  Think of NewsGator Social Sites minus the licensing cost

Hopefully soon I will be able to disclose more detail, but here is a list of high level features:

1. News Subscription (corporate news, organizational news and much more)
2. The concept of My Services which allow a user to see IT, Facilities etc based on his/her Location
3. Location-based Sites (respect User Profile Properties)
4. Custom Activity Feeds
5. Custom MySite Pages with preconfigured custom WebParts and Navigation…
6. Custom Site Templates (pre-configured Libraries, Pages and WebParts)
7. Metadata Hub Syndication
8. Custom Branding

And much more.  I will also be talking about specific business problems we addressed.

Looking forward to sharing in the near future.

-Oscar

Short but sweet post.  So you’ve created your Web Template and need to deploy as part of your overall deployment scripts.  How do you include this?

The Web Template in this case is a User Solution (Sandbox Solution), and this is how you go about deploying it.  Learn more on the available parameters at http://technet.microsoft.com/en-us/library/ff607715.aspx

#Install Web Template

Add-SPUserSolution -Site $intraneturl -LiteralPath (resolve-path "Web Templates\WebTemplateName.wsp").Path -Confirm:$false

Install-SPUserSolution -Identity "WebTemplateName.wsp" -Site $siteUrl -Confirm:$false

This will also activate it