A simple rule for validating an observable which could contain multiple email addresses.

Assuming you have an observable like self.emailTO = ko.observable('');, you would just extend it to have self.emailTO.extend({ multiemail: true });. Use it with the required validator if you want at least one email address.

ko.validation.rules['multiemail'] = {
    validator: function (val, validate) {
        if (!validate) { return true; }

        var isValid = true;
        if (!ko.validation.utils.isEmptyVal(val)) {
            // use the required: true property if you don't want to accept empty values
            var values = val.split(';');
            $(values).each(function (index) {
                isValid = ko.validation.rules['email'].validator($.trim(this), validate);
                return isValid; // short circuit each loop if invalid
            });
        }
        return isValid;
    },
    message: 'Please enter valid email addresses (separate multiple email addresses using a semicolon).'
};

Requires Knockout.js, Knockout Validation, and jQuery.

InfoPath is a common tool used to create forms hosted on SharePoint. Due to the limited development options available for Office 365, I think this places an increased focus on InfoPath when it comes to creating a solution. Unfortunately, I found that it was relatively difficult to get the current user’s information to be displayed or saved within an Infopath form.

First, make sure you have subscribed to the Microsoft Translator API on Azure Marketplace and registered your application Azure DataMarket. For testing, you can use the free subscription which lets you submit up to 2 million characters a month. Registering your app will create a Client ID and a Client Secret which you need to get authorization.

In order to protect your Client Secret, you’ll need to write server-side code to get your access token. The access code is then passed to the Microsoft Translator API via AJAX.

I am working on a small query tool that will be used to make AJAX calls against SharePoint’s Enterprise Search Query Web Service. Previously, I created the SOAP messages by appending a gigantic series of strings together. In this iteration, I wanted to use JsRender (my template engine of choice right now and the successor to jQuery templates).

My team has recently created quite a few awesome WCF services that can surface data via REST or JSON. The next step, was building an interface on top of the services using AJAX.

Since the services were hosted on a SharePoint farm, it is super easy to just upload an HTML file into a document library and start coding away. However, eventually this process breaks down; I needed a way to deploy these files to different environments and keep them in some sort of version control system. (No, a document library doesn’t count as version control)

Quick update to SPUtility.js today! I’ve added support for rich text fields, unchecking multi-select checkboxes, and choice fields with fill-in values. I also have some thoughts on future SPUtility.js updates.

Version 0.5 of SPUtility.js has been released onto the codeplex site! Go check it out!

SPUtility.js version 0.4 should be getting released soon (week or so??). I wanted to put a quick post out there to highlight some of the upcoming features and fixes.

SPUtility.js is a library used to get/set SharePoint’s form fields. We can also use it autopopulate a Newform/Editform based on some URL parameters which are passed to the page!

Working with JavaScript can definitely be painful, but I always love stumbling across interesting and strange features of the language. I just found wtfjs.com which led me to these two answers on stackoverflow.

I recently got asked if it was possible wrap the column headers in a list view web part. The user had a WebPart with quite a few columns with long names and was trying to prevent the page from scrolling left to right.

In this era of Web 2.0 web applications, I think it was only a matter of time before I needed to investigate how I could apply AJAX to SharePoint. With a little JavaScript and SharePoint’s web services, you can build fancy apps that can easily be dropped into a document library. And after reading Glen Cooper’s blog post on the subject, I figured it was something definitely worth investigating.

I also took this opportunity to improve a process I have to do all the time: what are the internal column names in a list? To get the list information, I built a simple AJAX app that consumes the Lists.asmx web service. Please keep in mind that this code will have be uploaded into SharePoint in order to work (a document library will work) and will not run from your desktop.

November 10, 2010 update: I’ve posted the sequel to this post: Autopopulate a SharePoint Form from URL (with SPUtility.js). I highly recommend checking out the new and improved way using SPUtility.js!

This post builds off of my previous post about making fields read only. In this case, I needed to autopopulate the NewForm.aspx with a value that gets passed to the form via URL parameters.

I was developing an input form for a search when I came across the need to allow the user to filter items using a date range. I had two input boxes where the user could enter a start and an end date. For some of the most common date ranges, I decided to create links that could be clicked to auto-populate the start/end date textboxes. For example, searching for items that were created last week or last month. Using JavaScript’s Date object, I was able to put together some nice examples.

November 10, 2010 Update: I’ve posted the sequel to this post: Autopopulate a SharePoint Form from URL (with SPUtility.js). The code below will not work in SharePoint 2013 so you should use SPUtility.js!

After looking at a couple of examples online, most of them require the use of SharePoint Designer to make a field read only (or to hide it). Here is a method to make a field readonly using only Prototype (javascript library) and a Content Editor Web Part

Strangely, Prototype’s documentation for Element.insert does not have any examples, so I cooked something up quick:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Template</title>

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">

Event.observe(window, 'load', function() {
    // Using Element.insert to insert after, before, top, or bottom
    Element.insert($('para1'), { before: "<p>This is paragraph zero.</p>" });
    Element.insert($('para1'), { after: "<p>This is paragraph two.</p>" });
   
    // notice we have to insert using the content container
    Element.insert($('content'), { top: "<p>This is the first paragraph.</p>" });
    Element.insert($('content'), { bottom: "<p>This is the last paragraph</p>" });
});

</script>

</head>

<body>

<div id="content">
    <p id="para1">This is paragraph one.</p>
    <p id="para3">This is paragraph three.</p>
</div>

</body>
</html>