Controls are what Rapid is made of. They provide the front-end appearance of your app and are highly customisable using the different actions available. It is also possible to change their aesthetics through CSS in both Rapid Design and Rapid Admin.

 

It is also possible to create bespoke controls for you app. These controls can handle extra functionality that is not normally available in Rapid, but is entirely possible to include in your apps. An excellent example of this would be an address picker, that hooks into an external database to search and retrieve address and also allow manual address entry.

Button control

This control will generate a simple button on your app. Buttons are useful in a variety of different ways and can be manipulated to carry out many tasks at once.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Label Text to appear on the button.
Title Displays a message when hovered over. Useful for screen readers.
Glyph Attaches a glyph to the button. Useful for adding extra direction or improving aesthetics of a button, such as adding a magnifying glass for searching.
Glyph position Sets the position of the glyph on the button.
Glyph background Applies an additional style to the glyph.

Calendar control

This control will generate a calendar on your app. The calendar control is handy for selecting a single point in time, with the capability to register itself as today's date by default.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Date format Sets the date format. Useful for other regions.
Date Allows you to have a set date that is already selected.
Select today Automatically updates to select today's date. Overrides the date above.
Show year change Sets whether users can jump the date in yearly increments.

Hints control

This control is capable of attaching hints to multiple controls. Hints can be activated by click/tab or hover, and can have individual tips per control. It is also possible to stylise the hint that appears. An example would be to give it a thick border, a background and some opacity rules.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Hints Sets the information for each hint and assigns them to a control on the page. Each hint can be styled individually and can alter between click and hover actions.

Hidden value control

The hidden value is a very niche, but powerful, control that can store individual pieces of data that can be pulled in to other pages. This control works especially well with Rapid forms and can serve as a guide post for visibility.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Form summary label Summary label to appear at the end of the form. Leave blank to have the control and its value hidden. Generally you would want to leave the hidden value label blank.
Value Pre-sets the value. Can be useful for testing visibility or validation conditions.

Grid control

This control will generate a grid on the page. Grids are useful for displaying data that has been injected into it, and work especially well with the datastore control and the button control.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Column headings Sets whether the grid will use headings or not.
Columns Sets the different columns to be used by the grid. Multiple can be set or removed here and each can be customised.
Data store type Sets the method of data storage. Session is for as long as the tab/window is open and local is for files to be stored locally on devices.
Scroll horizontal Sets the horizontal scrollbar.
Scroll vertical Sets the vertical scrollbar.

Glyph control

A simple control that adds a small image onto your app. Due to the extensive amount of glyphs available it is very easy to find a glyph that can illustrate a point. Works well in conjunctions with the flow layout control and the slide panel control.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Glyph Sets the glyph to appear from a library of different images.
Spin Sets the glyph spinning clockwise. Useful for showing something as loading or sending.

Gallery control

A simple control that can display multiple images at the same time. Works most effectively when using Rapid Mobile in conjunction with the mobile action. An example of how to use the two would be to display images taken from the camera and upload them.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Images Sets the images to be used. Each image can have its own caption. By default two Rapid logos are placed in as an example of use.
Empty text Text to display when there are no images present in the gallery.
On image click Sets a small click event for when an image in the gallery is clicked on.

Flow layout control

Most effective for mobile and tablet devices, the flow layout control excels at displaying multiple controls side by side with responsive design. Each cell can be copied in order to gain more and place a variety of controls inside of them, and all cells can be stylised using CSS. Each flow layout cell is contained within a single parent flow layout object.

Properties

Name Description
Minimum cell width The minimum width of each cell in the flow layout. Cells are then resized proportionally to fill the remaining space.

Flow layout cell control

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Text Inputs text directly into the flow layout cell.
User roles Restricts access to the flow layout cell based on the user role defined.

Drop down control

A simple control that places a drop down list on the page. These can be especially helpful for allowing users of your app to select from a multitude of options.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Form summary label Summary label to appear at the end of the form. Leave blank to have the control and its value hidden.
Options Defines what the dropdown will contain. An option for enabling codes can also be used. Codes allow for more precise visibility and validation conditions.
Initial value Selects one of the options from the dropdown as its initial value.

Date control

Similar to the calendar control, the date control excels at allowing users to enter a more personalised date, in a more stylised way over the calendar control. The date control can have a variety of different formats, have a pre-set value, can block manual data entry, and more.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Form summary label Summary label to appear at the end of the form. Leave blank to have the control and its value hidden.
Value Sets an initial value for the date.
Date format Sets the date format. Useful for other regions.
Read-only Whether users are able to enter dates using the keyboard. If false additional validation will be required.
Min date Sets the minimum date. Dates will be unable to be selected earlier than this date. Valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.
Max date Sets the maximum date. Dates will be unable to be selected past this date. Valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.
Year range Sets the range of years that can be selected. For example, "2010:2016" will set the range from the first date in 2010 to the last date in 2016.

Data store control

A very powerful control that can store a multitude of information. Date within the datastore control can be accessed from all pages, and it is especially useful for populating controls with data that has been logged and stored previously, or taken from a database.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Type Sets the method of data storage. Page storage is for as long as the page is open, session is for as long as the tab/window is open and local is for files to be stored locally on devices.

Checkbox control

A simple control that generates a single checkbox. Very useful for forms and questions with multiple answers, the checkbox can have it's values logged and used in a variety of differeny ways.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Form summary label Summary label to appear at the end of the form. Leave blank to have the control and its value hidden.
Checked Sets the state of the checkbox to be true or false.
Value Option that can be set to make validating on a checkbox easier.
Text Sets a text like description for the checkbox.

Chart control

A control that incorporates Google's Javascript charts, this control is very useful for displaying data in a number of different styles. With plenty of options to get you started, you can create very detailed, personalised charts easily. Works best when data is copied into it.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Type Sets the chart type from line to bar or pie.
Left A number or percentage for how far from the left the chart is within the chart area.
Top A number or percentage for how far from the top the chart is within the chart area.
Width A number or percentage of the width of the chart relative to the available chart area.
Height A number or percentage of the height of the chart relative to the available chart area.
Colours A comma separated list of colours to use for the chart elements.
Legend position The position of the legend or key within the chart area.
Legend alignment The alignment of the legend or key to be used at its position.
Curve lines Whether to smooth the lines by curving them.
Stacked Stacks multiple series into the same column.
Pie slice text The content of the text displayed on each pie slice.
Other threshold The percentage value below which pie slices will be combined into an "Other" slice.
3D Draws the pie chart in 3 dimensions.
Pie hole ratio A percentage between 0 (no hole) and 99 (greatest hole). Other values are ignored and it does not work with 3D.

Image control

A simple control that adds an image onto your app. This image can be uploaded from your file directories and can have alt text for screen readers.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Title Displays a message when hovered over.
Alt text Text to display as an alternative if the image does not load or if someone is using a screen reader.
File Facility to upload and use images. By default it adds in the Rapid logo as an example.

Input box control

A vital control that enables users of your app to enter data. The input control can have it's data stored and can also be data copied into to display previously stored information. An initial value and placeholder can also be set, giving users and idea of what is supposed to go in the input. The type of input can also be specified, such as numbers, emails and passwords.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Form summary label Summary label to appear at the end of the form. Leave blank to have the control and its value hidden.
Value Pre-sets the contents of the input field.
Placeholder Sets a faded message so users can better understand what to type in the input box. Gets erased when typing begins.
Character limit Sets the character limit of the input box. Does not apply to the number input type.
Type Sets the type of input box. Large enables the size to be freely altered, number restricts entry to only numbers, password changes the text to blobs and readonly sets the input field to disabled. Telephone and email will apply additional validation rules on the input.

Link control

A simple control that allows you to set whether to go to a different page on your app or a different, pre-existing URL. An option for opening the link in a new tab is also available.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Text Sets the text of the link.
Type Sets the type of link. Page link to other pages on your Rapid app and url links to any webpage placed in the text field.
Page Dropdown for selecting the page in your Rapid app that will be linked to.
URL Sets the page that will be followed when the user clicks on the link.
New tab Sets the link opening in a new tab or in the same tab.

List control

A control that is useful for mobile apps, the list control acts as an open drop down list, with the capability of selecting more than one option.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Options Defines what the list will contain. An option for enabling codes can also be used. Codes allow for more precise visibility and validation conditions.
Initial value Selects one of the options from the list as its initial value.
Header text Sets the title of the columns.
Multi select Allows multiple selections when choosing options in the list.
Slide down Makes the contents hide or show when tapped, similar to how a dropdown list functions.

Map control

A control that hooks into Google's map system, the map control works just as you'd expect. This control has access to setting a longitude and a latitude, a zoom level, and restricting what attributes are available on the map, such as toggling street view and the map type.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Type Sets the type of map from road to satellite.
Centre latitude Sets the latitude position.
Centre longitude Sets the longitude position.
Zoom Sets the initial zoom level of the map. The higher the number the stronger the zoom. Caps at 21.
Marker image Allows you to set a customised marker on the map.
Show street view control Enables users to access street view on the map.
Show zoom control Allows users to set their own level of zoom.
Show map type control Allows users to swap between satellite and road map views at will.
Show scale Whether an indicator for the scale of the map is shown
Address search fields When markers are added to the map and the data object does not have lat/lng or east/north, the value in the first of these comma-seperated fields will be searched on and the marker added to the results

Page panel control

This control gives you the capability of displaying a whole page onto another. This is especially useful for displaying pages that are supposed to be re-used on multiple pages, such as menus, headers and footers.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Page Sets the page to be loaded into the panel.

Panel control

The panel control is used to display controls inside of it. Panels can have text within them and can also have user roles set so only certain users can see them. Panels can be completely stylised, and the themes in Rapid offer a variety of different panel options to suit your app.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Text Inputs text into the panel.
User roles Only allows the viewing of the panel based on the type of privileges a user has.

Radio buttons control

An essential control for forms, the radio button control will place a set of buttons on the page, where users can select one of the available options. It is possible to have more than 2 options available, and different radio button controls can be linking together by giving them the same group.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Form summary label Summary label to appear at the end of the form. Leave blank to have the control and its value hidden.
Buttons Defines the labels for the radio buttons. An option for enabling codes can also be used. Codes allow for more precise visibility and validation conditions.
Inital value Sets the radio button to a given value. Used in conjunction with codes.
Button position Sets the position of the text around the radio buttons.
Layout Sets the position of the radio buttons.
Group Allows you to assign groups to radio buttons. If different sets of buttons share the same group then only one button can be selected at one time from that group.

Score control

The score control is useful for letting users select from a range of values to vote on a given point. This control is best used for displaying single characters, such as a letter or a number. This control can also be stylised using CSS, and appears differently depending on the theme chosen.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Form summary label Summary label to appear at the end of the form. Leave blank to have the control and its value hidden.
Options Defines what the score values will be. An option for enabling codes can also be used. Codes allow for more precise visibility and validation conditions.
Initial value Selects one of the score values as its initial value.

Signature control

Most useful for mobile and tablet devices, the signature control places a small canvas on the app that can be drawn on by users. There are also options to set the pen thickness and colour.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Line thickness Sets the pen thickness when writing the signature.
Line colour Sets the pen colour when writing the signature.

Slide panel control

A handy control that is especially effective on mobile and tablet devices. The slide panel control displays a small bar menu that can have a multitude of controls placed inside of it. A common way to use it is to place styled panels inside of it, and place text controls and glyph controls within the panels that lead to other pages. The slide panel pane is contained within a parent slide panel object. When open, the slide panel pane is what holds other controls. Remember to close the slide panel pane before saving the page, otherwise it will remain open on any page it is present on.

Properties

Name Description
Visible Whether or not the slide panel is open with its contents visible.
Icon colour The colour of the icon that will show or hide the pane.

Slide panel pane control

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
panelId Sets whether the menu is visible or not.

Table control

The table control allows you to enter data or controls into each cell. Options for setting the cell column span and row span are also available. The table control is split into rows and cells, contained within a parent table object. Each one can have a name given to it, however only the cell has text, and spans for columns and rows.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.

Table row control

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.

Table cell control

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Text Sets the title of the table cell.
Column span Sets the width of the cell, enabling it to span multiple rows.
Row span Sets the length of the cell, enabling it to span multiple columns.

Tabs control

The tabs control is useful for displaying different windows of controls without moving onto a different page entirely. Each theme has a differently styled tabs group, and can also be personalised using CSS. Each tab panel is contained within a parent tab object.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Selected panel Changes the panel that has the current focus.
Direction Alters the direction of the tabs. Available tabs are on the side or on the top.
User roles Only allows the viewing of the page based on the type of privileges a user has.

Tab panel control

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Label Sets the title of the selected tab.
User roles Only allows the viewing of the page based on the type of privileges a user has.

Text control

A simple, but vital, control that places text onto your app. The text control can be used to display a variety of details to users, such as asking them questions or directing them through your app. The text control can also attach itself to other controls in the form of the 'Label for' property. This is especially useful for validation.

Properties

Name Description
Name Name that can be given to the control. Names are used to help identify controls uniquely.
Text Sets the contents of the text element.
Format Enables the text to have a different type of html applied.
Label for Label for is used to associate a text element to any other named control on the page. This is especially useful for validation.