Intro

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!

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