A component is defined as an element you can add to the canvas section of the App Builder. They help the user view and manage data on the screen.
Components can be found within the component palette.
At the top is a search bar to find the component you are looking for. The palette is broken up into eight categories.
Palette categories (in palette order):
Commonly used: Label, Text input, Dropdown, Button, Editable grid, Container
Inputs: Date time picker, Dropdown, HTML Editor, Tag list, Text area, Text input
Buttons: Button, Button menu
Selectors: Checkbox, Radio group, Toggle
Display: Gallery, Image, Map, Label, Banner
Data views: Calendar, Chart, Editable grid
Layout: Container, Divider
Specialized: Address lookup, Attachments, Recurrence, Signature, Sync widget
Note that some components are Single-instance components: only one per screen. These include:
Signature
Tag list
Attachments
Recurrence: This component's usage is conditional — only appears when the screen's base table is
Activity.Sync widget: This component's usage is conditional — only appears if the screen's base table syncs with QuickBooks.
Adding Components
Add to canvas: Click a component (drops at the default position).
Drag and drop: a translucent blue rectangle renders at the target position so you will see where the component will land before releasing.
Resize behavior
Click a component to select it. Resize handles appear as small white pill-shaped bars. All components allow for its width to be altered, but only Text areas, Image, Chart, Map, and Editable grid can have its height resized.
Note that a components size is restricted by grid, which becomes visible as you try to move or resize a component.
Component property panel
Each component has their own settings which becomes configurable in the Properties Panel when the component is selected.
Although each component will have specific properties, most components share the following:
Header row icons:
References icon: Shows a lists of selectable events where component is being referenced. Components being used within action sets cannot be deleted. Use this list to find which actions are using the component.
Duplicate icon
Delete icon
Data source (bind to a table field): Components that can accept data can be bound to a table. This includes: Dropdown, Date time picker, Toggle, Checkbox, Label, and any text input components. For more information, see the article "Data Source and Mapped Fields".
Display section: Label / Caption / Title and the ability to hide or show this.
Default state: Regular / Hidden / Disabled — universal across components.
Validation rules section: Components that can accept data can have rules to validate its data.
Events section: Events vary by component
📌 Note: Almost every component has a Label, Caption, or Title — a way to identify the component. This is used when referencing it within an action. When two or more components have the same name, a number will be appended to the internal name for reference within actions only. This number does not appear on the live screen.
Example: If there are two buttons named “Save”, one will be named “Save”, the second one will be named “Save_2”. However, when viewing the button text on the live screen, both will display “Save”.
Events per component
Each component will have their own events, if they have events at all. To add an event, click the “+ Add” within the Events section.
Component(s) | Event(s) |
Button, Label, Image, Banner | Click |
Checkbox, Toggle, Radio group, Date time picker | Change |
Text input, Text area, Address lookup | Change |
Dropdown | Change |
Editable grid | Row click Column - Click (buttons) |
Calendar | Click (button on cards) |
Chart | On click (custom actions) |
Signature | Accept |
HTML Editor, Tags, Attachments, Recurrence, Sync widget, Container, Divider | No events |
For more information on each event, please view the individual component.
Component list
Components available in Method are:
Address lookup
Attachments
Banner
Button
Button Menu
Calendar
Chart
Checkbox
Container
Date time picker
Divider
Dropdown
Editable grid
Gallery
Grid
HTML Editor
Icon
Image
Label
Map
Radio group
Recurrence (Only when Activity table set as base table)
Signature
Sync widget
Tag list
Text area
Text input
Toggle
Accessing the value of a component
Most components hold a value. Most actions that require a value can reference a component to get the value it holds.
Example:
If the component is a checkbox component labeled "Is Active":
then the action Assign Value to Action Result can put the value of the checkbox into an action result.
Updating the value of a component
Just like you can access the value of a component, you can also update its value. This can be done with the action Update Controls on Screen.
Example:
Taking the same setup as above, the action puts the value of "Yes" into the checkbox "Is Active". In effect, this will cause the checkbox to be checked.
📌 Note: If a component does not hold a value, accessing and updating the value of the component will be done on the label or title. For example, if you were to update a button component with Update Controls on Screen, the label of the button will change.