OS_TextEditor

Stable Version 1.0.1 (OutSystems 10)
Published on 05 February 2018 by 
Created on 01 February 2018
Details
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

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.

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)
Category
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.
Dependencies
OS_TextEditor has no dependencies.
Requirements
Platform
10.0.0.402
Database
All
Stack
All
Component Consumers
No consumers yet.
Weekly Downloads