References
Predefined Function List
Application Functions
app-url
Returns the app URL.
color
Returns the #value.
email-form
Sends an email containing the selected data.
has-login
Returns true if the app allows users to log in.
is-authd-and-no-dash
Returns true if the user has logged in and the app does NOT have a dashboard.
is-authd-and-has-dash
Returns true if the user has logged in and the app DOES have a dashboard.
is-dark-mode
Returns true if the device is in dark mode.
is-home-page
Returns true if the current page is the home page.
is-light-mode
Returns true if the device is in light mode.
is-right-to-left
Returns true if the app is displaying right-to-left text.
loading
Answers a state model, indicating if the app is loading or not
is-loading
Returns true if the app is in a loading state.
set-loading
Sets the loading state of the app.
location-path
Returns the browser's location path.
navigate-to
Navigate to a provided URL.
pageargs
Returns the parameters provided to the page.
clear-page-error
Clears any page error.
has-page-error
Returns true if there is a page error.
page-error
Returns details of a page error.
set-page-error
Sets a page error to be displayed to the user.
page-path
Returns the URL of the current page.
page-title
Returns the title of the current page.
previous-page-path
Returns the URL of the previous page.
previous-page-title
Returns the title of the previous page.
reload
Reloads the application with a new session.
API Connection Functions
get-from-api
Makes an HTTP get request to an API.
post-to-api
Makes an HTTP post request to an API.
put-to-api
Makes an HTTP put request to an API.
Currency Functions
price-format
Sets the display format.
Data and State Functions
add-table-row
Creates a new row in the selected database table.
json-get
json-wait-get
query
Performs a database lookup based on a set of parameters.
form-submit
Submits the data contained in a form via a Process.
sget
Returns the state of the application.
sest
Sets the state of the application.
toggle
as-keyword
Returns the input as a data key.
Date and Time Functions
date-now
Returns the current timestamp.
date-format
Sets the date and time format to be displayed.
Device Functions
is-apple
Returns true if the device is an Apple device.
is-android
Returns true if the device is an Android device.
is-mobile
Returns true if the device is a mobile device of any type.
screen-lte
Returns true if the device's screen size is <= (less than or equal to) the stipulated size.
screen-gte
Returns true if the device's screen size is >= (greater than or equal to) the stipulated size.
screen-is
Returns true if the device's screen size is equal to the stipulated size.
Format Functions
number-format
Sets the number format to be displayed.
Logic Functions
=
Returns true if two variables are the same.
and
answer
assoc
atom
atom?
concat
cond
conj
cons
contains?
count
deref
dissoc
empty?
Returns true if the value is empty.
false?
Returns true if the value is false.
first
Returns the first value in a list.
fn?
get
hash-map
keys
keyword
keyword?
list
list?
macro?
map?
nil?
nth
number?
Returns true if the value is a number.
reset!
rest
Returns all the values in a list after the first value.
seq
sequential?
string?
Returns true if the value is a string.
swap!
symbol
symbol?
throw
true?
Returns true if the value is true.
vals
vec
vector
vector?
Math Functions
<
Less than
<=
Less than or equal to
>
Greater than
>=
Greater than or equal to
+
Add
-
Subtract
*
Multiply
/
Divide
Process Functions
run-process
Runs a process with a map of inputs.
task-save
Stores the set of keys and values into the process input and answers the input.
task-pop
Gets a previous set of keys and values from the stack and answers them.
task-push
Stores a set of keys and values onto a stack for future use (pop) and answers the input.
Security Functions
apg-log-in
Log in as a customer using an email and password.
apg-sign-up
Signs up a new customer using an email and password.
apg-verify-email
Verifies a user's email using a verification code.
create-verification-code
Creates a simple random verification code.
is-authd
Returns true if the user has logged in successfully.
not-authd
Returns true if the user is not logged in.
in-role
Check the role type of the current user.
in-role-gte
Checks the role type of the current user is >= (greater than or equal to) the required role.
in-role-lte
Checks the role type of the current user is <= (less than or equal to) the required role.
Text Functions
text-join
Joins together a list of text items separated by a delimiter.
text-length
Returns the number of characters in a text string.
text-subtext
Returns the number of characters in a part of a text string. You can set the start and end positions.
Other Functions
as-obj
is-valid-email
Returns true if the email is valid.
is-valid-password
Returns true if the password is valid.
Base Part List
The following list provides the name and description of the base part and a link to its help page. The linked help pages have examples of how to add, use, and style the part.
Action Parts
Buttons allow the user to take actions or make choices.
A toggle allowing the user to select an item among choices.
A dropdown can open a menu or any other element when the button, or other activator, is clicked.
A modal is used to show a dialog or a box when you click a button or a link.
Allows you to share content with social media platforms quickly.
Swaps allow you to toggle the visibility of two elements, by clicking on them.
Data Display Parts
An accordion displays a list of expandable items. They are sometimes known as expansion panels or collapsible panels.
The Audio part allows you to insert audio files, allowing users to listen to pieces of content.
An avatar is typically used to display circular user profile pictures, but can also display icons and text.
Badges are small visual elements, that convey information or characteristics to inform the user of the status of specific data.
Cards are used to group and display content in an easily readable way. They are versatile containers that house other parts.
Carousels are UI components displaying a series of content items, such as images, text, or videos, cyclically.
Chat bubbles are used to show a line of conversation. Chat bubbles can include data, such as the author's image, name, time, and status such as 'delivered' or 'seen'.
A collapse is used for showing and hiding content.
A countdown gives you a transition effect of changing numbers.
A Gravatar (Globally Recognized Avatar) allows users to have a single, universally recognized avatar image associated with their email address.
The icon part provides a large set of glyphs to provide context to various aspects of your app.
Keyboard parts resemble keys on a keyboard and are used to display keyboard shortcuts.
A list is a part for displaying a list of items. Lists can help organize content into easily scannable and digestible chunks.
A parallax part creates an effect where a page's background moves at a different speed than the foreground content.
Stats are used to display numbers and data in a box.
Tables are structured layouts that organize data into rows and columns, forming a grid.
A part for displaying time data in a range of different formats.
The timeline component shows a list of events in chronological order.
A part for displaying video files.
A part for embedding YouYube videos.
Navigation Parts
A navigation bar that is positioned at the bottom of a web or mobile app, allowing navigation between primary screens.
Breadcrumbs help users to navigate through the website.
A link part links to another page, and adds an underline style to the link.
A menu is used to display a list of links vertically or horizontally.
A navbar is used to show a navigation bar on the top of the page.
Pagination is a group of buttons that allow the user to navigate between a set of related content.
Steps can be used to visually represent a sequence of steps or stages in a process.
Tabs can be used to show a list of links or content in a tabbed format.
Feedback Parts
Alerts are visual notifications that inform users about important messages, events, or actions that require their attention.
Loading parts show an animation to indicate that something is loading.
Progress parts can be used to show the progress of a task or to show the passing of time.
A skeleton part can be used to show the loading state of a component and is a minimalist representation of the UI that will be displayed once the content is fully loaded.
A toast is a wrapper to stack elements, positioned on the corner of a page. They are small, non-intrusive messages that appear on the screen to provide feedback to users.
Tooltips are small, contextual messages or hints that appear when a user hovers over an element.
Data Input Parts
Checkboxes are used to select or deselect a value. They are commonly used in forms to allow users to make one or more selections from a list of options and typically appear as small square boxes.
A file input part is an input field for uploading files.
A form is a container for individual form parts.
Radio buttons are parts used in forms to allow users to select one option from a list of choices.
A range, sometimes known as a range slider, is used to select a value by sliding a handle.
Ratings are a form of user-generated feedback to indicate the quality, satisfaction, or preference of a product, service, or content.
A select part is used to pick a value from a list of options.
An input is a simple input field where users can type in text and numerical responses. A text input area allows more space for free text over multiple lines.
A toggle is a switch button.
Layout Parts
An artboard provides a fixed-size container to display demo content across a range of mobile sizes.
A column is a vertical subdivision, usually housed within a row.
A container is a part that houses other parts. It is a fundamental element used to wrap and hold other elements such as text, images, and other content.
A divider is used to separate content vertically or horizontally.
A drawer is sometimes also known as a side drawer. A drawer is a grid that can show or hide a sidebar on the left or right side of the page.
A footer is a designated area appearing at the bottom of a webpage or app screen. Footers often contain a logo, copyright notice, and links to other pages.
A group is a basic part that houses other parts. A group does not have a constrained width and will fill the width of its parent container.
An image part provides a visual representation. Images can be uploaded in a variety of formats including .webp, .png, .jpg, .svg and .gif
An indicator is a part that places an element on the corner of another element.
A join is a container for grouping multiple items. It is most commonly used to group buttons, but a join can also group accordion panels, inputs, or other parts.
A mask is a container that houses an image, and crops the image to various shapes.
A panel is used to divide your page into sections. Panels are positioned alongside the main content of a page, often on the left or right side.
A row is a horizontal grouping of content on a page. A row typically spans the full width of the container it's within, dividing the space horizontally.
A spacer is a part that adds space between other parts.
A stack visually puts elements on top of each other. This design pattern is often used to create visual effects where parts partially overlap, giving a sense of depth and layering.
Mockup Parts
A browser part shows a box that looks like a browser window.
A code mockup is used to show a block of code in a box that looks like a code editor.
A phone part is a fixed-size container to mockup the contents of an iPhone.
A window part shows a box that looks like an operating system window.
Last updated
Was this helpful?