1. Home
  2. Docs
  3. NoCode-X Documentation
  4. Components
  5. All Components

All Components

Contents

Charts:

Containers:

Form:

Layout:

Media:

Reuse:

Charts

Pie chart

Example of a pie chart for customer satisfaction
Description

Creates a pie chart from a given set of data. Includes a title and a legend, as well as labels for each slice.

Properties
TitleProvide the title that will be displayed in the top left corner of this component.
SlicesA pie chart is made up of slices. Each slice can be given a name and a value. The value represents the portion of the pie the slice takes up. For example, if there are four slices with the value 25 and no others, each slice will take up a quarter (25/100) of the pie.
Style
Legend– Visible: choose whether the legend should be visible or not.
– Orientation: choose the orientation of the legend’s entries: vertical or horizontal. With vertical, the entries of the legend will be in a vertical line; with horizontal, they will be placed next to each other horizontally.
– Left: alters the horizontal positioning of the entire legend. Choose between left, center, right and auto.
– Top: alters the vertical positioning of the entire legend. Choose between top, middle, bottom and auto.
DatasetsPick the color for each slice.

Radar

Example of a radar chart.
Description

Creates a radar chart from a given set of data. Includes a legend, as well as labels for each dataset.

Properties
TitleProvide the title that will be displayed in the top left corner of this component.
X-axisChoose the indicators for the X-axis. Must be separated by semicolons ( ; ).
DatasetsAdd datasets for this chart. Every dataset has a name and a series of values. Values must be separated by semicolons ( ; ).
Style
Legend– Visible: choose whether the legend should be visible or not.
– Orientation: choose the orientation of the legend’s entries: vertical or horizontal. With vertical, the entries of the legend will be in a vertical line; with horizontal, they will be placed next to each other horizontally.
– Left: alters the horizontal positioning of the entire legend. Choose between left, center, right and auto.
– Top: alters the vertical positioning of the entire legend. Choose between top, middle, bottom and auto.
DatasetsPick the color for each dataset.

Bar chart

An example of a bar chart, showing the annual profits of three companies.
Description

Creates a bar chart from a given set of data. Includes a title, a legend, a label for the x-axis and automatic numbering of the y-axis.

Properties
TitleProvide the title that will be displayed in the top left corner of this component.
X-axis– Name: the name of this axis, appears after its endpoint on the right.
– Values: text that appears right below the x-axis, in the center.
DatasetsA bar chart is made up of vertical bars of a certain length. Each set of bars has a name and multiple value. The values will be displayed on the y-axis (vertical). They must be separated by semicolons ( ; ).
Style
Legend– Visible: choose whether the legend should be visible or not.
– Orientation: choose the orientation of the legend’s entries: vertical or horizontal. With vertical, the entries of the legend will be in a vertical line; with horizontal they will be placed next to each other horizontally.
– Left: alters the horizontal positioning of the entire legend. Choose between left, center, right and auto.
– Top: alters the vertical positioning of the entire legend. Choose between top, middle, bottom and auto.
DatasetsPick the color for each bar.

Line graph

Example of a line graph, showing business analytics.
Description

Creates a line graph. Each graph consists of one or more data points with a value on the x-axis and on the y-axis. Multiple lines can be placed on the same graph.

Properties
TitleProvide the title that will be displayed in the top left corner of this component.
X as– Name: the name of the x-axis. appears to the right of this axis.
– Values: The values shown on the x-axis. Must be separated by semicolons ( ; ).
DatasetsThe different lines on the graph.
– Name: The name of this line. Will be shown in the legend, along with its color.
– Values: The y-values of this line. Must be separated by semicolons ( ; ).
Style
Legend– Visible: choose whether the legend should be visible or not.
– Orientation: choose the orientation of the legend’s entries: vertical or horizontal. With vertical, the entries of the legend will be in a vertical line; with horizontal, they will be placed next to each other horizontally.
– Left: alters the horizontal positioning of the entire legend. Choose between left, center, right and auto.
– Top: alters the vertical positioning of the entire legend. Choose between top, middle, bottom and auto.
DataseriesPick the color for each line.

Containers

Components inside of containers will inherit the styling settings of their container. For example, if you set a certain font in the container’s styling menu and then add a title component to the container, it will get the same font (unless the title already has a different font configured).

Plane

The plane component, placed in the grid
Description

A simple surface where you can accommodate components. All components placed inside of it will stay in their chosen positions and move along with the plane.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
Style
  • Size and position
  • Style: Normal, On hover

See the standard styling options for detailed information.

Tabs

The tab component with three visible tabs related to business locations.
Description

Organize your components in different tabs to create a well-organized page.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
TabsAdd tabs by pressing the Add tabs button. Each tab has a name and optionally an icon.
Style
  • Size and position
  • Style: Normal, On hover

See the standard styling options for detailed information.

Stepper

The stepper component for a payment system.
Description

Divide your component into successive steps and offer them to your users in order.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
StepsAdd steps by pressing the Add steps button. Each step has a name and optionally an icon.
Style
  • Size and position
  • Style: Normal, On hover

See the standard styling options for detailed information.

Vertical list

Description

Visualize components in a vertical list. Add components by dragging them into this component.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
Style

Special option:

Items– Gap: change the distance between the components in this vertical list.

Standard options:

  • Size and position
  • Style: Normal, On hover

See the standard styling options for detailed information.

Horizontal list

Description

Visualize components in a horizontal list.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
Style

Special option:

Items– Gap: change the distance between the components in this vertical list.

Standard options:

  • Size and position
  • Style: Normal, On hover

See the standard styling options for detailed information.

Form

To set a default value for a form component, see the relevant section in the Components article.

Selection box

Selection box with fruit choices.
Description

Allows the user to select an option from a drop-down list. Assisted with auto complete functionality.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
LabelThe label will be displayed inside the selection box when no choice has been selected yet.
ChoicesAdd a choice by pressing the Add button. Each choice has a label and an optional help message.
Add empty choiceAdds an empty choice to the list of choices.
Mandatory fieldMakes the field mandatory. Type a mandatory validation message.
HelpOptional help message.
Style
  • Size and position
  • Style: Normal, On hover, On focus

See the standard styling options for detailed information.

Actions

Actions can be performed on change.

Date

The date picker component.
The actual date picking tool.
Description

Allows the user to pick a date, optionally within a given date interval.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
LabelThe label will appear inside the date field when no date has been selected yet.
Maximum dateThe latest possible date that can be selected by the user. This is optional.
Minimum dateThe earliest possible date that can be selected by the user. This is optional.
Mandatory fieldMakes the field mandatory. Type a mandatory validation message.
HelpOptional help message.
Style
  • Size and position
  • Style: Normal, On hover, On focus

See the standard styling options for detailed information.

Actions

Actions can be performed on change.

Linked function calls

File uploader

Description

Allows the user to upload a set amount of files to your media library, with restricted file types.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
Start uploadMessage displayed when files are being uploaded.
Maximum number of uploadsMaximum amount of files that can be uploaded.
Maximum file sizeMaximum size of each file in bytes.
Concurrent upload amountMaximum amount of files that can be uploaded at once.
Allowed typesAllowed file types inside this uploader. You have to select at least one file type for the component to work.
Show dropzoneDisplays a message inside the dropzone. This field is optional.
Show upload buttonDisplays a button with a chosen label to upload files, so files do not have to be drag-and-dropped.
Show pick file buttonDisplays a button in the language of the user’s computer to upload files, so files do not have to be drag-and-dropped.
Style
  • Size and position
  • Style: Normal, On hover

See the standard styling options for detailed information.

Actions

Actions can be performed on upload.

Number

The number input field component.
Description

Add a number input field to your page.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
LabelThe label will appear in the number field when no number has been typed yet.
Mandatory fieldMakes the field mandatory. Type a mandatory validation message.
HelpOptional help message.
Style
  • Size and position
  • Style: Normal, On hover, On focus

See the standard styling options for detailed information.

Actions

Actions can be performed on change.

Linked function calls

Password

The password component.
Description

Allows your users to securely enter a password using this password input field.

Be aware: the password is only obfuscated on the front end of the user, the information is readable on the client in the code!

The component discloses the length of the password being entered, but this is a trade off between user experience and information disclosure.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
LabelThe label will appear in the password field when no password has been typed yet.
Mandatory fieldMakes the field mandatory. Type a mandatory validation message.
HelpOptional help message.
Validate password strengthSpecify certain conditions passwords must adhere to. This is recommended for increased security.
Style
  • Size and position
  • Style: Normal, On hover, On focus

See the standard styling options for detailed information.

Actions

Actions can be performed on change.

Linked function calls

Email

The email input field component.
Description

Allow users to enter a correctly formatted e-mail address. This de facto requires a valid e-mail address entered when not empty.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
LabelThe label will appear in the email when no email has been typed yet.
Invalid email validation messageThis message displays when an invalid email has been entered.
Mandatory fieldMakes the field mandatory. Type a mandatory validation message.
HelpOptional help message.
Style
  • Size and position
  • Style: Normal, On hover, On focus

See the standard styling options for detailed information.

Actions

Actions can be performed on change.

Linked function calls

URL

The URL component.
Description

Lets your users enter a validated URL in input field.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
LabelThe label will appear in the URL field when no URL has been typed yet.
Invalid URL validation messageThis message displays when an invalid URL has been entered.
Mandatory fieldMakes the field mandatory. Type a mandatory validation message.
HelpOptional help message.
Style
  • Size and position
  • Style: Normal, On hover, On focus

See the standard styling options for detailed information.

Actions

Actions can be performed on change.

Linked function calls

Color choice

The color choice component.
The color palette.
Description

Let your users choose a color from a color palette in a user-friendly way.

Available options:

  • Extract a color from the screen
  • Rainbow view
  • RGB values [0, 255]
Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
LabelThe label will appear above the selected color.
Mandatory fieldMakes the field mandatory. Type a mandatory validation message.
HelpOptional help message.
Style
  • Size and position
  • Style: Normal, On hover, On focus

See the standard styling options for detailed information.

Actions

Actions can be performed on change.

Slider

The slider component.
Description

Allow the user to select a number between a set interval using a slider.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
LabelThe label will appear above the slider.
MinimumThe minimum value that can be selected with the slider.
MaximumThe maximum value that can be selected with the slider.
StepThe difference between two consecutive slider positions. Users cannot select an intermediary value.
HelpOptional help message.
Style
  • Size and position
  • Style: Normal, On hover

See the standard styling options for detailed information.

Linked function calls

Icon button

An example of an icon button component.
Description

A button with only an icon.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
IconSelect an icon for this button from the interactive menu.
TypePerform actions on click or use this icon button to submit forms. The submit form type makes sure that the form is validated. If something does not validate, the underlying action linked to this icon button will not execute.
Style
  • Size and position
  • Style: Normal, On hover

See the standard styling options for detailed information.

Actions

Actions can be performed on click.

Button

A green submit from button component.
Description

Add a button to your page to which you can link all kinds of actions.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
LabelThe label will appear on the button.
TypePerform actions on click or use this button to submit forms. The submit form type makes sure that the form is validated. If something does not validate, the underlying action linked to this button will not execute.
Style
  • Size and position
  • Style: Normal, On hover

See the standard styling options for detailed information.

Actions

Actions can be performed on change.

Chips input field

The chips input field component with some crisps flavors.
Description
Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
LabelThe label will appear in the input field when no chips have been added yet.
Mandatory fieldMakes the field mandatory. Type a mandatory validation message.
HelpOptional help message.
Style
  • Size and position
  • Style: Normal, On hover, On focus

See the standard styling options for detailed information.

Actions

Actions can be performed on change.

Radio button

A select a shipping method radio button component.
Description

Add a set of radio buttons with text.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
LabelThe label will appear above the radio button(s).
ChoicesClick the Add choice button to add a new choice. Every choice has a label and an optional help message.
Mandatory fieldMakes the field mandatory. Type a mandatory validation message.
HelpOptional help message.

When you want a default value to be selected, go to the template view and select the option.

Select default option for radiobutton component.
Style
  • Size and position
  • Style: Normal, On hover, On focus

See the standard styling options for detailed information.

Actions

Actions can be performed on change.

Linked function calls

Text field

An empty text field component for extra comments.
Description

Lets your users enter a larger chunk of text into this text box.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
LabelThe label will appear in the text box when no text has been typed yet.
MandatoryMakes the field mandatory. Type a mandatory validation message.
HelpOptional help message.
Style
  • Size and position
  • Style: Normal, On hover, On focus

See the standard styling options for detailed information.

Actions

Actions can be performed on change.

Linked function calls

Check box

A check box component with sports.
Description

Add a list of check boxes to your page. Users can check one or more options, as well as none (if the field is not mandatory).

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
LabelThe label will appear above the choice(s).
ChoicesClick the Add choice button to add a new choice. Every choice has a label and an optional help message.
Mandatory fieldMakes the field mandatory. Type a mandatory validation message.
HelpOptional help message.
Style
  • Size and position
  • Style: Normal, On hover, On focus

See the standard styling options for detailed information.

Actions

Actions can be performed on change.

Linked function calls

Input field

An input field component for heart rate.
Description

Add a simple input field to your page.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
LabelThe label will appear inside the input field when no text has been entered yet.
Mandatory fieldMakes the field mandatory. Type a mandatory validation message.
HelpOptional help message.
Style
  • Size and position
  • Style: Normal, On hover, On focus

See the standard styling options for detailed information.

Actions

Actions can be performed on change.

Linked function calls

Layout

Text

A text component with example text.
Description

Adds a block of text to your page.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
TextThe text that will be displayed inside this component.
Style
  • Size and position
  • Style: Normal

See the standard styling options for detailed information.

Horizontal divider

The horizontal divider component.
Description

Divides the screen into logical parts, using a horizontal line.

Vertical divider

The vertical divider component.
Description

Divides the screen into logical parts, using a vertical line.

Icon

An example icon component.
Description

Place an icon on your page.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
IconSelect the icon to be displayed using the interactive icon picker.
Style
  • Size and position
  • Style: Normal, On hover

See the standard styling options for detailed information.

A link component to the NoCode-X site.
Description

Adds a URL to your page.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
TextThe link text.
URLThe URL the link should lead to.
TargetChoose whether the link should open in the current tab or in a new one.
Style
  • Size and position
  • Style: Normal, On hover, On focus, When active

See the standard styling options for detailed information.

Title

A title component for an annual tax report.
Description

Adds a title to your page.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
TitleThe visible title on your application
LevelThe heading formatting of your title.
Style
  • Size and position
  • Style: Normal, On hover

See the standard styling options for detailed information.

Paging

A paging component.
Description

Add a paging control to your page.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
PagesThe amount of pages.
Current pageThe current page.
Page textThe text displayed right before the current page.
Of textThe text displayed between the current page and the total amount of pages.
Style
  • Size and position
  • Style: Normal, On hover, On focus, When active

See the standard styling options for detailed information.

Media

Image

An image component. The image is a purple flower.
Description

Add images to your page.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
ImageChoose an image from the media library or from a specified URL.
Style
  • Size and position
  • Style: Normal, On hover

See the standard styling options for detailed information.

Actions

Actions can be performed on click.

Reuse

Template

Description

Display a different template inside the current one.

Properties
CodeProgrammatic reference to this component. More information can be found on the Component properties page.
Select a templateChoose the template you want to display inside the current one.

How can we help?