Component System Upgrade and Migration Guide
To empower your UI with richer expressions, more dynamic interactive responses, and a more professional configuration experience, the Momen platform has fully refactored and upgraded the Component System!
This upgrade optimizes the underlying architecture and introduces more refined control over styles, layouts, and logic. To help you transition smoothly, this guide details the newly added capabilities, common editor validation errors with their solutions, and Frequently Asked Questions (FAQs).
Important Note: The component system refactoring and upgrade only affect the editor and preview environments. As long as you do not click “Publish”, your existing live application will remain unchanged and completely unaffected.
📅 Migration Timeline
To ensure you have ample time to test and adapt, this component system upgrade will be rolled out in phases:
- Phase 1: Beta Release (May 1, 2026) — Beta testing begins. Developers can voluntarily migrate their existing projects for compatibility testing.
- Phase 2: Default for New Projects (May 13, 2026) — All newly created projects will utilize the upgraded component system by default.
- Phase 3: Automated Migration for Free Plan Projects (June 3, 2026) — All projects on the Free plan will be automatically and smoothly migrated to the new component system.
- Phase 4: Full Migration (TBD) — The final migration schedule for paid and all remaining projects will be determined and announced based on the results and stability of Phase 3.
🚀 Core Upgrades
1. 📢 Core Concept: Independent Modal Configuration
- Independent Modal Configuration: The new component system allows Modals to be configured and managed as independent resources, significantly improving their reusability.
- Unified Concept Migration: Existing page modal components have been fully refactored and migrated into Conditional Containers.
2. 🎨 Style & Layout: From “Basic” to “Refined”
With this refactor, components are now equipped with far greater expressiveness:
- New Visual Effects: Basic components such as Text, Buttons, and Inputs now support Shadows, Background Blur, and Decorative Lines (borders), making it easy to achieve modern visual effects like glassmorphism.
- Smart Overflow Control: The overflow properties for pages and containers have been upgraded from simple “scroll/hidden” to independent X/Y axis control (supporting Auto, Scroll, Visible, and Hidden states), resolving layout clipping and layout misalignments.
- Custom Paddings: Components like Buttons, Inputs, and Date Pickers now feature customizable Paddings settings, giving you precise control over the distance between content and borders.
- Table & List Refinements:
- Table components now feature more granular color and background color configurations for headers and footers.
- List View components now support custom cursor styles for list items, improving the overall interactive experience.
- Enhanced Wrapping Logic: Container components such as Views, Lists, and Tab Bars now support Wrap, No Wrap, and Reverse Wrap layout options, making list layout designs highly flexible and versatile.
3. ⚙️ Interaction & Logic: From “Rigid” to “Dynamic”
Interactive capabilities have been significantly enhanced to make your pages more logically responsive:
- Action-Driven Animations: Animation modifications are now added directly within Actions. This allows animations to be triggered based on specific business logic or conditions, providing instant visual feedback.
- Static Inputs Support: Start/End times for Date-Time Pickers and Latitude/Longitude for Map components now support Static Inputs. You are no longer forced to use data bindings for these fields, simplifying configurations in standard use cases.
4. 🖼️ Media & Display: From “Single” to “Diverse”
Media components like Images and Videos have been optimized for better adaptability across various screen sizes:
- Upgraded Image Fill Modes: Image components are no longer limited to simple box-fitting. They now support Show Entire Image, Crop to Fill, Stretch to Fill, and Auto Compress options, ensuring perfect adaptability for everything from avatar cropping to full-screen backgrounds.
- Video & HTML Enhancements: Video components now support opacity adjustments, allowing them to blend seamlessly with backgrounds. HTML components have greatly expanded their style configurations (including border radius, borders, and cursor styles).
5. 📊 Data: Professional Configurations
- Formula-Based Hidden Configurations: Legacy, hard-to-find configurations have been removed and replaced with new Formulas for unified, clear access:
- New
FORMAT_DATE_TIMEformula replaces legacy date-time formatting configurations. - New
ARRAY_MAPPINGformula replaces legacy array-field selections.
- New
⚠️ Common Validation Errors & Troubleshooting Guide
Following the upgrade, the editor will run smart validation checks on your project. If your project contained non-standard configurations prior to the upgrade, you may see validation errors or automatic state changes. Use the table below to troubleshoot and resolve them:
| Error/Behavior | Root Cause | Solution & Troubleshooting Steps |
|---|---|---|
| Conditional Container “Keep State on Switch” is auto-enabled | This is a default architectural logic change in the new component system. | This is automatically updated to Enabled by the system. No action is required. If a specific interaction should not retain its state, you can manually disable it in the container’s properties. |
| Input component data type mismatch | The variable or data field bound to the input (e.g., Integer vs. Decimal) does not match the input value’s expected type. | Manually update the Value Type of the input component to match the type of the bound database field or variable exactly. |
| Page load referencing error (no longer supports selecting page components) | A logic flow triggered on page load directly references a component inside the page. | Under the new architecture, referencing page components directly during page load is not supported. Check your page load actions and replace direct component references with Variables or Page Params. |
| Map component multi-marker setting error | The map component had “Multi-markers” enabled and then disabled in an older version, leaving legacy configuration data. | Go to the Map component properties panel, manually toggle the Multi-markers setting ON and OFF once to clear the legacy configuration and resolve the validation error. |
| Image component triggers non-empty validation error | Image components now enforce non-empty rules. | The upgraded Image component performs strict validation on its configuration. Check the affected Image components, provide a default fallback image, or ensure that the bound data source is non-empty. |
| Component size does not match configuration | A “minimum size” restriction is conflicting with the configured size, causing a layout discrepancy. | In the properties panel of the component, toggle the size unit (e.g., switch between px and % or rpx and back) to force the editor to re-render and refresh the configuration. |
| Cross-page component action error | An action flow or logical trigger attempts to control a component on a different page (e.g., triggering an action on Page A to refresh a component on Page B). | The new component system does not support cross-page component operations. Re-structure your interaction logic to ensure all component actions (such as refreshing, hiding/showing) happen within the same page. |
❓ Frequently Asked Questions (QA)
Q1: Will this component system upgrade affect my live web application?
Absolutely not. This upgrade only affects the editor and preview/testing environments. As long as you do not click the “Publish” button, your live production version will remain exactly as it is, fully isolated from any preview changes.
Q2: Why is my image component suddenly showing an error after the upgrade when it worked fine before?
This is due to the newly introduced non-empty validation for Image components. If your image component does not have a default image set and its data binding yields empty data, a validation error will trigger. To fix this, simply configure a default placeholder image in the properties panel or ensure that the bound data source is non-empty.
Q3: Can I still use actions to control components on other pages?
No. To ensure high performance and execution reliability, the new architecture explicitly disallows cross-page component operations (such as refreshing a container on another page via action flows). We recommend using Client Variables or Page Params to communicate data and manage logic across pages.
Q4: Why is my map component showing a multi-marker error when I never enabled it?
This is caused by legacy configuration conflicts. If the map component had “Multi-markers” toggled on and off in an older editor version, remnants of that configuration might still exist. To resolve this, simply go to the map’s property settings, turn the “Multi-markers” setting on and back off once manually, and the error will clear.
Q5: If I accidentally delete data in the database while testing the preview version, can it be recovered?
Because the preview/testing environment shares the same database with your live production application, please exercise extreme caution when performing delete actions. We strongly recommend using test accounts for preview testing. If a large-scale accidental data deletion or severe anomaly occurs, contact our support team immediately to assist you with a database rollback.
Q6: If I am not comfortable with the new component system or encounter a severe bug that prevents editing, can I revert to the old version?
Yes. If you encounter critical anomalies that block your development progress, contact our support team, and we can manually roll your project back to its pre-migration state. However, please note: rolling back will discard all new edits and configurations made in the editor after the migration. We advise keeping a record of your changes before initiating a rollback.