CHUVASH.eu

CHunky Universe of Vigourous Astonishing SHarepoint :)

Tag Archives: tips

Working with resx files in Visual Studio

Today I found a nice Visual Studio Extension for working with localization and resx files: Resx Resource Manager. This extension provides an additional view in your project and scans all the resx files. I would recommend it to all projects where you have to translate your interface. Here is how it looks in my project:

resx-001

It can also assist with some machine translation from Bing and MyMemory:

resx-002

Another good thing is the Export and Import to and from Excel. Wonderful if you need help from Non-developers.

resx-003

Advertisements

Bypass all custom jslink

bypasscustomjslink-001

Client Side Rendering (CSR) and jslink are great for customizing lists and forms in SharePoint. In my current project we use it a lot of it. A disadvantage of that path, although, is that it might occur javascript errors, during the development phase, but also in production. We do, of course, our best to leverage the best jslink code, but unfortunately we have to live with the fact that errors can occur, especially when we use it for NewForm, EditForm, DisplayForm and View (in list and grid).

If an error occurs, it won’t stop the rest of javascript (it is wrapped in try and catch by SharePoint), but the fields will still not function as intended. It can also be some “corrupt” or old data in the field value that will “break” the jslink code.

I would like to suggest one little fix, an idea I’ve come up to in my jslink-heavy project:

Use a custom url parameter to stop all custom jslink execution.

The query string parameter can be called bypasscustomjslink=true

In every custom jslink, start with this line of code:

That’s it. If you have this in place, you can just manually add this to your url in browser:

?bypasscustomjslink=true

or

&bypasscustomjslink=true

Then all the customized fields and views will be uncustomized until bypasscustomjslink=true is removed. While viewing and editing list items in this uncustomized mode, you can access and repair data as if you never had adjusted it with jslink.

Using this does not mean you can “relax” and start writing crappy code. You still have to produce good code and anticipate all possible errors. bypasscustomjslink is just a convenient “emergency exit” aimed for developers and support to quickly solve problems without needing to reset the JSLink property on fields and list views.

Improving the web performance of an intranet

overloaded-sharepoint-in-browser

All the “small” app parts, web parts, delegate controls, user controls, and other “packages” that “must” be delivered to the users on every page load of the Start Page of your Intranet.

Recently we made an investment to improve the performance of our intranet. We made many changes in different layers: SQL, Network, Browser upgrade and code. Here I want to tell about what code changes we did to improve the web browser performance. Please leave feedback if you find it useful. You can also share your suggestions. We measured the performance before our code changes and after them. We had amazing results. Unfortunately I can not share any numbers, but we improved the Time to First Byte, time to load event firing in the browser, memory consumption in the clients and, perhaps, the most important, we improved the perceived performance of the Intranet, the way how users experience the speed and UI responsiveness. To do this I got many ideas of my project colleagues and branch colleagues. Here is the list of changes we’ve implemented:

– Execute code on demand

Consider this scenario: on a page users can click on a button to download a vcard. Aggregating user information is a costly operation that requires getting data from the User Profile Service, getting the profile image from SharePoint. Don’t ever do this operation on page load. Move the code to the “onclick” action. In other words, work when it is needed. It is like cooking a lot of food, when you are not hungry. It is nothing new, unfortunately there were a couple of the “eager code” places.

– Cache results, investigate what parts can be cached and how fresh data needs to be

All data on your page doesn’t need to be fetched on every page load. In our project We listed all the “parts” of the start page and other often visited pages and went to the business and asked them to evaluate how fresh data should be. Some parts should be as fresh as possible (no cache), whereas it would be tolerated that the information could be dirty (cache up to one week or more).

– Reference javascript and css files from one location

Do you have jQuery in your SharePoint Intranet. How many copies do you have? What we did in our Intranet was that we partially implemented the CDN concept. Even though we don’t distribute our resource files geographically, we have 1-to-1 relation between a file and its absolute URL. In the whole intranet, we have only one jQuery url and only one our intranet.core.js url. We did by creating a dedicated CDN site collection. This alone makes a big difference. To evolve the idea we could provision resources outside SharePoint to remove the authorization overhead. We could also distribute it geographically by having files closer to the end users.

– Unify your framework and your dependencies

In our projects we had a couple of SharePoint-hosted apps developed by different teams. We had different approaches and different framework that solved almost the same problem: AngularJS and KnockoutJS. Eventhough apps are independent pieces of software, they were used within the same page (as app parts). It was too much http traffic. We agreed on Developer Guidelines and chose one framework.

– Do not hide controls on the page with CSS, remove them

On the start page in our intranet we didn’t show the left navigation, but it was still rendered in code behind. Instead hiding it with CSS, we just removed it by an empty ContenPlaceHolder in our Start Page Layout:


<asp:Content ContentPlaceholderId="PlaceHolderLeftNavBar" runat="server"/>

– Optimize jQuery Selectors

We reviewed all the jQuery code and improved the selectors. Optimizing the selectors will improve the overall performance in the browser, especially in older browsers. The worst example is using text selectors, like this one:

jQuery('#NoteBoardContainer*:contains("There are no notes posted yet. You can use notes to comment on a page"):last');

It will sink your IE8 browser.

– Minify javascript and CSS files

Minifying resource files like javascript and css is not hard. My recommendation is to use Web Essentials plugin in Visual Studio. Alternatively you can use the SharePoint Assets Minifier.

– Use the weakest selectors in CSS and in LESS

In our project we are using LESS. With LESS it is easier to write  readable CSS code. But be aware of the output. Do not make the selectors too strong: Use the weakest CSS Selectors. The weakest selectors will make it easier to maintain the CSS and it will minimize the amount of KB the server needs to send to your users’ browsers.

– Ensure javascript and CSS files are cached

JavaScript and CSS files should be cached. You should also avoid 304 responses where the Server answers “Not Modified”, because this has an impact on the performance. Configure the Blob Cache and put your resources into the Style Library.

– Remove all app parts from SharePoint-hosted Apps from the start page

There can be exceptions, but we encountered that client web parts (app parts) from SharePoint-hosted apps had a huge impact on the performance. The combination of a couple of app parts on often visited pages (like the start page on the intranet) led to long page load times. These are the reasons why you should not have SharePoint Hosted App Parts on your start page:

  1. App Parts are iframes. They are loaded simultaneously if you add client web parts (app parts) in a usual way. They hold up the whole page. Users cannot interact with the intranet page until all the content in all app parts has been loaded. This can be partially improved if you introduce a delay in the app part loading, by developing an own engine. See my blog post where I mention such a concept: AppLoader Concept for SharePoint apps.
  2. The content from a SharePoint AppWeb is not fully cached. If you examine the http traffic from the apps you’ll see a lot of 304 responses, meaning the browser requests when the server answers that there is no newer version. This has an impact on the performance. See more in Alik Levin’s blog: ASP.NET Performance: Get Rid of HTTP 401 and HTTP 304. In a SharePoint-hosted app you don’t have any control what so ever to adjust the the cache settings. This is not the case in the Provider-hosted apps.
  3. SharePoint-hosted apps can only use javascript. The code is executed on the client. Older browsers like IE9 or IE8 render the pages slower. The Start Page that is slower than the rest of the Intranet is not something that will engage your users.
  4. App Parts are iframes that do not know about their dimensions. App parts often need to update the height and the width  of the parent iframe. This causes irritating flickering. Perhaps OK on some pages, but I’d say totally unacceptable on the start page of your brand new intranet..

What did we do instead of App Parts on the Start Page? We converted them into Script Editor Web Parts, the app parts were only one-time parts, they only were used on the start page.

Do not get me wrong. What we did was not abandoning apps as a model, we just removed wrong apps, apps that cannot be reused, the SharePoint-hosted apps that had big performance issues. I am looking forward creating right apps, that are written with performance, reusability, scalability and good design in mind.

 

Do not mess with the hive

In our Intranet we got this nasty double encoding error that was introduced in SharePoint April 2014 CU. In July 2014 CU the problem is still there. I often hear the suggestions to update files directly in the hive (the root folder for SharePoint: C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\) In that blog post it is described what the problem is and what files are affected and what code must be altered in order to get it to work (which I like). But it is also suggested to update the Search.ClientControls.js directly on the server (which I don’t like). So my advise is:

Do not mess with the SharePoint hive

Even though you have access, treat it as a black box, because

  • you don’t want to update the full file and the minified version of it on all servers and keep track of possible changes
  • you don’t want to loose Microsoft support because you have messed up the application folder
  • you want to think Cloud and Cloud-Ready. In Office 365 you’ll never get access to the hive.

What to do then?

Allright, enough said about the theory. What should we do to solve this issue? Here is my suggestion

  1. Find out how critical it is, perhaps you can wait until the next CU is released
  2. Contact Microsoft and let them fix it
  3. Find an alternative solution.

A solution without messing with the hive

To solve this particular problem, we can inject our fix into the Search.ClientControls.js on the fly using the SP.SOD framework. The problematic function is the $urlHtmlEncode. Before the April 2014 CU it looked as follows:

function $urlHtmlEncode(str) {
    return $htmlEncode(Srch.U.ensureAllowedProtocol(str)); 
}

So now we can reset it back through our code. Just add these lines of code to a javascript file that is loaded on all pages (within a custom master page, or a custom user action):

/// @author Anatoly Mironov
SP.SOD.executeOrDelayUntilScriptLoaded(function () {
    $urlHtmlEncode = function (str) {
        return $htmlEncode(Srch.U.ensureAllowedProtocol(str));
    }
}, "Search.ClientControls.js");

This code will register code for resetting the problematic function and execute when Search.ClientControls.js is loaded. On pages where Search.ClientControls.js is not loaded (on the majority of the pages except the Search Center), this function will not execute.

Load git into PowerShell

Just a little productivity tip. If you use git on Windows, you probably already have the Github for Windows application. This application adds the Git Shell:

006-gitshell

The Git Shell will open a PowerShell window and execute shell.ps1 from the Github directory:

007-gitshell

What it won’t do is to load your personal PowerShell profile. I want to use my PowerShell profile that creates some links and adjust the look-and-feel and the promt of the shell. By the way I have published my profile.ps1 as a gist:

I also want to have git in PowerShell available directly. The answer is in the shell.ps1 in the Github folder:

008-gitshell

So add this line to your profile.ps1 as I did:

. (Resolve-Path "$env:LOCALAPPDATA\GitHub\shell.ps1")

That’s it. If you haven’t seen the “DOT” in PowerShell scripts, it is called dot sourcing, it will execute the script and keep all the variables and references within the script.

An alternative

If you do not have Github for Windows, there is another way to load git functionality into PowerShell:

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.

Masked Inputs

Just a quick tip today. If you are looking after masked inputs like the old ASP.NET Ajax Control Toolkit MaskedEdit, you can try jQuery plugin called Masked Input from DigitalBush or even better jquery.inputmask.

Toastr.js and SharePoint

Have you used SharePoint javascript Notifications (SP.UI.Notify)? Are you looking for something new and fresh? Well then check out the Toastr.js – a simple, beautiful, fully responsive and light-weight javascript lib for notifications, developed by John Papa and Hans Fjällemark and released under the MIT License.

By the way, toastr was one of many things I discovered and learned on John Papa’s online course by pluralsight: Single Page Apps with HTML5, Web API, Knockout and jQuery. It is a really awesome course, where you learn how to create an amazing SPA.

Well, how’s about SharePoint. While whatching the course videos about toastr, I thought: Can we use it in SharePoint? Yes we can!

Just load the toastr css and js and start using it:

toastr.success("Data has been saved successfully!", "Looks very nice")

 

The easiest way to get the toastr in your project is to install the toastr nuget package:

Install-Package toastr

The original Visual Web Part template is missing in Visual Studio 2012

Today I encountered a weird issue, the classic Visual Web Part template was gone in Visual Studio 2012. When I created a Visual WebPart, a webpart was created with a generated .g.cs file, like the sandboxed visual webparts. I am not exactly sure why it happened. According to the MSDN guide Creating Web Parts for SharePoint, the structure of Visual Webparts should be the same as in Visual Studio 2010. It could have happened after I installed the power tools.

However, if someone runs into the same issue, here is the solution:

Copy this zip file from a computer with VS2010 installed:

C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE\ItemTemplates\CSharp\SharePoint\SharePoint14\1033\SharePoint14VisualWebPart.zip

Unpack it.

Edit SharePointVisualWebPart.vstemplate. Change the assembly line so it references to the Version 11:

<Assembly>Microsoft.VisualStudio.SharePoint.ProjectExtensions.Wizards, Version=11.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a</Assembly>

After that copy the directory SharePoint14VisualWebPart to these two locations on your computer with Visual Studio 2012 installed.

C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\ItemTemplates\CSharp\SharePoint\SharePoint14\1033\
C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\ItemTemplatesCache\CSharp\SharePoint\SharePoint14\1033\

Just to be safe, save the SharePoint14VisualWebPart (which have the same name) by appending “.bak” to the name.

If you don’t have an access to a VS2010 computer, I have saved the template for you on github.

javascript: developing for performance

Many words have been said about the importance of performance when working with javascript files. Here I want to summarize what developers can do to increase the performance related to javascript. I found many tips on blogs. Here comes my aggregated list of actions one can do to speed up sharepoint (and not only) sites with focus on javascript:

1. Load only sharepoint stuff you need

Use prefetch option to only load sharepoint javascript files that needed. To see the difference, just add ?prefetch=0 to your sharepoint url in the browser.

The downside of this lazy loading is that you wrap all sharepoint related javascript into ExecuteOrDelayUntilScriptLoaded otherwise you maybe invoke some of javascript objects and functions that are not loaded. So the prize of this huge performance improvement is a high awareness by a developer when and which scripts are loaded and run.

2. Load only custom stuff you need

The same lazy loading principle should be used for your scripts as well, unless your javascript code is little. If your projects have much of functionality on client side, than you can increase loading performance enormously. This post is not about details, but when you want to know more about “On Demand javascript“, take a look about SP.SOD, head.js, require.js.

3. Minify all your scripts

Minify or crunch your javascript files. There are many tools available for doing that: google closure compiler, jscrunch… But the best javascript minifying tool for SharePoint development I found is Mavention SharePoint Assets Minifier which is developed by Waldek Mastykarz and highly integrated with Visual Studio and SharePoint debug/release modes.

4. Minimize your scripts

Not only how much javascript is loading matter, but how many files as well. Like sprites in CSS, you can combine your scripts into one that you load. Just organize your scripts as they were classes (one class – one file), then use T4 to generate a composite javascript file.

5. Check your javascript for memory leaks

Thinking about memory leaks is important, and not only in SharePoint Server Side. It is important to avoid memory leaks in javascript as well. Especially when your audience uses older browsers. See this amazing post about javascript memory leaks on Ying’s blog.

This is all so far. Have I missed something, please comment.

Вула Чăвашла

VulaCV - Чăвашла вулаттаракан сайт

Discovering SharePoint

And going crazy doing it

Bram de Jager talking Office 365, SharePoint and Azure

My view and thoughts on Productivity and more.

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

Paul J. Swider - RealActivity

RealActivity is a specialized healthcare services and solution advisory firm.

Mai Omar Desouki - Avid SharePointer

Egyptian & Vodafoner - Senior SharePoint Consultant

Cameron Dwyer | Office 365, SharePoint, Outlook, OnePlace Solutions

Office 365, SharePoint, OnePlace Solutions & 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

Ryan Dennis is a SharePoint Solution 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

... And All That JS

JavaScript, Web Apps and SharePoint