Formatting databound fields

When you bind to fields in a storied feed you often want to format them a certain way. Eg: You want dates to show the month in full or as a number. Or you want to pad images with leading zeros, etc.

1. Adding filters to databound fields can be done using this syntax:

2. You can use 4 types of filters:

Angular filters: overview
Storied filters: see overview below
Lodash functions: overview
Custom functions: window functions that you can defined yourself

3. Angular filter example:

Format a date using a custom format:
{{($ctrl.item || item).creation_date | date:'dd/MM/yy'}}

Format a price using a currency symbol and number of decimals to round off to

4. Storied filter example:

Capitalize the first letter
{{($ctrl.item || item).name | capitalize}}

Replace the string "low-quality" by "high-quality" in the imageUrl property
{{($ctrl.item || item).imageUrl | replace:'low-quality':'high-quality'}}

5. Lodash filter example:

Add leading zeros to the articleIndex so the full number has 5 characters
{{($ctrl.item || item).articleIndex | lodash: 'padStart':5:'0'}}

Get the maximum from a list of numbers
{{($ctrl.item || item).prices | lodash: 'max'}}

In an attempt to keep the storied websites as lean as possible, not all lodash filters are available. Here is a list of the ones that are available:

assign, camelCase, ceil, clamp, clone, cloneDeep, compact, concat, debounce, difference, endsWith, every, extend, filter, find, findIndex, forEach, get, includes, indexOf, inRange, intersection, isArray, isEmpty, isEqual, isFunction, isNaN, isNil, isNull, isNumber, isString, isUndefined, join, keys, lowerCase map, mapValues, max, maxBy, mean, merge, minBy, noop, now, omitBy, once, padStart, pull, range, reduce, reduceRight, reject, remove, reverse, round, set, shuffle, sortBy, split, startsWith, throttle, times, toNumber, toString, trim, trimEnd, trimStart, union, uniq, uniqBy, unset, values, without, xor,

6. Custom filter example:

Add leading zeros to the articleIndex so the full number has 5 characters
{{($ctrl.item || item).firstname | window: 'firstThreeLetterCapitalized'}}

In the project settings under javascript, you can add this function to the window object
window.firstThreeLetterCapitalized = function(text) {
return text.substring(0, 3).toUpperCase() + text.substring(3);
}

| Filters               | Example                                              | Output                                            | Description |
| ------------------:          | :------------------                                            | :------------------                                             | ------- |
| appendFileExtension   | 'http://sto.co/myvideo' : 'mp4'                      | 'http://sto.co/myvideo.mp4'                        | Removes existing extensions and adds the provided one to the given url |
| appendTimeQueryParam  | 'http://sto.co/myrequest.json'                       | 'http://sto.co/myrequest.json?time=1474327937'     | Adds a query param with the current time unix timestamp to avoid caching the request |
| capitalize            | 'storied Co'                                         | 'Storied Co'                                       | Makes the first letter of the given string capitalized |
| currencyOrPassthrough | 12.34 : true                                         | '12'                                               | Will convert a number to a string and remove the part after the decimal point if the extra parameter is true. If it's not a number it will just return the original input |
| decodeURI             | 'sto.co?query=my%20search%20term'                    | 'sto.co?query=my search term'                      | Unescape url characters |
| encodeUri             | 'sto.co?query=my search term'                        | 'sto.co?query=my%20search%20term'                  | Escape url characters |
| duration              | 310                                                  | '5m'                                               | Converts seconds to a more readable format (hours, minutes, seconds). Rounds to the closest unit |
| firstWordsBold        | 'this is a sentance' : 2                             | '<strong>this is</strong> a sentance'              | Make the first x words bold |
| getFileExtension      | 'myvideo.mp4'                                        | 'mp4'                                              | Extracts the extension |
| kebabCase             | 'this_is an!exampleString'                           | 'this-is-an-examplestring'                         | Converts any string into kebab case notation by replacing all non alpha numeric characters by a dash |
| pagination            | [1, 2, 3, 4, 5, 6, 7, 8] : 3 : 4                     | [4, 5, 6, 7]                                       | Take a part of an array. First argument is the offset from the start, the second is the number of items |
| replace               | 'my-image-low.jpg' : '-low.jpg' : '-high.jpg'        | 'my-image-high.jpg'                                | Replace a string by another |
| truncate              | 'my long text' : 5                                   | 'my lo'                                            | truncate a piece of text to the first x letters |