Description
The Custom Script value converter provides the most flexibility of any out-of-the-box binding converter as it enables you to write your own formula or algorithm for transforming one value into another. It is based upon the eval() JavaScript function. All the functions listed in this JavaScript Reference are supported.
If none of the off-the-shelf converters fit your need, the Custom Script option is a good way to realize your conversion formula without having to create a custom converter outside of Intuiface.
Note: This Converter is only available in Platform Premier & Enterprise-level Intuiface accounts.
Parameters
There is only one parameter for the Custom Script binding converter: the code that will perform the conversion. Use the keyword INPUT (case-sensitive) to represent the source value of your binding.
Warning: Use INPUT as a string object representing your input value. If your input value is a number, you should parse it before using it.
For example: parseInt(INPUT) + 5
Samples
If ... then ... else ...
- Scenario: Position an Image asset on the left (X = 480) or right (X = 1440) side of the screen depending upon the checked state of a Toggle Button's.
The source property of the Toggle Button - Is checked - has two values, True and False. These boolean values will be mapped to the integers 1440 for True, 480 for False and then passed along to the X property of the Image asset. The Custom Script converter is:
if (INPUT)
{ 1440; }
else
{ 480;}
- Scenario: if you need to reference different type of media on the same column of an excel spreadsheet, assets that cannot be resolved will always be displayed with a loading indicator. To bypass this, you can use the following formula on the visibility of your assets. Add the corresponding formula depending on the file-type (png, pdf, mp4).
if (INPUT.endsWith(".PNG"))
true;
else
false;
True / False
- Scenario: When working with the Excel Interface Asset you might have some empty fields in some of your columns, thus not all your excel entries should have a visible asset. You can hide empty cell assets using the following binding converter:
if(INPUT=="")
"False";
else
"True";
Create a threshold value
- Scenario: Image 1 is moved by the user. Image 2 stays in the middle of the screen (Image 2 X = 960) while Image 1 is on the left side of the screen (Image 1 X < 960). Image 2 follows Image 1 when Image 1 is on the right side of the screen (Image 1 X > 960)
The source property of Image 1 - X - will be checked by the custom script. If below 960, the value of 960 will be passed along to the X property of Image 2. If the source value is greater than 960, the value will be untouched and passed along to the X property of Image 2. The Custom Script converter is:
if (parseInt(INPUT) < 960)
{960;}
else
{INPUT;}
This script corresponds to the following math equation:
Truncate a text if too long
- Scenario: When displaying a text coming from an external source, you may want to truncate the text if it is too long for the layout you designed, based on the number of characters of the text. You can add the following converter on your binding, adjusting the number of characters (30 in the example below) to your need:
if (INPUT.length > 30)
INPUT.substring(0,30) + "..."
else
INPUT
Delete text after a certain point
- Scenario: You want to delete all the text that comes after a certain symbol/set of characters. You can use the substring() method to remove everything after a certain point. For instance you want to delete all the text after the HTML tag <p>
INPUT.substring(0, INPUT.indexOf('<p>'));
Change Toggle Button font color when checked
- Scenario: When a toggle button is checked, you want to change the text color. You can bind the Font color property to the Is checked property of the toggle button, and use the converter below to specify the color when the toggle is checked (first color code below) or not (second color code below):
if (INPUT)
"#00FF00"
else
"ff0000"
Calculate number of days between 2 dates
- Scenario: calculate the number of days between a given date and today, in the sample below, consider we're using as input a date formatted as string like dd/MM/YYYY
var date1 = new Date(INPUT);
var date2 = new Date();
var difference = date1.getTime() - date2.getTime();
var days = Math.ceil(difference / (1000 * 3600 * 24));
if (days>0) {
"Today, it's \n" + days + " days until " + INPUT
} else {
"Today, it's \n" + days*(-1) + " days since " + INPUT
}
In the sample we're using an Excel file as input, containing dates stored as simple strings.
Experience output will look like this
Please note that, according to your locale date format, you may need to tweak your initial date value.
For more, please check Date object javascript documentation.
Comments
0 comments
Article is closed for comments.