Component Overview

Components

Components allow you to create various UI elements by utilizing workflows, JavaScript template code, and results data through properties.

Component Names

Components have unique names.
These names can be referenced by workflows or other components within the page and follow these rules:

• Must be unique within a page
• Must start with an English letter (uppercase or lowercase)
• Can only contain English letters, numbers, and underscores (_)
• No spaces allowed
• camelCase naming convention recommended
• Examples: createDataSourceButton, hopsMemberTable1

Component Types

• Button
• Chart
• Checkbox
• Checkbox Group
• Columns
• Container
• Date Picker
• Date Range Picker
• Embed
• File Field
• Image View
• Link
• Metric Card
• Modal
• Multi Select
• Number Field
• Password Field
• Radio Group
• Select
• Switch
• Tab Group
• Table
• Text Area
• Text Field
• Template Text
• WYSIWYG Editor

info

We're continuously adding new component types! 🧑‍🔧
If you need a component that's not available, please contact us at contact@hopsoffice.com.

Properties

Each component has properties that control its attributes.
Properties can be connected to workflow results and can use JavaScript template code depending on the situation. Create various components and build your product by utilizing these properties.

You can activate properties by clicking the component badge.

States

Each component has states that can be used externally. These values can be used in workflows and other component properties. Please refer to individual component documentation for component-specific states.