Learn full-stack web development using fastn in a week

Learn Now

Frontend

Built-in Functions

Built-in functions

These functions are available as a part of fastn and can be used in any fastn document. Besides the functions mentioned below, there are some other built-in functions specific to rive component.

List functions

`len(a: list)`

Return type: integer

This function will return the length of the list.

Sample code using len()

Input

-- string list places: Mumbai, New York, Bangalore

-- integer length(a):
string list a:

len(a)

;; This will show the length of the
;; list `places` defined above

-- ftd.integer: $length(a = $places)
color: $inherited.colors.text

Lang:

ftd

Output

`ftd.append($a: <any> list, v: <any>)️`

Return type: void

This is a default fastn function that will append a value v of any type to the end of the given mutable list a of same type as v.

Sample code using append()

Input

-- string list $some-list:

-- void append-fn(a,v):
string list $a:
string v:

ftd.append(a, v);

-- ftd.column:
width: fill-container
color: $inherited.colors.text
spacing.fixed.px: 5

-- display-text: Append text
$on-click$: $append-fn($a = $some-list, v = fifthtry)

-- display-list-item: $val
$loop$: $some-list as $val

-- end: ftd.column

Lang:

ftd

Output

Append text

`ftd.insert_at($a: <any> list, v: <any>, num: integer)`

This is a default fastn function that will insert a value v of any type at the index num in the given mutable list a of same type as v.

Sample code using insert_at()

Input

-- void insert-at(a,v,num):
string list $a:
string v:
integer num:

ftd.insert_at(a, v, num);

-- string list $alphabets: A, B, C, D

-- ftd.column:
width: fill-container
color: $inherited.colors.text
spacing.fixed.px: 5

-- display-text: Insert Fifthtry at 2nd index
$on-click$: $insert-at($a = $alphabets, v = Fifthtry, num = 2)

-- display-list-item: $val
$loop$: $alphabets as $val

-- end: ftd.column

Lang:

ftd

Output

Insert Fifthtry at 2nd index

`ftd.delete_at($a: <any> list, v: integer)`

This is a default fastn function that will delete the value from index num from the given mutable list a.

Sample code using delete_at()

Input

-- void delete-at(a,num):
string list $a:
integer num:

ftd.delete_at(a, num);

-- string list $places: Bangalore, Mumbai, NewYork, Indore, Bangkok

-- ftd.column:
width: fill-container
color: $inherited.colors.text
spacing.fixed.px: 5

-- display-text: Delete Value from 1st index
$on-click$: $delete-at($a = $places, num = 1)

-- display-list-item: $val
$loop$: $places as $val

-- end: ftd.column

Lang:

ftd

Output

Delete Value from 1st index

Bangalore

Mumbai

NewYork

Indore

Bangkok

`ftd.clear($a: <any> list)`

This is a default fastn function that will clear the given mutable list a.

Sample code using clear()

Input

-- string list $palindromes: dad, bob, racecar

-- void clear-fn(a):
string list $a:

ftd.clear(a);

-- ftd.column:
width: fill-container
spacing.fixed.px: 5

-- display-text: Click to Clear list
$on-click$: $clear-fn($a = $palindromes)

-- display-list-item: $val
$loop$: $palindromes as $val

-- end: ftd.column

Lang:

ftd

Output

Click to Clear list

dad

bob

racecar

Dark/light mode functions

`enable_dark_mode()`

This is FScript as well as a standard fastn function. This function enables the dark mode.

Sample code using enable_dark_mode()

Input

-- void set-dark():

enable_dark_mode()

-- ftd.text: Dark Mode
$on-click$: $set-dark()

;; Alternative way
-- ftd.text: Click to set Dark Mode
$on-click$: $ftd.enable-dark-mode()

Lang:

ftd

Output

Dark Mode

Click to set Dark Mode

`enable_light_mode()`

This is FScript as well as a standard fastn function. This function enables the light mode.

Sample code using enable_light_mode()

Input

-- void set-light():

enable_light_mode()

-- ftd.text: Light Mode
$on-click$: $set-light()

;; Alternative way
-- ftd.text: Click to set Light Mode
$on-click$: $ftd.enable-light-mode()

Lang:

ftd

Output

Light Mode

Click to set Light Mode

`enable_system_mode()`

This is FScript as well as a standard fastn function. This function enables the system mode.

Sample code using enable_system_mode()

Input

-- void set-system():

enable_system_mode()

-- ftd.text: System Mode
$on-click$: $set-system()

;; Alternative way
-- ftd.text: Click to set System Mode
$on-click$: $ftd.enable-system-mode()

Lang:

ftd

Output

System Mode

Click to set System Mode

`copy-to-clipboard(text: string)`

This is FScript as well as a standard fastn function. This function enables copy content in clipboard.

Sample code using copy-to-clipboard()

Input

-- ftd.text: Click to Copy ⭐️
$on-click$: $ftd.copy-to-clipboard(a = ⭐)
color: $inherited.colors.text
border-color: $red-yellow
border-width.px: 2
padding.px: 10

Lang:

ftd

Output

Click to Copy ⭐️

Other functions

`toggle($a: bool)`

This is FScript function. It will toggle the boolean variable which is passed as argument a to this function.

Sample code using toggle()

Input

-- boolean $b: false

-- ftd.column:
color: $inherited.colors.text
width: fill-container
spacing.fixed.px: 10

-- display-boolean: $b

-- display-text: Click to toggle
$on-click$: $ftd.toggle($a = $b)

-- end: ftd.column

Lang:

ftd

Output

false

Click to toggle

`increment($a: integer)`

This is FScript function. It will increment the integer variable by 1 which is passed as argument a to this function.

Sample code using increment()

Input

-- integer $x: 1

-- ftd.column:
color: $inherited.colors.text
width: fill-container
spacing.fixed.px: 10

-- display-integer: $x

-- display-text: Click to increment by 1
$on-click$: $ftd.increment($a = $x)

-- end: ftd.column

Lang:

ftd

Output

Click to increment by 1

`increment-by($a: integer, v: integer)️`

This is FScript function. It will increment the integer variable by value v which is passed as argument a to this function.

Sample code using increment-by()

Input

-- integer $z: 1

-- ftd.column:
color: $inherited.colors.text
width: fill-container
spacing.fixed.px: 10

-- display-integer: $z

-- display-text: Click to increment by 5
$on-click$: $ftd.increment-by($a = $z, v = 5)

-- end: ftd.column

Lang:

ftd

Output

Click to increment by 5

`set-bool($a: bool, v: bool)`

This is FScript function. It will set the boolean variable by value v which is passed as argument a to this function.

Sample code using set-bool()

Input

-- boolean $b1: false

-- ftd.column:
color: $inherited.colors.text
width: fill-container
spacing.fixed.px: 10

-- display-boolean: $b1

-- display-text: Click to set the boolean as true
$on-click$: $ftd.set-bool($a = $b1, v = true)

-- end: ftd.column

Lang:

ftd

Output

false

Click to set the boolean as true

`set-string($a: string, v: string)`

This is FScript function. It will set the string variable by value v which is passed as argument a to this function.

Sample code using set-string()

Input

-- string $s: Hello

-- ftd.column:
color: $inherited.colors.text
width: fill-container
spacing.fixed.px: 10

-- display-text: $s

-- display-text: Click to set the string as World
$on-click$: $ftd.set-string($a = $s, v = World)

-- end: ftd.column

Lang:

ftd

Output

Hello

Click to set the string as World

`set-integer($a: integer, v: integer)`

This is FScript function. It will set the integer variable by value v which is passed as argument a to this function.

Sample code using set-integer()

Input

-- integer $y: 1

-- ftd.column:
color: $inherited.colors.text
width: fill-container
spacing.fixed.px: 10

-- display-integer: $y

-- display-text: Click to set the integer as 100
$on-click$: $ftd.set-integer($a = $y, v = 100)

-- end: ftd.column

Lang:

ftd

Output

Click to set the integer as 100

`is_empty(a: any)`

This is FScript function. It gives if the value passed to argument a is null or empty.

Sample code using is_empty()

Input

-- optional string name:

-- string list names:

-- display-text: name is empty
if: { ftd.is_empty(name) }

-- display-text: There is no name in names
if: { ftd.is_empty(names) }

Lang:

ftd

Output

name is empty

There is no name in names

Common Components used within sample codes to render content

`display-text: Renders text`

Component Definition

-- ftd.color red-yellow:
light: red
dark: yellow

-- component display-text:
caption text:

-- ftd.text: $display-text.text
color: $inherited.colors.text
border-color: $red-yellow
border-width.px: 2
padding.px: 10

-- end: display-text

Lang:

ftd

`display-integer: Renders integer value`

-- ftd.color red-yellow:
light: red
dark: yellow

-- component display-integer:
caption integer value:

-- ftd.integer: $display-integer.value
color: $inherited.colors.text
border-color: $red-yellow
border-width.px: 2
padding.px: 10

-- end: display-integer

Lang:

ftd

`display-boolean: Renders boolean value`

-- ftd.color red-yellow:
light: red
dark: yellow

-- component display-boolean:
caption boolean value:

-- ftd.boolean: $display-boolean.value
color: $inherited.colors.text
border-color: $red-yellow
border-width.px: 2
padding.px: 10

-- end: display-boolean

Lang:

ftd