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 app, mobile app | — | ✓ |
| Divider | Web app, mobile app | — | — |
| Animation (Lottie) | Web app, mobile app | — | ✓ |
| Map | Web app, mobile app | Multi-marker only ✓ | Marker only ✓ |
| Table | Web app only | ✓ | — |
| Calendar | Web app 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 app: 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).
- Mobile app: Uses the platform map SDK; no separate Web key is needed.
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
Data grid for admin, reports, and structured lists (web apps only). Bind a table, choose columns, export via actions.
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Row height | integer (px) | empty | Web app only | Data row height. |
| Header style | style | default | Web app only | Header background, text color, font size. |
| Footer style | style | default | Web app only | Footer styling. |
| Cell style | style | default | Web app 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
Monthly calendar for web apps, with date selection, dark mode, and today highlight.
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Selected date | text / date | empty | Web app only | Default selection; bindable; use YYYY-MM-DD. |
| Dark mode | boolean | false | Web app only | Dark theme and background. |
| Highlight today | boolean | true | Web app only | Emphasize current date. |
Action configuration
Triggers: On date click — set variables, query schedules, open modals. See Trigger List.