Converting your calculation fields from ES5 JavaScript to ES2021

🏗️ Showcases & Guides
1

Dear users,

as we receive many requests and questions from users migrating to Tape regarding modern JavaScript (JS) syntax, we thought about how to best support you in the process. :thinking:

Many of the systems that users migrate from, such as Podio, use an outdated JavaScript syntax (ES5).

What does this mean?

Tape supports ES2021 JS, which is more concise, and fully downwards compatible to ES5 syntax.
A tangible example for easier code could be arrow functions. In ES5, one may have used a map like this:

names.map(function(n) { return n.toUpperCase(); }).join(' ')

Where the modern version is easier to read:

names.map(n => n.toUpperCase()).join(' ');

There are countless more examples, many can be found in the W3 standard document.

Support your migration to modern JS

We will use this thread here as a collection for ideas on how to improve your calculation field scripts’ readability and maintainability by leveraging the modern JS syntax.

  • Autoconvert ES5 code to modern JS: You can use the open source solution Lebab to convert code automatically: Lebab Online - Note that you may need to replace tokens with variable names, as it may not be able to understand the field token syntax. It works almost perfectly for coherent small code snippets.
  • Learning the benefits starting from ES6+ via a tutorial: ES6 Tutorial

This is only a head-start, please feel free to add your questions and ideas here regarding migration to the modern syntax in calculation fields. We are looking forward to your ideas and input!

Cheers & keep on scripting
Tim

3 Likes
2

Here is a little guide how to work with the following 3 field types: Phones, Emails and Checklists

The way those fields work is that the data is kept in an Array of Objects.

For example, on a Phone field we have 2 numbers, and each of the number has the type (i.e. “Home”, “Other”) and the value (i.e. “+33123456789”, “+33987654321”)

If we type in the calculation field JSON.stringify(@phoneField), we can see in the sample output:

[{“type”:”HOME”,”value”:”+33123456789”},{“type”:”OTHER”,”value”:”+33987654321”}]

if we try to show in our calculation the entire phone field, what we will get is [object][object], so we need to grab the data in the “value” key.

so lets say phone = @phoneField

we can do phone[0].value + ',' + phone[1].value + ',' + phone[...].value +...

or a with a JavaScript function

phone.map(e => e.value).join()

The example code below shows the usage of ES6 literals and arrow functions, and the usage of Markdown. it takes a Checklist of 4 items and displays them as a numbered list and Checkboxes

const checklist = @Checklist;

const numbered = a => a.map((item, i) => {
    const strike = item.completed ? '~~' : '';
    return `${i + 1}. ${strike}${item.title}${strike}`;
}).join('\n');

const checkboxes = a => a.map((item) => {
    const checked = item.completed ? 'x' : ' ';
    return `- [${checked}] ${item.title}`;
}).join('\n');

`### Numbered list
---
${numbered(checklist)}
 
### Checkboxes
---
${checkboxes(checklist)}`

and this is how the field looks:
image

6 Likes
3

How cool is that @shir - thanks for sharing! Looks really useful! :eyes:
(and you also used template literals, available from ES6 upwards. Amazing!)

1 Like