Lodash in Service Portal

There are a number of client-side libraries included in Service Portal. We will be going over some of them in this next series, starting with the Lodash library.

The version of Lodash that is included in the Service Portal is 4.17.11. Please keep in mind that Lodash is only available client-side, so you can use it in your Client Script, but not in your Server Script.

About Lodash

Lodash is a JavaScript library that helps programmers write more concise and maintainable JavaScript and contains tools to simplify programming with strings, numbers, arrays, functions, and objects.

You can find the full documentation here: https://lodash.com/docs

Lodash can be broken down into several main areas:

Utilities – for simplifying common programming tasks such as determining type as well as simplifying math operations.
Function – simplifying binding, decorating, constraining, throttling, debouncing, currying, and changing the pointer.
String – conversion functions for performing basic string operations, such as trimming, converting to uppercase, camel case, etc.
Array – creating, splitting, combining, modifying, and compressing
Collection – iterating, sorting, filtering, splitting, and building
Object – accessing, extending, merging, defaults, and transforming
Seq – chaining, wrapping, filtering, and testing.

Some examples

Lodash contains hundreds of helper functions. Although I can’t go through all of them here, I have put together some common examples.

OBJECTS

_.clone(value)

Creates a shallow clone of value.

var objects = [{ 'a': 1 }, { 'b': 2 }];

var shallow = _.clone(objects);

console.log(shallow[0] === objects[0]);

// => true

_.assign(object, [sources])

Assigns own enumerable string keyed properties of source objects to the destination object. Source objects are applied from left to right. Subsequent sources overwrite property assignments of previous sources.

function Foo() {

this.a = 1;

}

function Bar() {

this.c = 3;

}

Foo.prototype.b = 2;

Bar.prototype.d = 4;

_.assign({ 'a': 0 }, new Foo, new Bar);

// => { 'a': 1, 'c': 3 }

ARRAYS

_.times(n, [iteratee=_.identity])

Invokes the iteratee n times, returning an array of the results of each invocation. The iteratee is invoked with one argument; (index).

_.times(3, String);

// => ['0', '1', '2']

_.times(4, _.constant(0));

// => [0, 0, 0, 0]

_.uniq(array)

Creates a duplicate-free version of an array, using SameValueZero for equality comparisons, in which only the first occurrence of each element is kept. The order of result values is determined by the order they occur in the array.

1 2	_.uniq([2, 1, 2]); // => [2, 1]

FUNCTIONS

_.bind(func, thisArg, [partials])

function greet(greeting, punctuation) {

return greeting + ' ' + this.user + punctuation;

}

var object = { 'user': 'fred' };

var bound = _.bind(greet, object, 'hi');

bound('!');

// => 'hi fred!'

// Bound with placeholders.

var bound = _.bind(greet, object, _, '!');

bound('hi');

// => 'hi fred!'

COLLECTION

_.includes(collection, value, [fromIndex=0])

Checks if value is in collection. If collection is a string, it’s checked for a substring of value, otherwise, SameValueZero is used for equality comparisons. If fromIndex is negative, it’s used as the offset from the end of collection.

_.includes([1, 2, 3], 1);

// => true

_.includes([1, 2, 3], 1, 2);

// => false

_.includes({ 'a': 1, 'b': 2 }, 1);

// => true

_.includes('abcd', 'bc');

// => true

_.filter(collection, [predicate=_.identity])

Iterates over elements of collection, returning an array of all elements predicate returns truthy for. The predicate is invoked with three arguments: (value, index|key, collection).

var users = [

{ 'user': 'barney', 'age': 36, 'active': true },

{ 'user': 'fred', 'age': 40, 'active': false }

];

_.filter(users, function(o) { return !o.active; });

// => objects for ['fred']

// The `_.matches` iteratee shorthand.

_.filter(users, { 'age': 36, 'active': true });

// => objects for ['barney']

// The `_.matchesProperty` iteratee shorthand.

_.filter(users, ['active', false]);

// => objects for ['fred']

// The `_.property` iteratee shorthand.

_.filter(users, 'active');

// => objects for ['barney']

_.find(collection, [predicate=_.identity], [fromIndex=0])

Iterates over elements of collection, returning the first element predicate returns truthy for. The predicate is invoked with three arguments: (value, index|key, collection).

var users = [

{ 'user': 'barney', 'age': 36, 'active': true },

{ 'user': 'fred', 'age': 40, 'active': false },

{ 'user': 'pebbles', 'age': 1, 'active': true }

];

_.find(users, function(o) { return o.age < 40; });

// => object for 'barney'

// The `_.matches` iteratee shorthand.

_.find(users, { 'age': 1, 'active': true });

// => object for 'pebbles'

// The `_.matchesProperty` iteratee shorthand.

_.find(users, ['active', false]);

// => object for 'fred'

// The `_.property` iteratee shorthand.

_.find(users, 'active');

// => object for 'barney'

SEQ

_.chain(value)

Creates a Lodash wrapper instance that wraps value with explicit method chain sequences enabled. The result of such sequences must be unwrapped with _#value.

var users = [

{ 'user': 'barney', 'age': 36 },

{ 'user': 'fred', 'age': 40 },

{ 'user': 'pebbles', 'age': 1 }

];

var youngest = _

.chain(users)

.sortBy('age')

.map(function(o) {

return o.user + ' is ' + o.age;

})

.head()

.value();

// => 'pebbles is 1'

_.sortBy(collection, [iteratees=[_.identity]])

Creates an array of elements, sorted in ascending order by the results of running each element in a collection thru each iteratee. This method performs a stable sort, that is, it preserves the original sort order of equal elements. The iteratees are invoked with one argument: (value).

var users = [

{ 'user': 'fred', 'age': 48 },

{ 'user': 'barney', 'age': 36 },

{ 'user': 'fred', 'age': 40 },

{ 'user': 'barney', 'age': 34 }

];

_.sortBy(users, [function(o) { return o.user; }]);

// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]

_.sortBy(users, ['user', 'age']);

// => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]]

_.map(collection, [iteratee=_.identity])

Creates an array of values by running each element in collection thru iteratee. The iteratee is invoked with three arguments: (value, index|key, collection).

function square(n) {

return n * n;

}

_.map([4, 8], square);

// => [16, 64]

_.map({ 'a': 4, 'b': 8 }, square);

// => [16, 64] (iteration order is not guaranteed)

var users = [

{ 'user': 'barney' },

{ 'user': 'fred' }

];

// The `_.property` iteratee shorthand.

_.map(users, 'user');

// => ['barney', 'fred']

Conclusion

Although some Lodash methods are becoming native JavaScript functions with ES6, there are still many useful methods that complement functional programming in Service Portal.

For more on Lodash, check out the website: https://lodash.com

For a Lodash cheatsheet, check out: https://devhints.io/lodash

What other Lodash methods do you find useful in Service Portal? Let me know in the comments.

5 comments

Friedrich says:
December 13, 2019 at 6:53 pm
Hi Nathan thanks so much this is quite useful to know that we can those kind of libs using now in Service Portal.
greetings from munich
Vyas Ponnanchery says:
December 18, 2019 at 3:43 am
Thanks a ton. This helps alot.
Amado says:
December 18, 2019 at 8:25 pm
I’ve been using lodash functions on widgets for some time already. It helps a lot having lodash available on the server script but that requires adding the library as a Script Include. Do you recommend that?
George Klifov says:
February 18, 2020 at 9:43 pm
Hey Nathan,
this is really awesom! Still, (I am a bit of stupid…) it would be wonderful if you can show a real SP example 🙂
Thanks in advance!
Don says:
June 11, 2020 at 7:26 am
Lodash in a script include is great when ArrayUtil().unique() fails to handle an array of objects.