CHUVASH.eu

CHunky Universe of Vigourous Astonishing SHarepoint :)

Tag Archives: html

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.

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 > .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”.

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.

Two interesting html5-in-sharepoint presentations

accesskey

accesskey provides keyboard shortcuts. The restriction is that accesskey works well only with anchors. To bind keyboard shortcuts to other html elements, follow Scott Klarr. Here is an example of binding Alt and L:

var isAlt = false;
function addShortcuts() {
	//add keyboard shortcut
	document.onkeyup = function (e) {
		if (e.which == 18) isAlt = false;
	};
	document.onkeydown = function (e) {
		if (e.which == 18) isAlt = true;
		// Alt-L
		if (e.which == 76 && isAlt == true) {
			$("#add-item").click();
			return false;
		}
	};       
}

master page for html5 and css3

A great work: v5.master. I am recommending to try it.

The problem are some javascript bugs in the IE 9 when you run IE mode 9 that are necessary to enable html5 and css3 support. You can’t “save” a list item:

The reason why it doesn’t work in IE, but in Chrome, Firefox, is that IE invokes some functionality that it doesn’t invoke in other browsers.

Next: Enable Save button in IE9

Show a presence bubble

presence bubbleThere is no built-in sharepoint control for the presence bubble. If you want to add this functionality on your pages you have to add it as html. Here is a sample:

private static int _COUNTER = 0;
private const string PresenceBubble =
    "<a class='ms-imnlink' href='javascript:;'>" +
    "<img width='12' height='12' id='imn_pawn_{0}' onload=\"IMNRC('{1}')\" alt='My SID' " +
    "src='/_layouts/images/imnoff.png' border='0' " +
    "showofflinepawn='1' sip='{2}'></a> {3}";

private static string FormatUser(SPUser user)
{
    _COUNTER++;
    return string.Format(PresenceBubble, _COUNTER, user.Email, user.GetSipAddress(SPContext.Current.Web), user.Name);
}

Rensa text från html-taggar

Ett bra exempel finns här.

using System.Text.RegularExpressions;
...
const string HTML_TAG_PATTERN = "<.*?>";

static string StripHTML (string inputString)
{
return Regex.Replace(inputString, HTML_TAG_PATTERN, string.Empty);
}

Ladda jQuery dynamiskt till din sida

Vill du ändra innehåll, testa olika javascript-funktioner på din sida, prova något direkt i webbläsaren (utan att behöva deploya om), så är DevTools i Chrome, eller Firebug i Firefox väldigt bra verktyg. Om du har jQuery på din sida, så är det ännu bättre. Men om du inte har det, så ladda det i efterhand genom att öppna konsolen (Ctrl-Shift-J i Chrome) och kör följande rader kod (klistra in dem på en gång, och tryck på Enter):

var script = document.createElement("script");
script.setAttribute("type","text/javascript");
script.setAttribute("src","http://code.jquery.com/jquery-latest.min.js");
document.body.appendChild(script);
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

RealActivity - Real-time and trustworthy

Blog site of founder, RealActivty - Paul J. Swider

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

blksthl

Mostly what I know about SharePoint - CommunicoCuspis