Overview

Emoji Picker - Sample is the ready-made demo module for the Emoji Picker web widget. Import it into Studio Pro 10.24.17, map the module role, add EmojiPicker.Home_Web to navigation, and you get a working sandbox: a Content field with a smiley button that opens the picker, text areas that show onEmojiClickedData and onSkinToneChangedData JSON, and a Features panel that binds every widget property (open, theme, emoji style, skin tones, search, reactions, preview, size, hidden emojis and more).

Documentation

Typical usage scenario

Emoji Picker - Sample is the companion example module for the Emoji Picker pluggable widget. It ships one sandbox page, the helper entity and attributes, and the microflows that open the picker and surface click / skin-tone JSON—so you can try every Studio Pro property against live data without building a page from scratch.

Problems it solves

- Evaluating the widget from screenshots alone is slow; you need a runnable page with real attribute bindings.

- New consumers do not know which Booleans and String tokens to create, or how to append the selected emoji into a message field.

- Teams need a reference for open toggle behaviour, theme/style switches, reactions mode, preview config and event JSON shape before production wiring.

Where it is useful

- Product owners and developers trying Emoji Picker before buying into a custom UI.

- Training / onboarding: show search, skin tones, dark theme and reactions on one screen.

- Copy-paste starting point: duplicate Home_Web into your module and point attributes at your entity.

- Debugging: change Features fields and immediately see picker behaviour and event payloads.

How customers typically use it

1. Import EmojiPicker.mpk (App → Import module package). The widget arrives with it; press F4 if needed.

2. Under App → Security → User roles, map module role EmojiPicker.User to the roles that should open the page.

3. Add EmojiPicker.Home_Web to navigation (or set it as a home page for a test profile).

4. Run the app, click the smiley next to Content to open the picker, pick an emoji, and read the JSON in the data text areas.

5. Toggle Features (theme, style, open, reactions, preview, width, hidden emojis, …) and confirm the panel updates.

Demo: https://emoji-picker-sandbox.mxapps.io/index.html?profile=Responsive

Credentials: demo_administrator / b7YCHluT3ouA

Features and limitations

Features

- Module EmojiPicker with page Home_Web — live sandbox layout (Content + smiley open button, event JSON text areas, Features configuration panel).

- Data microflow DS_EmojiPicker creates / returns the page helper object with defaults.

- OpenEmoji toggles the Boolean that shows or hides the picker.

- onEmojiClick / onSkinToneChange write structured JSON into String attributes shown on the page (and can append the emoji character into Content).

- Features panel binds the same properties as the widget: open, auto focus search, lazy load, preview config / show preview, skin tones disabled, search disabled, reactions default open, theme, emoji style, default skin tone, default emoji, search placeholder, suggested emojis mode, skin tone picker location, class name, width / height, hidden emojis.

- Bundles mendix.EmojiPicker.mpk widget 1.1.1 (emoji-picker-react based, Studio Pro 10.24.17).

- Module themesource stub under themesource/emojipicker.

- Module role User for page access after you map it in app security.

Limitations

- Demo / reference module only—not a chat product. No conversation history, presence or reaction storage beyond what you see on the page.

- Web / responsive only (same as the widget). Not for native mobile pages.

- Home_Web uses Atlas_Core.Atlas_Default; the target app needs Atlas Core (standard blank apps include it).

- Import does not change app navigation or security automatically—you must map the module role and add the page.

- Feature fields accept free-text tokens; invalid values fall back to widget defaults.

- Sample content is for evaluation; this sample uses a page helper object, not a bulk seed of business records.

Dependencies

- Mendix Studio Pro 10.24.17

Installation

1. Open (or create) an app in Studio Pro 10.24.17.

2. App → Import module package → select EmojiPicker.mpk from https://github.com/bharathidas/Emoji-Picker/releases/tag/Sample-Version1.1.1

3. Press F4 (Synchronize App Directory) if Emoji Picker is missing from the Toolbox.

4. App → Security → User roles: add module role EmojiPicker.User to Administrator (and any other roles that should open the demo).

5. Add page EmojiPicker.Home_Web to the navigation menu (or temporarily set it as the responsive home page).

6. Run locally, sign in, open the page, click the smiley button and pick an emoji.

Configuration

The sample is pre-wired. After import you mainly need security + navigation (see Installation). To learn from the page:

1. Domain helper: Open the EmojiPicker domain model / entity used by DS_EmojiPicker. Note Booleans (Open, lazy load, preview, search, reactions, …) and Strings (theme, style, skin tone, placeholders, width/height, click JSON, Content).

2. Page: Home_Web places a data view over DS_EmojiPicker, the Content input, the open button (OpenEmoji), the Emoji Picker widget, JSON text areas, and the Features inputs bound to the same object.

3. Events: Widget onEmojiClick → onEmojiClick; onSkinToneChange → onSkinToneChange. Inspect those microflows to see how JSON is stored and how Content is updated.

4. Try changes: On the running page, set Theme to dark, emoji Style to google, enable reactions default open, or set open to No and use the smiley to reopen.

5. Reuse in your app: Copy Home_Web (or only the widget + event microflows) into your module, replace the helper entity with yours, and keep the same property bindings.

Known bugs

None.

Report issues at https://github.com/bharathidas/Emoji-Picker/issues

Frequently Asked Questions

Q: Is this the widget or the demo?

A: This listing is the sample module. It includes a sandbox page and bundles widget 1.1.1. For widget-only install, use mendix.EmojiPicker.mpk from release Version1.1.1.

Q: Which Mendix version?

A: Studio Pro 10.24.17 for sample / widget 1.1.1. Older Marketplace sample builds targeted Mendix 9.x.

Q: I imported the module but cannot open the page.

A: Map EmojiPicker.User under App Security and add EmojiPicker.Home_Web to navigation.

Q: The picker never appears.

A: On the Features panel set open to Yes, or click the smiley button (runs OpenEmoji). Confirm the widget is inside the data view.

Q: Where is the selected emoji written?

A: Into the Content field via onEmojiClick, and the full payload into on emoji clicked data. Skin tone changes go to on skintone changed data.

Q: Do I need npm or extra modules?

A: No. Widget and sample theme files are inside EmojiPicker.mpk. Atlas Core is required for the layout.

Q: Can I use this in production as-is?

A: Treat it as a reference. Rebuild with your own entity, security and UX; keep the widget bindings and event pattern.

Q: Where is the live demo?

A: https://emoji-picker-sandbox.mxapps.io/index.html?profile=Responsive — demo_administrator / b7YCHluT3ouA.

Q: Where is the GitHub sample package?

A: https://github.com/bharathidas/Emoji-Picker/releases/tag/Sample-Version1.1.1 — download EmojiPicker.mpk. For Import from GitHub use that tag URL (not a direct .mpk download link).