Code zealot in a connected world
This is a fun one.
msxsl:utc(concat(my:year, "-02-29")) != ""
Silverlight 5 was quietly released to the world to very little fanfare, considering the looming Windows 8 launch with WinRT next year, and the world (at least, Microsoft)'s shift to HTML5.
Still, there are a few gems in this version over Silverlight 4, in particular, you can now run trusted mode in browser, and trusted mode now has access to platform invoke.
That's right, repeat after me: Silverlight, in browser, unmanaged code.
And I just happened to have the perfect problem I've been wanting to solve forever.
One thing that has always peeved me when using the Rich HTML control in SharePoint is when it comes to imbedding images. You can't easily add a picture to your Rich HTML, you need to open a different browser window, upload the picture, then find a link to that picture and insert it back in the HTML.
CTRL-V
Wouldn't it be nice if you could just paste a picture directly to SharePoint, like you could in Word, or Windows Live Writer. The end user doesn't need to figure out where the picture will go. SharePoint will do that. Such a thing isn't possible with mere HTML since it doesn't support access to binary clipboard, but with Silverlight 5 we can now provide a solution.
The easy step. Head over to Silverlight project properties in VS.NET
Figure: Silverlight 5 specialty, elevated trust running in-browser.
internal class Native
{
[DllImport("user32.dll", EntryPoint = "CloseClipboard", SetLastError = true)]
[return: MarshalAs(UnmanagedType.Bool)]
public static extern bool CloseClipboard();
[DllImport("user32.dll", EntryPoint = "GetClipboardData", SetLastError = true)]
public static extern IntPtr GetClipboardData(ClipboardFormat uFormat);
[DllImport("user32.dll", EntryPoint = "IsClipboardFormatAvailable", SetLastError = true)]
[return: MarshalAs(UnmanagedType.Bool)]
public static extern bool IsClipboardFormatAvailable(ClipboardFormat format);
[DllImport("user32.dll", EntryPoint = "OpenClipboard", SetLastError = true)]
[return: MarshalAs(UnmanagedType.Bool)]
public static extern bool OpenClipboard([In] IntPtr hWndNewOwner);
}
In my paste function:
private void Paste()
{
if (!Application.Current.HasElevatedPermissions)
{
MessageBox.Show("No Elevated Permissions - can't do p/invoke :'-(");
return;
}
IntPtr p = IntPtr.Zero;
bool opened = Native.OpenClipboard(p);
if (!opened)
{
return; //unhappy
}
try {
if (Native.IsClipboardFormatAvailable(ClipboardFormat.CF_BITMAP))
{
IntPtr p4 = Native.GetClipboardData(ClipboardFormat.CF_BITMAP);
// GASP. We have a pointer to our bitmap!
}
}
finally
{
Native.CloseClipboard();
}
}
It's awesome we have a pointer, but what do we do with it? This next part eluded me for months, I had to stop work, and go on the Internet to ask for help. 3 months later, at the end of 2011 a reply came through. Use GDI+ to convert the pointer to a file! Genius! Bravo!
Note that in the GDI+ GdipSaveImageToFile call, I use the PNG Encoder - so the bitmap is saved in PNG format in my temporary file.
Oh, right, more native p/invoke, different DLL this time.
internal class Native
{
... <snip earlier clipboard p/invoke>
[DllImport("gdiplus.dll", CharSet = CharSet.Unicode)]
public static extern int GdipCreateBitmapFromHBITMAP(IntPtr hbitmap, IntPtr hpalette, out IntPtr bitmap);
[DllImport("gdiplus.dll", CharSet = CharSet.Unicode)]
public static extern int GdipSaveImageToFile(IntPtr image, string filename, ref Guid classId, IntPtr encoderParams);
[DllImport("gdiplus.dll", CharSet = CharSet.Unicode, ExactSpelling = true)]
public static extern long GdiplusStartup(out IntPtr token, ref GdiplusStartupInput gdiplusStartupInput, out IntPtr gdiplusStartupOutput);
[DllImport("gdiplus.dll")]
public static extern void GdiplusShutdown(IntPtr token);
}
IntPtr gdipToken = IntPtr.Zero; ;
string fileName = string.Empty;
try
{
IntPtr gdiplusStartupOutput;
GdiplusStartupInput input = new GdiplusStartupInput(1);
long num0 = Native.GdiplusStartup(out gdipToken, ref input, out gdiplusStartupOutput);
IntPtr zero = IntPtr.Zero;
IntPtr palette = IntPtr.Zero;
int num = Native.GdipCreateBitmapFromHBITMAP(p4, palette, out zero);
if (num != 0)
{
return;
}
// JPG Encoder {557CF401-1A04-11D3-9A73-0000F81EF32E}
// PNG Encoder {557CF406-1A04-11D3-9A73-0000F81EF32E}
Guid classId = Guid.Parse("{557CF406-1A04-11D3-9A73-0000F81EF32E}");
fileName = System.IO.Path.GetTempFileName();
int img = Native.GdipSaveImageToFile(zero, fileName, ref classId, palette);
if (img != 0)
{
return;
}
}
finally
{
Native.GdiplusShutdown(gdipToken);
}
using(FileStream fs = File.OpenRead(fileName))
{
SP.ClientContext ctx = SP.ClientContext.Current;
SP.Web web = ctx.Web;
SP.List library = web.Lists.GetByTitle("Images");
byte[] content = new byte[fs.Length];
var newFile = new SP.FileCreationInformation();
int dummy = fs.Read(content, 0, (int)fs.Length);
newFile.Content = content;
newFile.Url = string.Format("paste_{0}.png", DateTime.Now.Ticks);
var uploadFile = library.RootFolder.Files.Add(newFile);
ctx.Load(uploadFile);
ctx.ExecuteQueryAsync(
delegate {
this.Dispatcher.BeginInvoke(() =>
{
// update our rich text editor in step 5!
});
},
delegate { // our code don't fail!
});
}
I'm using the wonderful free VectorLight.NET Liquid HTML Editor control. Need free registration. Supports converting between Rich XAML and HTML formats. Here I'm inserting a <Xaml><Image /></Xaml>
ctx.ExecuteQueryAsync(
delegate {
this.Dispatcher.BeginInvoke(() =>
{
this.listBox1.Items.Add(uploadFile.ServerRelativeUrl);
InlineUIContainer container = new InlineUIContainer();
Uri server = new Uri(ctx.Url);
string path = string.Format("{0}://{1}{2}", server.Scheme, server.Host, uploadFile.ServerRelativeUrl);
this.richTextBox1.Insert(string.Format("<Xaml><Image Source=\"{0}\" /></Xaml>", path));
});
},
delegate {
});
Figure: Pasting picture into HTML Editor within Silverlight.
Figure: My SharePoint image library, filled with pasted images :-)
Figure: Dumping Editor's HTML to MessageBox - you can see the <img> HTML is inserted properly.
This part is the most ugly bit of the code. Heavily nested since I keep using anonymous delegates, and it's pretty late so I'm not going to clean it up tonight.
The Save button click.
private void buttonSave_Click(object sender, RoutedEventArgs e)
{
var ctx = SP.ClientContext.Current;
var library = ctx.Web.Lists.GetByTitle("Site Pages");
var items = library.GetItems(SP.CamlQuery.CreateAllItemsQuery());
var filepath = this.autoCompleteBox1.Text; // I store a list of pages in the dropdown...
ctx.Load(items);
ctx.ExecuteQueryAsync(
delegate
{
// switch back to UI thread
this.Dispatcher.BeginInvoke(() =>
{
SP.ListItem page = null;
foreach (var item in items)
{
// super ugly code - should filter the files in the CamlQuery above - but too tired to write Caml
if (item["FileLeafRef"].ToString() == filepath)
{
page = item;
}
}
page["WikiField"] = this.richTextBox1.HTML;
page.Update(); // update SPListItem, then ExecuteQuery to push the update back through ClientService.svc
ctx.ExecuteQueryAsync(
delegate
{
// switch back to UI thread
this.Dispatcher.BeginInvoke(() =>
{
// refresh browser
HtmlPage.Document.Submit();
});
},
delegate { });
});
},
delegate
{
});
}
Figure: The Silverlight webpart pushing HTML back into a Wikipage
There are some notes on security, which I leave right at the end, but this is important.
This bit I think is the part that makes the solution safe, but also very difficult to deploy. But if you want the nice editing experience with paste functionality, here you go!
And here we go, first big post of the year. Have a great 2012 everyone!
Sometimes, a rant (and warning, this particular blog post can only be classified as a rant) is just too long to be said in a 140 character tweet.
I have always told myself that when I write on this blog, I did it for fun, to brag about what I've been up to, to remember what I did, and if by sheer luck help other people, that's an awesome bonus.
Increasingly though, and I'll be very honest, I think I do this for the warm fuzzy feeling when people leave a nice comment.
I really like comments. I like to know what people think of what I wrote. I want to know if they think I didn't help them - may be they were searching for one thing and got a different answer. I want to know if they think my writing style needs work. May be I need a spellchecker.
I crave for that feedback. I'm over the moon when I get it.
I'm bothered when I see lots of traffic, but no comments. Am I doing something wrong, am I not helping people, do people think I just blubber about rubbish. People are searching for answers to their problems, did they not find it here?
And that's just the beginning of my problems...
And their walled gardens.
The best thing about the social networks is that it encourages people to be chatty, and comment on things. The worse thing about it is that it's all hidden behind walled gardens and I can't see them.
I love talking to my friends on Facebook and Twitter. But sorry, conversations in those walled gardens doesn't return to the original content creator. Actually, what's happening is that people are gossips behind my back! Preposterous!
I really gave it some thought...
I realized what I can do, and this is more a behaviour change than something technical. I'm going to be more social, and actually make an effort to always leave a comment on any blog that I visit and has helped me.
If I think the content can be improved, I will suggest it. If I have more to add, I will blog and link back, if I just want to say thank you, I will do so, because I know it always gave me a warm feeling when others did it to me, and I should give that back to other people.
Love the blogging and long live the bloggers!
I have to confess I haven't had so much laugh in SharePoint for a long time.
Figure: Once you click this link it gets busy on the server.
Figure: Once it's clicked, I disable the link
The first thing we should do is put up a dialog to tell the user hey something's happening.
Waldek Mastykarz has an awesome article on how to do most of this, so I won't type out his code. http://blog.mastykarz.nl/sharepoint-2010-ui-tip-non-obtrusive-progress-messages/
Figure: Here's my blocking dialog. No close box. It spins for about 15 seconds and then disappears when the AJAX call receives a success response.
But waiting for 15 seconds really gets boring.
Here's the javascript code.
var msgs = [
"Calculating web paths",
"Negotiating with site collection",
"Creating empty site template",
"Activating Features",
"Synchronizing template",
"Setting up form libraries",
"Copying pages",
"Configuring webparts",
"Chasing chickens"];
var p = function(){
if (waitDialog) {
var msg = msgs[Math.floor(Math.random()*msgs.length)];
waitDialog.get_html().getElementsByTagName('TD')[1].innerHTML = msg;
setTimeout(p, 1000);
}
};
setTimeout(p,1000);
Create an array of status messages - these (aside from the chicken) are really what the REST service is doing. I also create a function p, which choses a random message and updates the waitDialog. Repeat every second. When the AJAX call completes, it destroys the waitDialog, and set it to null. This stops the setTimeout loop.
Suddenly, because things are updating on screen, the process doesn't seem long at all. You click it, a few messages flash past, before you know it the site's created and ready to go.
So there you have it, the trick really is just a clever disguise.
Test typing something with newline
Rule runs and removes any new line characters
I look at how a small team can build amazing things with the latest tools we have in Office 365 & SharePoint. I'm a coder, developer, Office SharePoint MVP. I dream, then I rant.
Founder @ Flow Studio App
A poweruser tool to help every maker write better Microsoft Flows and manage them.
MVP Alumni Office Apps and Services: SharePoint
MVP Alumni Business Applications: Flow
This work by John Liu is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
Permissions beyond the scope of this license may be available at /about-me/.
