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.

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.

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: [code language=“css”] .warning { background-color: red; } [/code] It is often enough, you don’t need those: [code language=“css”] html .warning div .warning div.warning, div > .warning body p#myP.blue strong.warning [/code]

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.

[slideshare id=11031050&doc=sharepointhtml5-120113215236-phpapp02]   HTML5-and-CSS3-What-About-SharePoint.pdf (968 KB) by Kyle Schaefer

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;
		}
	};       
}

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

There 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);
}

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);
}

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):

Här är en väldigt bra video som berättar om nya devtools i Google Chrome 10. Den visar 12 tricks hur man kan underlätta felsökning av html, css och javascript. Att kunna ändra html,css och js on-the-fly är faktiskt häftigt. För mig som länge har använt Firebug i Firefox (som nu inte funkar på FF4 RC) känns devtools väldigt bra. [youtube http://www.youtube.com/watch?v=nOEw9iiopwI&w=530&h=335]

Comments from Wordpress.com

Ändra utseendet på sidan direkt i webbläsaren « Sharepoint. Kunskap. Upptäckter på resan. - Mar 1, 2011