CHUVASH.eu

CHunky Universe of Vigouros Astonishing SHarepoint :)

A PowerShell one liner

PowerShell is powerful. You can write concise, well formulated, functional-style code. Recently I got the following quiz:

You’ve got $100. You have to buy exactly 100 animal, at least 1 dog, 1 cat and 1 mouse. 1 dog costs $15, 1 cat costs $1, 1 mouse costs $0.25.

There can be  many ways to solve it. But look at this one line solution. It is quite impressive what you can do with PowerShell

1..98 | % {
    $dog = $_
    1..98 | % {
      $cat = $_
      @{
        "Dog" = $dog
        "Cat" = $cat
        "Mouse" = 100 - $dog -$cat
      }
    }
  } | ? {
      $_.Mouse -gt 0
  } | ? { $_.Dog * 15 + $_.Cat * 1 + $_.Mouse * 0.25 -eq 100 }

This solution uses ranges, dynamic objects (PSObject), nested for loops, implicit returns and advanced filtering. All that is is out-of-the-box PowerShell.

AngularJS Performance Tuning for Long Lists

Anatoly Mironov:

This is a must-read for all SharePoint Developers who use Angular.

Originally posted on Small Improvements:

AnglarJS is great! But when dealing with large lists containing complex data structure, things can get very slow! We ran into that problem when migrating our core admin screens to AngularJS. The screens were supposed to work smoothly when displaying some 500 rows. But the first approach took up to 7 seconds to rende. Terrible!

We discovered two main performance issues for our implementation. One is related to the ng-repeat directive, the other was related to the filtering.

The following article summarizes our experiences with different approaches to solve or mitigate the performance problem. It will give you ideas and hints, what you can try out yourself and what is maybe not be worth a try.

Why is ng-repeat in AngularJS slow with large lists?

The ng-repeat directive of AngularJS is getting slow above 2500 two-way data bindings. You can read more about this in a post by Misko Hevery…

View original 1,404 more words

Updating hover style in IE8 Developer Tools

In our project we still have to support Internet Explorer 8. The CSS issues in IE8 are most difficult to debug and solve. You can not add a new rule in Developer Tools or toggle the state of an element to hover as in moder web browser dev tools.

One solution that I’ve come up to today, is to add a style with javascript or jQuery, open the script pane in IE8 Dev Tools and add this line:

$('<style>.ms-srch-item:hover {filter:none !important;}</style>')
   .appendTo($('body'))

This will fill update the hover effect of the .ms-srch-item directly.

ie8-devtools-001

 

That's it, just a little tip.

Debugging “What’s happening” in Communities

Recently an issue was reported about count mismatches in SharePoint 2013 Communities. The number of replies in category tiles sometimes is different compared to the community stats in the web part called “What’s happening”. The actual number of replies is 1 in the figure below. The user who has reported has tried to add, update and delete discussions and replies.

 

category-replies-count.png   comm-002

I have invested some time debugging this issue. It would be pity to not share my findings. Well the first thing to do was to determine the type name for the “What’s happening” web part. To do so just edit the  page and export the web part. In the exported .webpart file I saw that the type was Microsoft.SharePoint.Portal.WebControls.DashboardWebPart.

With that knowledge it is time to open ILSpy, an awesome and free(!) assembly browser and decompiler. Load the “Microsoft.SharePoint.Portal” assembly from GAC into ILSpy. Then use F3 to search for DashboardWebPart:

comm-003

The number of replies is retrieved from SPWeb.AllProperties:

comm-004

If the Property Bag does not contain it, it gets the number of replies from the list. The formula is as follows:

list.ItemCount - list.RootFolder.ItemCount

It means that it gets the number of both discussions and replies: ItemCount of Discusssions List. The number of Discussions is determined by the ItemCount in the RootFolder of the Discussions List. Discussions are List Items in the RootFolder (num2 in the figure below). Replies are saved in the subfolders, every discussion gets an own folder. The number of all replies are num3 in the figure below.

comm-005

After checking the web properties I could see that the number of replies there were wrong: 2.

The next step was to determine where and when the Web Properties are updated. The first guess every SharePoint Developer has in such cases is an EventReceiver. Here are all EventReceivers connected to the Discussions List:

$list.EventReceivers | select class, Type, Synchronization | Out-GridView

comm-006

Allright, CommunityEventReceiver then:

comm-007

Found where the actual update happens: CommunityUtils.UpdateWebIndexedPropertyBag

comm-008

The method is used in DiscussionListCommunityEventHandler.HandleEvent

comm-009

There is a flag, flag5 that is used to determine if the Web Properties should be updated:

comm-010

But the flag5 is not true on Delete operations in some code flows:

comm-011

 

That's it. So deleting a reply will not have any effect on "What's happening". But adding a new discussion will also update the stats:

comm-012

To summarize the debug session, there is an issue in the OOB code that misses to update community stats when deleting a discussion or a reply. Adding a new discussion, or a reply will synchronize the stats.

How to reference nested class or struct etc, in PowerShell

Originally posted on Discovering SharePoint:

I had a problem trying to reference a struct inside a public class from PowerShell. I tried to do it just like in C#, only with PowerShell syntax, simply adding the nested class or struct in the namespace, separated by a dot.

Doesn’t work:

$myProperty = [MyProject.MyClass.MyClassStruct]::MyProperty

But this didn't work. Instead I got the following error:
"Unable to find type [MyProject.MyClass.MyClassStruct]: make sure that the assembly containing this type is loaded."

It seems, after fiddling around a bit and doing a quick search, that PowerShell has it's very own way of calling a nested class or struct. Instead of adding the nested class with a dot, you actually have to use a +, like this:

Works:

$myProperty = [MyProject.MyClass+MyClassStruct]::MyProperty

I don't know why, but that's the way you do it. =)

Resources:

http://stackoverflow.com/questions/14141690/special-use-of-plus-sign-in-powershell

View original

IntelliJ Keyboard Shortcuts

Anatoly Mironov:

I want to use shortcuts. I prefer the IntelliJ keyboard scheme. Which do you use?

Originally posted on Cheat Sheets for Quick Reference:

Command Shortcut
(Visual Studio)
Shortcut
(IntelliJ IDEA/ReSharper 2.x)
Show available quick-fixes and context actions Alt+Enter Alt+Enter
Paste multiple Ctrl+Shift+V
Code cleanup Ctrl+E, C Ctrl+Alt+F
Silent code cleanup Ctrl+E, F Ctrl+Shift+Alt+F
Symbol code completion Ctrl+Space Ctrl+Space
Smart code completion Ctrl+Alt+Space Ctrl+Shift+Space
Import symbol completion Shift+Alt+Space Ctrl+Alt+Space
Complete statement Ctrl+Shift+Enter Ctrl+Shift+Enter
Parameter information Ctrl+Shift+Space Ctrl+P
Quick documentation Ctrl+Shift+F1 Ctrl+Q
Insert live template Ctrl+E, L Ctrl+J
Surround with template Ctrl+E, U Ctrl+Alt+J
Generate code Alt+Insert Alt+Insert
Create file from template Ctrl+Alt+Insert Ctrl+Alt+Insert
Move code up Ctrl+Shift+Alt+Up Ctrl+Shift+Alt+Up
Move code down Ctrl+Shift+Alt+Down Ctrl+Shift+Alt+Down
Move code left Ctrl+Shift+Alt+Left Ctrl+Shift+Alt+Left
Move code right Ctrl+Shift+Alt+Right Ctrl+Shift+Alt+Right
Extend selection Ctrl+Alt+Right Ctrl+W
Shrink selection Ctrl+Alt+Left Ctrl+Shift+W
Duplicate a line or selection Ctrl+D Ctrl+D
Comment with line comment Ctrl+Alt+/ Ctrl+/
Comment with block comment Ctrl+Shift+/ Ctrl+Shift+/
Inspect this Ctrl+Shift+Alt+A Ctrl+Shift+Alt+A
Inspection Results window Ctrl+Alt+V
Turn code analysis on/off Ctrl+Shift+Alt+8 Ctrl+Shift+Alt+8

Navigation and Search

Command Shortcut
(Visual Studio)
Shortcut
(IntelliJ IDEA/ReSharper 2.x)
Find…

View original 312 more words

Tip: Use the weakest CSS selectors

I am reading Mobile HTML5 written by Estelle Weyle. It is an awesome recap and new knowledge about html, css and javascript. I want to highlight one of tips I got: Use the weakest CSS selectors (can be found on page 204).

We all know, that inline CSS and !important are evil. They have a higher level of specifity and override the standard cascade of the CSS rules. If you use !important, then it will be hard to override CSS rules when you really need it. After these two classic “evils” the evil number three is overqualifying of CSS selectors. You should really never add more classes or ids or elements than needed. Consider this:

.warning {
  background-color: red;
}

It is often enough, you don't need those:

html .warning
div .warning
div.warning, div &gt; .warning
body p#myP.blue strong.warning

SharePoint

In SharePoint sometimes we want override some OOB CSS rules. We have our own "namespace" to do that really simple. We have added a class to the html tag: "contoso-html". Then it was really easy to update any OOB CSS rules, just copy the selector and add .contoso-html:

.contoso-html #s4-workspace { }

We also use less preprocessor and nest our selectors which has resulted that almost all of our selectors contain .contoso-html. Now back to the tip of that blog. This "namespace" made it harder to adjust CSS rules for special cases, like left navigation in the Search Center, we were forced to add more specific selectors, and selectors became bigger and bigger.

What I would recommend today is to skip the .contoso-html namespace in the CSS but keep it in the masterpage markup, use it wisely, meaning only if the original rule doesn't work. Don't nest too much in less files. Try always to find the weakest CSS selector. It is especially important in the SharePoint "markup djungle".

It is time to standardize the Chuvash Keyboard Layout

Proto-Bulgarian Runes. Wonder if they are supported in Unicode :)

Proto-Bulgarian Runes (Chuvash language is the closest language to the Proto-Bulgar language). Wonder if they are supported in Unicode :)

The Chuvash Computer Keyboard layouts have existed since 2001, but due to the lack for Unicode support we were forced to use the look-alike letters  from other latin-based keyboard layouts. On Linux The Chuvash keyboard layout was added in 2007 and Linux is still the only operating system that has a native keyboard layout for Chuvash language. On Windows we have used the Keyboard Layout Creator and distributed it as an executable file.

Today, when Windows XP is not supported anymore, the majority of users now have full support for the correct Chuvash letters from the Extended Cyrillic table. These four Chuvash letters are “additional” to the Russian alphabet: ӐӖҪ and Ӳ.

Now when new “keyboards” appear on Android, in web browser (they use the standardized letters) and hopefully in Windows and iOS, we have to consider put the correct letters into the keyboard layouts. For Linux the /usr/share/X11/xkb/symbols/ru file has to be updated:

// Chuvash language layout
// Anatoly Mironov @mirontoli
partial alphanumeric_keys
xkb_symbols "cv" {
    include "ru(winkeys)"

    name[Group1]= "Chuvash";

    key.type[group1]="FOUR_LEVEL";

    key        <AD03> {        [      Cyrillic_u,	Cyrillic_U,
                            0x010004f3,    0x010004f2      ]       };
    key        <AD05> {        [      Cyrillic_ie,     Cyrillic_IE,
                       0x010004d7,	0x010004d6     ]       };
    key        <AC04> {        [      Cyrillic_a,	Cyrillic_A,
                          0x010004d1,  0x010004d0      ]       };
    key        <AB03> {        [      Cyrillic_es,     Cyrillic_ES,
                            0x010004ab,    0x010004aa      ]       };

    include "level3(ralt_switch)"
};

Impact

This switch will have a huge impact on the Chuvash language. Much of content on forums, websites and Chuvash Wikipedia will be hardly searchable. But we have to do it, to standardize and prepare for the future. The Chuvash language Committee is not against it, despite it has not been updated the guidelines for using letters from 2009.

Edit 2014-04-30

The bug in the freedesktop bugzilla was solved very quickly. In fact, in the new Ubuntu 14.04 you'll find a correct keyboard layout:

chuvash-keyboard-map

Here is the source code:
chuvash-keyboard-xkb

partial alphanumeric_keys
xkb_symbols "cv" {
    include "ru(winkeys)"

    name[Group1]= "Chuvash";

    key.type[group1]="FOUR_LEVEL";

    key        <AD03> {        [      Cyrillic_u,	Cyrillic_U,
                          U04F3,    U04F2      ]       };
    key        <AD05> {        [      Cyrillic_ie,     Cyrillic_IE,
                          U04D7,    U04D6     ]       };
    key        <AC04> {        [      Cyrillic_a,	Cyrillic_A,
                          U04D1,    U04D0      ]       };
    key        <AB03> {        [      Cyrillic_es,     Cyrillic_ES,
                          U04AB,    U04AA      ]       };

    include "level3(ralt_switch)"
};

Using CAML with SharePoint REST API

Do you prefer REST over CSOM as I do? I’ll skip the whys. Andrew Connell put it already in wrtiting so nicely. Well, if you do prefer REST, then you must have discovered some shortcomings of REST, or its incompleteness compared to CSOM. I think of:

  1. Inability to filter items based on multivalued taxonomy fields
  2. Inability to filter items based on user fields where user is added through a group, rather than directly, e.g. AssignedTo=[Me] combined with a SharePoint group.

In such situations I was forced to use CSOM. Until yesterday. Yesterday I learned that we can actually use CAML queries in REST requests.

 

This enables using REST in all situations. The REST API is still developed and many features are added. Maybe a particular operation that needs a CAML query today, can be supported in the core REST API and can be easily refactored then.

But until then, we can use CAML queries in REST requests. Here are the important things about it:

  • A REST request with a CAML query is always a POST request
  • A REST request with a CAML query has always to have X-RequestDigest http header (actually because it is a POST request)
  • A REST request with a CAML query should always have the attached CAML query in the request body (and not in a query string). We don’t want to mess with long urls, do we?
  • A REST request with a CAML query must have the http header “Content-Type: application/json;odata=verbose” unless you use xml in the request body.
Needed HTTP Headers in REST requests

HTTP headers you have to provide in REST requests with CAML queries

You can use jQuery or SP.RequestExecutor to make an ajax call. The REST endpoint is:

_api/web/Lists/GetByTitle('<your list title>')/GetItems

The request body (if you use json, and I bet, you do) is in this format:

{ "query" :
   {"__metadata": 
      { "type": "SP.CamlQuery" }
      , "ViewXml": "<YOUR CAML QUERY>" 
   }
}

Here is the boilerplate for a REST request with a CAML Query:

function getDataWithCaml(listName, caml) {
    var endpoint = "/_api/web/lists/GetByTitle('" 
        + listName + "')/GetItems";
    var requestData = { "query" :
           {"__metadata": 
              { "type": "SP.CamlQuery" }
              , "ViewXml": caml
           }
        };
    return jQuery.ajax({
        url: endpoint,
        method: "POST",
        data: requestData,
        headers: {
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
            "Accept": "application/json; odata=verbose",
            "Content-Type": "application/json; odata=verbose"
        }
    });
}

This function is just an example. It has no error handling, and it takes for granted that your list is in the root site for on your (sub-)domain ("/"). So take it as an example only.

Here is how the function can be invoked

var caml = "<View><Query><Where><Or><Eq><FieldRef Name='AssignedTo' /><Value Type='Integer'><UserID/></Value></Eq><Membership Type='CurrentUserGroups'><FieldRef Name='AssignedTo' /> </Membership></Or></Where></Query></View>";
getDataWithCaml("Tasks", caml);

Pragmatic Responsive Design

I have been curious about the responsive design but have not had time to try it out. To learn more I decided to make an existing website more responsive. A friend of mine drives a Chuvash Dictionary website: samah.chv.su. Today it looks like this in a mobile browser:

Before responsiveThe site is a classic 1000px-ish centered page with header and two columns. The left column is for the main content and the right column for additional “aside” information. Can it be more classic? This current version works, you can still use the dictionary on a mobile phone. But there are several improvements that can be done:

  • Avoid scaling to be able to read text
  • Avoid scrolling back and forth to read every line
  • Move the right column down, it is better to use the space for the main content.
  • Hide the quick links to the individual letters
  • Shrink unused space in the header.



What I wanted was to provide some easy steps to make it more responsive. The steps had to be pragmatic: some easy-to-implement steps that would make a difference, and with very little impact on existing markup.

I created a copy of this page and made it available publicly, because I wanted to access from everywhere and test it on so many devices and resolutions as possible. I used Github Pages to get the version control too, even though a public folder on Dropbox, OneDrive or Google Drive could give the same result.

Here is my list of what I did to make it more responsive:

Don’t do anything for larger resolutions

Just leave it as it is, unless you want to redesign your site.

Create the css file for responsive design

Just create a file and call it responsive.css. Reference this file inside your site in a usual way.

<link rel="stylesheet" href="./responsive.css" type="text/css">

Set witdh 100% when a scroll appears

Find the "break point" where your site gets a horizontal scroll. To do so, just fire the Chrome Dev Tools, dock it to the right, and resize your page. In my case it was 1016px. Now it is time to do a change. Create a media query for that and try to remove all the hard-coded width values by setting width:100%. Well something towards this "very responsive site".

@media all and (max-width: 1016px) {
    .art-sheet {
        width: 100%;
    }
    div.art-header {
        width: 100%;
    }
}

Let the columns disappear

Find the width where two columns become ugly and impractical. Create a media query for that and just style the columns so they do not float. In my case the original site uses table-row layout. I set display:block and the right column went down.

@media all and (max-width: 675px) {
  div.art-content-layout-row {
      display: block;
  }
  div.art-content-layout div.art-layout-cell {
      display: block;
  }
  div.art-content-layout-row {
      display: block;
  }
}

Prevent scaling in mobiles

Now your page is more responsive in a desktop browser, but it is still unreadable in a mobile. The reason is the mobile browser that scales it for us. Let's disable it. Just put this meta tag in the head session of your page:

<meta name="viewport" content="width=device-width, initial-scale=1">

Hide rarely used elements

In a mobile we want to see the most important things, the actual content. Hide menus and remove empty spaces. In my case I hid the letters that took to much place and the language switcher. They can be shown in another menu (see below).

Make a responsive navigation menu

It is not complicated at all. You can google it. There are many tips and jQuery plugins. I did in a very easy way. I added a new div to my html:

<div id="responsive-menu" onclick="toggleMenu()">☰</div>

I also added this css style and hid this div for bigger resolutions:

#responsive-menu {
  position: absolute;
  right: 5px;
  top: 15px;
  font-size: 30px;
  cursor: pointer;
  display: none;
}
@media all and (max-width: 399px) {
  #responsive-menu {
    display: block;
  }
}

Here is the tiny javascript click event listener:

(function() {
  var menuOpen = false
      , menu
      , langSwitcher;

  window.toggleMenu = function() {
    menu = menu || document.getElementsByTagName("center")[0];
    menu.style.display = menuOpen ? "none" : "block";
    menuOpen = !menuOpen;
  }
})();

Here is the result. There are still some improvements that can be done, but here is the result of the my changes.

samah-004 samah-003

Add a website icon

Improve the user experience by adding a website icon. It will be used when an iPhone, iPad and Android user will save your page as a bookmark (and it will be placed on the screen and look like any app). Here is how I did:

  1. I created a 74 x 74 px png image and saved it as apple-touch-icon.png. I placed it in the "root folder".
  2. In the page markup I added this line inside the head element:
<link rel="apple-touch-icon" href="apple-touch-icon.png">

That's it. So now when someone saves the website as a bookmark, it looks like this:

photo samahsar-001 Screenshot_2014-03-25-23-30-02

Then on the mobile screen it looks like any other app. It works even on Android devices (even though the icon is an apple-touch-icon).

 

UPDATE 2014-03-25

Now these changes are implemented on the real site: samah.chv.su

UPDATE 2014-05-12

I discovered a blog post about how to adjust a web app for best experience in iOS. This gist is a perfect example what you can add for properties.

<!-- Run in full-screen mode. -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Make the status bar black with white text. -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- Prevent text size adjustment on orientation change. -->
<style>html { -webkit-text-size-adjust: 100%; }</style>
Discovering SharePoint

And having fun doing it

Bram de Jager's SharePoint blog

My view and thoughts on SharePoint.

My programming life

and everything in between

SharePoint Development Lab by @avishnyakov

It is a good place to share some SharePoint stories and development practices.

SharePoint Dragons

Nikander & Margriet on SharePoint

The Zuul Cat Idea Brewery

Where ideas on software development and entrepreneurship brew.

Paul J. Swider

Inspire! Teach! Awe!

Mai Omar Desouki - Avid SharePointer

Egyptian & Vodafoner - Senior SharePoint Consultant

Alexander Ahrens

MCPD | SharePoint | Web Development | JavaScript | .NET

Cameron Dwyer | SharePoint, Outlook, OnePlaceMail

OnePlaceMail, SharePoint, Outlook & Life's Other Little Wonders

.:paul.tavares:.

Me and My doings!

Share SharePoint Points

By Mohit Vashishtha

Jimmy Janlén "Den Scrummande Konsulten"

Erfarenheter, synpunkter och raljerande om Scrum från Jimmy Janlén

SPJoel

SharePoint for everyone

SharePointRyan.com

Ryan Dennis is a SharePoint Solutions Architect with a passion for SharePoint and PowerShell

SharePoint 2020

The Vision for a Future of Clarity

Aharoni in Unicode, ya mama

Treacle tarts for great justice

Follow

Get every new post delivered to your Inbox.

Join 205 other followers