In this post I want to explore how to build a mobile app using jQuery mobile. Recently I discovered two great blog posts about this:

1. Building SharePoint web apps using Sencha Touch by Luc Stakenborg
2. jQuery mobile and SharePoint by Chris Quick

In my post I’ll use their findings and share some of mine thougts. I’ll focus mostly on how to get started with jQuery mobile and SharePoint. So go ahead and create your jQuery mobile app, just drag’n’drop some controls: Download it and yout get an “app.html” file and “my.css”. For now ignore my.css. app.html is something like that:

If you have an external web service reference in your sharepoint solution, you can use web.config configuration like:

<system.serviceModel>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" />
<bindings>
        <wsHttpBinding>
            <binding name="WSHttpBinding\_ISuperService" >
                <security mode="None">
                    <message clientCredentialType="None" />
                </security>
            </binding>
        </wsHttpBinding>
    </bindings>
    <client>
        <endpoint address="http://super.domain/SuperService.svc"
            binding="wsHttpBinding"
            bindingConfiguration="WSHttpBinding\_ISuperService" 
            contract="ISuperService"
            name="SuperServiceEndpoint">
        </endpoint>
    </client>
</system.serviceModel>
```security mode is set to "None". Then in code just get this configuration:

var proxy = new SuperServiceClient(“SuperServiceEndpoint”); var result = proxy.GetSomething();

Why

I need to to activate a feature in PowerShell and specify some properties. Simple? Yes. Possible? No. In the default Enable-SPFeature cmdlet you can’t specify any properties:

Enable-SPFeature –Identity "b5eef7d1-f46f-44d1-b53e-410f62032846" -URL http://dev

We can of course easily add properties when activating features in onet.xml:

<!-- Publishing Resources -->
<Feature ID="AEBC918D-B20F-4a11-A1DB-9ED84D79C87E">
  <Properties xmlns="http://schemas.microsoft.com/sharepoint/">
    <Property Key="AllowRss" Value="false" />
    <Property Key="SimplePublishing" Value="false" />
  </Properties>
</Feature>

So I went to SharePoint StackExchange and asked the question. Then I realized: the standard Sharepoin API doesn’t support this neither. The methods of SPFeatureCollection which have SPFeatureProperties as parameter are internal. So the only way is to use Reflection like Hristo Pavlov (2008) and Yaroslav Pentsarsky (2010) suggest. So why not to try to create a cmdlet?

Did you know that we can pipe the output from PowerShell into a graphical GridView? I have used PowerShell for one year and only now I discovered this nice feature. You can add filter criteria, you can filter by typing in a textbox:

Other useful output cmdlets

• out-file
• out-clip
• out-null

If your solution has two or more languages to support, I can recommend an open source tool ResxCrunch. Btw, you can even use ResxCrunch for localization of Android applications.

To use only SPUser objects isn’t always sufficient. To get other properties we have to retrieve user profiles. Giles Hamson gives an example how to get and how to update user profile properties with powershell. Here is an example how to get all work phones:

$url = "http://intranet/"
$site = Get-SPSite $url
$context = Get-SPServiceContext $site
$profileManager = New-Object Microsoft.Office.Server.UserProfiles.UserProfileManager($context)
$profiles = $profileManager.GetEnumerator()

while ($profiles.MoveNext()) {
  $userProfile = $profiles.Current
  $name = $userProfile.DisplayName
  $phone = $userProfile\["WorkPhone"\]
  $line = '{0};{1}' -f $name, $phone
  write $line
}

If you are not sure what properties are called, see the whole list by typing:

If you have used Issue tracking list template in SharePoint you must have marked that the comments are added and marked with author name and datetime. It is handy to have these micro “discussion boards” on items. The comment-formed communication can help to fine-tune task definitions. By the way, have you seen Trello? So the question is how we can create this column in other lists? Here is a little tutorial how to create “append-only comments”, as they are called:

Placeholders are very handy in html5, we don’t need to fool with input values. But in SharePoint and IE we must provide fallback for placeholders if we want use them in other browsers. Here is an jQuery extension to do that:

(function ($) {
  $.fn.extend({
    ensurePlaceholders: function () {
      var input = document.createElement('input');
      var placeholderSupported = ('placeholder' in input);
      if (placeholderSupported) {
        return;
      }
      function setHints(elem) {
        var $elem = $(elem);
        var value = $elem.val();
        if (value == "") {
          var placeholder = $elem.attr("placeholder");
          $elem.val(placeholder);
          $elem.addClass("empty-text");
        }
      }
      function removeHints(elem) {
        var $elem = $(elem);
        $elem.removeClass("empty-text");
        var value = $elem.val();
        var placeholder = $elem.attr("placeholder");
        if (value == placeholder) {
          $elem.val("");
        }
      }
      this.find("\[placeholder\]").each(function() {
        setHints(this);			
      });
      this.on("focus", "\[placeholder\]", function(e) {
        removeHints(this);
      });
      this.on("blur", "\[placeholder\]", function(e) {
        setHints(this);
      });
    }
  });
})(jQuery);
```Then "ensure placeholders" by running this function on a wrapper element which contains fields with the placeholder attribute:

jQuery("#form-wrapper").ensurePlaceholders();

If you open a custom page (not a list item form) in a modal dialog, your notification won’t be shown. The reason is that the notification area (#notificationArea) is inside a hidden div (#s4-ribbonrow). To show this notificationArea we must display the notification area:

var $ribbon = jQuery("#s4-ribbonrow");
if ($ribbon.is(":hidden")) {
	$ribbon.css({"min-height": 0, "height": "0px"})
          .show().children().hide()
          .filter("#notificationArea").show()
}

comments from wordpress

Jens Malmberg — 2013-01-03

console.log is the best tool for debugging javascript. In Firefox Firebug and Chrome Dev Tools you can even log objects which are represented as tree nodes of properties. If Firebug or Dev Tools in Chrome and IE9 are not opened, all these messages are ignored. But IE8 doesn’t understand console (if Dev Tools are closed) and raises an error: To avoid these errors, just declare an empty function just for IE8–: