| Property type | Standard UI input | Transformable to JS | Embedded JS | Example property |
|---|---|---|---|---|
| js | code input | false | false | Data of a Table |
| stringWithJs | text input | false | true | Label of a TextInput |
| boolean | switch | true | false | Disabled of a Button |
| string | case by case | true | false | Label alignment of a TextInput |
| array | code input | false | false | Options of a Select |
| color | text input / color picker | true | false | Value color in a TextInput |
| action | Dropdown select | false | false | On click run action of Button |
nanoid: Create unique IDs with the default behavior or a custom alphabet and length
```typescript // Default ID with 21 characters const id = nanoid(); // ID with a custom length of 12 const id = nanoid(12); // ID with a custom alphabet const id = nanoid.customAlphabet('1234567890abcdef', 10); ```date-fns: Selected functions for dealing with dates
```typescript interface DateFns { isPast(date: Date | number): boolean; isFuture(date: Date | number): boolean; isAfter(date: Date | number, dateToCompare: Date | number): boolean; isBefore(date: Date | number, dateToCompare: Date | number): boolean; isDate(value: any): boolean; isValid(date: any): boolean; endOfWeek(date: Date | number, options: { weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 }): Date; format( date: Date | number, format: string, options?: { weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6; firstWeekContainsDate?: number; useAdditionalWeekYearTokens?: boolean; useAdditionalDayOfYearTokens?: boolean; }, ): string; add(date: Date | number, duration: Duration): Date; addBusinessDays(date: Date | number, amount: number): Date; addDays(date: Date | number, amount: number): Date; addHours(date: Date | number, amount: number): Date; addISOWeekYears(date: Date | number, amount: number): Date; addMilliseconds(date: Date | number, amount: number): Date; addMinutes(date: Date | number, amount: number): Date; addMonths(date: Date | number, amount: number): Date; addQuarters(date: Date | number, amount: number): Date; addSeconds(date: Date | number, amount: number): Date; addWeeks(date: Date | number, amount: number): Date; addYears(date: Date | number, amount: number): Date; differenceInMilliseconds(dateLeft: Date | number, dateRight: Date | number): number; differenceInSeconds(dateLeft: Date | number, dateRight: Date | number): number; differenceInMinutes(dateLeft: Date | number, dateRight: Date | number): number; differenceInHours(dateLeft: Date | number, dateRight: Date | number): number; differenceInDays(dateLeft: Date | number, dateRight: Date | number): number; differenceInCalendarWeeks(dateLeft: Date | number, dateRight: Date | number): number; differenceInWeeks(dateLeft: Date | number, dateRight: Date | number): number; differenceInCalendarISOWeeks(dateLeft: Date | number, dateRight: Date | number): number; differenceInCalendarMonths(dateLeft: Date | number, dateRight: Date | number): number; differenceInMonths(dateLeft: Date | number, dateRight: Date | number): number; differenceInCalendarQuarters(dateLeft: Date | number, dateRight: Date | number): number; differenceInQuarters(dateLeft: Date | number, dateRight: Date | number): number; differenceInCalendarYears(dateLeft: Date | number, dateRight: Date | number): number; differenceInYears(dateLeft: Date | number, dateRight: Date | number): number; parse( dateString: string, format: string, referenceDate: Date | number, options?: { weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6; firstWeekContainsDate?: number; useAdditionalWeekYearTokens?: boolean; useAdditionalDayOfYearTokens?: boolean; }, ); parseISO( argument: string, options?: { additionalDigits?: 0 | 1 | 2; }, ): Date; startOfWeek(date: Date | number, options: { weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 }): Date; sub(date: Date | number, duration: Duration): Date; subBusinessDays(date: Date | number, amount: number): Date; subDays(date: Date | number, amount: number): Date; subHours(date: Date | number, amount: number): Date; subISOWeekYears(date: Date | number, amount: number): Date; subMilliseconds(date: Date | number, amount: number): Date; subMinutes(date: Date | number, amount: number): Date; subMonths(date: Date | number, amount: number): Date; subQuarters(date: Date | number, amount: number): Date; subSeconds(date: Date | number, amount: number): Date; subWeeks(date: Date | number, amount: number): Date; subYears(date: Date | number, amount: number): Date; }; ``` All these functions can be accessed via the `dateFns` variable in any code snippet: ```typescript const inputDate = dateFns.parseISO(myInput.value); const threeDaysLater = dateFns.addDays(inputDate, 3); ```Various type errors
Type information on hover
Preventing the harmful delete of the text input
Menu option to show usages of a component
Displaying a single usage of the textInput1 component
Overview of multiple usages
Navigating to a usage in an action
Changing an action associated with an event property
Saving changes to an action requires using the "Save" button
Tracking inline usages
| Setting | Description |
|---|---|
| Auth type | The authentication runs through a Service Account. |
| JSON credentials | After downloading the credentials of your Service Account as a JSON file, you can paste the file content here to authenticate the account. |
| Regional classifier | Specifies the location of your warehouse. |
| Dataset | Dataset used for all table names in your custom queries that are not tied to a specific dataset. |
Spreadsheet ID
A unique identifier of the spreadsheet that you try to fetch from. You can either run the "List spreadsheet" query to get the spreadsheet id or you will find it in the url of the Google Sheet:Value range
The range from which the content should be fetched. It expects the cell range as [A1 notation](https://developers.google.com/sheets/api/guides/concepts#expandable-1). You can target a value range in a specific sheet by adding the sheet name to the front. E.g.: `Sheet1!A1:B6`Left-most header cell
The left starting cell of the header of the table you want to identify in the sheet. It expects the cell in [A1 notation](https://developers.google.com/sheets/api/guides/concepts#expandable-1). You can target a cell in a specific sheet by adding the sheet name to the front. E.g.: `Sheet1!B2`Value formatting
* **Original value**: Returns the original value of the cell. I.e. a numeric value will be returned as a number. * **Formatted string**: Returns the values as strings. I.e. a numeric value will be returned as a string. * **Formula**: Returns the original value of the cell and for calculated cells the formula as a string.Primary key header
Specifies the name of the column header in the spreadsheet that uniquely identifies each row. The input field expects a string. The primary key is needed for the append query to check if a record with the provided key already exists and for the update and delete queries to identify the records that should be mutated. E.g. If you have a table with columns `id`, `name` and `email`, the `id` could be the unique identifier.(optional) Return column types
For some native values Google returns some unusual values. A date, for example, is by default returned as a numeric value. This input field allows you to transform the values of certain columns to your desired type. It expects an object with the headers as keys and the types as values. E.g.: `{"createdAt": "datetime", "checked?": "boolean"}` The supported types are: * `number` * `string` * `boolean` * `json` * `date` * `datetime`| Setting | Description |
|---|---|
| Hosts | The host url of the server the database runs on. |
| Port | The port number through which the requests should run through. By default we set the port to 1433 since that's the usual port used for MSSQL database requests. |
| Database name | The name of the database on the host that you wish to connect to. |
| Username & Password | These are the credentials of the user account that has the required access permissions for the database. |
| Connect using SSL | You can specify if you want to connect to the server using SSL. This is a default setting to ensure secure connection. |
| (optional) Use SSH tunnel | Specifies if the connection should run via SSH tunnelling. If you are familiar with SSH tunnelling, you will need to provide the following additional details. Once this option is toggled, we provide our public key for download.
|
| Setting | Description |
|---|---|
| Hosts | The host url of the MongoDB instance that stores your database. |
| (optional) Use DNS seed list | You can specify if you want to use DNS entries to provide a seed list for the initial discovery of the replica set configuration. For more info. |
| (optional) Use Replica set | You can specify if you want to connect to a MongoDB server that stores a replice of your data.
|
| Database name | Name of the database that holds the collections that you want to access. |
| Username & Password | These are the credentials of the user account that has the required access permissions for (parts of) the database. |
| Connect using SSL | You can specify if you want to connect to the server using SSL. This is a default setting to ensure secure connection. |
| (optional) Use SSH tunnel | Specifies if the connection should run via SSH tunnelling. If you are familiar with SSH tunnelling, you will need to provide the following additional details. Once this option is toggled, we provide our public key for download.
|
| Setting | Description |
|---|---|
| Hosts | The host url of the server the database runs on. |
| Port | The port number through which the requests should run through. By default we set the port to 3306 since that's the usual port used for MySQL database requests. |
| Database name | The name of the database on the host that you wish to connect to. |
| Username & Password | These are the credentials of the user account that has the required access permissions for the database. |
| Connect using SSL | You can specify if you want to connect to the server using SSL. This is a default setting to ensure secure connection. |
| (optional) Use SSH tunnel | Specifies if the connection should run via SSH tunnelling. If you are familiar with SSH tunnelling, you will need to provide the following additional details. Once this option is toggled, we provide our public key for download.
|
| Setting | Description |
|---|---|
| API key | Your unique API key to link your OpenAI account to your Uify apps. Your API key can be found here. |
| Organization ID | If your company has an account of their own, you can provide the org id to count requests towards the organization API quota instead of your account's quota. |
[
{
"role": "system",
"content": "You are Dwight Schrute. Answer in a short-tempered manner."
}, {
"role": "user",
"content": "Hello!"
} , {
"role": "assistant",
"content": "What?"
} , {
"role": "user",
"content": "Question, what kind of bear is best?"
}
]
| Setting | Description |
|---|---|
| Base url | The base url where the API endpoints are placed. You can also provide the entire url for the endpoint if you want to create one data source for each endpoint. |
| Timeout | Length until request times out (to avoid infinitely long requests). |
| Params | Parameters that are passed along with the request. |
| Headers | Headers that are passed along with the request. Especially useful for authentication headers for simple authentication via bearer token. |
| (optional) OAuth 2.0 Authentication |
|
| Setting | Description |
|---|---|
| Account identifier | Unique identifier of your account. |
| Warehouse | Identifier of the warehouse (i.e. the compute engine). |
| Database name | Identifier of the database (i.e. the data storage). |
| Schema | Identifier of the target schema. Defaults to PUBLIC. |
| Role | Role of the user containing the required access privileges. Defaults to PUBLIC. |
| Username & Password | These are the credentials of the user account that has the required access permissions for (parts of) the data warehouse. |
| Action | User | Creator | Admin |
|---|---|---|---|
| See folders with access to at least one app | true | true | true |
| Create and manage folders | false | true | true |
| Create apps | false | true | true |
| Manage data sources | false | true | true |
| Access and manage any app | false | false | true |
| Manage workspace settings | false | false | true |
| Manage users and workspace permissions | false | false | true |
| Action | Use | Build | Full access |
|---|---|---|---|
| Use and see app in navigation | true | true | true |
| Comment in app | true | true | true |
| Access app editor (incl. previewing and deploying) | false | true | true |
| Manage app settings | false | true | true |
| Share app and manage access rights | false | false | true |
| Property | Type | Default value | Behavior |
|---|---|---|---|
| Box shadow | Boolean | Component specific | When set to true, the affected component is rendered with a surrounding box-shadow. It is enabled by default for some larger components that are usually stand-alone, like a Chart, but disabled for all others. This property is situated in the Style tab of the properties panel. |
| Prevent deletion | Boolean | false | Usually, an app editor can freely delete any component without warning, assuming that there is no active usage. For components that are crucial to your particular app (e.g. a Tabbed Container that acts as app navigation) you might want to enforce confirmation before deletes. When set to true, the affected component cannot be deleted without an explicit confirmation. |
| Visible | Boolean | true | When set to true, the affected component will not be visible in the app for the end user. While editing the app you still see the component, for awareness of its existence and to access its configuration. It will however be rendered semi-transparently to highlight the invisibility setting. |
| Property / Function | Type | Behavior |
|---|---|---|
componentName | string | Type of the component, e.g. button or table |
name | string | The name of the component as defined in the properties panel. This will always equal the variable name of the component in JavaScript code. |
setVisible(value) | (value: boolean) => void | Sets the visibility of the affected component to the provided boolean value. |
visible | boolean | Provides the current value of the "Visible" property, i.e. a boolean value whether the component is visible for the end user or not. |
| Property | Type | Default value | Behavior |
|---|---|---|---|
| Disable while running | boolean | false | When set to true, the button is disabled while the on-click action is running. This prevents action executions while previous clicks have not been processed yet. |
| Disabled | boolean | false | Whether the button should be disabled. When disabled, the button is greyed out and does not trigger the associated on-click action when clicked. |
| Show loading while running | boolean | false | When set to true, the button text is replaced with a loading spinner while the associated on-click action is executing. This provides clearer visual feedback, especially for long-running actions. |
| Text | stringWithJs | "Submit" | The text displayed on the button. |
| Tooltip | stringWithJs | "" | Tooltip text to display on hover over the button. If empty, no tooltip is shown. |
| Property / Function | Type | Behavior |
|---|---|---|
click() | () => Promise<void> | Emulates the click on the button. This function is a noop if the button is disabled, however executes the action even if the button is not visible to the user. |
disabled | boolean | Provides the current boolean value of the "Disabled" property. |
setDisabled(value) | (value: boolean) => void | Sets the value of the "Disabled" property to the provided boolean value. |
setValue(value) | (value: string) => void | Sets the value of the "Text" property to the provided string. |
value | string | Provides the current string value of the "Text" property. |
A simple line chart
| Property | Type | Default value | Behavior |
|---|---|---|---|
| Data | object | Example as shown in data structures. | |
| Type | 'Line' | 'Area' | 'Scatter' | 'Bar' | 'Pie' | 'Line' | Defines that type of the chart in which the provided data should be presented. Additional chart types can be used when using the Plotly configuration. |
| Orientation | 'vertical' | 'horizontal' | 'vertical' | For the bar chart, there is an additional property that defines the orientation of the chart. |
| X-Axis field | string | 'x' | Contains all data series from the provided data. In the dropdown, the data series that should represent the x-axis can be selected. For the pie chart, the x-axis field reflect the labels. |
| Data series | array | ['y1', 'y2'] | Represents the data series on the y-axis of the chart. Additional data series can be added via "Add data series". Each data series has some configurable properties themselves (see below). |
| Property | Type | Default value | Behavior |
|---|---|---|---|
| Name | stringWithJs | inferred | Name of the data series. |
| Y-Axis field | color | inferred | Contains all data series from the provided data. It allows you to select the data that should be associated with your data series. |
| Color | stringWithJs | inferred | The color of the trace (line, bar, etc.) of your data series. |
| Aggregation - Enabled | boolean | 'false' | For data points that don't have unique x-axis values, this allows you to aggregate them into a single y-axis value. Note: Aggregation is not supported by the pie chart. |
| Aggregation - Method | 'Count' | 'Sum' | 'Average' | 'Count' | If aggregation is enabled, this input defines how the data series should be aggregated. E.g. if we choose 'Sum', all data points that have the same x value are summed up and presented as the y-axis value. Note: For non-numeric values, only 'count' is avalable as an aggregation method. |
For reference, here is an example of a viable Plotly data configuration:
[
{
type: "scatter",
mode: "lines+markers",
name: "y2",
orientation: "v",
marker: {
color: "#E78573"
},
x: chart1.formattedData.x,
y: chart1.formattedData.y2
},
{
type: "scatter",
mode: "lines+markers",
name: "y1",
orientation: "v",
marker: {
color: "#9ABEED"
},
x: chart1.formattedData.x,
y: chart1.formattedData.y1
}
]
| Property | Type | Default value | Behavior |
|---|---|---|---|
| Title | stringWithJs | '' | Defines the title of the chart. |
| Show legend | boolean | true | Determines if a legend is displayed in the chart component. |
| Legend position | 'left' | 'top' | 'bottom' | 'right' | 'bottom' | If a legend is displayed, this property determines its position. |
| X-Axis - Title | stringWithJs | '' | Defines the title placed next to the x-axis. |
| X-Axis - Show labels | boolean | true | Determines if the labels are displayed on the x-axis. |
| X-Axis - Show grid | boolean | true | Determines if the grid (grid lines and axis) is shown for the x-axis. |
| Y-Axis - Title | stringWithJs | '' | Defines the title placed next to the y-axis. |
| Y-Axis - Show labels | boolean | true | Determines if the labels are displayed on the y-axis. |
| Y-Axis - Show grid | boolean | true | Determines if the grid (grid lines and axis) is shown for the y-axis. |
For reference, here is an example of a viable Plotly layout configuration:
```javascript { font: { family: "Inter", color: "#B3B3B3" }, margin: { r: 20, l: 20, b: 20, t: 20, pad: 5 }, hoverlabel: { bgcolor: "#FFFFFF", bordercolor: "#E1E1E1", font: { color: "#323232", family: "Inter", size: 12 } }, showlegend: true, legend: { xanchor: "center", yanchor: "top", orientation: "h", x: 0.5, y: -0.2 }, colorway: [ "#9ABEED", "#E78573", "#B8D279", "#B481BB", "#F9C56A", "#9490D7", "#9CD2C8", "#BCB8D8", "#F3B7A6", "#F9EE8A", "#F4D0E5" ], xaxis: { automargin: true, showgrid: true, showticklabels: true, zeroline: true, zerolinewidth: 3, zerolinecolor: "#eeeeee" }, yaxis: { automargin: true, showgrid: true, showticklabels: true, zeroline: true, zerolinewidth: 3, zerolinecolor: "#eeeeee" } } ```| Property | Type | Behavior |
|---|---|---|
formattedData | () => object | Returns the data underlying the chart in a unified format, including the x-axis input and all data series. This is required since we allow different structures as data input. |
| Property | Type | Default value | Behavior |
|---|---|---|---|
| Default value | boolean | false | Determines the initial state of the checkbox, and the state it will have when the reset() API function is used. When configured with a JS expression, it also updates the checkbox reactively when a dependency changes. Learn more |
| Disabled | boolean | false | Whether the checkbox should be disabled. When disabled, the checkbox is greyed out and does not trigger the associated events. |
| Label | stringWithJs | 'Checkbox' | Text displayed next to the checkbox. |
| Label alignment | 'left' | 'center' | 'right' | 'left' | Alignment of the label text. |
| Label position | 'left' | 'right' | 'left' | Whether the checkbox is rendered to the left of the label text, or to the right of it. |
| Required | boolean | false | Whether this checkbox must be active when a surrounding form is submitted. Learn more about form submission |
| Toggle with label click | boolean | false | When set to true, the checkbox state is toggled when clicking on the label text as well. Otherwise, only a click on the checkbox itself changes its state. |
| Property / Function | Type | Behavior |
|---|---|---|
clear() | () => void | Clears the checkbox, i.e. sets its value to false and unchecks it visually. |
disabled | boolean | Provides the current boolean value of the "Disabled" property. |
label | string | Provides the current string value of the "Label" property. |
reset() | () => void | Resets the checkbox state to the initial "Default value", i.e. it is set to the same state that it had after initial app load. |
setDisabled(value) | (value: boolean) => void | Sets the value of the "Disabled" property to the provided boolean value. |
setLabel(value) | (value: string) => void | Updates the value of the "Label" property to the provided string value. |
setValue(value) | (value: boolean) => void | Sets the value of the checkbox to the provided boolean value. true checks it, false unchecks it. This does not trigger any actions associated with checkbox events. |
value | boolean | Provides the current boolean value of the checkbox state. true in case the checkbox is checked, false otherwise. |
Container content resizes dynamically
| Property | Type | Default value | Behavior |
|---|---|---|---|
| Header text | stringWithJs | 'Header' | When the "Show Header" property is set to true, the text of this property is displayed in the header of the container. This configuration is not accessible in the properties panel otherwise. |
| Scrollable | boolean | true | Determines whether the container should allow scrolling in case its content is larger than the container itself. If disabled, overflowing content is hidden and not accessible to the end user. |
| Show Header | boolean | false | When set to true, the container renders a text header, which can be modified in the "Header text" configuration. |
Warning the user about potentially inaccessible container content
| Property / Function | Type | Behavior |
|---|---|---|
headerText | string | Current string value of the "Header text" configuration. |
setHeaderText(value) | (value: string) => void | Sets the header text to the provided string value. |
setShowHeader(value) | (value: boolean) => void | Adjusts the flag whether the header text should be displayed to the provided boolean value. |
showHeader | boolean | Current boolean value of the "Show header" configuration. |
Example of the Data Grid component with color highlights
| Property | Type | Default value | Behavior |
|---|---|---|---|
| Column widths | number | number[] | [240, 90] | Sets the widths in pixels of the grid columns. In case one number is provided, all columns will have the given width. An array of numbers will apply these numbers to the columns in order, and all following columns will use the last array element. |
| Data | GridData | Example data | Defines the data that is displayed in the grid. Please refer to the Data structure section for more details on accepted structures. |
| Data export | boolean | true | When set to true, the user will be able to export the displayed data to CSV or XLSX, by using the download-icon in the footer. |
| First row is header | boolean | true | When set to true, the first row is displayed with bold font, and behaves sticky when the grid is scrolled vertically. |
| Fixed column count | number | 1 | Defines the number of columns which are fixed and therefore behave sticky when the grid is scrolled horizontally. |
| Header background color | string | white | Background color of the header row. Only relevant when "First row is header" is set to true. |
| Header text color | string | black | Text color in the header row. Only relevant when "First row is header" is set to true. |
| Legend | Record<string, string> | Example legend | Defines the legend entries that will be displayed in the footer. Should be a mapping from "color code" to "color label". See more details in the Legend section. |
| Text color | string | black | Font color in the grid, except the header row. |
| Property / Function | Type | Behavior |
|---|---|---|
columnWidths | number | number[] | null | Current value of the "Column widths" property. |
data | GridData | null | Current value of the "Data" property, please refer to the Data section for more details. |
dataExport | boolean | Current value of the "Data export" property. |
firstRowIsHeader | boolean | Current value of the "First row is header" property. |
fixedColumnCount | number | null | Current value of the "Fixed column count" property. |
legend | Record<string, string> | null | Current value of the "Legend" property. |
setColumnWidths(value) | (value: number | number[] | null) => void | Sets the column widths to the provided number(s) in pixels. |
setData(value) | (value: GridData) => void | Sets the displayed data to the provided structure. See the Data section for more details about the expected structures. |
setDataExport(value) | (value: boolean) => void | Sets the data export flag to the provided value. |
setFirstRowIsHeader(value) | (value: boolean) => void | Sets the first-row-is-header flag to the provided value. |
setFixedColumnCount(value) | (value: number | null) => void | Sets the fixed column count to the provided value. |
setLegend(value) | (value: Record<string, string> | null) => void | Sets the legend to the provided value. See the Legend section for more details. |
Form component in action
Submitted form with a child component with validation error
You must explicitly return `false`, and not something falsy like 0, null, undefined or an empty string. {% endhint %}
Different form settings on submit
Full type support for form data getter
Type support for providing format hints
Type support when using setData()
| Property | Type | Default value | Behavior |
|---|---|---|---|
| Button disabled | boolean | false | Whether the submit button should be disabled or not. |
| Cancel button disabled | boolean | false | Whether the secondary cancel button should be disabled or not. This property is only accessible when "Show cancel button" is set to true |
| Cancel button text | stringWithJs | 'Cancel' | Label of the secondary cancel-button. This property is only accessible when "Show cancel button" is set to true |
| Clear after submit | boolean | true | When set to true, all child inputs of the form are cleared after successful execution of the "On submit" action - unless it returns false. Learn more |
| Disable while submit | boolean | false | When set to true, all child inputs, the submit-button and the cancel-button are temporarily disabled while the "On submit" action is running. Learn more |
| Full width | boolean | false | When set to true, the submit and cancel button will take the entire width of the form, instead of just enough space to contain their labels. |
| Header text | stringWithJs | 'Header' | The text to be displayed in the form header. This property is only accessible when the "Show header" property is set to true |
| Hide submit button | boolean | false | When set to true, the submit button is not displayed at all. This is relevant for use cases where a form should only be submitted programmatically. |
| Scrollable | boolean | true | Determines whether the user can scroll to overflowing content, or whether that content will be hidden. |
| Show cancel button | boolean | false | Whether the secondary cancel button should be displayed next to the submit button or not. |
| Show header | boolean | false | When set to true, the form will show a textual header, that can be configured with the "Header text" property. |
| Show loading while submit | boolean | true | When set to true, both the submit and cancel button display a loading spinner while the "On submit" action is running instead of their labels. Learn more |
| Text | stringWithJs | 'Submit' | The label of the submit button. |
| Validate on submit | boolean | true | When set to true, all validation rules and "Required" properties of child inputs will be evaluated. In case of any validation error, the form submission will be aborted and errors will be rendered for all affected inputs. Learn more |
| Property / Function | Type | Behavior |
|---|---|---|
buttonColor | string | Provides the color of the submit button. |
buttonDisabled | boolean | Provides the current boolean value of the "Button disabled" property, i.e. whether the submit button is currently disabled or not. This does not take into account potential disabling during submit. |
buttonFullWidth | boolean | Provides the current boolean value of the "Full width" property. |
buttonText | string | Provides the submit-button label, i.e. the current value of the "Text" property. |
buttonTextColor | string | Provides the text-color of the submit button. |
cancelButtonDisabled | boolean | Provides the current boolean value of the "Cancel button disabled" property, i.e. whether the cancel button is currently disabled or not. This does not take into account potential disabling during submit. |
cancelButtonText | string | Provides the cancel button label, i.e. the current value of the "Cancel button text" property. |
clear() | () => void | Clears all form child inputs, i.e. sets their value to "empty". The semantics of that depend on the component type. |
clearOnSubmit | boolean | Provides the current boolean value of the "Clear on submit" property. |
disableWhileSubmit | boolean | Provides the current boolean value of the "Disable while submit" property. |
getData(options) | (options: object) => object | Provides values of all direct and nested child inputs in one object, keyed by component name. The options determine the value formats. Learn more |
headerText | string | Provides the current value of the "Header text" property. |
hideButton | boolean | Provides the current boolean value of the "Hide submit button" property. |
reset() | () => void | Similar to clear(), however instead of making each child component empty, they are reset to their "default value". This allows to not clear the form entirely, but rather to reset it to the same default state that it had on initial app load. |
showHeader | boolean | Provides the current boolean value of the "Show header" property. |
showLoadingWhileSubmit | boolean | Provides the current boolean value of the "Show loading while submit" property. |
setButtonColor(value) | (value: string) => void | Sets the submit button color to the provided string value. |
setButtonDisabled(value) | (value: boolean) => void | Sets the "Button disabled" property to the provided boolean value. |
setButtonFullWidth(value) | (value: boolean) => void | Sets the "Full width" property to the provided boolean value. |
setButtonText(value) | (value: string) => void | Sets the submit button label to the provided string value. |
setButtonTextColor(value) | (value: string) => void | Sets the text color of the submit button to the provided string value. |
setCancelButtonDisabled(value) | (value: boolean) => void | Sets the "Cancel button disabled" property to the provided boolean value. |
setCancelButtonText(value) | (value: string) => void | Sets the "Cancel button text" property to the provided string value. |
setClearOnSubmit(value) | (value: boolean) => void | Sets the "Clear on submit" property to the provided boolean value. |
setData(data) | (data: object) => void | Fills the form child inputs with the provided values. Learn more |
setDisableWhileSubmit(value) | (value: boolean) => void | Sets the "Disable while submit" property to the provided boolean value. |
setHeaderText(value) | (value: string) => void | Sets the "Header text" property to the provided string value. |
setHideButton(value) | (value: boolean) => void | Sets the "Hide submit button" property to the provided boolean value. |
setShowHeader(value) | (value: boolean) => void | Sets the "Show header" property to the provided boolean value. |
setShowLoadingWhileSubmit(value) | (value: boolean) => void | Sets the "Show loading while submit" property to the provided boolean value. |
submit() | () => Promise<void> | Submits the form, i.e. applies exactly the same logic like when the user clicks on the submit button. This triggers a sequence of events, about which you can read more here. |
Funnel example
Exploring series values by hover
Basic funnel with a single set of values
Funnel with gradients
| Property | Type | Default value | Behavior |
|---|---|---|---|
| Data | object | Conversion funnel example, as shown above | Determines the values, labels and colors of the funnel displayed. Learn more |
| Direction | 'horizontal' | 'vertical' | 'horizontal' | Determines whether to render the funnel horizontally or vertically. |
| Display percent | boolean | true | Whether the percentages of each step should be displayed in the header or not. These percentages are always calculated against the value of the first step, i.e. against the "funnel entry". There is currently no way to change this logic. |
| Property / Function | Type | Behavior |
|---|---|---|
data | object | Provides the currently displayed funnel data. Learn more |
displayPercent | boolean | Provides the current value of the "Display percent" property |
direction | 'horizontal' | 'vertical' | Provides the current value of the "Direction" property |
setData(data) | (data: FunnelData) => void | Updates the funnel data. The provided object must match the FunnelData interface. Learn more |
setDisplayPercent(value) | (value: boolean) => void | Sets the value of the "Display percent" property to the provided boolean value. |
setDirection(value) | (value: 'horizontal' | 'vertical') => void | Sets the value of the "Direction" property to the provided value. Throws an error in case the value is not either 'horizontal' or 'vertical'. |
Text input
Textarea
Password Input
Number Input
Percent Input
Email and URL Input
Slider Input
Date, Time, Date & Time and Date Range Inputs
Handling invalid input
Label position is determined by component size automatically
Impact of the "Validate while typing" property
| Property | Type | Default value | Behavior |
|---|---|---|---|
| Disabled | boolean | false | Determines whether the input is disabled or not. When disabled, the user cannot focus the input and cannot modify the value. Validation rules are however applied either way. |
| Input type | string | Depends on input type | This property is used to switch an input to another type. Learn more |
| Label | stringWithJs | Depends on input type | Text that is displayed as label of the input, either to its left or above. Learn more |
| Label alignment | 'left' | 'center' | 'right' | 'left' | Text alignment of the label. |
| Required | boolean | false | Determines whether the input is considered invalid without a value. Learn more about this special kind of validation rules here |
| Validate while typing | boolean | true | Determines whether the validation rules should be evaluated on every change of the input value, or only on surrounding Form submit. Learn more |
| Validation rules | List | None, except for Email Input and URL Input | Set of validation rules that are applied on the configured trigger. Learn more |
| Property | Type | Default value | Behavior |
|---|---|---|---|
| Default value | stringWithJs | '' | Initital value of the input on app load. Also, this value is set when the reset() API method of the input, or a surrounding Form, is triggered. |
| Placeholder | stringWithJs | 'Enter value' | 'Enter password' | Text that is displayed in the input when no value has been entered yet. |
| Show clear icon | boolean | false | Determines whether an "x" icon will be shown when a value has been entered. Clicking this icon will clear the input entirely. Does not apply to Password Input and Textarea. |
| Property | Type | Default value | Behavior |
|---|---|---|---|
| Allow decimals | boolean | false | Determines whether the user may enter decimal values. The decimal separator is always the dot (.). This setting also influences how pasting works - in case this setting is set to false, the decimal point and potential decimals will be cut off when pasted. |
| Allow negative | boolean | false | Determines whether the user may enter negative values, or decrement the value beyond zero with the button controls. Also, when enabled, the user may paste a numeric text that begins with a dash. Otherwise, the paste is ignored. |
| Default value | js | '' | Initial value of the input on app load. Also, this value is set when the reset() API method of the input, or a surrounding Form, is triggered. This JavaScript expression is supposed to evaluate to a value of type number. Otherwise, it is ignored and the input is kept empty. In case the given value does not comply with the configured rules, e.g. the value is negative but the "Allow negative" property is set to false, the value is anyway used as input value. |
| Placeholder | stringWithJs | 'Enter number' | Text that is displayed in the input when no value has been entered yet. |
| Show controls | boolean | true | Determines whether the increment and decrement button will be displayed to the right of the input. Those controls allow to increment and decrement the value with mouse click. |
| Property | Type | Default value | Behavior |
|---|---|---|---|
| Custom date format | stringWithJs | 'yyyy-MM-dd' | Custom format to be used instead of the preconfigured options of the "Date format" property. Only available when the "Date format" property is set to "Custom". The format should be written as described for date-fns.format. |
| Custom time format | stringWithJs | 'HH:mm' | Custom format to be used instead of the preconfigured options of the "Time format" property. Only available when the "Time format" property is set to "Custom". The format should be written as described for date-fns.format. |
| Date format | string | 'yyyy-MM-dd' | Display format of the date part in the input, and which is used to parse the input value in case of manual input. This setting also influence the format of the valueFormattedString API property. |
| Default value | js | null | Initial value of the input on app load. Also, this value is set when the reset() API method of the input, or a surrounding Form, is triggered. The JavaScript expression should either evaluate to a Date object, or an ISO 8601 date string. For a Time Input, a time string in the format of HH:mm, like e.g. '14:30', is allowed as well. |
| First day of week | 'Sunday' | 'Monday' | 'Sunday' | This setting influences the first day of the week in the date picker. |
| Show clear icon | boolean | false | Determines whether an "x" icon will be shown when a value has been entered. Clicking this icon will clear the input entirely. |
| Time format | string | 'HH:mm' | Display format of the time part of the input value, and format that is used to parse the input value in case of manual input. This setting also influence the format of the valueFormattedString API property. |
| Property | Type | Default value | Behavior |
|---|---|---|---|
| Default start date | js | null | Initial value of the input on app load. Also, this value is set when the reset() API method of the input, or a surrounding Form, is triggered. The JavaScript expression should either evaluate to a Date object, or an ISO 8601 date string. |
| Default end date | js | null | Initial value of the input on app load. Also, this value is set when the reset() API method of the input, or a surrounding Form, is triggered. The JavaScript expression should either evaluate to a Date object, or an ISO 8601 date string. |
| Placeholder start date | js | null | |
| Placeholder end date | js | null | |
| Date format | string | 'yyyy-MM-dd' | Display format of the date part in the input, and which is used to parse the input value in case of manual input. This setting also influence the format of the valueFormattedString API property. |
| First day of week | 'Sunday' | 'Monday' | 'Sunday' | This setting influences the first day of the week in the date picker. |
| Show clear icon | boolean | false | Determines whether an "x" icon will be shown when a value has been entered. Clicking this icon will clear the input entirely. |
| Property | Type | Default value | Behavior |
|---|---|---|---|
| Default value | js | 1 | Initial value of the input on app load. Also, this value is set when the reset() API method of the input, or a surrounding Form, is triggered. The JavaScript expression should evaluate to a Number. |
| Minimum value | js | 1 | The JavaScript expression should evaluate to a Number. |
| Maximum value | js | 5 | The JavaScript expression should evaluate to a Number. Note that the maximum may never be reached if it does not equal the sum of the minimum value and a multiple of the step size. |
| Step size | js | 1 | The JavaScript expression should evaluate to a Number. The step size describes in which increments the value of the slider increases when the slider is dragged. |
| Property | Type | Default value | Behavior |
|---|---|---|---|
| Allowed file types | js | null | If you want to restrict the types of files that a user can upload, you simply provide an array of file extensions to whitelist them. If it is empty, it allows all file types. |
| Allow multiple files | boolean | false | Defines if the user can select and upload multiple files. |
| Property / Function | Type | Behavior |
|---|---|---|
clear() | () => void | Clears the input, i.e. sets the input for the empty string for textual input types, and to null for all others. |
disabled | boolean | Current value of the "Disabled" property. |
label | string | Current value of the "Label" property. |
reset() | () => void | Sets the value of the input to the current value of the "Default value" property. This is useful when a form or individual component should not just be emptied, but instead reset to what it was initially on app load. |
setDisabled(value) | (value: boolean) => void | Sets the "Disabled" property to the provided value. |
setLabel(value) | (value: string) => void | Sets the "Label" property to the provided value. |
validate() | () ⇒ Promise | We return a Promise that runs all validation rules for the current value. When the promise resolves, a boolean is returned. If true is returned, the input is valid, otherwise it is invalid. |
| Property / Function | Type | Behavior |
|---|---|---|
passwordVisibility | boolean | true in case the input value is currently visible as clear text, i.e. the user clicked the visibility icon, false otherwise. Only for Password Input. |
placeholder | string | Current value of the "Placeholder" property. |
setPasswordVisibility(value) | (value: boolean) => void | Sets the password visibility, i.e. the password is displayed as clear text when true is provided as argument, otherwise the password is hidden. Only for Password Input. |
setPlaceholder(value) | (value: string) => void | Sets the "Placeholder" property to the provided value. |
setValue(value) | (value: string) => void | Sets the input value to the provided value. |
value | string | Current value of the input. |
| Property / Function | Type | Behavior |
|---|---|---|
allowDecimals | boolean | Current value of the "Allow decimals" property. |
allowNegative | boolean | Current value of the "Allow negative" property. |
placeholder | string | Current value of the "Placeholder" property. |
setAllowDecimals(value) | (value: boolean) => void | Sets the "Allow decimals" property to the provided value. |
setAllowNegative(value) | (value: boolean) => void | Sets the "Allow negative" property to the provided value. |
setPlaceholder(value) | (value: string) => void | Sets the "Placeholder" property to the provided value. |
setValue(value) | (value: number | null) => void | Sets the input value to the provided value. In case null is provided, the input is cleared. In case a negative value is provided, but the "Allow negative" property is currently set to false, the input value is set to 0. In case a decimal value is provided, but the "Allow decimals" property is set to false, the decimals are cut off. |
value | number | null | Provides the current value of the input. null in case no value has been entered, otherwise a number. |
| Property / Function | Type | Behavior |
|---|---|---|
setValue(value) | (value: string | Date | null) => void (except date range input: (value: {state: string | Date | null, end: string | Date | null}) | Sets the input value to the provided value. In case null is provided, the input is cleared. In case a Date object is provided, the date and time parts are filled according to its values. In case of an argument of type string, the string is expected to either be an ISO 8601 string, or a string that is formatted according to the "Date format" and "Time format" (or, "Custom date format" / "Custom time format") properties. Otherwise, an error is thrown. |
value | Date | null (excpet date range input: {state: Date | null, end: Date | null}) | Provides the current value of the input. null in case no value has been entered, otherwise a Date object. In case of a Date Input, the time part of the Date will be 00:00:00. |
valueFormattedString | string | null | Provides the current value of the input as a formatted string, using the formats from the "Date format" / "Custom date format" / "Time format" / "Custom time format" properties. null in case the input currently has no value. Date and time parts are separated by a space (' '). |
valueISOString | string | null | Provides the current input value as a string in ISO 8601 format. null in case the input currently has no value. For a Time input, the value is formatted as HH:mm. The Date Input uses yyyy-MM-dd. |
| Property / Function | Type | Behavior |
|---|---|---|
maximum | number | Current value of "Maximum" property. |
setMaximum(value) | (value: number) => void | Sets the "Maximum" property to the provided value. |
minimum | number | Current value of "Minimum" property. |
setMinimum(value) | (value: number) => void | Sets the "Minimum" property to the provided value. |
stepSize | number | Current value of "Step Size" property. |
setStepSize(value) | (value: number) => void | Sets the "Step Size" property to the provided value. |
value | number | Current value of the input. |
setValue(value) | (value: number) => void | Sets the value to the provided value. |
The modal always keeps its fixed position
Accessing a closed modal in the editor
| Property | Type | Default value | Behavior |
|---|---|---|---|
| Blurred background | boolean | true | Determines whether a dark blurred background should cover the UI. |
| Close on escape | boolean | true | When set to true, an open modal closes when the user hits the escape key. Otherwise, this keypress is ignored. |
| Close on outside click | boolean | true | When set to true, an open modal closes when the user clicks outside its content, i.e. on the blurred background. It is recommended to disable this for complex modals, of which the user would not like to lose state easily. |
| Header text | stringWithJs | 'Header' | The text to be displayed in the header. Only available when the "Show header" property is set to true. |
| Height | string | '60vh' | CSS height of the modal. See considerations above. |
| Scrollable | boolean | true | Determines whether the modal content is scrollable or not. When set to false, overflowing content is not be accessible for the end user. |
| Show close icon | boolean | true | Determines whether there should be the "x" icon in the top-right corner for closing the modal. In case "Show header" is set to false, the icon might overlap with the modal content. |
| Show header | boolean | true | Determines whether the modal should have a header. When set to true, the header text can be configured via the "Header text" property. |
| Visible | boolean | false | The "Visible" property behaves differently than in other components. For the Modal, this property determines whether the modal is open or closed. You might apply a dynamic JavaScript expression here, but usually a modal should be opened or closed explicitly using the exposed functions. |
| Width | string | '60vw' | CSS width of the modal. See considerations above. |
Asynchronous execution of "On show" action
| Property / Function | Type | Behavior |
|---|---|---|
blurredBackground | boolean | Current boolean value of the "Blurred background" property. |
close() | () => void | Closes the modal and executes the "On hide" action asynchronously. Noop in case the modal is not open. |
closeOnEscape | boolean | Current boolean value of the "Close on escape" property. |
closeOnOutsideClick | boolean | Current boolean value of the "Close on outside click" property. |
headerText | string | Current string value of the "Header text" configuration. |
height | string | Current css-string value of the "Height" property. |
hide() | () => void | Alias for close(). |
open() | () => void | Alias for show(). |
setBlurredBackground(value) | (value: boolean) => void | Sets the "Blurred background" property to the provided boolean value. |
setCloseOnEscape(value) | (value: boolean) => void | Sets the "Close on escape" property to the provided boolean value. |
setCloseOnOutsideClick(value) | (value: boolean) => void | Sets the "Close on outside click" property to the provided boolean value. |
setHeaderText(value) | (value: string) => void | Sets the header text to the provided string value. |
setHeight(value) | (value: string) => void | Sets the "Height" property to the provided string value. The value should be a valid CSS expression. This is not validated. |
setShowHeader(value) | (value: boolean) => void | Adjusts the flag whether the header text should be displayed to the provided boolean value. |
setWidth(value) | (value: string) => void | Sets the "Width" property to the provided string value. The value should be a valid CSS expression. This is not validated. |
show() | () => void | Opens the modal and executes the "On show" action asynchronously. Closes any other modal that is currently open. Noop in case the modal is already open. |
showHeader | boolean | Current boolean value of the "Show header" configuration. |
width | string | Current css-string value of the "Width" property. |
| Property | Type | Default value | Behavior |
|---|---|---|---|
| Page scale | 'width' | 'height' | width | Determines if the component scales the pdf to its width or heigth, i.e. if the full width or height of the component should be visible. |
| Show footer | boolean | true | Determines if the footer should be visible. If the footer is shown, the pdf is paginated, i.e. the user can navigate to a different page of the pdf with the errors in the footer. If the footer is hidden, the pages are reachable by scroll. Additionally, a download button is available in the footer. |
| URL | stringWithJs | | Defines the path of the url to be displayed in the component. By using {{ }}, the url can be set programmatically e.g. through a select. |
| Property / Function | Type | Behavior |
|---|---|---|
backgroundColor | string | Current color of the brackground if any |
borderColor | string | Current color of the border if any |
pageScale | "width" | "height" | Whether the dimensions scale to the width or the height of the pdf |
setBackgroundColor(value) | (value: string) => void | Sets the background color |
setBorderColor(value) | (value: string) => void | Sets the border color |
setPageScale(value) | (value: "width" | "height") => void | Sets the page scale to either width or height |
setShowFooter(value) | (value: boolean) => void | Defines if the footer should be displayed |
setUrl(value) | (value: string) => void | Sets the url of the pdf |
showFooter | boolean | Whether the footer is visible or not |
url | string | Url of the pdf document |
Radio group component
| Property | Type | Default value | Behavior |
|---|---|---|---|
| Default value | string | 'one' | Determines which radio button will be selected by default at first render. This value is also used when the reset() function is called. |
| Disabled | boolean | false | Whether the input should be disabled or not. When disabled, the input is greyed out and values cannot be toggled. |
| Label position | 'left' | 'right' | 'left' | Determines whether the labels of the radio buttons are on the left or the right. |
| Labels | array | ['One', 'Two', 'Three'] | Labels to be rendered for each option. In case there are more "Labels" than "Values", the redundant labels are ignored. If there are more "Values" than "Labels", the additional values are rendered with their raw value. |
| Text alignment | 'left' | 'center' | 'right' | 'left' | Alignment of the radio button labels and the "Title" text. There is no way to set these alignments separately. |
| Title | stringWithJs | 'Radio group' | The text rendered above the radio button inputs. Does not create unnecessary whitespace when left empty. |
| Toggle with label | boolean | false | By default, the radio buttons can only be selected when clicking directly on the input. When this property is set to true, a click on the label text will change selection as well. |
| Values | array | ['one', 'two', 'three'] | Array of internal values of the options. Its length determines how many radio options are rendered. Non-string elements of the array are ignored. |
| Property / Function | Type | Behavior |
|---|---|---|
disabled | boolean | Current boolean value of the "Disabled" property. |
labels | string[] | Provides the current value of the "Labels" property. If the number of values and labels is not equal, the unpruned array will be returned, even if not all labels are used. |
reset() | () => void | Resets the radio group similar to the current value of the "Default value" property. This is especially useful when a Form is reset to its default state. |
setDisabled(value) | (value: boolean) => void | Sets the value of the "Disabled" property to the provided boolean value. |
setLabels(value) | (value: string[]) => void | Sets the value of the "Labels" property to the provided strings array. |
setTitle(value) | (value: string) => void | Sets the "Title" property to the provided string value. |
setValues(value) | (value: string[]) => void | Sets the option values to the provided string array. |
title | string | Provides the current string value of the "Text" property. |
value | string | Value of the currently selected radio button. Should always be a member of the array returned by values |
values | string[] | Current value of the "Values" property. |
Select component with applied search
Selected options in Select vs. Multiselect
UX of selection and deselection
Turning a Multiselect into a Select