KnockoutJS – Creating a Comma-Delimited List of Values

KnockoutJS LogoI’ve been building a lot of great stuff with KnockoutJS lately. It seems that it can enable many – if not all – of the development requirements I have these days, whether I’m building a single-page application (SPA) or just adding a snippet of content to an existing page. I can even build KnockoutJS-enabled “Web Parts” by dropping  a Content Editor Web Part [CEWP] into a page. It doesn’t matter what version of SharePoint it is.

The KnockoutJS documentation is generally very good, but sometimes I find the examples lacking a bit. It’s always tempting to make examples show off too much, which often leads to showing off too little. (I have this same problem with my SPServices documentation and examples.)

A common use case is wanting to display a set of values in a comma-delimited list. Let’s take this example. Say I have an observable array of Ticker objects, like so:

self.Tickers = ko.observableArray([
  {lookupId: 1, lookupValue:"SPLS"},
  {lookupId: 2, lookupValue:"APPL"},
  {lookupId: 3, lookupValue:"GOOG"}
]);

Because I’m pulling data from SharePoint, I want to hang onto the lookupId value along with the text value, which is what I want to display. Because of this a simple Tickers.join(“, “) doesn’t cut it.

I’d like to display the list of tickers like this:

SPLS, APPL, GOOG

Pretty simple, right? But after a little Binglage, I couldn’t find a concise example, thus this post.

If you check the KnockoutJS documentation for foreach, you’ll see that there is a variable available called $index. The $index variable gives you the zero-based index of the current array item.

So if I use foreach on Tickers:

<div data-bind="template: { name: 'Ticker', foreach: Tickers }"></div>

I can use the $index to determine if I should emit a comma. We don’t want to see a comma after the last value, so it requires this small bit of finesse.

<script type="text/html" id="Ticker"><span data-bind="visible: $index() > 0">, </span><span data-bind="text: lookupValue"></span></script>

It’s a little bit bass-ackward, but if the $index value is greater than zero – which it is for all values except the first one, where the index is zero – then we *prepend* a comma to the value.

Yes, I’m using a separate template to emit the tickers. That’s mainly because in my case I’m doing a little bit more than what I’m showing here. However, by creating a separate template, I have a reusable piece of markup. that I can use in many places.

I hope someone out there finds this useful!

References

Adding Geolocation Columns to SharePoint Lists

One of the cool things that came along in SharePoint 2013 was Geolocation fields in lists. Using Geolocation fields, we can display Map Views in SharePoint lists. This capability is an awesome way to add visualization to your UI and can really add value in many business processes.

Map View

Image Source: http://msdn.microsoft.com/en-us/library/office/jj656773(v=office.15).aspx

Think about it. You could show:

  • A map of your customers in a region
  • A map of your office’s location on its Intranet page
  • Deliveries you’ve made in the last 30 days
  • etc.

Unfortunately, at the present time in SharePoint 2013 on premises and SharePoint Online (Office365), “The Geolocation column is not available by default in SharePoint lists. To add the column to a SharePoint list, you have to write code.” (See How to: Add a Geolocation column to a list programmatically in SharePoint 2013)

For whatever reason, there’s no way to add a new Geolocation field via the UI. Instead you have to go through some hoops with PowerShell or script. See the following articles for great tutelage on how to do this:

As I understand it, there’s an MSI package (SQLSysClrTypes.msi)that must be installed manually on the Web Front Ends (WFEs) in an on premises installation to enable Geolocation fields, but this is already in place in SharePoint Online. Given this, we should be able to add Geolocation columns to lists via the UI without PowerShell or admin intervention.

This doesn’t sit well with me. At some of my clients, getting an admin to add something to the WFEs or run PowerShell requires an act of Congress. These Geolocation capabilities are too powerful a SharePoint feature to keep them under wraps.

To wit, I’ve created a suggestion called Adding Geolocation Fields to SharePoint Lists on the Office Development UserVoice site. If you’d like to be able to use Geolocation fields in your SharePoint solutions – at least on Office365 – head on over and cast your vote(s). Remember, Microsoft is listening!

Harvey Balls Redux – Display Templates for Site Columns by Dave Paylor

It may surprise you to know that one of my most popular blog posts has nothing to do with SharePoint, knowledge management, performance improvement, jQuery, client side coding, SPServices, or anything else you might expect. It’s one I wrote years ago (June 17, 2009, to be exact) called Harvey Balls for Office Documents. I though it was a throwaway post at the time, but it’s number 11 on the hit parade.

Title Views
Adding Script into a Content Editor Web Part (CEWP) in SharePoint 2010 32,547
Microsoft Excel Error: “There was a problem sending the command to the program.” 25,816
Adding jQuery+SPServices to a SharePoint Page: Step One, Always 23,973
Displaying Links Lists’ URLs in a Content Query Web Part (CQWP) in SharePoint 2010 22,971
Populating a SharePoint List Form with the Current User Information 20,789
Showing All Versions of “Append Changes to Existing Text” in a Data View Web Part (DVWP) 19,502
Using a DataSource in a Data View Web Part (DVWP) in a Different Site in SharePoint Designer 2010 18,904
The SharePoint 2010 “List View Lookup Threshold” and Why We Don’t Change It 18,848
Active Directory Groups vs. SharePoint Groups for User Management: A Dilemma 17,169
Working with SharePoint People Pickers with jQuery: A New Function Called findPeoplePicker 15,742
Harvey Balls for Office Documents 15,574

Harvey Balls are something that you probably have run across in one place or another. They can be used to give information about where something ranks or how far something has progressed at a glance. Consumer Reports magazine (and subsequently their Web site ConsumerReports.org) here in the US has used them for decades to rank products.

Here’s an undated example I found out on the Web:

Consumer Reports Harvey Balls

Dave Paylor (@DaveAtOBS) and I were talking at the Auckland airport after the New Zealand SharePoint Conference (an awesome conference – don’t miss it next year!) and somehow the topic of Harvey Balls came up.

Dave took our conversation as a challenge. He went home and came up with a Display Template for a SharePoint Site Column that will display that Site Column as Harvey Balls. Take a look at Dave’s post Display Templates for Site Columns – Harvey Balls.

This is an excellent example of the power of Display Templates. In the past, we would have had to deploy server-side code to create a new Field Type. I’ve seen very few people actually do that, probably because it was a relatively invasive project. Display Templates are something that can be added to a Site Collection by someone who knows JavaScript using SharePoint Designer. It’s not a non-developer task, but it’s doable by a lot of citizen developers out there.

Unfortunately, attaching the Display Template to a Site Column requires PowerShell. Dave’s added an item to the Office Development User Voice site called JSLink on Site Columns. I’ve voted for it, and if you’d like to create similar types of goodness in your SharePoint sites, you should vote for it, too. Microsoft is really watching the suggestions on that User Voice site and acting on them. If you have any other suggestions, please make them there!

Detecting the Current User’s Regional Settings with jQuery

I noticed a nice little trick going by in my Twitter feeds today.
2014-08-20_19-09-43I’ve always wanted to know how to do this. Displaying the right formats for dates and times as well as the right offset from UTC is a real challenge from the client side. There’s a fantastic library called Moment.js that I use on just about every project these days, but it only does the full job if you know the user’s locale and timezone.

The post on StackExchange gave a little snippet of script which came from an old MSDN Forums post from 2009. Kudos to Peter Holpar for the original idea.

The script basically screen-scrapes the values from the Language and Region settings page. I don’t mean that disparagingly at all; screen-scraping is how the SPGetCurrentUser function in my SPServices works. If it gets the job done and is reliable, the old art of screen-scraping – or should we call it plumbing the DOM with AJAX? – is just great.

Note that you’ll need to have jQuery loaded to use its AJAX function.

Here’s the script as-is from the StackExchange post. It was originally intended for SharePoint 2010.

var url = ctx.HttpRoot+"/_layouts/regionalsetng.aspx?Type=User";
$.get(url,function(data){
    $(data).find("select[name='ctl00$PlaceHolderMain$ctl00$ctl00$DdlwebLCID']").find(":selected").each(function(){
        var lcid  = $(this).attr("value");
        var cultureInfo  = $(this).text();
    });
});

I just tested it out in SharePoint Online on Office365 and this is the version that works for me. Note that I simplified the jQuery selectors to look just for the important ending text in the name attribute. I’ve also re-scoped the variables so that they are available outside the $.get call. If you want to use this snippet, you’ll probably need to adapt it for your environment. The alert at the end is jut there to show you that it works.

var url = _spPageContextInfo.webAbsoluteUrl+"/_layouts/regionalsetng.aspx?Type=User";
var lcid, cultureInfo, timeZone;

$.get(url,function(data){
  $(data).find("select[name$='LCID'] option:selected").each(function(){
      lcid  = $(this).attr("value");
      cultureInfo  = $(this).text();
  });
  $(data).find("select[name$='TimeZone'] option:selected").each(function(){
    timeZone  = $(this).text();
  });

  alert(lcid + "::" + cultureInfo + "::" + timeZone);
});

Cold Calling Doesn’t Work, Nor Does “Cold Emailing”

Here’s a new one in my email inbox this morning: “As per my discussion with you receptionist, I have enclosed…” Yeah, my receptionist, which I don’t have.

That was in an email from a company some would consider “legitimate” in the SharePoint space. They have a set of products for SharePoint that may work well (I have no first hand knowledge), but it doesn’t matter. By sending me that come-on via LinkedIn mail they are guaranteeing that I will actively stay away.

People, cold calls don’t work! It doesn’t matter whether you send them via LinkedIn, email, voice mail, whatever. Scatter-shot approaches to sales and marketing in the 21st century just can’t yield enough value to continue doing it.

Cold-CallingFrom “Why Cold Calling Is A Waste Of Time (And What You Should Be Doing Instead)“:

 A little internet surfing revealed that the stats for cold calls were not encouraging:

And that’s for cold calls in the traditional sense: picking up a phone and dialing a number. Email response rates are so much lower.

Unfortunately, sending bits is way too cheap. The bad guys have figured that out. Just a sampling from my Junk E-Mail and Spam folders this morning:

RE: TO WHOM IT MAY CONCERN: Sir/Madam, My name is Brown Morgan, Esq. I am a Barrister, Solicitor and Financial Advocate based in the Republic of Ghana West Africa. I brought a Business Deal at your doorstep for your consideration and hereinafter to confirm if you will be willing and interested to participate in the Business Deal. My client has privately acquired the sum of US$88 million and whereas need someone that is trustworthy to receive the aforesaid funds on condition that my client’s information will not be disclosed as the Original Owner of the Funds. Send me your telephone numbers for discussion of this offer in full details including your commission for your participation. Yours Truly, Brown Morgan. Barrister-At-Law

Have you been searching for a Business loan, Company loan or loan to pay off bills? This is to inform you that We Offer all kinds of loans at 3% interest rate.

Mr. Edgar Walker of compensation and finance house, as he is our representative in United State, contact him immediately for your Compensation payment of $500,000.00 USD (Five Hundred Thousand United States Dollars) Funds will be release direct to you in accordance with legal clearance and procedure.

Рассылки по любым предприятиям  Большой выбор аудиторий  Обращайтесь по любым вопросам: (Ч 9 5 ) 54 5   1 4 92

No idea on that last one. Am I likely to dial that phone number? Ever?

Blasting out thousands or even millions of emails has about the same cost as sending out one: almost nil. Therein lies the problem that marketers today face. There’s too much noise and chaff and it’s too easy to do the wrong thing.

After I attend a conference, something similar happens. I get a slew of emails saying things like:

  • “Thanks for stopping by our booth” when I haven’t stopped by any booth at all
  • “We enjoyed the conversation we had with you about our products” when I didn’t talk to a single person at that company
  • “Because you attended conference XYZ, we’re sure you’d be interested in…” even when there’s no connection to what I actually do in my business

The “legitimate” marketers are just riding the “free bits” tide. There’s no shortage of articles out there with titles like “5 Secrets to Cold Calling Success” or “Secrets To Successful Cold Calling”. Those articles are the cold calling of the blog post world, trying to suck you into following a practice that the writer can profit from. That’s an even more circuitous cold calling approach that probably leads to an even *lower* success rate.

Looking forward to having a long lasting business relationship with you and your Organization.

If I thought you had the least idea about who I am or what my organization does, maybe, just maybe I might read your email.

I’ll leave you with a few last thoughts on this. Do you want to contact people who may feel the way I do about it and even take the time to rant about it as I’m doing here? Or do you want to carefully seek out people who truly might buy your product or at least listen to your pitch? In this age, your “social presence” is based on the sum of every one of the interactions you have with potential customers, no matter how inconsequential those interactions may seem. How do you want your potential customers to think of you?

</rant>