diff --git a/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte b/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte index 24b6042940..4c85d3865d 100644 --- a/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte +++ b/packages/builder/src/components/automation/SetupPanel/GenericBindingPopover.svelte @@ -83,6 +83,7 @@
{helper.example || ''}{/each} diff --git a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte index 47334267b6..941796d025 100644 --- a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte @@ -103,6 +103,7 @@
{helper.example || ''}{/each} diff --git a/packages/builder/src/constants/completions.js b/packages/builder/src/constants/completions.js index 69f6ec551b..32de934324 100644 --- a/packages/builder/src/constants/completions.js +++ b/packages/builder/src/constants/completions.js @@ -7,6 +7,7 @@ export function handlebarsCompletions() { Object.entries(manifest[key]).map(([helperName, helperConfig]) => ({ text: helperName, path: helperName, + example: helperConfig.example, label: helperName, displayText: helperName, description: helperConfig.description, diff --git a/packages/string-templates/README.md b/packages/string-templates/README.md index d9433b387b..b2a1ce476e 100644 --- a/packages/string-templates/README.md +++ b/packages/string-templates/README.md @@ -2,26 +2,30 @@ This package provides a common system for string templating across the Budibase Builder, client and server. The templating is provided through the use of [Handlebars](https://handlebarsjs.com/) an extension of Mustache which is capable of carrying out logic. We have also extended the base Handlebars functionality through the use -of a set of helpers provided through the [handlebars-helpers](https://github.com/helpers/handlebars-helpers) package. +of a set of helpers provided through the [handlebars-helpers](https://github.com/budibase/handlebars-helpers) package. We have not implemented all the helpers provided by the helpers package as some of them provide functionality we felt would not be beneficial. The following collections of helpers have been implemented: -1. [Math](https://github.com/helpers/handlebars-helpers/tree/master#math) - a set of useful helpers for +1. [Math](https://github.com/budibase/handlebars-helpers/tree/master#math) - a set of useful helpers for carrying out logic pertaining to numbers e.g. `avg`, `add`, `abs` and so on. -2. [Array](https://github.com/helpers/handlebars-helpers/tree/master#array) - some very specific helpers +2. [Array](https://github.com/budibase/handlebars-helpers/tree/master#array) - some very specific helpers for use with arrays, useful for example in automations. Helpers like `first`, `last`, `after` and `join` can be useful for getting particular portions of arrays or turning them into strings. -3. [Number](https://github.com/helpers/handlebars-helpers/tree/master#number) - unlike the math helpers these +3. [Number](https://github.com/budibase/handlebars-helpers/tree/master#number) - unlike the math helpers these are useful for converting numbers into useful formats for display, e.g. `bytes`, `addCommas` and `toPrecision`. -4. [URL](https://github.com/helpers/handlebars-helpers/tree/master#url) - very specific helpers for dealing with URLs, +4. [URL](https://github.com/budibase/handlebars-helpers/tree/master#url) - very specific helpers for dealing with URLs, such as `encodeURI`, `escape`, `stripQueryString` and `stripProtocol`. These are primarily useful for building up particular URLs to hit as say part of an automation. -5. [String](https://github.com/helpers/handlebars-helpers/tree/master#string) - these helpers are useful for building +5. [String](https://github.com/budibase/handlebars-helpers/tree/master#string) - these helpers are useful for building strings and preparing them for display, e.g. `append`, `camelcase`, `capitalize` and `ellipsis`. -6. [Comparison](https://github.com/helpers/handlebars-helpers/tree/master#comparison) - these helpers are mainly for +6. [Comparison](https://github.com/budibase/handlebars-helpers/tree/master#comparison) - these helpers are mainly for building strings when particular conditions are met, for example `and`, `or`, `gt`, `lt`, `not` and so on. This is a very extensive set of helpers but is mostly as would be expected from a set of logical operators. -7. [Date](https://github.com/helpers/helper-date) - last but certainly not least is a moment based date helper, which can +7. [Object](https://github.com/budibase/handlebars-helpers/tree/master#object) - useful operator for parsing objects, as well +as converting them to JSON strings. +8. [Regex](https://github.com/budibase/handlebars-helpers/tree/master#regex) - allows performing regex tests on strings that +can be used in conditional statements. +9. [Date](https://github.com/helpers/helper-date) - last but certainly not least is a moment based date helper, which can format ISO/timestamp based dates into something human-readable. An example of this would be `{{date dateProperty "DD-MM-YYYY"}}`. ## Date formatting diff --git a/packages/string-templates/manifest.json b/packages/string-templates/manifest.json index e3c8b1dc76..294eeeec5e 100644 --- a/packages/string-templates/manifest.json +++ b/packages/string-templates/manifest.json @@ -5,6 +5,7 @@ "a" ], "numArgs": 1, + "example": "{{ abs 12012.1000 }} -> 12012.1", "description": "
Return the magnitude of a
.
Return the sum of a
plus b
.
Returns the average of all numbers in the given array.
\n" }, "ceil": { @@ -27,6 +30,7 @@ "value" ], "numArgs": 1, + "example": "{{ ceil 1.2 }} -> 2", "description": "Get the Math.ceil()
of the given value.
Divide a
by b
Get the Math.floor()
of the given value.
Return the product of a
minus b
.
Get the remainder of a division operation.
\n" }, "multiply": { @@ -66,6 +74,7 @@ "b" ], "numArgs": 2, + "example": "{{ product 10 5 }} -> 50", "description": "Return the product of a
times b
.
Add a
by b
.
Generate a random number between two values
\n" }, "remainder": { @@ -90,6 +101,7 @@ "b" ], "numArgs": 2, + "example": "{{ remainder 10 6 }} -> 4", "description": "Get the remainder when a
is divided by b
.
Round the given number.
\n" }, "subtract": { @@ -105,6 +118,7 @@ "b" ], "numArgs": 2, + "example": "{{ subtract 10 5 }} -> 5", "description": "Return the product of a
minus b
.
Returns the sum of all numbers in the given array.
\n" }, "times": { @@ -120,6 +135,7 @@ "b" ], "numArgs": 2, + "example": "{{ times 10 5 }} -> 50", "description": "Multiply number a
by number b
.
Returns all of the items in an array after the specified index. Opposite of before.
\n" }, "arrayify": { @@ -137,6 +154,7 @@ "value" ], "numArgs": 1, + "example": "{{ arrayify \"foo\" }} -> [\"foo\"]", "description": "Cast the given value
to an array.
Return all of the items in the collection before the specified count. Opposite of after.
\n" }, "eachIndex": { @@ -153,6 +172,7 @@ "options" ], "numArgs": 2, + "example": "{{#eachIndex [1, 2, 3]}} {{item}} is {{index}} {{/eachIndex}}", "description": "Iterates the array, listing an item and the index of it.
\n" }, "filter": { @@ -162,6 +182,7 @@ "options" ], "numArgs": 3, + "example": "{{#filter [1, 2, 3] 2}}2 Found{{else}}2 not found{{/filter}}", "description": "Block helper that filters the given array and renders the block for values that evaluate to true
, otherwise the inverse block is returned.
Returns the first item, or first n
items of an array.
Iterates over each item in an array and exposes the current item in the array as context to the inner block. In addition to the current array item, the helper exposes the following variables to the inner block: - index
- total
- isFirst
- isLast
Also, @index
is exposed as a private variable, and additional private variables may be defined as hash arguments.
Block helper that renders the block if an array has the given value
. Optionally specify an inverse block to render when the array does not have the given value.
Returns true if value
is an es5 array.
Returns the item from array
at index idx
.
Join all elements of array into a string, optionally using a given separator.
\n" }, "equalsLength": { @@ -218,6 +245,7 @@ "options" ], "numArgs": 3, + "example": "{{equalsLength [1, 2, 3] 3}} -> true", "description": "Returns true if the the length of the given value
is equal to the given length
. Can be used as a block or inline helper.
Returns the last item, or last n
items of an array or string. Opposite of first.
Returns the length of the given string or array.
\n" }, "lengthEqual": { @@ -242,6 +272,7 @@ "options" ], "numArgs": 3, + "example": "{{equalsLength [1, 2, 3] 3}} -> true", "description": "Returns true if the the length of the given value
is equal to the given length
. Can be used as a block or inline helper.
Returns a new array, created by calling function
on each element of the given array
. For example,
Map over the given object or array or objects and create an array of values from the given prop
. Dot-notation may be used (as a string) to get nested properties.
Reverse the elements in an array, or the characters in a string.
\n" }, "some": { @@ -274,6 +308,7 @@ "provided" ], "numArgs": 3, + "example": "{{#some [1, 'b', 3] isString}} string found {{else}} No string found {{/some}} -> string found", "description": "Block helper that returns the block if the callback returns true for some value in the given array.
\n" }, "sort": { @@ -282,6 +317,7 @@ "key" ], "numArgs": 2, + "example": "{{ sort ['b', 'a', 'c'] }} -> ['a', 'b', 'c']", "description": "Sort the given array
. If an array of objects is passed, you may optionally pass a key
to sort on as the second argument. You may alternatively pass a sorting function as the second argument.
Sort an array
. If an array of objects is passed, you may optionally pass a key
to sort on as the second argument. You may alternatively pass a sorting function as the second argument.
Use the items in the array after the specified index as context inside a block. Opposite of withBefore.
\n" }, "withBefore": { @@ -308,6 +346,7 @@ "options" ], "numArgs": 3, + "example": "{{ withBefore [1, 2, 3] 2 }} {{this}} {{/withBefore}}", "description": "Use the items in the array before the specified index as context inside a block. Opposite of withAfter.
\n" }, "withFirst": { @@ -317,6 +356,7 @@ "options" ], "numArgs": 3, + "example": "{{ withFirst [1, 2, 3] }} {{this}} {{/withFirst}}", "description": "Use the first item in a collection inside a handlebars block expression. Opposite of withLast.
\n" }, "withGroup": { @@ -326,6 +366,7 @@ "options" ], "numArgs": 3, + "example": "{{#withGroup [1, 2, 3, 4] 2}} {{#each this}} {{.}} {{each}}Block helper that groups array elements by given group size
.
Use the last item or n
items in an array as context inside a block. Opposite of withFirst.
Block helper that sorts a collection and exposes the sorted collection as context inside the block.
\n" }, "unique": { @@ -352,6 +395,7 @@ "options" ], "numArgs": 2, + "example": "{{#each (unique ['a', 'a', 'c', 'b', 'e', 'e']) }} {{.}} {{/each}} -> acbe", "description": "Block helper that return an array with all duplicate values removed. Best used along with a each helper.
\n" } }, @@ -361,6 +405,7 @@ "number" ], "numArgs": 1, + "example": "{{ bytes 1386 }} -> 1.4Kb", "description": "Format a number to it's equivalent in bytes. If a string is passed, it's length will be formatted and returned. Examples: - 'foo' => 3 B
- 13661855 => 13.66 MB
- 825399 => 825.39 kB
- 1396 => 1.4 kB
Add commas to numbers
\n" }, "phoneNumber": { @@ -375,6 +421,7 @@ "num" ], "numArgs": 1, + "example": "{{ phoneNumber 8005551212 }} -> (800) 555-1212", "description": "Convert a string or number to a formatted phone number.
\n" }, "toAbbr": { @@ -383,6 +430,7 @@ "precision" ], "numArgs": 2, + "example": "{{ toAbbr 10123 2 }} -> 10.12k", "description": "Abbreviate numbers to the given number of precision
. This for general numbers, not size in bytes.
Returns a string representing the given number in exponential notation.
\n" }, "toFixed": { @@ -399,6 +448,7 @@ "digits" ], "numArgs": 2, + "example": "{{ toFixed 1.1234 2 }} -> 1.12", "description": "Formats the given number using fixed-point notation.
\n" }, "toFloat": { @@ -421,6 +471,7 @@ "precision" ], "numArgs": 2, + "example": "{{toPrecision \"1.1234\" 2}}", "description": "Returns a string representing the Number
object to the specified precision.
Encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character.
\n" }, "escape": { @@ -437,6 +489,7 @@ "str" ], "numArgs": 1, + "example": "{{ escape \"https://myurl?Hello+There\" }} -> https://myurl?Hello%20There", "description": "Escape the given string by replacing characters with escape sequences. Useful for allowing the string to be used in a URL, etc.
\n" }, "decodeURI": { @@ -444,6 +497,7 @@ "str" ], "numArgs": 1, + "example": "{{ escape \"https://myurl?Hello%20There\" }} -> https://myurl?Hello+There", "description": "Decode a Uniform Resource Identifier (URI) component.
\n" }, "url_encode": { @@ -462,6 +516,7 @@ "href" ], "numArgs": 2, + "example": "{{ urlResolve \"https://myurl\" \"/api/test\" }} -> https://myurl/api/test", "description": "Take a base URL, and a href URL, and resolve them as a browser would for an anchor tag.
\n" }, "urlParse": { @@ -469,6 +524,7 @@ "str" ], "numArgs": 1, + "example": "{{ urlParse \"https://myurl/api/test\" }}", "description": "Parses a url
string into an object.
Strip the query string from the given url
.
Strip protocol from a url
. Useful for displaying media that may have an 'http' protocol on secure connections.
Append the specified suffix
to the given string.
camelCase the characters in the given string
.
Capitalize the first word in a sentence.
\n" }, "capitalizeAll": { @@ -514,6 +575,7 @@ "str" ], "numArgs": 1, + "example": "{{ capitalizeAll \"foo bar baz\"}} -> Foo Bar Baz", "description": "Capitalize all words in a string.
\n" }, "center": { @@ -522,6 +584,7 @@ "spaces" ], "numArgs": 2, + "example": "{{ center \"test\" 1}} -> \" test \"", "description": "Center a string using non-breaking spaces
\n" }, "chop": { @@ -529,6 +592,7 @@ "string" ], "numArgs": 1, + "example": "{{ chop \" ABC \"}} -> \"ABC\"", "description": "Like trim, but removes both extraneous whitespace and non-word characters from the beginning and end of a string.
\n" }, "dashcase": { @@ -536,6 +600,7 @@ "string" ], "numArgs": 1, + "example": "{{dashcase \"a-b-c d_e\"}} -> a-b-c-d-e", "description": "dash-case the characters in string
. Replaces non-word characters and periods with hyphens.
dot.case the characters in string
.
Lowercase all of the characters in the given string. Alias for lowercase.
\n" }, "ellipsis": { @@ -558,6 +625,7 @@ "length" ], "numArgs": 2, + "example": "{{ellipsis \"foo bar baz\", 7}} -> foo bar…", "description": "Truncates a string to the specified length
, and appends it with an elipsis, …
.
Replace spaces in a string with hyphens.
\n" }, "isString": { @@ -572,6 +641,7 @@ "value" ], "numArgs": 1, + "example": "{{isString \"foo\"}} -> true", "description": "Return true if value
is a string.
Lowercase all characters in the given string.
\n" }, "occurrences": { @@ -587,6 +658,7 @@ "substring" ], "numArgs": 2, + "example": "{{occurrences \"foo bar foo bar baz\" \"foo\"}} -> 2", "description": "Return the number of occurrences of substring
within the given string
.
PascalCase the characters in string
.
path/case the characters in string
.
Replace spaces in the given string with pluses.
\n" }, "prepend": { @@ -616,6 +691,7 @@ "prefix" ], "numArgs": 2, + "example": "{{prepend \"bar\" \"foo-\"}} -> foo-bar", "description": "Prepends the given string
with the specified prefix
.
Render a block without processing mustache templates inside the block.
\n" }, "remove": { @@ -631,6 +708,7 @@ "substring" ], "numArgs": 2, + "example": "{{remove \"a b a b a b\" \"a \"}} -> b b b", "description": "Remove all occurrences of substring
from the given str
.
Remove the first occurrence of substring
from the given str
.
Replace all occurrences of substring a
with substring b
.
Replace the first occurrence of substring a
with substring b
.
Sentence case the given string
\n" }, "snakecase": { @@ -671,6 +753,7 @@ "string" ], "numArgs": 1, + "example": "{{snakecase \"a-b-c d_e\"}} -> a_b_c_d_e", "description": "snake_case the characters in the given string
.
Split string
by the given character
.
Tests whether a string begins with the given prefix.
\n" }, "titleize": { @@ -694,6 +779,7 @@ "str" ], "numArgs": 1, + "example": "{{#titleize \"this is title case\" }} -> This Is Title Case", "description": "Title case the given string.
\n" }, "trim": { @@ -701,6 +787,7 @@ "string" ], "numArgs": 1, + "example": "{{trim \" ABC \" }} -> ABC", "description": "Removes extraneous whitespace from the beginning and end of a string.
\n" }, "trimLeft": { @@ -708,6 +795,7 @@ "string" ], "numArgs": 1, + "example": "{{trimLeft \" ABC \" }} -> \"ABC \"", "description": "Removes extraneous whitespace from the beginning of a string.
\n" }, "trimRight": { @@ -715,6 +803,7 @@ "string" ], "numArgs": 1, + "example": "{{trimRight \" ABC \" }} -> \" ABC \"", "description": "Removes extraneous whitespace from the end of a string.
\n" }, "truncate": { @@ -724,6 +813,7 @@ "suffix" ], "numArgs": 3, + "example": "{{truncate \"foo bar baz\" 7 }} -> foo bar", "description": "Truncate a string to the specified length
. Also see ellipsis.
Truncate a string to have the specified number of words. Also see truncate.
\n" }, "upcase": { @@ -740,6 +831,7 @@ "string" ], "numArgs": 1, + "example": "{{upcase \"aBcDef\"}} -> ABCDEF", "description": "Uppercase all of the characters in the given string. Alias for uppercase.
\n" }, "uppercase": { @@ -748,6 +840,7 @@ "options" ], "numArgs": 2, + "example": "{{uppercase \"aBcDef\"}} -> ABCDEF", "description": "Uppercase all of the characters in the given string. If used as a block helper it will uppercase the entire block. This helper does not support inverse blocks.
\n" } }, @@ -759,6 +852,7 @@ "options" ], "numArgs": 3, + "example": "{{#and great magnificent}}both{{else}}no{{/and}}", "description": "Helper that renders the block if both of the given values are truthy. If an inverse block is specified it will be rendered when falsy. Works as a block helper, inline helper or subexpression.
\n" }, "compare": { @@ -769,6 +863,7 @@ "options" ], "numArgs": 4, + "example": "{{compare 10 \"<\" 5 }} -> true", "description": "Render a block when a comparison of the first and third arguments returns true. The second argument is the [arithemetic operator][operators] to use. You may also optionally specify an inverse block to render when falsy.
\n" }, "contains": { @@ -779,6 +874,7 @@ "options" ], "numArgs": 4, + "example": "{{#contains ['a', 'b', 'c'] \"d\"}} This will not be rendered. {{else}} This will be rendered. {{/contains}}", "description": "Block helper that renders the block if collection
has the given value
, using strict equality (===
) for comparison, otherwise the inverse block is rendered (if specified). If a startIndex
is specified and is negative, it is used as the offset from the end of the collection.
Returns the first value that is not undefined, otherwise the "default" value is returned.
\n" }, "eq": { @@ -796,6 +893,7 @@ "options" ], "numArgs": 3, + "example": "{{#eq 3 3}} equal{{else}} not equal{{/eq}} -> equal", "description": "Block helper that renders a block if a
is equal to b
. If an inverse block is specified it will be rendered when falsy. You may optionally use the compare=""
hash argument for the second value.
Block helper that renders a block if a
is greater than b
. If an inverse block is specified it will be rendered when falsy. You may optionally use the compare=""
hash argument for the second value.
Block helper that renders a block if a
is greater than or equal to b
. If an inverse block is specified it will be rendered when falsy. You may optionally use the compare=""
hash argument for the second value.
Block helper that renders a block if value
has pattern
. If an inverse block is specified it will be rendered when falsy.
Returns true if the given value
is falsey. Uses the [falsey][] library for comparisons. Please see that library for more information or to report bugs with this helper.
Returns true if the given value
is truthy. Uses the [falsey][] library for comparisons. Please see that library for more information or to report bugs with this helper.
Return true if the given value is an even number.
\n" }, "ifNth": { @@ -856,6 +960,7 @@ "options" ], "numArgs": 3, + "example": "{{#ifNth 10 2}} remainder {{else}} no remainder {{/ifNth}} -> remainder", "description": "Conditionally renders a block if the remainder is zero when a
operand is divided by b
. If an inverse block is specified it will be rendered when the remainder is not zero.
Block helper that renders a block if value
is an odd number. If an inverse block is specified it will be rendered when falsy.
Block helper that renders a block if a
is equal to b
. If an inverse block is specified it will be rendered when falsy. Similar to eq but does not do strict equality.
Block helper that renders a block if a
is not equal to b
. If an inverse block is specified it will be rendered when falsy. Similar to unlessEq but does not use strict equality for comparisons.
Block helper that renders a block if a
is less than b
. If an inverse block is specified it will be rendered when falsy. You may optionally use the compare=""
hash argument for the second value.
Block helper that renders a block if a
is less than or equal to b
. If an inverse block is specified it will be rendered when falsy. You may optionally use the compare=""
hash argument for the second value.
Block helper that renders a block if neither of the given values are truthy. If an inverse block is specified it will be rendered when falsy.
\n" }, "not": { @@ -916,6 +1027,7 @@ "options" ], "numArgs": 2, + "example": "{{#not undefined }} falsey {{else}} not falsey {{/not}} -> falsey", "description": "Returns true if val
is falsey. Works as a block or inline helper.
Block helper that renders a block if any of the given values is truthy. If an inverse block is specified it will be rendered when falsy.
\n" }, "unlessEq": { @@ -933,6 +1046,7 @@ "options" ], "numArgs": 3, + "example": "{{#unlessEq 2 1 }} not equal {{else}} equal {{/unlessEq}} -> not equal", "description": "Block helper that always renders the inverse block unless a
is equal to b
.
Block helper that always renders the inverse block unless a
is greater than b
.
Block helper that always renders the inverse block unless a
is less than b
.
Block helper that always renders the inverse block unless a
is greater than or equal to b
.
Block helper that always renders the inverse block unless a
is less than or equal to b
.