Overview

Make your forms dynamic with fully configurable input widgets for web and mobile — control placeholders, masks, formats, and more using live data.

Documentation

📘 Configurable Input Widgets Documentation

⚙️ Typical Usage Scenario

Use these widgets to replace static Mendix inputs when you need dynamic control over configuration at runtime. Bind input attributes—like placeholder, mask, digit grouping, decimal precision, read-only mode, labels, and event behaviors—to either static values or attributes/expressions.

This enables:

• Localization through dynamic placeholder text.

• Adaptive formatting for financial or numeric fields.

• Consistent input behavior across web and mobile apps.

Ideal for enterprise forms, data entry apps, and user-friendly UX enhancements.

🌟 Features and Limitations

Features

• Supported Input Types: Decimal, Integer, and String widgets

• Dynamic Configuration Properties:

  • Placeholder text, Input mask, Show as password, Maximum Length, Group digits, Decimal precision, Show label, Label caption, Input style, Auto-focus.

• Event Handling:

  • Property-level: OnChange (while typing or on leave), OnEnterKey, OnFocus, OnBlur.

• Styling & Accessibility:

  • Custom CSS classes for error states and containers.

• Cross-platform Ready:

  • Web: responsive design and formatting.

  • Mobile: touch-friendly behavior and input adaptations.

Limitations

• Must bind to correct attribute types: decimal widget ➜ decimal attribute, etc.

• One input per widget—no multi-attribute support.

• No automatic validation logic—create domain logic or flows for custom validation.

🔌 Dependencies

• Mendix Studio Pro: v10.6.7 or higher (tested up to v10.6.7 platforms).

• No external modules required.

🛠️ Installation

1. Download CustomInputs.mpk from the Mendix Marketplace.

2. In Mendix Studio Pro, go to App → Import Module Package, and import the .mpk.

3. Grant access to the _Examples folder and example pages for relevant roles.

4. Preview the examples by opening:

   • PAGE_ConfigurableInputs_Examples_Web.

   • PAGE_ConfigurableInputs_Examples_Mobile.

🛠️ Configuration

1. Add the widget (Decimal/String/Integer) to your page or container.

2. Select your data attribute, e.g., $CurrentObject/YourDecimalAttribute.

3. Configure properties:

   • Set placeholders to static text or expressions like 'Enter age: ' + $CurrentUser/Name.

   • Enable masks using expressions or static values.

   • Choose decimal precision (e.g. 2).

   • Toggle Group digits to true for thousands separators.

   • Choose label visibility, style, and read-only mode according to your use case.

   • Set event triggers.

4. Optional: Apply custom CSS via widget’s class properties or theme customization.

5. Test across platforms to ensure formatting and behavior meet your needs.

🐞 Known Bugs

• No known production issues.

• Potential formatting inconsistencies may appear when purposefully inputting invalid masks or pressing Enter rapidly—errors are displayed via standard Mendix mechanisms.

• If you experience any issues, please reach out to the listed developers for assistance or to report a bug.

🧑‍💻 Developer Credits

Built & maintained by:

• Mohammad Almomany — LinkedIn

• Malek Aqrabawi — LinkedIn