This component has the ability to recognise the text that user is writing, on top of this we've added the capability to use any symbol/word to trigger a set of options associated with that symbol.
In order to use this component you just need to define an input structure with the settings for each symbol that you want to use.
See here the sample at https://www.outsystems.com/forge/3238/
[ { "symbol": "@", "configs": { "infoCollection": [ { "json": "{\"image\":\" image_source.png\", \"name\": \"John\", \"is_active\": \"true\"}" }, { "json": "{\"image\":\" image_source.png\", \"name\": \"Mary\", \"is_active\": \"false\"}" }, { "json": "{\"image\":\" image_source.png\", \"name\": \"Alberto\", \"is_active\": \"true\"}" }, { "json": "{\"image\":\" image_source.png\", \"name\": \"Json\", \"is_active\": \"false\"}" } ], "settings": { "listTitle": "People Macthing {{ }}", "listMask": "<span is_active='{{is_active}}'></span><img src={{image}}>{{name}}", "replacedMask": "{{name}}", "useSymbolOnReplace": true, "pattern": false, "higlightOnReplace": true } } }, { "symbol": "/msg", "configs": { "infoCollection": [{ "json": "" }], "settings": { "listTitle": "/msg @user [your message]", "listMask": "Send a DM message to another user", "pattern": "true" } } }, , { "symbol": ":", "configs": { "infoCollection": emojis_list, "settings": { "listTitle": "Matching Emoji's {{ }}", "listMask": "{{emoji}} {{name}}", "replacedMask": "{{emoji}}", "useSymbolOnReplace": false, "pattern": false, "higlightOnReplace": false } } }]
We hope you find this tool useful and appreciate your feedback!
Disclaimer:This component is not supported by OutSystems. You can use it as is and change it as you want.