Other Components
Auxiliary components for progress, animation, maps, tables, and calendars.
Shared Design fields: Design Panel.
Components Overview
| Component | Clients | Data tab | Action |
|---|---|---|---|
| Progress Bar | Web, Native App | — | ✓ |
| Divider | Web, Native App | — | — |
| Animation (Lottie) | Web, Native App | — | ✓ |
| Map | Web, Native App | Multi-marker only ✓ | Marker only ✓ |
| Table | Web only | ✓ | — |
| Calendar | Web only | — | ✓ |
Progress Bar
Definition
Shows numeric progress — tasks, uploads, reviews. Renders as bar or ring from current / total.
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Shape | enum | Bar / Circle | All | Linear bar or circular ring. |
| Label format | enum | None / Percent / Value | All | Text on the progress indicator. |
| Current | integer | 0 | All | Current value; bindable. |
| Total | integer | 100 | All | Denominator; bindable. |
Action configuration
Triggers: On progress change when current or total changes. See Trigger List.
Divider
Definition
Visual line between sections or blocks.
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Line style | enum | Solid / Dashed | All | Solid or dashed. |
| Thickness | integer (px) | style default | All | Line width; horizontal uses height, vertical uses width. |
| Direction | enum | Horizontal / Vertical | All | Swaps width/height in editor when toggled. |
| Dash length | integer (px) | empty | Dashed only | Length of each dash segment. |
| Dash gap | integer (px) | empty | Dashed only | Space between dashes. |
Action configuration
Divider does not support action configuration.
Animation (Lottie)
Definition
Plays Lottie JSON animations — loading, onboarding, success feedback.
Design assets: LottieFiles .
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Lottie file | file | empty | All | Upload JSON animation. |
| Loop | boolean | false | All | Restart when finished. |
| Autoplay | boolean | true | All | Play on load; configure via actions when off. |
Design guidelines
For stable loads on mobile:
- File size: prefer < 1 MB, max ~2 MB.
- Frame rate: ≤ 30 fps for complex animations.
- Text layers: convert text to shapes in After Effects before export.
- Expressions: bake expressions to keyframes; runtime may not evaluate AE expressions.
- External assets: prefer vector-only JSON; avoid heavy masks on low-end devices.
Action configuration
Triggers: On complete. Use button actions for play/pause/replay. See Trigger List.
Map
Definition
Shows map, center, user location, and markers. Map is display-only; configure actions on marker sub-components.
Prerequisites
- Web: Register at Google Cloud Console (or Amap where applicable), create an API key with Maps JavaScript API enabled.
- Momen: Project Settings → Global → Map API keys — enter Web key (and secret if required).
- Native App: Uses the platform map SDK; no separate Web key in the app client.
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Initial zoom | integer | 1–19 | All | Larger = closer view. |
| POI labels | boolean | false | All | Show nearby POIs. |
| Current location | boolean | false | All | Request permission and show user position. |
| Center | geo / JSON | default center | All | Initial map center; bindable. |
| Markers | toggle | off | All | Enable marker sub-component(s). |
| Multi-marker | boolean | false | Markers on | Render many markers from array data source. |
| Data source | array | empty | Multi-marker on | Rows with lat/lng, name, icon, etc. |
Marker configuration
With Markers enabled, configure the marker sub-component:
| Property | Type | Default / options | Description |
|---|---|---|---|
| Icon | image | empty | Marker image; upload or bind. |
| Name | text | empty | Label; bindable. |
| Coordinates | geo / JSON | empty | Position; in multi-marker mode bind row fields. |
Coordinates
Use the coordinate system required by your map provider (WGS84 for Google Maps). Convert coordinates when switching providers or regions.
Limitations
- Single marker: set marker properties directly. Multi-marker: bind an array with coordinates.
- No pick-on-map: display only; cannot read coordinates from map taps.
Action configuration
Map has no action configuration. Configure marker On click (e.g. open detail modal). See Trigger List.
Table
Definition
Web-only data grid for admin, reports, and structured lists. Bind a table, choose columns, export via actions.
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Row height | integer (px) | empty | Web only | Data row height. |
| Header style | style | default | Web only | Header background, text color, font size. |
| Footer style | style | default | Web only | Footer styling. |
| Cell style | style | default | Web only | Border color and width. |
Data configuration
On the Data tab.
| Property | Type | Default / options | Description |
|---|---|---|---|
| Data source | table | empty | Table with filter, sort, subscription/query, limit. |
| Columns | array | empty | Visible columns, titles, width (~140 px default), order. |
Action configuration
No component triggers. On a button, use Export table to download Excel (.xlsx) or CSV.
Calendar
Definition
Web monthly calendar with date selection, dark mode, and today highlight.
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Selected date | text / date | empty | Web only | Default selection; bindable; use YYYY-MM-DD. |
| Dark mode | boolean | false | Web only | Dark theme and background. |
| Highlight today | boolean | true | Web only | Emphasize current date. |
Action configuration
Triggers: On date click — set variables, query schedules, open modals. See Trigger List.