Skip to content
Documentation

Object

$comp

$comp is an object for dynamically defining components from an action.
This feature was added in v4.1.0.

You can dynamically define components from an action using the following syntax:

new $comp.{ComponentType}(property object: prop);

The component types that can be defined are as follows:

ComponentComponent TypeRequired PropertiesNotes
Text FieldTextField1. id
2. x
3. y
Text AreaTextArea1. id
2. x
3. y
Number FieldNumberField1. id
2. x
3. y
Big NumberBigNumber1. id
2. x
3. y
Search FieldSearchField1. id
2. x
3. y
PasswordPassword1. id
2. x
3. y
SelectSelect1. id
2. x
3. y
ComboboxCombobox1. id
2. x
3. y
Radio ButtonRadioButton1. id
2. x
3. y
Radio GroupRadioGroup1. id
2. x
3. y
CheckboxCheckbox1. id
2. x
3. y
Checkbox GroupCheckboxGroup1. id
2. x
3. y
SwitchSwitch1. id
2. x
3. y
RatingRating1. id
2. x
3. y
SliderSlider1. id
2. x
3. y
SpreadsheetSpreadsheet1. id
2. x
3. y
Date PickerDatePicker1. id
2. x
3. y
Time PickerTimePicker1. id
2. x
3. y
Date Time PickerDateTimePicker1. id
2. x
3. y
File UploadFileUpload1. id
2. x
3. y
ButtonButton1. id
2. x
3. y
Icon ButtonIconButton1. id
2. x
3. y
2D ScannerQrScanner1. id
2. x
3. y
TypographyTypography1. id
2. x
3. y
Rich TextRichText1. id
2. x
3. y
ImageImage1. id
2. x
3. y
Image ListImageList1. id
2. x
3. y
External ResourceExternalResource1. id
2. x
3. y
CarouselCarousel1. id
2. x
3. y
AvatarAvatar1. id
2. x
3. y
Basic ListBasicList1. id
2. x
3. y
Detailed ListDetailedList1. id
2. x
3. y
File ViewFileView1. id
2. x
3. y
MapMapEmbed1. id
2. x
3. y
App BarAppBar1. id1. Only one App Bar can be added to a canvas.
2. If an App Bar already exists on the canvas, an additional one cannot be created.
LinkLink1. id
2. x
3. y
BreadcrumbsBreadcrumbs1. id
2. x
3. y
StepperStepper1. id
2. x
3. y
Bottom NavigationBottomNavigation1. id1. Only one Bottom Navigation can be added to a canvas.
2. If a Bottom Navigation already exists on the canvas, an additional one cannot be created.
Tree ViewTreeView1. id
2. x
3. y
BoxBox1. id
2. x
3. y
DividerDivider1. id
2. x
3. y
Line ChartLineChart1. id
2. x
3. y
Bar ChartBarChart1. id
2. x
3. y
Area ChartAreaChart1. id
2. x
3. y
Pie ChartPieChart1. id
2. x
3. y
Radar ChartRadarChart1. id
2. x
3. y
Event CalendarEventCalendar1. id
2. x
3. y

When dynamically defining components, only components that support the following events can execute actions when the event occurs:

  • Click event
  • Change event

Definition example:

const image = new $comp.Image({
    id: "image_1",
    width: 250,
    height: 250,
    x: 50,
    y: 100,
    value: "/sample/01.png",
    objectFit: "contain",
    clickEvent: "detachedAction",
    detachedAction: "show_detail"
})

The following properties can be specified in addition to the component’s standard properties only when dynamically defining components:

Property NameTypePossible ValuesDescription
sendOnActionboolean1. true
2. false (default)		1. If true, the detached action can access this component’s properties.
2. If false, the detached action cannot access this component’s properties.
zIndexnumberdefault: 0When components overlap, the one with a higher value is displayed in front.