CHUVASH.eu

CHunky Universe of Vigouros Astonishing SHarepoint :)

Make javascript code work with Minimal Download Strategy Part 1

Leave a Comment Posted by Anatoly Mironov on 2013-06-18

This is a part 1 of the blog post about Minimal Download Strategy and javascript adjustments for user code. What I initially thought should be enough for one post, is not enough, so I see it as a part 1. I wrote this post after I had read Chris O’Brien’s post about JSLink Here I want investigate how we can get his accordion list view working with MDS.

Minimal Dowload Strategy or MDS is a new feature in SharePoint 2013. By now, if you read this post, you already know about it. The simplest way to see if MDS is enabled on your site, you can recognize it on the “ugly” urls. I don’t think they are so ugly. But it is a matter of taste and habit.

No matter if you like MDS or not, MDS is enabled on many site templates and is a huge step towards a faster, more responsive architecture in SharePoint, I would say, towards the Single Page Application concept in SharePoint (but it is a long way to go).

We have to keep the MDS in mind, when we write our customizations in javascript. SharePoint 2013 loves javascript and the probability is high that you write a lot of javascript. If it doesn’t work with MDS, your code breaks and the user doesn’t see the functionality, or the site owner must disable the Minimal Download Strategy feature. I wouldn’t like to have disabling of an improvement feature as a prerequisite for my code.

In this blog post I want to dig into the techniques for getting the javascript code working with MDS. For a while ago I read a wonderful blog post in Chris O’Brien’s blog:

Using JSLink to change the UI of a SharePoint list/view

There he describes how JSLink works and how much you can change a standard XSLTListViewWebPart. Chris creates a jQuery UI Accordion view for his list view. As an issue he mentions the MDS.

Here I want to take Chris’ code and adjust it for MDS. My goal is to change as little as possible to find the most important steps for MDS. So I’ll continue where he has finished.

My colleages who have debugged the MDS a lot, gave me a tip: $_global. The SharePoint 2013 internally uses function inside the files which starts with $_global:

Here we have callout.js/callout.debug.js The function is called $_global and _ and the filename callout = $_global_callout. Then the function is invoked directly in the end of the file. It is a different story than the anonymous self executing funcitons we’ve seen before.

When I search the hive folder with grepWin tool, I find 148 files containing “$_global”:

I rewrote the the code into one wrapper function and invoked in the end of file:


// function to setup JSLink templates
function $_global_AccordionListView() {
    // function to process an accordion item..
    window.COB = window.COB || {};
    window.COB.accordionItem = {
        customItemHtml: function (ctx) {
            var accordionItemHtml = "</pre>
<h3>" + ctx.CurrentItem.Title + "</h3>
<pre>
";
            accordionItemHtml += "</pre>
<div>" + ctx.CurrentItem.AccordionItemDescription + "</div>
<pre>
";
            return accordionItemHtml;
        }
    };

    var overrideCtx = {};
    overrideCtx.Templates = {};

    overrideCtx.Templates.Header = "</pre>
<div id="\&quot;accordion\&quot;">";
 overrideCtx.Templates.Item = window.COB.accordionItem.customItemHtml;
 overrideCtx.Templates.Footer = "</div>
<pre>
";

    overrideCtx.BaseViewID = 1;
    overrideCtx.ListTemplateType = 11000;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

    $(document).ready(function() {
	    // It seems SharePoint inserts a script tag in an inconvenient place that breaks jQuery UI's accordion, so let's remove it!
		// (N.B. further testing recommended for production)..
		$("#accordion").find('#scriptBodyWPQ2').remove();

		$("#accordion").width('70%');
		$("#accordion").accordion();
	});
}

$global_AccordionListView();

Unfortunately, it didn’t help. There was still no accordion. But wait, is it just the accordion that isn’t created. Indeed. The JSLink itself works. We can see it in the markup:

Strange, maybe there was no need for rewriting the code in this case. I changed back all the javascript code to see the markup. It is the right markup. Then the problem is the accordion initialization, or the $(document).ready. Then I thought about the SharePoint-function for that: _spBodyOnLoadFunctionNames and rewrote the $(document).ready:

function onReady() {
    $("#accordion").find('#scriptBodyWPQ2').remove();
    $("#accordion").width('70%');
    $("#accordion").accordion();
}

_spBodyOnLoadFunctionNames.push("onReady");

When I deployed it, it worked… It doesn’t seem like it is the whole solution. It is too simple. Well, it is the solution for the Accordion List View. By putting the accordion initialization code into _spBodyOnLoadFunctionNames we ensure that SharePoint runs it even on pages with MDS. As the name tells us: OnLoad. This appends the code to the onload function which runs after the $(document).ready. It means the time before the text becomes an accordion is longer.

Other cases

Allright, the actual jslink works pretty fine with MDS, except the accordion. But if we hadn’t the jQuery UI Accordion, there wouldn’t be a need to make change to the javascript code. There must be other cases where we need to adjust our javascript code. In the meanwhile I discovered a couple of files in the hive folder which use RegisterModuleInit function:

After a quick search I found this:

Sridhar writes in his post, you have to have your javascript code in a function, then call the function inside a RegisterModuleInit. It is strange. Chris O’Brien’s example makes almost the same thing as Sridhar, it changes the display with JSLink. But there was no need for RegisterModuleInit.

More investigation will be in part 2.

Thanks to my colleagues Christopher, Björn and Martin for giving me tips and discussing it with me.

javascript, sharepoint code sample, customaction, javascript, jQuery, jQuery UI, jslink, List, mds, Minimal Download Strategy, Sharepoint, sharepoint 2013

Run Hyper-V and VirtualBox on the same machine

Leave a Comment Posted by Anatoly Mironov on 2013-05-23

Reblogged from derekgusoff:

Recently I upgraded to the Windows 8 RTM build for my main work laptop, and began working with Hyper-V, which is available on a client OS for the first time with Windows 8. Since I use virtualization to do SharePoint development every day, I was eager to see what Hyper-V could do. So far, I am impressed. It performs well and stays out of my way when I'm not using it.

Using GitFlow with Visual Studio and SourceTree

Leave a Comment Posted by Anatoly Mironov on 2013-05-11

Reblogged from Johan Leino:

I’m a Microsoft guy. I like their products, development tools, the whole lineup really.
However, a couple of months ago I started using git (or github if I should be completely honest…but that’s based on git) for version control. Coming from a Microsoft environment with first Source Safe and later on TFS (or TFVC really) it was a bit of a leap to take from…

A quick guide to configuring the Loopback check

Leave a Comment Posted by Anatoly Mironov on 2013-05-11

Reblogged from blksthl:

Hi dear friends!

401.1 Access denied...
If you try to access your newly created web application with a real nice FQDN or NetBIOS name and you end up getting a 401.1 Access denied...

Even after adding the site to the local intranet zone in IE...
Even after beeing prompted 3 times and filling in the correct credentials...
After setting up your Search to crawl you sites in a small farm whith crawl and web services on the same server...

Styling suiteBar and IE8

Leave a Comment Posted by Anatoly Mironov on 2013-05-08

Today I want to share little css tip for styling the suiteBar in SharePoint 2013 and making it work even in IE8. I needed to apply a green color to the suiteBar (#005128). It worked in all browsers except IE8:

The reason why is a special css rule (in corev15.css) that only IE8 understands:

.ms-core-needIEFilter #suiteBarLeft {
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ff0072c6,endColorstr=#ff0072c6);
}

I found this answer in an blog post written by Trace Armstrong: SharePoint 2013 – Branding the Top Bar and the Importance of Browser Testing. You could override this css rule with your colors, just dig into the msdn documentation.

What I needed though, was just a plain color, so I didn’t want to dig into that old progid-definitions. There is actually a simpler solution on social.msdn.microsoft.com. A guy called avshinnikov just overrides the “filter” rule by setting it to none. If you apply it only with id selector (#suiteBarLeft) then you have to put “!important” after that.

Fortunately I allready had my own css class on html tag which is a sort of a “namespace” for my selectors:

.takana-html #suiteBarLeft {
   background-color: #005128;
   filter: none;
}

The class .takana-html can have any name, of course, and it can be a class on a closer parent element to the suiteBar. The only goal for that is to make your css rules more important in your design in a natural way (and avoiding the “!important”). Eventhough many people use this principle without thinking about it, I’ve not found any info regarding this principle. I only heard Jeremy Foster and Michael Palermo talking about it and referring to it as “css namespaces” in a video course: Developing in HTML5 with JavaScript and CSS3 Jump Start. Of course, the name isn’t unique, there is another thing called css namespaces. But the concept is really good.

sharepoint css, ie, ie8, Sharepoint, sharepoint 2013, suiteBar

Making the Newsfeed web part available outside of My Sites in SharePoint 2013

Leave a Comment Posted by Anatoly Mironov on 2013-04-22

Reblogged from Bernado Nguyen-Hoan's Blog - Coding Stories from an IT Mercenary:

The Newsfeed is a key piece in SP2013's approach to social computing. It appears on the landing page of My Site as below:

This is actually a web part titled Newsfeed, and can be found under the Social Collaboration category. Now, you may want to have the Newsfeed on the homepage of your main portal rather than My Site. To make this web part available in your site collection, you will need to activate the feature with title "

AutoSPInstaller: error while stopping the default web site in IIS

Leave a Comment Posted by Anatoly Mironov on 2013-04-20

During an installation with AutoSPInstaller on my development machine I ran into a strange issue. I got the following error:

System.IO.FileNotFoundException: Could not load file or assembly ‘Microsoft.IIS.PowerShell.Framework’ or one of its dependencies

I haven’t found any other people having the same problem with the AutoSPInstaller, but I found a similar report on another forum: help.octopusdeploy.com. Maybe I am the only one who gets this error in AutoSPInstaller, if not it can be useful to write the solution down.

The error occurs when the default web site in IIS is stopped. For some reason Get-WebSite cmdlet throws an exception the first time you invoke it, but not the second time.

To get it working I followed the tip from the help.octopusdeploy.com and wrapped the Get-Website code in a try-and-catch, where the same cmdlet was in try and in catch. This line:

$defaultWebsite = Get-Website | Where-Object {$_.Name -eq "Default Web Site" -or $_.ID -eq 1 -or $_.physicalPath -eq "%SystemDrive%\inetpub\wwwroot"} # Try different ways of identifying the Default Web Site, in case it has a different name (e.g. localized installs)

becomes this code (the lines in try and catch are identical):

Try{
    $defaultWebsite = Get-Website | Where-Object {$_.Name -eq "Default Web Site" -or $_.ID -eq 1 -or $_.physicalPath -eq "%SystemDrive%\inetpub\wwwroot"} # Try different ways of identifying the Default Web Site, in case it has a different name (e.g. localized installs)
} Catch [System.IO.FileNotFoundException]{
    $defaultWebsite = Get-Website | Where-Object {$_.Name -eq "Default Web Site" -or $_.ID -eq 1 -or $_.physicalPath -eq "%SystemDrive%\inetpub\wwwroot"}
    Break
}

With this fix I was able to run the whole AutoSPInstaller script. My development machine was a fresh installed Windows Server 2008 R2 SP1 (without any updates).

Leave a comment if you run into the same issue. If so, I’ll try to send a patch to the AutoSPInstaller code.

Update 2013-06-06

This issue was reported to AutoSPInstaller at codeplex and closed as “self-resolved”.

PowerShell, sharepoint autospinstaller, PowerShell, Sharepoint

JQuery 2.0 - Notes About the Official Release

Leave a Comment Posted by Anatoly Mironov on 2013-04-20

Reblogged from Justin Cooney - Programming Tips:

The latest news coming from the world of jQuery is the official release of jQuery 2.0.

The new jQuery 2.x library is a significantly smaller file size than the jQuery 1.x series of libraries, but the 2.0 library does not support versions of Internet Explorer prior to version 9.

For the foreseeable future, the makers of jQuery plan to run two separate lines of the jQuery library:

Multi-lingual “Last Modified” footer

Leave a Comment Posted by Anatoly Mironov on 2013-03-25

You want to show when a page is last modified? The label should, of course, work in multi-language environment. For MOSS, there is a great article about how to achieve this: Jamie McAllister. Building a multi-lingual ‘Last Modified’ Footer for MOSS.

Here is a simple example for doing the same in SharePoint 2013:

<%@ Register TagPrefix='SharePointWebControls'
        Namespace='Microsoft.SharePoint.WebControls'
        Assembly='Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c' %>

<SharePointWebControls:EncodedLiteral runat='server' 
	Text='<%$Resources:cms,pagesettings_modifieddate_label%>' 
	EncodeMethod='HtmlEncode'/>: 
<SharePointWebControls:DateTimeField runat="server" 
	FieldName="Modified" 
	ControlMode="Display"/>

It fetches the localized value from cms.resx and puts it into your page as html.

sharepoint Sharepoint, sharepoint 2013

On Windows keyboard layouts for minority languages in Russia

Leave a Comment Posted by Anatoly Mironov on 2013-02-24

I can’t write in Chuvash in Windows 8 (and all the previous Windows releases). Chuvash is a minority language in Russian Federation. In this blog post I want to summarize the status of the keyboard layout support of the minority languages of Russia and find a way to improve this situation.

Languages and Microsoft

There are thousands of languages. Of course it is hard to support them all. As per 2012-02-21 Windows 8 supports 109 (!) languages. In december 2012 the support for Cheerokee language was added.

Display language, locale and keyboard layout

In Windows 8, when you go to Language preferences – Add a language, you’ll get “a language”. Behind this general word there are three parts which have to be distinguished in this post:

Display language (labels, messages and other user interface in the particular language)
Locale (a set of preferences for a particular language and region/country like currency, point or comma as a decimal delimiter, ltr vs rtl, encoding and much more)
Keyboard layout (just an arrangement of keys, their placement, can be specific for a language or country, can have different systems like Dvorak)

This blog post is about the keyboard layouts, the easiest part of the “language” support in an operating system.

Russian Federation minorities

There are 160 ethnic groups in Russia speaking over 100 minority languages. The most of ethnic groups ar so called stateless nations meaning there is no main country for this nation (e.g. Sami people in Sweden, but not Germans in the USA).

In Russia there are 21 republics which have their own official languages alongside Russian and their purpose is to be home for ethnic groups. I’ll focus mostly on the official languages in these republics in this blog post, but it would be interesting to investigate smaller languages as well.

Allmost all of the minority languages of stateless nations use the Cyrillic alphabet (often with additional letters). So it makes it pretty simple to see how many languages are supported in Windows 8. Just Go to the Language preferences -> Add a language and group them by writing system. See the screenshot above. There are only three minority keyboard layouts which are supported:

Bashkir (1,45 millions speakers)
Sakha (Yakut, 360 native speakers)
Tatar (4,3 millions speakers)

The funny thing is that all the three are Turkic languages.
There are two additional language keyboard layouts which are implicitly supported:

Erzya
Moksha

These two languages (which are co-official languages in the republic of Mordovia) don’t use any additional letters. That’s it. So they can write using only the standard Russian keyboard layout.

Keyboard layouts in Linux

Just a little comparison. In Linux distributions there are more minority languages from Russian Federation represented. The supported ones can be found in the /usr/share/X11/xkb/symbols/ru file:

Tatar / tt
Ossetian / os
Chuvash / cv
Udmurt / udm
Komi / kom
Sakha (Yakut) / sah
Kalmyk / xal
Bashkir / bak
Mari / chm

All these keyboard layouts were added by the community. I personally sent the Chuvash and Kalmyk fragments of that file to Sergey Udaltsov who created patch files and pushed it to freedesktop.

Windows 8 keyboard layouts and Touch mode

When I tried these three supported minority language keyboard layouts of Russia in touch mode, only one worked! It was the Tatar keyboard layout.

The tatars can type all their additional letters in touch mode as well.

Bashkir and Sakha keyboard layouts use the row above qwerty: 12345… Here is the preview for the classic Sakha keyboard layout:

And what about the virtual touch keyboard layout for Sakha language?

As you can see there are no keys for the additional letters for Sakha language (ҕ ҥ ө һ).

Summary

Many minority languages of Russian Federation (the most of them already endangered) miss the native keyboard layout support in Microsoft Windows 8 and Windows 7. Windows is a prevalent operating system in Russia. The support for minority language keyboard layout would help people to use their languages and give more chances for languages to survive. For now there are only 3 languages (besides Russian and implicitly some others like Moksha and Erzya) which are supported in Windows 8 with a physical keyboard: Tatar, Bashkir and Sakha. And only one of them (!) works even in touch mode: Tatar.

The purpose of this post is only to identify the status for Russian Federation minority language keyboard layout support in Windows 8. Microsoft Local Language Program (LLP) seems very promising. I hope we will see more languages of Russia and other countries available in “Add language” menu in Microsoft Windows 8.

Long tap and additional letters in Windows 8 (update 2013-03-16)

After I wrote this post I discovered some additional letters available when you long-tap the buttons on the virtual keyboard. Here is an excerpt from the Microsoft Blog about the “press-and-hold”-letters:

There is an interesting counter example in press-and-hold behavior. On a physical keyboard, when you press and hold a character, it repeats. On our touch keyboard when you press and hold, we show alternate characters or symbols. This is something a touch keyboard can do well and a physical keyboard can’t. If you don’t know the specific key combination to show ñ or é or š, for example, it’s painful to type on a physical keyboard. It’s easy to find on the touch keyboard. Practically no one has complained about this departure from convention. We built on it, in fact. You might discover that you can simply swipe from a key in the direction of the secondary key, and that character will be entered, without an explicit selection from the menu. So if you use accented characters a lot, you can get pretty fast with this.

I appreciate this. Here come all the letters I found in the Russian keyboard layout:

Flyout letters	Main letter	Additional letters
	у	ү ұ
	к	ҡ қ
	н	ң ҥ
	г	ғ ҕ
	з	ҙ
	х	һ
	о	ө
	э	ә
	с	ҫ
	и	і

Here is the full list of the Cyrillic additional letters:

ү	Cyrillic Ue	Bashkir, Tatar, Kazakh, Buryat, Kalmyk, Kyrgyz, Mongolian
ұ	Straight U with stroke	Kazakh
ҡ	Bashkir Qa	Bashkir
қ	Ka with descender	Kazakh, Uyghur, Uzbek, Tajik, Abkhaz
ң	En with descender	Bashkir, Tatar, Kazakh, Dungan, Kalmyk, Khakas, Kyrgyz , Turkmen, Tuvan, Uyghur
ҥ	En-ghe (Cyrillic)	Sakha, Meadow Mari, Altai, Aleut
ғ	Ge with stroke	Bashkir, Kazakh, Uzbek, Tofa, Tajik
ҕ	Ge with middle hook	Sakha, Abkhaz
ҙ	Ze with descender	Bashkir
һ	Shha	Bashkir, Sakha, Tatar, Kazakh Buryat Kalmyk Kildin Sami
ө	Barred O (Oe)	Bashkir, Sakha, Kazakh, Buryat, Kalmyk, Kyrgyz, Mongolian
ә	Cyrillic Schwa	Bashkir, Tatar, Kazakh, Abkhaz, Dungan, Itelmen, Kalmyk, Kurdish
ҫ	Cyrillic The	Bashkir, Chuvash
і	Dotted i	Kazakh, Ukrainian, Belarusian, Khakas, Komi, Rusyn

Here we have three fully functional language keyboard layouts if you are okay with long-tapping:

Bashkir	ғ ҡ ҙ ҫ ң һ ә ө ү
Sakha	ҕ ҥ ө һ ү
Tuvan	ң ү ө

Bashkir and Sakha, I suppose, were considered whilst designing the keyboard layout, and Tuvan language letters only happen to be within the Bashkir and Sakha letters range.

Tatar letters aren’t complete in the standard Russian keyboard layout, the reason for that must be, as I mentioned above, the full functional virtual keyboard for Tatar (where is no need for long-tapping).

There is another language which contains all the letters through long-tapping. Kazakh is absolutely a minority language of Russia, but it doesn’t represent a stateless nation.

Kazakh

ғ ә қ ң ө ү ұ і һ

Long-tapping technique could be a solution for many minority languages of Russia:

Language	Existing letters	To be added
Chuvash	ҫ	ӗ ӑ ӳ
Udmurt		ӝ ӟ ӥ ӧ ӵ
Meadow Mari	ҥ	ö ӱ
Hill Mari		ä ö ӱ ӹ

Chuvash, windows Bashkir, Chuvash, i18n, internalization, keyboard, keyboard layout, l10n, language, linux, localization, Microsoft, minority, Sakha, Tatar, ubuntu, Udmurt, windows, windows8

← Older posts