Ui
219 posts tagged with "Ui"
.10x1-image
The .10x1-image action an image with a 10x1 aspect ratio (banner!). It belongs to the images category within the ui area.
Action Syntax
.10x1-image +imagetag.10x1-image $variable.10x1-image https://...Valid sizes
Examples
// Basic Usage
.10x1-image %imagetag// Using Variables
// Display dynamic content from variables
.10x1-image $imagetag.12x1-image
The .12x1-image action an image with a 12x1 aspect ratio (mega banner!). It belongs to the images category within the ui area.
Action Syntax
.12x1-image +imagetag.12x1-image $variable.12x1-image https://...Valid sizes
Examples
// Basic Usage
.12x1-image %imagetag// Using Variables
// Display dynamic content from variables
.12x1-image $imagetag.16x9-image
The .16x9-image action an image with a 16x9 aspect ratio. It belongs to the images category within the ui area.
Action Syntax
.16x9-image +imagetag.16x9-image $variableValid sizes
Examples
// Basic Usage
.16x9-image %tag// Using Variables
// Display dynamic content from variables
.16x9-image $imagetag.1x1-image
The .1x1-image action an image with a 1x1 aspect ratio (square!). It belongs to the images category within the ui area.
Action Syntax
.1x1-image +imagetag.1x1-image $variable.1x1-image https://...Valid sizes
Examples
// Basic Usage
.1x1-image %imagetag// Using Variables
// Display dynamic content from variables
.1x1-image $imagetag.1x2-image
The .1x2-image action an image with a 1x2 aspect ratio (tall!). It belongs to the images category within the ui area.
Action Syntax
.1x2-image +imagetag.1x2-image $variable.1x2-image https://...Valid sizes
Examples
// Basic Usage
.1x2-image %imagetag// Using Variables
// Display dynamic content from variables
.1x2-image $imagetag.1x3-image
The .1x3-image action an image with a 1x3 aspect ratio (very tall!). It belongs to the images category within the ui area.
Action Syntax
.1x3-image +imagetag.1x3-image $variable.1x3-image https://...Valid sizes
Examples
// Basic Usage
.1x3-image %imagetag// Using Variables
// Display dynamic content from variables
.1x3-image $imagetag.1x4-image
The .1x4-image action an image with a 1x4 aspect ratio (extremely tall!). It belongs to the images category within the ui area.
Action Syntax
.1x4-image +imagetag.1x4-image $variable.1x4-image https://...Valid sizes
Examples
// Basic Usage
.1x4-image %imagetag// Using Variables
// Display dynamic content from variables
.1x4-image $imagetag.1x6-image
The .1x6-image action an image with a 1x6 aspect ratio (super tall!). It belongs to the images category within the ui area.
Action Syntax
.1x6-image +imagetag.1x6-image $variable.1x6-image https://...Valid sizes
Examples
// Basic Usage
.1x6-image %imagetag// Using Variables
// Display dynamic content from variables
.1x6-image $imagetag.1x8-image
The .1x8-image action an image with a 1x8 aspect ratio (ultra tall!). It belongs to the images category within the ui area.
Action Syntax
.1x8-image +imagetag.1x8-image $variable.1x8-image https://...Valid sizes
Examples
// Basic Usage
.1x8-image %imagetag// Using Variables
// Display dynamic content from variables
.1x8-image $imagetag.2x1-image
The .2x1-image action an image with a 2x1 aspect ratio (wide!). It belongs to the images category within the ui area.
Action Syntax
.2x1-image +imagetag.2x1-image $variable.2x1-image https://...Valid sizes
Examples
// Basic Usage
.2x1-image %imagetag// Using Variables
// Display dynamic content from variables
.2x1-image $imagetag.2x3-image
The .2x3-image action an image with a 2x3 aspect ratio (portrait!). It belongs to the images category within the ui area.
Action Syntax
.2x3-image +imagetag.2x3-image $variable.2x3-image https://...Valid sizes
Examples
// Basic Usage
.2x3-image %imagetag// Using Variables
// Display dynamic content from variables
.2x3-image $imagetag.3x1-image
The .3x1-image action an image with a 3x1 aspect ratio (very wide!). It belongs to the images category within the ui area.
Action Syntax
.3x1-image +imagetag.3x1-image $variable.3x1-image https://...Valid sizes
Examples
// Basic Usage
.3x1-image %imagetag// Using Variables
// Display dynamic content from variables
.3x1-image $imagetag.3x2-image
The .3x2-image action an image with a 3x2 aspect ratio (landscape!). It belongs to the images category within the ui area.
Action Syntax
.3x2-image +imagetag.3x2-image $variable.3x2-image https://...Valid sizes
Examples
// Basic Usage
.3x2-image %imagetag// Using Variables
// Display dynamic content from variables
.3x2-image $imagetag.4x1-image
The .4x1-image action an image with a 4x1 aspect ratio (extremely wide!). It belongs to the images category within the ui area.
Action Syntax
.4x1-image +imagetag.4x1-image $variable.4x1-image https://...Valid sizes
Examples
// Basic Usage
.4x1-image %imagetag// Using Variables
// Display dynamic content from variables
.4x1-image $imagetag.4x3-image
The .4x3-image action an image with a 4x3 aspect ratio (classic!). It belongs to the images category within the ui area.
Action Syntax
.4x3-image +imagetag.4x3-image $variable.4x3-image https://...Valid sizes
Examples
// Basic Usage
.4x3-image %imagetag// Using Variables
// Display dynamic content from variables
.4x3-image $imagetag.4x5-image
The .4x5-image action an image with a 4x5 aspect ratio (standard print!). It belongs to the images category within the ui area.
Action Syntax
.4x5-image +imagetag.4x5-image $variable.4x5-image https://...Valid sizes
Examples
// Basic Usage
.4x5-image %imagetag// Using Variables
// Display dynamic content from variables
.4x5-image $imagetag.5x4-image
The .5x4-image action an image with a 5x4 aspect ratio (photo print!). It belongs to the images category within the ui area.
Action Syntax
.5x4-image +imagetag.5x4-image $variable.5x4-image https://...Valid sizes
Examples
// Basic Usage
.5x4-image %imagetag// Using Variables
// Display dynamic content from variables
.5x4-image $imagetag.6x1-image
The .6x1-image action an image with a 6x1 aspect ratio (super wide!). It belongs to the images category within the ui area.
Action Syntax
.6x1-image +imagetag.6x1-image $variable.6x1-image https://...Valid sizes
Examples
// Basic Usage
.6x1-image %imagetag// Using Variables
// Display dynamic content from variables
.6x1-image $imagetag.6x9-image
The .6x9-image action an image with a 6x9 aspect ratio (postcard!). It belongs to the images category within the ui area.
Action Syntax
.6x9-image +imagetag.6x9-image $variable.6x9-image https://...Valid sizes
Examples
// Basic Usage
.6x9-image %imagetag// Using Variables
// Display dynamic content from variables
.6x9-image $imagetag.8x1-image
The .8x1-image action an image with a 8x1 aspect ratio (ultra wide!). It belongs to the images category within the ui area.
Action Syntax
.8x1-image +imagetag.8x1-image $variable.8x1-image https://...Valid sizes
Examples
// Basic Usage
.8x1-image %imagetag// Using Variables
// Display dynamic content from variables
.8x1-image $imagetag.a
The .a action Creates a clickable link that navigates to web pages. It belongs to the html category within the ui area.
Action Syntax
.a https://....a $variableValid sizes
Examples
// Basic Usage
.a https://example.com// Using Variables
// Display dynamic content from variables
.a $url-variable.acknowledge
The .acknowledge action shows a message that need to be explictly acknowledged/dismissed. It belongs to the acknowledgement category within the ui area.
Action Syntax
.acknowledge "text".acknowledge blk.acknowledge $variableValid sizes
Examples
// Basic Usage
.acknowledge "message"// Using Variables
// Display dynamic content from variables
.acknowledge $message.acknowledge-once
The .acknowledge-once action shows a message that need to be explictly acknowledged. One it is, it does not show up again. It belongs to the acknowledgement category within the ui area.
Action Syntax
.acknowledge-once "text".acknowledge-once blk.acknowledge-once $variableValid sizes
Examples
// Basic Usage
.acknowledge-once "message"// Using Variables
// Display dynamic content from variables
.acknowledge-once $message.alt
The .alt action sets the alt text modifier for an element. It belongs to the modifier category within the ui area.
Action Syntax
.alt "text".alt $variableValid sizes
Examples
// Basic Usage
.alt "help"// Using Variables
// Display dynamic content from variables
.alt $text.app-navbar
The .app-navbar action standard bottom app nav bar. It belongs to the navbars category within the ui area.
Action Syntax
.app-navbar !set:icon "text" [file].app-navbar !set:icon [file].app-navbar "text" [file]Valid sizes
Examples
// Basic Usage
.app-navbar !icon "label" [block].aside
The .aside action a stand alone block of text with additional explanation. It belongs to the text category within the ui area.
Action Syntax
.aside "text".aside $variable.aside blkValid sizes
Examples
// Basic Usage
.aside "text"// Using Variables
// Display dynamic content from variables
.aside $text.avatar
The .avatar action avatar. It belongs to the avatar category within the ui area.
Action Syntax
.avatar +imagetag.avatar !set:icon.avatar "text".avatar @referenceValid sizes
Modifiers
click
The .avatar action supports the click modifier.
Tags
circle
a circular avatar
square
a square avatar
Examples
// Basic Usage
.avatar %imagetag.back-button
The .back-button action displays a back button for navigation. It belongs to the buttons category within the ui area.
Action Syntax
.back-button !set:icon.back-button "text".back-button !set:icon "text".back-button [file].back-button !set:icon [file].back-button "text" [file].back-button !set:icon "text" [file]Valid sizes
Examples
// Basic Usage
.back-button !icon.background-animated-gradient
The .background-animated-gradient action an animated background gradient. It belongs to the background category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.background-animated-gradient.background-color
The .background-color action sets background color. It belongs to the background category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.background-color #ff0000.background-gradient
The .background-gradient action sets a background gradient. It belongs to the background category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Tags
vertical
vertical gradient
radial
radial gradient
diagonal
diagonal gradient
Examples
// Basic Usage
.background-gradient #ff0000 #0000ff.background-image
The .background-image action display a background image for the app. It belongs to the background category within the ui area.
Action Syntax
.background-image +imagetag.background-image https://...Valid sizes
Examples
// Basic Usage
.background-image +mypic.background-video
The .background-video action shows MP4 video as background. It belongs to the background category within the ui area.
Action Syntax
.background-video +imagetagValid sizes
Examples
// Basic Usage
.background-video %videotag.banner-divider
The .banner-divider action displays an edge to edge colored bar with centered text that serves as a section content divider. It belongs to the divider category within the ui area.
Action Syntax
.banner-divider "text".banner-divider $variable.banner-divider !set:icon "text".banner-divider !set:icon $variableValid sizes
Examples
// Basic Usage
.banner-divider "text"// Using Variables
// Display dynamic content from variables
.banner-divider $text.bluesky
The .bluesky action shows a bluesky icon link. It belongs to the social category within the ui area.
Action Syntax
.bluesky "text".bluesky $variableValid sizes
Examples
// Basic Usage
.bluesky "socialid"// Using Variables
// Display dynamic content from variables
.bluesky $var.bottom-center
The .bottom-center action bottom center positions. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.bottom-center.bottom-left
The .bottom-left action bottom left position. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.bottom-left.bottom-navbar
The .bottom-navbar action displays a standard buttom app bar. It belongs to the navbars category within the ui area.
Action Syntax
.bottom-navbar "text".bottom-navbar $variable.bottom-navbar "text" "text".bottom-navbar "text" "text" "text"Valid sizes
Modifiers
appendable
The .bottom-navbar action supports the appendable modifier.
.bottom-right
The .bottom-right action positions in bottom right. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.bottom-right.brand-screen
The .brand-screen action shows brand screen for trial/free plans. It belongs to the screens category within the ui area.
Action Syntax
.brand-screen $variableValid sizes
Tags
duration
duration to display. minimal/default is 1s
Examples
// Basic Usage
.brand-screen $text.btn
The .btn action Creates a clickable button that can trigger actions. It belongs to the html category within the ui area.
Action Syntax
.btn "text".btn $variableValid sizes
Examples
// Basic Usage
.btn "Click me"// Using Variables
// Display dynamic content from variables
.btn $button-text.busy-button
The .busy-button action a button with a busy indicator. It belongs to the buttons category within the ui area.
Action Syntax
.busy-button "text".busy-button !set:icon "text".busy-button "text" [file].busy-button !set:icon "text" [file]Valid sizes
Examples
// Basic Usage
.busy-button "label".button
The .button action Creates a clickable button that can trigger actions or navigate. It belongs to the buttons category within the ui area.
Action Syntax
.button "text".button "text" [file].button !set:icon "text".button !set:icon "text" [file].button $variable.button [file].button !set:icon [file]Valid sizes
Modifiers
click
The .button action supports the click modifier.
.button-bar
The .button-bar action Groups multiple buttons together in a horizontal bar layout. It belongs to the buttons category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.button-bar.checkbox-field
The .checkbox-field action Creates a checkbox input with a clickable label. It belongs to the fields category within the ui area.
Action Syntax
.checkbox-field "text"Valid sizes
Examples
// Basic Usage
.checkbox-field "label".chip
The .chip action display a chip. It belongs to the components category within the ui area.
Action Syntax
.chip "text".chip $variable.chip !set:icon "text".chip !set:icon $variable.chip +imagetag "text".chip +imagetag $variableValid sizes
Tags
vertical
shows icon above the label
.circle-button
The .circle-button action a circular button. It belongs to the buttons category within the ui area.
Action Syntax
.circle-button "text".circle-button $variable.circle-button !set:icon.circle-button +imageValid sizes
Examples
// Basic Usage
.circle-button "Label"// Using Variables
// Display dynamic content from variables
.circle-button $labelvar.circle-image
The .circle-image action small circlular image. It belongs to the images category within the ui area.
Action Syntax
.circle-image +imagetag.circle-image +imagetag +imagetagExamples
// Basic Usage
.circle-image +imagetag.click
The .click action sets a click modifier. It belongs to the modifier category within the ui area.
Action Syntax
.click [file].click navto [file].click goto [file].click run [file]Valid sizes
Examples
// Basic Usage
.click [block].color-palette
The .color-palette action …. It belongs to the color category within the ui area.
Action Syntax
.color-palette "text"Valid sizes
Examples
// Basic Usage
.color-palette "basecolor".color-swatch
The .color-swatch action displays one to three color swatches. It belongs to the color category within the ui area.
Action Syntax
.color-swatch "text"Valid sizes
Examples
// Basic Usage
.color-swatch "label".column
The .column action a column element: children will appear in a vertical column. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Modifiers
hover-over
The .column action supports the hover-over modifier.
click-on
The .column action supports the click-on modifier.
Examples
// Basic Usage
.column.confetti
The .confetti action shows confetti. It belongs to the specialfx category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Tags
angle
launch angle. default is 90
shape
circle, square, or star
Examples
// Basic Usage
.confetti.continue-button
The .continue-button action a button that continues an app in wait state. It belongs to the buttons category within the ui area.
Action Syntax
.continue-button "text".continue-button $variableValid sizes
Examples
// Basic Usage
.continue-button "label"// Using Variables
// Display dynamic content from variables
.continue-button $label.copy-textbox
The .copy-textbox action display a text box with a copy icon that allows users to copy text to the system clipboard. It belongs to the components category within the ui area.
Action Syntax
.copy-textbox $variable.copy-textbox "text"Valid sizes
Tags
ui
clipboard
Examples
// Basic Usage
.copy-textbox $textRelated Actions
- `` -
- `` -
.copyright
The .copyright action displays a copyright phrase with the current year. It belongs to the components category within the ui area.
Action Syntax
.copyright $variable.copyright "text"Valid sizes
Examples
// Basic Usage
.copyright $text.corner-banner
The .corner-banner action a fixed corner diagonal banner in the upper right of the app screen. It belongs to the specialfx category within the ui area.
Action Syntax
.corner-banner "text".corner-banner $variableValid sizes
Examples
// Basic Usage
.corner-banner "label"// Using Variables
// Display dynamic content from variables
.corner-banner $label.details
The .details action Creates an expandable details section with collapsible content. It belongs to the html category within the ui area.
Action Syntax
.details "text" "text".details $variable "text".details "text" $variable.details $variable $variableValid sizes
Examples
// Basic Usage
.details "title" "details"// Using Variables
// Display dynamic content from variables
.details $title-var "details".dialog
The .dialog action Creates a modal dialog popup for user interaction. It belongs to the html category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Tags
max
maximizes dialog to full screen
left
positions dialog on the left side
right
positions dialog on the right side
active
sets dialog as open immediately
Examples
// Basic Usage
.dialog.dicebear-avatar
The .dicebear-avatar action a variety of avatar sets fron Dicebear. It belongs to the avatars category within the ui area.
Action Syntax
.dicebear-avatar "text".dicebear-avatar @reference.dicebear-avatar $variableValid sizes
Tags
set
dicebear set name
circle
a circular avatar
square
a square avatar
Examples
// Basic Usage
.dicebear-avatar "label"// Using Variables
// Display dynamic content from variables
.dicebear-avatar $text.div
The .div action Creates a flexible container for organizing content. It belongs to the html category within the ui area.
Action Syntax
.div "text"Valid sizes
Modifiers
overlay
The .div action supports the overlay modifier.
Examples
// Basic Usage
.div "Some Text".divider
The .divider action basic horizontal divider. It belongs to the divider category within the ui area.
Action Syntax
.divider "text"Valid sizes
Examples
// Basic Usage
.divider "label".divider-bar
The .divider-bar action displays an edge to edge colored bar with centered text that serves as a section content divider. It belongs to the divider category within the ui area.
Action Syntax
.divider-bar "text".divider-bar $variable.divider-bar !set:icon "text".divider-bar !set:icon $variable.divider-bar +imagetag.divider-bar +imagetag "text".divider-bar +imagetag $variableValid sizes
Styles
.left
align text to left
.enter
The .enter action sets a enter key modifier for an input field. It belongs to the modifier category within the ui area.
Action Syntax
.enter continue.enter [file].enter navto [file].enter goto [file].enter run [file]Valid sizes
Examples
// Basic Usage
.enter continue.enterkey-effect
The .enterkey-effect action enter key event/effect. It belongs to the effects category within the ui area.
Action Syntax
.enterkey-effect [file].enterkey-effect goto [file].enterkey-effect run [file]Valid sizes
Examples
// Basic Usage
.enterkey-effect [blockname]The .facebook action shows a facebook icon link. It belongs to the social category within the ui area.
Action Syntax
.facebook "text".facebook $variableValid sizes
Examples
// Basic Usage
.facebook "facebookid"// Using Variables
// Display dynamic content from variables
.facebook $var.filler
The .filler action fills available space in a row. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.filler.fineprint
The .fineprint action displays teeny-tiny text!. It belongs to the text category within the ui area.
Action Syntax
.fineprint "text".fineprint $variableValid sizes
Examples
// Basic Usage
.fineprint "hello world"// Using Variables
// Display dynamic content from variables
.fineprint $eventname.font-sample
The .font-sample action Shows a preview of what text looks like in a font. It belongs to the fonts category within the ui area.
Action Syntax
.font-sample %fontValid sizes
Examples
// Basic Usage
.font-sample ^font-tag.github
The .github action shows a github icon link. It belongs to the social category within the ui area.
Action Syntax
.github "text".github $variableValid sizes
Examples
// Basic Usage
.github "socialid"// Using Variables
// Display dynamic content from variables
.github $var.golden-image
The .golden-image action an image with golden ratio aspect (1.618:1!). It belongs to the images category within the ui area.
Action Syntax
.golden-image +imagetag.golden-image $variable.golden-image https://...Valid sizes
Examples
// Basic Usage
.golden-image %imagetag// Using Variables
// Display dynamic content from variables
.golden-image $imagetag.goto
The .goto action sets a goto modifier. It belongs to the modifier category within the ui area.
Action Syntax
.goto [file]Valid sizes
Examples
// Basic Usage
.goto [block].gradient
The .gradient action adds a gradient effect to an element. It belongs to the modifier category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.gradient.grid
The .grid action .grid layout. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.grid.grid-cell
The .grid-cell action grid cell (must be defined after grid). It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.grid-cell.handwriting
The .handwriting action simulates hand or script written text (cursive). It belongs to the text category within the ui area.
Action Syntax
.handwriting "text".handwriting $variableValid sizes
Examples
// Basic Usage
.handwriting "text"// Using Variables
// Display dynamic content from variables
.handwriting $text.help
The .help action sets a help text modifier for an element. It belongs to the modifier category within the ui area.
Action Syntax
.help "text".help $variableValid sizes
Examples
// Basic Usage
.help "help"// Using Variables
// Display dynamic content from variables
.help $text.hide
The .hide action hides the element after a previous modifier action. It belongs to the modifier category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.hide.hide-in-progress
The .hide-in-progress action hides the .show-in-progess element. It belongs to the progress category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.hide-in-progress.hover-over
The .hover-over action sets a hover over modifier. It belongs to the modifier category within the ui area.
Action Syntax
.hover-over change-color.hover-over goto [file].hover-over run [file]Valid sizes
Examples
// Basic Usage
.hover-over change-color.hr
The .hr action Creates a horizontal line to separate content sections. It belongs to the html category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.hr.icon
The .icon action a basic icon. It belongs to the icons category within the ui area.
Action Syntax
.icon !set:icon.icon $variableValid sizes
Modifiers
navigate
The .icon action supports the navigate modifier.
Examples
// Basic Usage
.icon !icon// Using Variables
// Display dynamic content from variables
.icon $icontag.icon-avatar
The .icon-avatar action a small avatar with icon. It belongs to the avatars category within the ui area.
Action Syntax
.icon-avatar !set:icon.icon-avatar $variableValid sizes
Tags
circle
a circular avatar
square
a square avatar
rounded
a rounded square
Examples
// Basic Usage
.icon-avatar !icontag// Using Variables
// Display dynamic content from variables
.icon-avatar $icontag.icon-button
The .icon-button action this is an icon button. It belongs to the buttons category within the ui area.
Action Syntax
.icon-button !set:icon.icon-button !set:icon [file]Valid sizes
Examples
// Basic Usage
.icon-button !home.icon-with-label
The .icon-with-label action an icon with a label to the left or below it. It belongs to the icons category within the ui area.
Action Syntax
.icon-with-label !set:icon "text".icon-with-label !set:icon $variableValid sizes
Examples
// Basic Usage
.icon-with-label !icontag "label"// Using Variables
// Display dynamic content from variables
.icon-with-label !icontag $label.iframe
The .iframe action Embeds external web pages or content into your app. It belongs to the html category within the ui area.
Action Syntax
.iframe https://....iframe $variableValid sizes
Tags
noscroll
hides scroll bars for fixed content display
Examples
// Basic Usage
.iframe https://example.com// Using Variables
// Display dynamic content from variables
.iframe $page-url.image
The .image action base image with its original aspect ratio. It belongs to the images category within the ui area.
Action Syntax
.image +imagetag.image $variable.image https://...Valid sizes
Examples
// Basic Usage
.image %imagetag// Using Variables
// Display dynamic content from variables
.image $imagetag.image-avatar
The .image-avatar action avatar with an app image. It belongs to the avatars category within the ui area.
Action Syntax
.image-avatar +imagetag.image-avatar $variable.image-avatar https://...Valid sizes
Tags
circle
a circular avatar
square
a square avatar
Examples
// Basic Usage
.image-avatar %imagetag// Using Variables
// Display dynamic content from variables
.image-avatar $imagetag.image-button
The .image-button action an image button. It belongs to the images category within the ui area.
Action Syntax
.image-button +imagetag.image-button +imagetag "text".image-button +imagetag [file].image-button +imagetag "text" [file]Valid sizes
Tags
rounded
a rounded button (default)
.image-title
The .image-title action displays title text on top of an image. It belongs to the images category within the ui area.
Action Syntax
.image-title "text".image-title $variableValid sizes
Examples
// Basic Usage
.image-title "imagetitle"// Using Variables
// Display dynamic content from variables
.image-title $imagetitle.initials-avatar
The .initials-avatar action a small avatar with initials / letters. It belongs to the avatars category within the ui area.
Action Syntax
.initials-avatar "text".initials-avatar $variable.initials-avatar @referenceValid sizes
Tags
circle
a circular avatar
square
a square avatar
Examples
// Basic Usage
.initials-avatar "Text"// Using Variables
// Display dynamic content from variables
.initials-avatar $initials.input
The .input action Creates a text input field for user data entry. It belongs to the html category within the ui area.
Action Syntax
.input $variableValid sizes
Modifiers
enter
The .input action supports the enter modifier.
hide
The .input action supports the hide modifier.
wait
The .input action supports the wait modifier.
Tags
autofocus
automatically focuses cursor on this input
The .instagram action shows an instagram icon link. It belongs to the social category within the ui area.
Action Syntax
.instagram "text".instagram $variableValid sizes
Examples
// Basic Usage
.instagram "socialid"// Using Variables
// Display dynamic content from variables
.instagram $var.link
The .link action sets a link modifier. It belongs to the modifier category within the ui area.
Action Syntax
.link https://....link @referenceValid sizes
Examples
// Basic Usage
.link https://someurlThe .linkedin action shows a linkedin icon link. It belongs to the social category within the ui area.
Action Syntax
.linkedin "text".linkedin $variableValid sizes
Examples
// Basic Usage
.linkedin "socialid"// Using Variables
// Display dynamic content from variables
.linkedin $var.list
The .list action list. It belongs to the lists category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.list.list-item
The .list-item action list item. It belongs to the lists category within the ui area.
Action Syntax
.list-item "text"Valid sizes
Examples
// Basic Usage
.list-item "fffff".live-search
The .live-search action live search (on each character). It belongs to the search category within the ui area.
Action Syntax
.live-search $variable [file].live-search $variable "text" [file]Valid sizes
Examples
// Basic Usage
.live-search $var [block].lottie
The .lottie action embeds a lottie animation. It belongs to the animation category within the ui area.
Action Syntax
.lottie +imagetag.lottie https://...Valid sizes
Tags
loop
loops animation
controls
shows animation controls
Examples
// Basic Usage
.lottie %animtag.megaicon
The .megaicon action an oversized very large icon. It belongs to the icons category within the ui area.
Action Syntax
.megaicon !set:icon.megaicon $variableValid sizes
Examples
// Basic Usage
.megaicon !icon// Using Variables
// Display dynamic content from variables
.megaicon $icontag.menu
The .menu action creates a menu anchor position. It belongs to the menus category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Tags
active
opens immediatley
Examples
// Basic Usage
.menu.menu-item
The .menu-item action a menu item. It belongs to the menus category within the ui area.
Action Syntax
.menu-item "text" [file].menu-item $variable [file].menu-item !set:icon "text" [file].menu-item !set:icon $variable [file].menu-item +imagetag "text" [file].menu-item +imagetag $variable [file]Valid sizes
Examples
// Basic Usage
.menu-item "Label" [block]// Using Variables
// Display dynamic content from variables
.menu-item $var [block].middle-center
The .middle-center action middle center position. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.middle-center.middle-left
The .middle-left action middle left position. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.middle-left.middle-right
The .middle-right action middle right position. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.middle-right.mobile-app-view
The .mobile-app-view action mobile app view with simple header and footer nav. It belongs to the view category within the ui area.
Action Syntax
.mobile-app-view "text".mobile-app-view $variableValid sizes
Examples
// Basic Usage
.mobile-app-view "My App"// Using Variables
// Display dynamic content from variables
.mobile-app-view $apptitle.navto
The .navto action sets a navto modifier. It belongs to the modifier category within the ui area.
Action Syntax
.navto [file]Valid sizes
Examples
// Basic Usage
.navto [block].number
The .number action display a number. It belongs to the numbers category within the ui area.
Action Syntax
.number 123.number $variableValid sizes
Tags
percentage
shows number as a percentage
Examples
// Basic Usage
.number 10// Using Variables
// Display dynamic content from variables
.number $number.overlay
The .overlay action overlays text or other element on top of another (usually an image). It belongs to the modifier category within the ui area.
Action Syntax
.overlay "text".overlay $variableValid sizes
Examples
// Basic Usage
.overlay "text"// Using Variables
// Display dynamic content from variables
.overlay $varname.paragraph
The .paragraph action a paragraph text container. It belongs to the paragraph category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.paragraph.paragraph-text
The .paragraph-text action inline paragraph text or value. It belongs to the paragraph category within the ui area.
Action Syntax
.paragraph-text $variable.paragraph-text "text".paragraph-text "text" [file].paragraph-text "text" https://...Valid sizes
Examples
// Basic Usage
.paragraph-text $var.password-field
The .password-field action Creates a password input field with hidden text. It belongs to the fields category within the ui area.
Action Syntax
.password-field "text"Valid sizes
Examples
// Basic Usage
.password-field "label".placeholder
The .placeholder action sets a placeholder for an input element. It belongs to the decorator category within the ui area.
Action Syntax
.placeholder "text".placeholder $variableValid sizes
Examples
// Basic Usage
.placeholder "placeholder"// Using Variables
// Display dynamic content from variables
.placeholder $text.popup
The .popup action a centered pop up/modal layout container. It belongs to the layout category within the ui area.
Action Syntax
.popup "text".popup [file]Valid sizes
Tags
closebutton
shows a close button in top right
Examples
// Basic Usage
.popup "message".popup-screen
The .popup-screen action full screen to hold other elements and can be closed. It belongs to the screens category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.popup-screen.progress-bar
The .progress-bar action Display a horizontal progress bar with customizable appearance. It belongs to the progress category within the ui area.
Action Syntax
.progress-bar 123 of 123.progress-bar $variable of $variable.progress-bar $variable of 123.progress-bar 123 of $variableValid sizes
Tags
label="text"
sets a custom label for the progress bar
.progress-circle
The .progress-circle action …. It belongs to the progress category within the ui area.
Action Syntax
.progress-circle 123 of 123.progress-circle $variable of $variable.progress-circle $variable of 123.progress-circle 123 of $variableValid sizes
Tags
showvalue
shows the value inside the circle
.progress-circle-with-value
The .progress-circle-with-value action shows a progress circle with percent complete value in center. It belongs to the progress category within the ui area.
Action Syntax
.progress-circle-with-value 123 of 123.progress-circle-with-value $variable of $variable.progress-circle-with-value $variable of 123.progress-circle-with-value 123 of $variableValid sizes
Examples
// Basic Usage
.progress-circle-with-value 1 of 100// Using Variables
// Display dynamic content from variables
.progress-circle-with-value $num of $max.qrcode
The .qrcode action displays a scannable QR code from text or URL. It belongs to the barcodes category within the ui area.
Action Syntax
.qrcode https://....qrcode "text".qrcode $variableValid sizes
Tags
invert
swaps black and white colors in the QR code
Examples
// Basic Usage
.qrcode https://dqwdqwdqwdqwd// Using Variables
// Display dynamic content from variables
.qrcode $value.radio-field
The .radio-field action Creates a radio button input with selectable options. It belongs to the fields category within the ui area.
Action Syntax
.radio-field "text"Valid sizes
Examples
// Basic Usage
.radio-field "label".run
The .run action sets a run modifier. It belongs to the modifier category within the ui area.
Action Syntax
.run [file]Valid sizes
Examples
// Basic Usage
.run [block].screen
The .screen action bas screen element. It belongs to the screens category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.screen.screen-background
The .screen-background action sets the main screen background for the app. It belongs to the screens category within the ui area.
Action Syntax
.screen-background +imagetagValid sizes
Examples
// Basic Usage
.screen-background %mypic.search
The .search action a search line input box. It belongs to the search category within the ui area.
Action Syntax
.search $variable [file].search $variable "text" [file]Valid sizes
Examples
// Basic Usage
.search $var [searchaction].select-field
The .select-field action Creates a dropdown selection field with multiple options. It belongs to the fields category within the ui area.
Action Syntax
.select-field "text"Valid sizes
Examples
// Basic Usage
.select-field "label".set
The .set action sets a +set modifier. It belongs to the modifier category within the ui area.
Action Syntax
.set $variable = "text".set $variable = 123.set $variable = true|false.set $variable = HH:MM.set $variable = YYYY-MM-DD.set $variable = ITValid sizes
Examples
// Basic Usage
.set $var = "value".shape-divider
The .shape-divider action shape divider. It belongs to the divider category within the ui area.
Action Syntax
.shape-divider 123Valid sizes
Examples
// Basic Usage
.shape-divider 11.show-in-progress
The .show-in-progress action shows full screen in progress overlay spinner with an optional message. It belongs to the progress category within the ui area.
Action Syntax
.show-in-progress $variable.show-in-progress "text"Valid sizes
Examples
// Basic Usage
.show-in-progress $text.signature
The .signature action text that mimics a handwritten signature. It belongs to the text category within the ui area.
Action Syntax
.signature "text".signature $variableValid sizes
Examples
// Basic Usage
.signature "name"// Using Variables
// Display dynamic content from variables
.signature $name.spacer
The .spacer action defines a spacer. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Tags
visible
makes the spacer border and size visible (usefule during app development)
Examples
// Basic Usage
.spacer.span
The .span action Creates inline text elements for styling and formatting. It belongs to the html category within the ui area.
Action Syntax
.span "text".span $variableValid sizes
Examples
// Basic Usage
.span "text label"// Using Variables
// Display dynamic content from variables
.span $text-variable.spinner
The .spinner action shows a spinner icon. It belongs to the icons category within the ui area.
Action Syntax
.spinner !set:icon.spinner true|falseValid sizes
Tags
(duration)
controls the spin duration. larger is slower. default is -2s
Examples
// Basic Usage
.spinner !icon.splash-screen
The .splash-screen action shows a default splash screen. It belongs to the screens category within the ui area.
Action Syntax
.splash-screen +imagetag.splash-screen $variable.splash-screen +imagetag $variableValid sizes
Examples
// Basic Usage
.splash-screen %image// Using Variables
// Display dynamic content from variables
.splash-screen $text.tagline
The .tagline action a huge large tagline. Keep it under 10 words. Shorter is better. It belongs to the text category within the ui area.
Action Syntax
.tagline "text".tagline $variableValid sizes
Examples
// Basic Usage
.tagline "this is a title"// Using Variables
// Display dynamic content from variables
.tagline $title.text
The .text action displays text in the UI. It belongs to the text category within the ui area.
Action Syntax
.text "text".text $variableValid sizes
Styles
.tight
minimal line spacing
.text.tight "example text"Modifiers
goto
The .text action supports the goto modifier.
Examples
// Basic Usage
.text "hello world"// Using Variables
// Display dynamic content from variables
.text $eventname// With Styles
// Apply the .tight style modifier
.text.tight "example text"Additional Notes
.text action is the most fundamental way to display content in Rhappsody apps. It’s lightweight and performant, making it ideal for:
.text-field
The .text-field action Creates a single-line text input field. It belongs to the fields category within the ui area.
Action Syntax
.text-field "text"Valid sizes
Examples
// Basic Usage
.text-field "label".textarea
The .textarea action Creates a multi-line text input area for longer text. It belongs to the html category within the ui area.
Action Syntax
.textarea $variableValid sizes
Tags
disabled
disables text input making it non-interactive
rows
sets number of visible text rows
cols
sets number of visible character columns
readonly
prevents user editing but allows text selection
placeholder
shows hint text when empty
.textbox-field
The .textbox-field action Creates a multi-line text input area for longer content. It belongs to the fields category within the ui area.
Action Syntax
.textbox-field "text"Valid sizes
Examples
// Basic Usage
.textbox-field "label".tint
The .tint action tints an image with the specified color. It belongs to the modifier category within the ui area.
Action Syntax
.tint 123Valid sizes
Examples
// Basic Usage
.tint 50.tiptext
The .tiptext action sets tooltip text modifier for an element. It belongs to the modifier category within the ui area.
Action Syntax
.tiptext "text".tiptext $variableValid sizes
Examples
// Basic Usage
.tiptext "tip"// Using Variables
// Display dynamic content from variables
.tiptext $text.title
The .title action a text title. It belongs to the text category within the ui area.
Action Syntax
.title "text".title $variableValid sizes
Examples
// Basic Usage
.title "this is a title"// Using Variables
// Display dynamic content from variables
.title $title.top-appbar
The .top-appbar action displays a standard top app bar. It belongs to the navbars category within the ui area.
Action Syntax
.top-appbar "text".top-appbar $variable.top-appbar !set:icon "text".top-appbar !set:icon $variable.top-appbar +imagetag "text".top-appbar +imagetag $variable.top-appbar +imagetag "text" !set:icon.top-appbar +imagetag $variable !set:iconValid sizes
Modifiers
goto
The .top-appbar action supports the goto modifier.
.top-center
The .top-center action top center position. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.top-center.top-right
The .top-right action top right position. It belongs to the layout category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.top-rightThe .twitter action shows a twitter/X icon link. It belongs to the social category within the ui area.
Action Syntax
.twitter "text".twitter $variableValid sizes
Examples
// Basic Usage
.twitter "socialid"// Using Variables
// Display dynamic content from variables
.twitter $var.validate-email
The .validate-email action validates input is valid email. It belongs to the validate category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.validate-email.wait
The .wait action waits on previous modifier action before continuing. It belongs to the modifier category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
.wait.when-load-complete
The .when-load-complete action modifier for when load complete event. It belongs to the modifier category within the ui area.
Action Syntax
.when-load-complete continue.when-load-complete [file]Valid sizes
Examples
// Basic Usage
.when-load-complete continue.youtube
The .youtube action shows a youtube icon link. It belongs to the social category within the ui area.
Action Syntax
.youtube "text".youtube $variableValid sizes
Examples
// Basic Usage
.youtube "socialid"// Using Variables
// Display dynamic content from variables
.youtube $var+attachable
The +attachable action Groups related form fields together with optional label. It belongs to the fields category within the ui area.
Action Syntax
+attachable "text"+attachable $variableValid sizes
Examples
// Basic Usage
.fieldset "label"// Using Variables
// Display dynamic content from variables
.fieldset $label+decorate
The +decorate action basic mobile navigation button with icon and a label. It belongs to the buttons category within the ui area.
Action Syntax
+decorate !set:icon "text"+decorate !set:icon "text" [file]+decorate !set:icon [file]+decorate !set:icon $variable [file]Valid sizes
Examples
// Basic Usage
.nav-button !icon "Label"// Using Variables
// Display dynamic content from variables
.nav-button !icon $label [block]+tint
The +tint action tints image with a color. It belongs to the images category within the ui area.
Action Syntax
+tint #color+tint $variableValid sizes
Examples
// Basic Usage
+tint #color// Using Variables
// Display dynamic content from variables
+tint $color+when-load-complete
The +when-load-complete action Displays images from web urls or your media collection. It belongs to the html category within the ui area.
Action Syntax
+when-load-complete https://...+when-load-complete +imagetag+when-load-complete $variableValid sizes
Examples
// Basic Usage
.img https://example.com/photo.jpg// Using Variables
// Display dynamic content from variables
.img $image-urladd-line
The add-line action Add a line of text to existing text with newline. It belongs to the text category within the ui area.
Action Syntax
add-line "text" to "text"add-line $variable to "text"add-line $variable to $variableadd-line "text" to $variableReturn Value
This function returns a
add-text
The add-text action Concatenates two text values together. It belongs to the text category within the ui area.
Action Syntax
add-text "text" to "text"add-text $variable to "text"add-text $variable to $variableadd-text "text" to $variableReturn Value
This function returns a
app-font
The app-font action Sets the default font used throughout your app. It belongs to the fonts category within the ui area.
Action Syntax
app-font "text"Valid sizes
Examples
// Basic Usage
app-font "fontname"app-image
The app-image action manually defines app-images: this are cached and save on the device. Use for images that do not change often or ever. It belongs to the images category within the ui area.
Action Syntax
app-image +imagetag https://...Valid sizes
Examples
// Basic Usage
app-image %imagetag https://imageurlbackground-image
The background-image action Sets a full-screen background image for the entire app. It belongs to the layout category within the undefined area.
Action Syntax
background-image https://...background-image $variablebackground-image +imagetagTags
blur=5
opacity=0.8
fixed
Examples
// Basic Usage
background-image https://example.com/image.jpg// Using Variables
// Display dynamic content from variables
background-image $imageurlbrowser-version
The browser-version action returns info about the current browser environment. It belongs to the browser category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Return Value
This function returns a
$result = browser-version Valid sizes
Examples
// Basic Usage
browser-versioncapitalize
The capitalize action Capitalizes the first letter of each word in text. It belongs to the text category within the ui area.
Action Syntax
capitalize "text"capitalize $variableReturn Value
This function returns a
$result = capitalize Valid sizes
Examples
// Basic Usage
$text = capitalize "hello world"character
The character action Gets the character at a specific position in text. It belongs to the text category within the ui area.
Action Syntax
character 123 of $variablecharacter $variable of $variablecharacter 123 of "text"character $variable of "text"Return Value
This function returns a
clear-acknowledgement
The clear-acknowledgement action clears all prior user acknowledgements. It belongs to the acknowledgement category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
clear-acknowledgementclear-icons
The clear-icons action clears offline/caches icons from device. It belongs to the icons category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
clear-iconsclear-image
The clear-image action deletes a stored images from this device. It belongs to the images category within the ui area.
Action Syntax
clear-image +imagetagclear-image $variableValid sizes
Examples
// Basic Usage
clear-image %imagetag// Using Variables
// Display dynamic content from variables
clear-image $imagetagclear-images
The clear-images action clears all stored/cached images on local device. It belongs to the images category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Return Value
This function returns a
$result = clear-images Valid sizes
Examples
// Basic Usage
clear-imagesclose-menu
The close-menu action closes a menu. It belongs to the menus category within the ui area.
Action Syntax
close-menu EValid sizes
Examples
// Basic Usage
close-menu *idcolor
The color action defines a color or alias. It belongs to the color category within the ui area.
Action Syntax
color #color is #colorValid sizes
Examples
// Basic Usage
color #color is #colorcreate-table
The create-table action creates a new table. It belongs to the table category within the ui area.
Action Syntax
create-table with 123 rowscreate-table with $variable rowscreate-table of $variable with 123 rowscreate-table of $variable with $variable rowsReturn Value
This function returns a
default-style
The default-style action define a default style for an element type. It belongs to the styling category within the ui area.
Action Syntax
default-style .elementValid sizes
Examples
// Basic Usage
default-style .elementdelete-app-image
The delete-app-image action deletes an app image. It belongs to the images category within the ui area.
Action Syntax
delete-app-image +imagetagdelete-app-image $variableReturn Value
This function returns a
$result = delete-app-image Valid sizes
Examples
// Basic Usage
$response = delete-app-image %imagetagdelete-key
The delete-key action Sets up what happens when delete key is pressed. It belongs to the keys category within the ui area.
Action Syntax
delete-key [file]delete-key goto [file]delete-key run [file]delete-key toggle-between [file] and [file]Valid sizes
Examples
// Basic Usage
delete-key [block]down-key
The down-key action down arrow key. It belongs to the keys category within the ui area.
Action Syntax
down-key [file]down-key goto [file]down-key run [file]down-key toggle-between [file] and [file]Valid sizes
Examples
// Basic Usage
down-key [block]dynamic-color-theme
The dynamic-color-theme action sets a dynamic color theme from an image or base color. It belongs to the color category within the ui area.
Action Syntax
dynamic-color-theme +imagetagdynamic-color-theme #colordynamic-color-theme $variableValid sizes
Examples
// Basic Usage
dynamic-color-theme %imagetag// Using Variables
// Display dynamic content from variables
dynamic-color-theme $colorenable-shell-shortcut
The enable-shell-shortcut action enable the shell shortcut key. It belongs to the keys category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
enable-shell-shortcutensure-email
The ensure-email action ensure last input value is an email. It belongs to the validate category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
ensure-emailenter-key
The enter-key action enter key. It belongs to the keys category within the ui area.
Action Syntax
enter-key [file]enter-key goto [file]enter-key run [file]enter-key toggle-between [file] and [file]Valid sizes
Examples
// Basic Usage
enter-key [block]escape-key
The escape-key action escape-key. It belongs to the keys category within the ui area.
Action Syntax
escape-key [file]escape-key goto [file]escape-key run [file]escape-key toggle-between [file] and [file]Valid sizes
Examples
// Basic Usage
escape-key [block]fadein
The fadein action fades element in. It belongs to the animation category within the ui area.
Action Syntax
fadein Efadein E 30mValid sizes
Examples
// Basic Usage
fadein *elidfadeout
The fadeout action fades an element in. It belongs to the animation category within the ui area.
Action Syntax
fadeout Efadeout E 30mValid sizes
Examples
// Basic Usage
fadeout *elidfill-column
The fill-column action fills a table column with fixes value. It belongs to the table category within the ui area.
Action Syntax
fill-column $variable with 123fill-column $variable with "text"fill-column $variable with true|falsefill-column $variable with $variablefill-column $variable with YYYY-MM-DDfill-column $variable with HH:MMfill-column $variable with 30mfill-column $variable with ITExamples
// Basic Usage
fill-column $foo.bar with 10font
The font action Loads a font from Google Fonts for use in your app. It belongs to the fonts category within the ui area.
Action Syntax
font %font google "text"font %font google "text" https://...Valid sizes
Examples
// Basic Usage
font ^font-tag google "Font Name"hide
The hide action hide specified element. It belongs to the layout category within the ui area.
Action Syntax
hide EValid sizes
Examples
// Basic Usage
hide *targeticon
The icon action defines an icon the app will use including optional aliases. It belongs to the icons category within the ui area.
Action Syntax
icon !set:iconicon !set:icon is !set:iconValid sizes
Examples
// Basic Usage
icon !icontagimage
The image action stores an image in a variable for future use. It belongs to the images category within the ui area.
Action Syntax
image https://...image $variableReturn Value
This function returns a
$result = image Valid sizes
Examples
// Basic Usage
$response = image https://imageurlinit-animation
The init-animation action initializes animation (lottie player). It belongs to the animation category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Valid sizes
Examples
// Basic Usage
init-animationis-valid-email
The is-valid-email action checks if value is a valid email. It belongs to the validate category within the ui area.
Action Syntax
is-valid-email $variableis-valid-email "text"Return Value
This function returns a
$result = is-valid-email Valid sizes
Examples
// Basic Usage
$boolean = is-valid-email $varnameis-valid-phone
The is-valid-phone action checks if value is a valid phone. It belongs to the validate category within the ui area.
Action Syntax
is-valid-phone $variableis-valid-phone "text"Return Value
This function returns a
$result = is-valid-phone Valid sizes
Examples
// Basic Usage
$boolean = is-valid-phone $varnamekey
The key action global app key shortcut handler. It belongs to the keys category within the ui area.
Action Syntax
key deletekey escapeValid sizes
Examples
// Basic Usage
key deleteleft-key
The left-key action left arrow key. It belongs to the keys category within the ui area.
Action Syntax
left-key [file]left-key goto [file]left-key run [file]left-key toggle-between [file] and [file]Valid sizes
Examples
// Basic Usage
left-key [block]length-of
The length-of action Returns the length of a text string or variable. It belongs to the text category within the ui area.
Action Syntax
length-of $variablelength-of "text"Return Value
This function returns a
$result = length-of Valid sizes
Examples
// Basic Usage
$number = length-of $varlist-app-images
The list-app-images action lists the current Rhappsody app images. It belongs to the images category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Return Value
This function returns a
$result = list-app-images Valid sizes
Examples
// Basic Usage
list-app-imageslist-color-palettes
The list-color-palettes action lists color palette names. It belongs to the color category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Return Value
This function returns a
$result = list-color-palettes Valid sizes
Examples
// Basic Usage
list-color-paletteslist-colors
The list-colors action returns a list of rhappsody colors. It belongs to the color category within the ui area.
Action Syntax
list-colors "text"Return Value
This function returns a
$result = list-colors Valid sizes
Examples
// Basic Usage
$group = list-colors "base"list-fonts
The list-fonts action Gets a list of all fonts currently loaded in your app. It belongs to the fonts category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Return Value
This function returns a
$result = list-fonts Valid sizes
Examples
// Basic Usage
list-fontslist-icons
The list-icons action lists the icons stored and available for offline use. It belongs to the icons category within the ui area.
Action Syntax
This action accepts various parameters. See the examples below for usage patterns.
Return Value
This function returns a
$result = list-icons Valid sizes
Examples
// Basic Usage
list-iconslist-images
The list-images action lists images saved in IDB using the set-image action. It belongs to the images category within the ui area.
Action Syntax
list-images $variableReturn Value
This function returns a
$result = list-images Valid sizes
Examples
// Basic Usage
list-images $Limageslowercase
The lowercase action Converts text to all lowercase letters. It belongs to the text category within the ui area.
Action Syntax
lowercase "text"lowercase $variableReturn Value
This function returns a
$result = lowercase Valid sizes
Examples
// Basic Usage
$text = lowercase "REALLY IMPORTANT"open-browser
The open-browser action opens a browser with specified URL. It belongs to the browser category within the ui area.
Action Syntax
open-browser https://...open-browser $variableTags
new-window
opens in a new window (default is tab)
Examples
// Basic Usage
open-browser https://myurl// Using Variables
// Display dynamic content from variables
open-browser $urlwithvariableopen-browser-window
The open-browser-window action opens a new browser window. It belongs to the browser category within the ui area.
Action Syntax
open-browser-window https://...open-browser-window $variableValid sizes
Examples
// Basic Usage
open-browser-window https://myurl// Using Variables
// Display dynamic content from variables
open-browser-window $urlwithvariableopen-menu
The open-menu action opens a menu. It belongs to the menus category within the ui area.
Action Syntax
open-menu EValid sizes
Examples
// Basic Usage
open-menu *fooresize-image
The resize-image action resizes an image. It belongs to the images category within the ui area.
Action Syntax
resize-image $variable width 123resize-image $variable width 123 height 123Return Value
This function returns a
right-key
The right-key action right arrow key. It belongs to the keys category within the ui area.
Action Syntax
right-key [file]right-key goto [file]right-key run [file]right-key toggle-between [file] and [file]Valid sizes
Examples
// Basic Usage
right-key [block]save-app-image
The save-app-image action saves an app image. It belongs to the images category within the ui area.
Action Syntax
save-app-image +imagetag $variablesave-app-image +imagetag https://...Return Value
This function returns a
$result = save-app-image Valid sizes
Examples
// Basic Usage
$response = save-app-image %savetag $imagedataset-animation
The set-animation action sets/defines an animation tag. It belongs to the animation category within the ui area.
Action Syntax
set-animation +imagetag https://...set-animation +imagetag +imagetagValid sizes
Tags
save
persists the animation in local storage. Use for static animations
set-brand-color
The set-brand-color action sets the brand color. It belongs to the color category within the ui area.
Action Syntax
set-brand-color #colorValid sizes
Examples
// Basic Usage
set-brand-color #brandcolorset-default-font
The set-default-font action Makes a previously loaded font the default for your app. It belongs to the fonts category within the ui area.
Action Syntax
set-default-font %fontValid sizes
Examples
// Basic Usage
set-default-font ^font-tagset-iconset
The set-iconset action sets the default iconset. It belongs to the icons category within the ui area.
Action Syntax
set-iconset !set:iconset-iconset $variableExamples
// Basic Usage
set-iconset !mdi// Using Variables
// Display dynamic content from variables
set-iconset $iconsetset-image
The set-image action sets/defines an image tag. It belongs to the images category within the ui area.
Action Syntax
set-image +imagetag https://...set-image +imagetag +imagetagValid sizes
Tags
save
persists the image in local storage. Use for static images
show
The show action shows a hidden ui element. It belongs to the layout category within the ui area.
Action Syntax
show EValid sizes
Examples
// Basic Usage
show *targetsort-table
The sort-table action sorts a table by a specify column name. It belongs to the table category within the ui area.
Action Syntax
sort-table $variable by "text"sort-table $variable by $variableReturn Value
This function returns a
space-between-lines
The space-between-lines action controls the space between lines. It belongs to the styling category within the ui area.
Action Syntax
space-between-lines 123space-between-lines nonespace-between-lines tinyspace-between-lines smallspace-between-lines largeValid sizes
Examples
// Basic Usage
space-between-lines 15space-key
The space-key action space key. It belongs to the keys category within the ui area.
Action Syntax
space-key [file]space-key goto [file]space-key run [file]space-key toggle-between [file] and [file]Valid sizes
Examples
// Basic Usage
space-key [block]split-text
The split-text action Splits text into an array of words by whitespace. It belongs to the text category within the ui area.
Action Syntax
split-text "text"split-text $variableReturn Value
This function returns a
$result = split-text Valid sizes
Examples
// Basic Usage
$group = split-text "hello world welcome to rhappsody"style
The style action defined style for a .element. It belongs to the styling category within the ui area.
Action Syntax
style .elementValid sizes
Examples
// Basic Usage
style .elementtoggle-menu
The toggle-menu action toggles a menu open/close. It belongs to the menus category within the ui area.
Action Syntax
toggle-menu EValid sizes
Examples
// Basic Usage
toggle-menu *idup-key
The up-key action up arrow key. It belongs to the keys category within the ui area.
Action Syntax
up-key [file]up-key goto [file]up-key run [file]up-key toggle-between [file] and [file]Valid sizes
Examples
// Basic Usage
up-key [block]upload-app-image
The upload-app-image action Uploads an image for use within your app interface. It belongs to the images category within the ui area.
Action Syntax
upload-app-image +imagetagReturn Value
This function returns a
$result = upload-app-image Valid sizes
Tags
ar
desired aspect ratio for the uploaded image
Examples
// Basic Usage
$response = upload-app-image %imagetaguppercase
The uppercase action Converts text to all uppercase letters. It belongs to the text category within the ui area.
Action Syntax
uppercase "text"uppercase $variableReturn Value
This function returns a
$result = uppercase Valid sizes
Examples
// Basic Usage
$text = uppercase "really important"vibrate
The vibrate action vibrates the device (if supported). It belongs to the effects category within the undefined area.
Action Syntax
vibrate 30mExamples
// Basic Usage
vibrate 1s