Stable Version 1.0.1 (OutSystems 10)
Published on 05 February 2018 by 
Created on 01 February 2018
Custom TextArea with the ability to recognise the text that user is writing (symbol/word) to trigger a set of options related. See here the sample at https://www.outsystems.com/forge/3238/
Read More


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/

Documentation notes

  • Component Inputs:
    • Height: Default value is 100px;
    • MaxWidth: Default Widtth is 100%;
    • Config Input Structure List:

      • Example of received input scructure converted into JSON to be used inside the component:
      • [
            "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
      • Notes about the input Structure List:
        • For each Object:
          • "symbol": TEXT
            • The symbol/word to work with;
          • "configs": STRUCTURE
            • "infoCollection": LIST OF TEXT
              • List of all items assigned to symbol;
              • The Json atribute is TEXT type, in order to give the ability to create a custom Object;
              • Note that each item of this list will be parsed into an JSON Object, so, take into consideration that there are specific rules about the JSON monenculature that have to be respected;
              • Some examples for this Json atribute value:
                • "{""image"":""/image_src.png"", ""name"": ""John"", ""is_active"": ""true""}"
                • "{""name"":"":grinning"", ""emoji"":""??""}"
            • "settings": STRUCTURE
              • "listTitle": TEXT
                • Title that will appear on top of the list of Options (infoCollection) for the symbol;
                • The {{ }} will be replaced by the text that user is writing.
              • "listMask": TEXT
                • This atribute can receive Plain or HTML text;
                • For the dynamic info, you can use {{property_name}} representing the properties defined previously in the infoCollection List:
                  • For the example:
                    • "{""image"":""/image_src.png"", ""name"": ""John"", ""is_active"": ""true""}"
                    • you can use:
                    • {{image}}, {{name}} and {{is_active}}
                    • to display the related information to each item.
              • "replacedMask": TEXT
                • {{property_name}} used to replace text when the user select one option from list of Options (infoCollection);
                • You can use Plain text, or Plain text with {{property_name}};
              • "useSymbolOnReplace": BOOLEAN
                • Default value True
                • If value is False, it will replace info without symbol/word;
              • "pattern": BOOLEAN
                • Default value False
                • If set to True, the inserted text has to start with the symbol/word
              • "higlightOnReplace": BOOLEAN
                • Default value True
                • If set to False, the replace info will not be highlighted

We hope you find this tool useful and appreciate your feedback!

This component is not supported by OutSystems. You can use it as is and change it as you want.

What’s new (1.0.1)

Fixed issue when using on desktop. It is now possible to select an option and insert it in the middle of the text.

Reviews (0)
Components, UI & Widgets
Support Options
This component is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from Experts who created this component.
OS_TextEditor has no dependencies.
Component Consumers
No consumers yet.
Weekly Downloads 
Related Components
Silk UI Web
OutSystems R&D
A fully responsive and beautiful UI framework that works within the OutSystems Platform. Build amazing looking applications, in a fraction of the time, which work perfectly across devices. Learn how to start using Silk UI and see the examples at silkui.outsystems.com . Obtain assistance on using Silk UI in our forums .
Multiple File Upload
Multi Uploaders
Allow you to upload multiple files in one upload form or using drag and drop functionality.
OutSystems UI Mobile
OutSystems R&D
Create amazing native mobile applications using this fully integrated UI framework for OutSystems, with dozens of UI patterns ready to use.
More from Experts
Infrastructure Monitor
A LifeTime plugin to provide Developers and Operations a quick and simple infrastructure monitoring tool for the platform servers. It will help you keep your infrastructure in check by surfacing key performance metrics of your servers and alert you when these metrics reach thresholds that may compromise the performance or stability of your environments. Instructions here: http://outsyste.ms/1lnELXb
Automated Web Theme Configurator
Use this application to quickly create the styles for any Silk UI based Theme.
Google Analytics Plugin
Plugin that enables an application to use the Google Analytics capabilities to get data analysis, visualizations and reports.