CHUVASH.eu

CHunky Universe of Vigouros Astonishing SHarepoint :)

Publishing Visio drawings as SVG

svg-004

In my post yesterday I showed how to publish Visio files as html image maps. That was one of the alternatives. Today I’ll present how to use SVG to achieve the same goal: publish Visio diagrams in SharePoint without having the Enterprise license. There are some alternatives:

  1. Show Visio diagrams as pdf files on SharePoint Pages
  2. Embed Visio diagrams as html image maps – Read more in my previous blog post
  3. Embed Visio diagrams as svg pictures – This blog post.
  4. Link to Visio files that are opened using Visio Web Viewer in a new browser tab.

SVG

SVG stands for scalable vector graphic, it is a xml-based format for defining images. It is supported in all modern browsers. Because SVG can be part of a page markup, it can be easily embedded into SharePoint.

Visio

In Visio you can save a drawing as SVG. Thanks to my smart colleague: Dan Saeden. So the process of exporting and embedding a drawing is almost the same as for an image map. An improvement is that you don’t have to update the html markup and you don’t need to upload or base64-encode any pictures. It’s all in the markup (DOM). See some screenshots below.

Advantages and Disanvantages

Compared to image maps and other methods, we get following advantages:

  1. It is scalable (not pixelish) – you can show it in a small screen, and a big screen.
  2. Only markup is needed (xml), no need for uploading images
  3. No additional bandwidth is required for downloading images to the browser
  4. No need for updating html structure, easier to explain how to do it.

There are also some disanvantages:

  1. Complex SVG files increase the DOM complexity and it may affect the performance in browser
  2. No support for older browsers: In IE8 it won’t work

svg-000

How to

Use your drawing of choice:

svg-001

Save it as an SVG file:

svg-002

Add a Script Editor Web Part to a page and paste the content of the svg file (open it in a text editor):

svg-003

That’s it:

svg-005

Summary

Visio files can be exported to many different formats. SVG is a great modern html standard for graphics that acts as a part of the DOM. It still requires a manual process of exporting and putting it on a SharePoint page, but it is a good way to make it modern, fast and even responsive (with some additional css). Editors don’t need to adjust the markup, only copy it.

Publishing Visio diagrams as html image maps

imagemap-014

I got a question from a customer: We have our processes defined in Visio, we don’t have SharePoint Enterprise CALs to use the Visio webpart. We have links in process maps. What can we do?

Well there are three five ways to solve this business need:

  1. Find money for SharePoint Enterprise – Very expensive
  2. Show Visio diagrams as pdf files on SharePoint Pages – Expensive.
  3. Embed Visio diagrams as html image maps – Least expensive
  4. Embed Visio diagrams as svg pictures – Separate blog post.
  5. Link to Visio files that are opened using Visio Web Viewer in a new browser tab.

If the business needs other features available only in Enterprise, just use the solution 1. Stop reading.

If you are looking for alternatives, then consider pdf and image maps. I have seen projects where pdf files were embedded in the SharePoint Pages. It required a pdf plugin in IE, a lot of time to make it look the same in different browsers and the scroll and fixed size was still there. It was expensive because of the development and configuration time.

In this blog post, I want to show the alternative number 3: embedding Visio diagrams as html image maps. This is only a Proof-of-concept so far.

Image Maps

Image maps are an old html fellow that can contain links on an image. Links can be connected to areas using coordinates. During a brainstorming session, we thought: what if we define image maps using Gimp or some other graphic tool. This manual procedure is not good when it is time to update the diagrams: it will require a lot of manual work to keep it up to date. So we need to be able to export a Visio diagram to an image map.

Visio

Actually Visio lets you export a diagram as an image map. All you need is to save it as as web page. Just to demonstrate I created a simple drawing:

imagemap-001

Then I added a hyperlink to a shape:

imagemap-002

Then I saved it as a web page:

imagemap-003

Getting the actual image map

The web page that Visio creates, is a frameset:

imagemap-004

So the actual content (the image map) is inside the _files folder:

imagemap-005

You can find the filename of the image map html by reading the main page (Process-Main.html in my case). Usually it is png_1.html (for the first Visio page):

imagemap-006

In the page where you want publish the process diagram, add a script editor webpart (or a content editor webpart):

imagemap-007

Edit snippet, as usual:

imagemap-008

Now you have to copy image tag and the map tag from the html:

imagemap-009

Paste it into the Script Editor:

imagemap-010

The image tag points to an image that is present in the same folder: png_1.png. We can upload it to a library and update the src attribute. In my case, to test it quickly, and because my image is not big, I’ll create a base64 string of that image using an online tool – dataurlmaker:

imagemap-011

Update the src attribute in the Script editor webpart:

imagemap-012

That’s it, now we have an image map, a drawing that has clickable elements with links to subprocesses:

imagemap-013

Summary

This is a proof-of-concept that I will share for publishing Visio drawings as html image maps. It works even in SharePoint Foundation (!). The publishing and republishing involves these three steps:

  1. Save a Visio file as a webpage (for new and updated files)
  2. Copy html parts to a SharePoint page
  3. Update the image reference

The steps are not aimed for end users. But given that you have clear instructions and guidelines how to publish drawings in SharePoint, even editors with basic knowledge about html can do it. This approach lets you keep Visio files as the source and update the process pages in SharePoint quite easy.

Next step

If this method works in a real environment, next step would be to create a tool for automatic conversion of Visio files to image maps.

Struggling with Taxonomy in CSOM

The parts of the CSOM for updating Taxonomy fields are really cumbersome. I mean, look at this code, nicely provided by Vadim Gremyshev (@vgrem). To set a value in a taxonomy field we have to assemble a text representation, and adding a “fake” lookup id.

What is needed is a wrapper for handling Taxonomy fields. SPMeta2 and PnP don’t seem to have it yet.

Another issue that I have struggled with today was the missing Microsoft.SharePoint.Client.Taxonomy.dll. If you see this error (set customErrors=”Off” in the Web.config), then you have update the reference in the Visual Studio project:

missingtaxonomy-002

Open Properties for the reference called: Microsoft.SharePoint.Client.Taxonomy and ensure that Copy To Local is set to True:

missingtaxonomy-003

For some reason, this reference added through “App for SharePoint Web Toolkit” nuget package adds a reference to an assembly from your computers GAC.

A new Chuvash keyboard layout

The Chuvash keyboard layout has been the Russian keyboard layout with 4 Chuvash letters that are typed by pressing the right Alt button plus the base letter. Some of the arguments have been

  1. Users don’t need to switch or learn a new keyboard layout. They can keep on typing Russian texts and sometimes Chuvash texts
  2. It is easy to communicate about how the right Alt button works. The Right-Alt-technique is also used in Esperanto, Polish and other languages.
  3. The letters are placed according the labels

Recently two major events happened that made the question about the Chuvash keyboard layout important:

  1. We are working on a Chuvash keyboard for iOS. There we have less place and we have to remove rare Russian letters from the first keyboard screen. There are no physical labels. So we can rethink the whole keyboard.
  2. chuvash.org finally moved from latin equivalents with diacritic marks to Cyrillic letters (Cyrillic extended script). Therefore we need to update users’ keyboard layouts

I’ll write a separate post about the Chuvash Keyboard for iOS. One of the important things we made during that work was to find the frequency of the Chuvash letters. This was used to design the keyboard layout.

Here is the most recent version of the keyboard layout (first screen):

cv-kbd-ios

These are the principles for placing the letters:

  • The most used letters are in the middle.
  • Consonants and vocals come after each other. We tried to avoid many consonants after each other.
  • The letters are often in the same area as in the Russian keyboard layout (but it is not so important)

Now to the physical keyboard

When it is possible on a virtual keyboard, wouldn’t it be worth trying on a physical keyboard? Knowing the “best” layout, we can implement it for a physical keyboard. Let’s do it for xkb. xkb is a keyboard system for Linux. I wrote a few articles on that topic.

Many minority languages in Russian use the Russian keyboard layout plus their Cyrillic letters instead of numbers (Bashkir, Udmurt, Kalmyk) or Right-Alt-combinations (Chuvash, Sakha, Komi…). Two other languages have their own keyboard layouts for primary keys: Tatar and Ossetian. Ossetian language has only one extra letter. The Tatar alphabet contains a few more. Let’s look at the Tatar keyboard layout for xkb:

tatar-xkb-kbd

The Tatar keyboard layout uses their letters on the primary keys and puts the Russian letters in the Right-Alt-combinations. It allows:

  • A quicker typing in Tatar
  • And access to Russian letters, because they are part of the official Tatar alphabet, but they are only used in Russian loanwords. The placement of those rare Russian letters are the same as in the Russian layout (except that they are accessible by pressing the Right-Alt button).

Now the Chuvash keyboard layout for Linux and Windows is as follows:

chuvash-xkb-kbd

When I use it, I always press the Right-Alt, because the ӑӗҫӳ in Chuvash are very common. So the Right-Alt is not an exception, rather that a regular typing behaviour. Some Chuvash frequently used Chuvash letters (х, й, э) are placed too from the middle. Some rare letters (ф, ц, ж, о, г, щ) are too “near”.

So let’s change it. If we just take the keyboard layout designed for iOS and put the rare Russian letters “behind the Right-Alt button”, then we’ll get this:

chuvash-xkb-kbd-2015

This keyboard layout will demand some time to learn, but once learned, it will provide

  • a better and quicker typing in Chuvash,
  • less pain in the right thumb,
  • and, perhaps, less Russian loanwords caused by laziness.

Regarding the learning, it could be facilitated using keyboard stickers, printed for Chuvash keyboards. Here is how Russian stickers look like:

The xkb code for the new Chuvash keyboard layout

// Chuvash Keyboard Layout that is organized according the letter frequency of Chuvash
// Author Anatoly Mironov @mirontoli
// Last changes: 2015-01-03
partial alphanumeric_keys
xkb_symbols "cv" {
    include "ru(winkeys)"

    name[Group1]= "Chuvash";

    key.type[group1]="FOUR_LEVEL";


    key <AD01> {[ U04F3,  U04F2 ]}; // ӳ
    key <AD02> {[ Cyrillic_shorti,  Cyrillic_SHORTI, Cyrillic_tse,     Cyrillic_TSE ]}; // й, ц
    key <AD03> {[ Cyrillic_u,       Cyrillic_U ]}; 
    key <AD04> {[ Cyrillic_ka,      Cyrillic_KA ]}; 
    key <AD05> {[ Cyrillic_ie,      Cyrillic_IE ]}; // е, ё
    key <AD06> {[ Cyrillic_en,      Cyrillic_EN ]}; // 
    key <AD07> {[ U04D7,            U04D6 ]}; // ӗ
    key <AD08> {[ Cyrillic_ha,      Cyrillic_HA ]};
    key <AD09> {[ Cyrillic_sha,     Cyrillic_SHA, Cyrillic_shcha,   Cyrillic_SHCHA ]};
    key <AD10> {[ Cyrillic_ze,      Cyrillic_ZE ]}; 
    key <AD11> {[ Cyrillic_ghe,     Cyrillic_GHE ]};

    key <AC01> {[ Cyrillic_be,      Cyrillic_BE, Cyrillic_ef,      Cyrillic_EF ]}; 
    key <AC02> {[ Cyrillic_yeru,    Cyrillic_YERU ]}; 
    key <AC03> {[ Cyrillic_ve,      Cyrillic_VE ]}; 
    key <AC04> {[ U04D1,            U04D0 ]}; // ӑ
    key <AC05> {[ Cyrillic_el,      Cyrillic_EL ]};
    key <AC06> {[ Cyrillic_a,       Cyrillic_A ]}; 
    key <AC07> {[ Cyrillic_er,      Cyrillic_ER ]}; 
    key <AC08> {[ Cyrillic_o,       Cyrillic_O  ]   };
    key <AC09> {[ Cyrillic_pe,      Cyrillic_PE ]   };
    key <AC10> {[ Cyrillic_e,       Cyrillic_E, Cyrillic_zhe,     Cyrillic_ZHE ]}; 
    key <AC11> {[ Cyrillic_de,      Cyrillic_DE ]};     

    key <AB05> {[ U04AB,            U04AA ]}; // ҫ
    key <AB06> {[ Cyrillic_i,       Cyrillic_I ]};
    key <AB07> {[ Cyrillic_te,      Cyrillic_TE ]}; 
    key <AB08> {[ Cyrillic_softsign,Cyrillic_SOFTSIGN, Cyrillic_hardsign,Cyrillic_HARDSIGN ]};
    key <AB09> {[ Cyrillic_yu,      Cyrillic_YU ]}; 

    include &quot;level3(ralt_switch)&quot;
};

Windows

To create a custom keyboard layout for Windows is easy, but it is hard to contribute to Windows official releases. We only need to install the Microsoft Keyboard Layout Creator.

This is how the new Chuvash Keyboard layout looks like in Windows (Chuvash 2015.1)

chuvash-win-kbd-normal

chuvash-win-kbd-shiftl

chuvash-win-kbd-altgr

Dead keys

Creating a Russian Extended Keyboard Layout

In my spare time I am currently working on a Chuvash-Tatar phrasebook. I have used the Chuvash and Tatar keyboard layout on Linux. They work fine, but switching between them takes time. So I decided to add Tatar letters (right Alt + combinations) to my Chuvash keyboard layout. While adding it I found a combined Russian-Ukranian United keyboard layout and I thought:

  • What if I create a new keyboard layout for Russian that will have almost all additional Cyrillic letters? A Russian Extended keyboard layout could be based on the Russian keyboard layout and have other non-Russian letters.

This is what I have come up to so far. The definition can be found on my project at github: russian-extended-kbd. I will update it more and provide more info about how it is organized and how to install it. I’ll also try to implement it for Windows and maybe for Mac (I doubt it, everything is so locked-down there).

rux-xkb-kbd

This is just a proof-of-concept so far. It only works on Linux (with xkb). Nevertheless, some key characteristics of this layout:

  • It has all the letters of Russian, Erzya, Moksha, Chuvash, Udmurt, Mari (Meadow and Hill Mari), Bashkir, Tatar and other languages of the Russian Federation and other countries.
  • It provides powerful dead keys for (breve, diaeresis, double acute, macron) for composing multiple Cyrillic non-Russian letters
  • It is not as quick as “native” keyboard layouts, but you can type text in many languages without switching the keyboard layout.
  • It has many other characters that are not present in the Russian standard keyboard layout for editing in wiki, markdown and other formats: [ ] { } ~, mathematical symbols: ≈ ÷ ∞ ° ‰ ≤ < > ≥ × •
  • It leaves the numbers. Compared too many other keyboard layouts (see below), this layout does not “steal” the number row. You still can type numbers as usual.

Dead keys

As I mentioned above, dead keys is a powerful feature for composing letters. It is harder to write, but the layout can cover many letters.

These dead keys work

diaeresis ӱ ӥ ӓ ӟ ӝ ӹ ӧ ӵ ӛ ё ї ӫ
double acute ӳ
breve ӑ ӗ ў й
macron ӣ ӯ

These do not work for now (but maybe in future):

cedilla ҫ ҙ
bar ғ ұ
hook ң ҳ қ

So many variants of similar letters

A big challenge in creating a Russian Extended keyboard layout is the fact that languages use different letters for the same sounds (meaning similar sounds).

  • /œ/ is ө (Tatar, Bashkir, Sakha…), and ӧ in (Altay, Udmurt, Mari…)
  • /y/ is ӳ (Chuvash), ӱ (Mari, Altay, Khakas), ү (Tatar, Bashkir, Sakha)
  • /ŋ/ is ҥ (Altay, Sakha, Mari), and ң (Tatar, Bashkir, Khakas, Khanty)

Well, the sounds are not the same, but they are similar. The Swedish Ä is not the same as the German Ä either. If we had a more united Cyrillic script, it would be easier to create a keyboard layout and to read and learn each others’ languages.

The letters from different languages are compare in my Google document.

Some “Native” keyboard layouts of the minority languages of the Russian Federation

chuvash-xkb-kbd

udmurt-xkb-kbd

mari-xkb-kbd

komi-xkb-kbd

kalmyk-xkb-kbd

bashkir-xkb-kbd

ossetian-xkb-kbd

sakha-xkb-kbd

tatar-xkb-kbd

 

 

Other Cyrillic keyboard layouts (outside the Russian Federation)

ukrainian-xkb-kbd

belarusian-xkb-kbd

tajik-xkb-kbd

bulgarian-xkb-kbd

kazakh-xkb-kbd

mongol-xkb-kbd

 

Chuvash localization

Recently I wanted to add Chuvash localization to the jQuery UI datepicker. Unfortunately, my pull request was rejected. The reason is that jQuery UI will be using Globalize framework:

Selection_003

The jQuery Globalize framework relies on CLDR, so

What is Unicode CLDR (Common Locale Data Repository)?

The Unicode CLDR provides key building blocks for software to support the world’s languages, with the largest and most extensive standard repository of locale data available. This data is used by a wide spectrum of companies for their software internationalization and localization, adapting software to the conventions of different languages for such common software tasks

Today there is no Chuvash locale in the CLDR project. So it it is time to add it.

I have filed a ticket on CLDR.

Other Chuvash localization projects

A Chuvash locale exists in a couple of projects:

Code

Just to be complete, here is the Chuvash locale for jQuery UI datepicker that I wanted to add:

/* Written by Anatoly Mironov (@mirontoli). */
(function( factory ) {
	if ( typeof define === &quot;function&quot; &amp;&amp; define.amd ) {

		// AMD. Register as an anonymous module.
		define([ &quot;../datepicker&quot; ], factory );
	} else {

		// Browser globals
		factory( jQuery.datepicker );
	}
}(function( datepicker ) {

datepicker.regional['cv'] = {
	closeText: 'Хуп',
	prevText: '<Кая',
	nextText: 'Мала>',
	currentText: 'Паян',
	monthNames: ['кӑрлач','нарӑс','пуш','ака','ҫу','ҫӗртме',
	'утӑ','ҫурла','авӑн','юпа','чӳк','раштав'],
	monthNamesShort: ['кӑр','нар','пуш','ака','ҫу','ҫӗр',
	'утӑ','ҫур','авн','юпа','чӳк','раш'],
	dayNames: ['вырсарникун','тунтикун','ытларикун','юнкун','кӗҫнерникун','эрнекун','шӑматкун'],
	dayNamesShort: ['выр','тун','ытл','юнк','кӗҫ','эрн','шӑм'],
	dayNamesMin: ['Вр','Тн','Ыт','Юн','Кҫ','Эр','Шм'],
	weekHeader: 'Эрне',
	dateFormat: 'dd.mm.yy',
	firstDay: 1,
	isRTL: false,
	showMonthAfterYear: false,
	yearSuffix: ''};
datepicker.setDefaults(datepicker.regional['cv']);

return datepicker.regional['cv'];

}));

Update multi-value lookup column values in SharePoint 2010 using managed CSOM

Anatoly Mironov:

Reblogging this useful code sample for updating multi-value lookup columns using CSOM in C# in SharePoint 2010, but also valid for SharePoint 2013.

Originally posted on Bin's Dev Notes:

I received a task that needs to update multi-value lookup column value in SharerePoint 2010 using C#.  While it is easy to set columns of simple data types, with lookup column it is a bit more complicated.  Searching Web gives me following link which is helpful. However, that only works with single value column.   After a bit trial and error, I worked out following code that is functioning.

View original

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.

Client Side Rendering with Async dependencies

Yesterday I asked a question on SharePoint StackExchange:

I also asked Elio Struyf on Twitter:

Good idea, Elio Struyf! Now I want to try it out.

Preparations

In this case I’ll be using my example from my blog post yesterday:

Drag and Drop Image using Client Side Rendering

I have created a new list and added a lookup field to my previous list. What I get is a Title of the lookup item, but not my custom field called DragAndDrop. In my test I will try to load the DragAndDrop Image using an ajax call and rendering it after Client Side Rendering is done with my item.

To be complete, I want to show some screenshots for my lookup field:

csr-async-001csr-async-002

It will result in this OOTB rendering:
csr-async-003

Trying out CSR with async dependencies

While working with jslink, first of all I want to show a loading image instead of an empty html element, to show that something is loading:
csr-async-004

Here is the skeletton of the jslink file:

(function () {
    'use strict';

    var display = function (ctx, field) {
        var containerId = &amp;quot;tolle&amp;quot;;
        var loadingImg = _spPageContextInfo.webAbsoluteUrl + &amp;quot;/_layouts/images/loadingcirclests16.gif&amp;quot;;
        //unfortunately SP.Utilities.Utility is not defined at this stage
        //SP.Utilities.Utility.getImageUrl(&amp;quot;loadingcirclests16.gif&amp;quot;);       
        return ['&amp;lt;div id=&amp;quot;', containerId, '&amp;quot;&amp;gt;&amp;lt;img src=&amp;quot;', loadingImg, '&amp;quot;/&amp;gt;&amp;lt;/div&amp;gt;'].join('');
    };

    var overrideContext = {};
    overrideContext.Templates = overrideContext.Templates || {};
    overrideContext.Templates = overrideContext.Templates || {};
    overrideContext.Templates.Fields = {
        'TolleLookup': {
            'DisplayForm': display
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();

Making an ajax call

Next step is to initiate an ajax call. I am trying to avoid the jQuery dependency. There is so much you can do with the built-in javascript functions. For making an ajax call I am using SP.RequestExecutor.js

Here is the result:

csr-async-005

The code should be quite self explaining:

(function () {
    'use strict';

    var onDataRetrieved = function(response) {
        console.log(&amp;quot;yippie&amp;quot;);
        var data = JSON.parse(response.body);
        var imgSrc = data.d.DragAndDropImage;
        var container = document.getElementById(&amp;quot;tolle&amp;quot;);
        container.innerHTML = ['&amp;lt;img src=&amp;quot;', imgSrc, '&amp;quot;/&amp;gt;'].join('');
    }

    var onError = function(response) {
        console.error(&amp;quot;failed&amp;quot;, response);
    }
    var initiateAjaxCall = function(ctx) {
        var item = ctx.CurrentItem;
        var fieldName = ctx.CurrentFieldSchema.Name;
        var fieldValue = item[fieldName];
        
        var itemId = fieldValue.split(&amp;quot;;#&amp;quot;)[0];
        var lookupListId = ctx.ListSchema.Field[0].LookupListId;
        var url = [window._spPageContextInfo.webAbsoluteUrl,
            &amp;quot;/_api/web/lists/getbyid('&amp;quot;,
            lookupListId,
            &amp;quot;')/Items(&amp;quot;,
            itemId, &amp;quot;)?$select=DragAndDropImage&amp;quot;].join(&amp;quot;&amp;quot;);
        SP.SOD.registerSod('sp.requestexecutor.js', '/_layouts/15/sp.requestexecutor.js');
        SP.SOD.executeFunc(&amp;quot;sp.requestexecutor.js&amp;quot;, &amp;quot;SP.RequestExecutor&amp;quot;, function () {
            var executor = new SP.RequestExecutor(window._spPageContextInfo.webAbsoluteUrl);
            executor.executeAsync(
                {
                    url: url,
                    method: &amp;quot;GET&amp;quot;,
                    headers: { &amp;quot;Accept&amp;quot;: &amp;quot;application/json; odata=verbose&amp;quot; },
                    success: onDataRetrieved,
                    error: onError
                }
            );
        });
    }
    var display = function (ctx, field) {
        if (!ctx.CurrentItem[ctx.CurrentFieldSchema.Name]) { //if there is no value
            return "";
        }
        var containerId = &amp;quot;tolle&amp;quot;;
        var loadingImg = window._spPageContextInfo.webAbsoluteUrl + &amp;quot;/_layouts/images/loadingcirclests16.gif&amp;quot;;
        initiateAjaxCall(ctx);
        //unfortunately SP.Utilities.Utility is not defined at this stage
        //SP.Utilities.Utility.getImageUrl(&amp;quot;loadingcirclests16.gif&amp;quot;);       
        return ['&amp;lt;div id=&amp;quot;', containerId, '&amp;quot;&amp;gt;&amp;lt;img src=&amp;quot;', loadingImg, '&amp;quot;/&amp;gt;&amp;lt;/div&amp;gt;'].join('');
    };

    var overrideContext = {};
    overrideContext.Templates = overrideContext.Templates || {};
    overrideContext.Templates = overrideContext.Templates || {};
    overrideContext.Templates.Fields = {
        'TolleLookup': {
            'DisplayForm': display
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();

Next steps and further considerations

It seems to work, although I have some considerations:

  1. What happens if the data from the ajax call is retrieved before Client Side Rendering is done (then the container is not rendered yet). Even if the risk for that is low, it should be handled properly.
  2. It would be good to have a consistent look and feel in the Display form and in the list view. To make it possible, following should be done:
    1. We must create references to html elements (containers) with unique ids, need to implement logic for generating ids and keeping track of the right elements.
    2. Ajax calls should be bundled, otherwise it will hugely impact the performance, even in a list view with 30 items.

Drag and Drop Image using Client Side Rendering

I continue my series about Client Side Rendering (CSR) and jsgrid. Today I want to try a custom field where users can drag and drop images. The inspiration comes from:

What I want to achieve is:

  1. A custom field that is rendered with jslink
  2. Users can drag and drop small pictures (thumbnails) into the field
  3. A base64 image representation is saved as the field value
  4. Optionally implement pasting images using Clipboard API

Step 1 Create a field with a custom jslink

Create a field of type Note. I am using the PnP Core Extensions to make it quickier:

dnd-001

My jslink file is very simple to begin with:

(function () {
    'use strict';
    function view(ctx, field) {
        return "hello";
    }

    var overrideContext = {};

    overrideContext.Templates = overrideContext.Templates || {};
    overrideContext.Templates.Fields = {
        'DragAndDropImage': {
            'View': view,
            'DisplayForm': view
            //'EditForm': verySimpleNewAndEdit,
            //'NewForm': verySimpleNewAndEdit
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();

This will result in the following display form. Just outputting “hello” indicates that my field is jslink are registered correctly:

dnd-002

Step 2. Ensure base64 works in the field

Not all fields will work. I have tried many of them and found that the field type Note with Plain text works for saving base64 images.

First download some sample icons at flaticons.com

dnd-003

Convert an icon to a base64 image using dataurl.net:

dnd-004

Save the string into the Drag And Drop Image field:

dnd-005

Now update the view template in the CSR overrides:

//http://stackoverflow.com/a/822486/632117
//in display form we have to strip the html elements that are pasted in by SharePoint
function strip(html) {
    var tmp = document.createElement("DIV");
    tmp.innerHTML = html;
    return tmp.textContent || tmp.innerText || '';
}
function renderImage(fieldValue) {
    if (fieldValue) {
        return ['<img style="max-width:100px;" src="',
            strip(fieldValue), '"/>'].join('');
    }
    return '';
}

function view(ctx, field) {
    //disable editing in Quick Edit mode
    if (ctx.inGridMode) {
        field.AllowGridEditing = false;
    }
    var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    return renderImage(fieldValue);
}

Well, it works:

dnd-006dnd-007

 Step 3. Implement drag and drop

Let’s start with the edit template:

function renderDropZone(fieldValue) {
    var img = renderImage(fieldValue);
    return ['<div id="drop_zone">', img, '</div>'].join('');
}

function edit(ctx, field) {
    var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
    formCtx.registerGetValueCallback(formCtx.fieldName, function () {
        //will implement the logic later
        return '';
    });
    var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    return renderDropZone(fieldValue);
}

var overrideContext = {};
overrideContext.Templates = overrideContext.Templates || {};
overrideContext.Templates.Fields = {
    'DragAndDropImage': {
        'View': view,
        'DisplayForm': view,
        'EditForm': edit,
        'NewForm': edit
    }
};

I have wrapped the image element with a div (id=drop_zone). Now I need some css to show it:

var additionalStyle = [
    '<style>',
    '#drop_zone { height: 100px; width:100px; background: #efe}',
    '</style>'
].join('');
document.write(additionalStyle);

Now there is a clear “drop zone”:
dnd-008
To make it as simple as possible, let’s follow oroboto’s drag and drop code. Here we go:

var processFiles = function (event) {
    var element = event.target;
    event.stopPropagation();
    event.preventDefault();
    removeDropZoneClass(event);

    // FileList object of File objects
    var files = event.dataTransfer.files;
    for (var i = 0, f; f = files[i]; i++) {
        var reader = new FileReader();

        // closure to capture file info
        reader.onload = (function (file, index) {
            return function (e) {
                var dataUri = e.target.result;
                var img = renderImage(dataUri);
                element.innerHTML = img;
            };
        })(f, i);

        // read file as data URI
        reader.readAsDataURL(f);
    }

};

var highlightDropZone = function (e) {
    e.stopPropagation();
    e.preventDefault();
    document.getElementById('drop_zone').classList.add('highlight');
}

var removeDropZoneClass = function (e) {
    document.getElementById('drop_zone').classList.remove('highlight');
}

function prepareDropZone(ctx) {
    if (ctx.inGridMode) {
        return;
    }
    // add event listeners if File API is supported
    var dropZone = document.getElementById('drop_zone');
    if (window.File &amp;amp;&amp;amp; window.FileReader &amp;amp;&amp;amp; window.FileList &amp;amp;&amp;amp; window.Blob) {
        dropZone.addEventListener('drop', processFiles, false);
        dropZone.addEventListener('dragover', highlightDropZone, false);
        dropZone.addEventListener('dragenter', highlightDropZone, false);
        dropZone.addEventListener('dragleave', removeDropZoneClass, false);
    } else {
        dropZone.innerHTML = 'The File APIs are not fully supported in this browser.';
        dropZone.className = 'highlight';
    }

};

// ... code omitted for brevity

overrideContext.Templates.OnPostRender = prepareDropZone;

That’s not bad, not bad:

dnd-009

The last thing in this step is to save the base64 value

formCtx.registerGetValueCallback(formCtx.fieldName, function () {
    var dropZone = document.getElementById('drop_zone');
    var img = dropZone.getElementsByTagName('img');
    return img.length ? img[0].src : '';
});

Step 4 Support pasting images

Drag And Drop is cool. But what about pasting images. Wouldn’t it be nice? The functionality is called Clipboard API. You can check which browsers support this on caniuse.com. The simplest example I’ve found is on stackoverflow: How does onpaste work

The code I use is as follows:

document.onpaste = function (event) {
    var items = (event.clipboardData || event.originalEvent.clipboardData).items;
    console.log(JSON.stringify(items)); // will give you the mime types
    var blob = items[0].getAsFile();
    var reader = new FileReader();
    reader.onload = function (e) {
        var dataUri = e.target.result;
        var img = renderImage(dataUri);
        dropZone.innerHTML = img;
    }; // data url!
    reader.readAsDataURL(blob);
}

Here is how pasting works:
dnd-011

Step 5 Error handling (Not done yet)

I need to ensure that

  • only images are allowed
  • only small images are allowed, otherwise base64 will be to heavy
  • proper handling of old browsers, we don’t need to support them, but the users should get good information about what they need to make it work
  • a help icon is shown, when clicked a help callout is shown about how it works

Step 6 Support Quick Edit (Not done yet)

We need code that works in Quick Edit:

  • need to write code for jsgrid
  • need handling of multiple drop zones on the same page (unique ids and smart handling of pasting)

Summary

This post is about discovering what’s possible to do with client side rendering and using today’s technologies like html5 and new javascript apis. I hope you’ve got some inspiration how normal sharepoint fields combined with Client Side Rendering (CSR) api can create more value in your project, in Office 365 and in SharePoint On Premises. Please leave feedback in comments.

Fulll source code

And finally, here comes the most up-to-date full source code for this custom Drag And Drop Image field:

(function () {
    'use strict';
    var additionalStyle = [
        '<style>',
        '#drop_zone { height: 100px; width:100px; background: #efe}',
        '#drop_zone.highlight {background:#fee;}',
        '</style>'
    ].join('');
    document.write(additionalStyle);


    var processFiles = function (event) {
        var element = event.target;
        event.stopPropagation();
        event.preventDefault();
        removeDropZoneClass(event);

        // FileList object of File objects
        var files = event.dataTransfer.files;
        for (var i = 0, f; f = files[i]; i++) {
            var reader = new FileReader();

            // closure to capture file info
            reader.onload = (function (file, index) {
                return function (e) {
                    var dataUri = e.target.result;
                    var img = renderImage(dataUri);
                    element.innerHTML = img;
                };
            })(f, i);

            // read file as data URI
            reader.readAsDataURL(f);
        }

    };

    var highlightDropZone = function (e) {
        e.stopPropagation();
        e.preventDefault();
        document.getElementById('drop_zone').classList.add('highlight');
    }

    var removeDropZoneClass = function (e) {
        document.getElementById('drop_zone').classList.remove('highlight');
    }

    function prepareDropZone(ctx) {
        if (ctx.inGridMode) {
            return;
        }
        // add event listeners if File API is supported
        var dropZone = document.getElementById('drop_zone');
        if (window.File &amp;amp;&amp;amp; window.FileReader &amp;amp;&amp;amp; window.FileList &amp;amp;&amp;amp; window.Blob) {
            dropZone.addEventListener('drop', processFiles, false);
            dropZone.addEventListener('dragover', highlightDropZone, false);
            dropZone.addEventListener('dragenter', highlightDropZone, false);
            dropZone.addEventListener('dragleave', removeDropZoneClass, false);
        } else {
            dropZone.innerHTML = 'The File APIs are not fully supported in this browser.';
            dropZone.className = 'highlight';
        }

        document.onpaste = function (event) {
            var items = (event.clipboardData 
                 || event.originalEvent.clipboardData).items;
            console.log(JSON.stringify(items)); // will give you the mime types
            var blob = items[0].getAsFile();
            var reader = new FileReader();
            reader.onload = function (e) {
                var dataUri = e.target.result;
                var img = renderImage(dataUri);
                dropZone.innerHTML = img;
            }; // data url!
            reader.readAsDataURL(blob);
        }
       
    };

    //http://stackoverflow.com/a/822486/632117
    //in display form we have 
    //to strip the html elements that are pasted in by SharePoint
    function strip(html) {
        var tmp = document.createElement('DIV');
        tmp.innerHTML = html;
        return tmp.textContent || tmp.innerText || '';
    }
    function renderImage(fieldValue) {
        if (fieldValue) {
            return ['<img style="max-width:100px;" src="',
                strip(fieldValue), '"/>'].join('');
        }
        return '';
    }
    
    function view(ctx, field) {
        //disable editing in Quick Edit mode
        if (ctx.inGridMode) {
            field.AllowGridEditing = false;
        }
        var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
        return renderImage(fieldValue);
    }
    
    function renderDropZone(fieldValue) {
        var img = renderImage(fieldValue);
        return ['Drop files here<div id="drop_zone"', img, '</div>'].join('');
    }

    function edit(ctx, field) {
        var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
        formCtx.registerGetValueCallback(formCtx.fieldName, function () {
            var dropZone = document.getElementById('drop_zone');
            var img = dropZone.getElementsByTagName('img');
            return img.length ? img[0].src : '';
        });
        var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
        return renderDropZone(fieldValue);
    }

    var overrideContext = {};
    overrideContext.Templates = overrideContext.Templates || {};
    overrideContext.Templates.Fields = {
        'DragAndDropImage': {
            'View': view,
            'DisplayForm': view,
            'EditForm': edit,
            'NewForm': edit
        }
    };

    overrideContext.Templates.OnPostRender = prepareDropZone;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();
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 264 other followers