SPFx Check Locale - a nice option to check your localization consistency across SharePoint Framework solution

If you develop multi-lingual SharePoint Framework solutions, you know that you should keep your localization files in sync. You have a "master" file, which defines your localization resources structure, by default it's called "mystrings.d.ts" where you define all different keys. In the corresponding {locale}.js file you implement actual translations. In some cases, when you have a lot of labels after the refactoring you might lose the synchronization between your "mystrings.d.ts" and JS resource files. That leads to empty labels and UI problems in your web parts. SPFx doesn't provide a mechanism to check it. 

Now you can use SPFx Check Locale VSCode add-in and a Nodejs module to perform such checks. 

VSCode

You can install the addin from here or just search in VScode for "SPFx Check Locale".

The below video describes the core features of the addin: 

If you have and differences between your maser "mystrings.d.ts" and {locale}.js resource, the error will be immediately reported (including line and message). Using the addin you now have a clear visual indication that something is wrong with your localization files. 

Nodejs

You can also integrate SPFx check-locale as an additional quality check into your build pipeline since it's also available as a nodejs module

Install "spfx-check-locale" module and just add the below code to your gulpfile.js:

const checkLocales = require('spfx-check-locale').checkForErrors;

const argv = build.rig.getYargs().argv;
if (argv.production) {
  const check = build.subTask('check-locales', function (gulp, buildOptions, done) {
    checkLocales({
      projectPath: __dirname,
      printErrors: true
    })
      .then(result => {
        if (result.diagnosticData.length === 0) {
          done();
        } else {
          done('Found errors in localization files');
        }
      }).catch(done);
  });

  build.rig.addPostBuildTask(build.task('check-locales', check));
}

That way before publishing to production you always sure that your resources are good, otherwise your build will fail. The above code performs locale checks only on production builds (argv.production, which is true for gulp bundle --ship). You can also do it on a normal gulp serve, however, it will slow down your build for additional 2-4 seconds. With VSCode add-in it doesn't make a lot of sense to have it in serve command. 

"spfx-check-locale" integrates smoothly with your CI\CD process as well.

How it works

Every SharePoint Framework project contains a config.json file, which lists localizedResources - a collection of project resources. spfx-check-locale module opens every folder with resources and extracts interface name from "mystrings.d.ts" (using TypeScript AST). Then it creates a virtual TypeScript project in memory adding all files inside the resources folder. {locale}.js are renamed to {locale}.ts. For every {locale}.ts it also adds a return value for a function to be equal to the interface name from "mystrings.d.ts". 

For example, a en-us.ts will look like below:

define([], function(): IHelloWorldWebPartStrings {
  return {
    "PropertyPaneDescription": "Description",
    "BasicGroupName": "Group Name",
    "DescriptionFieldLabel": "Description Field"
  }
});

Next, the module runs TS compilation in memory and VSCode add-in simply maps TS errors to the corresponding lines inside IDE. That way we can see all problems in a real time. 

Title image credits - People vector created by pch.vector - www.freepik.com

Introducing SP Formatter: a Google Chrome extension which enhances your SharePoint Column (View) formatting experience

Column formatting allows you to customize look and feel for columns and views in modern SharePoint. That's a cool feature and gives you a lot of space for applying nice styling for your SharePoint data. It's called column formatting despite that you can customize views as well. You do not have to be a developer to use column formatting, yet you should have some knowledge of CSS and HTML. To learn more about this feature please read Use column formatting to customize SharePoint and check out an awesome list of community samples around column formatting.

To apply formatting, you should enter a special JSON into the textarea on a SharePoint list page. There is one thing here which I don't like very much. As a developer, I expect that column formatting experience provides code suggestions (also called intellisense in developer world), live preview, search and replace, brace matching and some other things available in a normal integrated development environment. You can partially improve the situation if you edit your formatting JSON in Visual Studio Code with custom JSON schema applied. However even in that case, if you want to see how your column formatting looks like in SharePoint, you have to copy-paste it into SharePoint and click Preview, which is inconvenient. Also, the schema in Visual Studio Code lacks some additional features available in SP Formatter

Of course, default SharePoint column formatting experience doesn't provide rich editing features, because it's simply a textarea element. To improve it I created SP Formatter - a Google Chrome extension which transforms default column formatting into the full-featured editor. More...

SharePoint 2010 modal dialog extensions

Hi all. During digging into different sharepoint *.debug.js files I also investigating into sp.ui.dialog.debug.js. Out of the box modal dialog framework has some number of methods for manipulating dialog window, but some methods (that might be useful) missed. For example programmatically maximize or restore dialog window. Here is a couple of extension methods that I’ve created:

  • maximize -  maximizes modal dialog window
  • restore -  restores modal dialog window
  • toggleView – maximizes if modal dialog window is not maximized and vice versa
  • setSize – set size for modal dialog window (height, width in pixels)

Here is the code:

ExecuteOrDelayUntilScriptLoaded(function(){
	SP.UI.ModalDialog.prototype.toggleView = function () {
		this.$z(null);
	};
	SP.UI.ModalDialog.prototype.maximize = function (){
		if(!this.$S_0){
			this.$z(null);
		}
	}
	SP.UI.ModalDialog.prototype.restore = function (){
		if(this.$S_0){
			this.$z(null);
		}
	}
	SP.UI.ModalDialog.prototype.setSize = function (width, height){
		if(typeof width == "number" && typeof height == "number") {
			this.$Q_0(width, height);
		}
	}
}, "sp.ui.dialog.js");

Example of use:

var dlg = SP.UI.ModalDialog.get_childDialog();
dlg.toggleView();

Enjoy and good luck in spdevelopment.