OS_TextEditor
Stable Version 1.0.1
Published on 5 Feb by 
Created on 1 Feb
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
OS_TextEditor has no consumers.
Weekly Downloads 
Related Components
Google Drive Connector
OutSystems R&D
Google Drive Connector allows your OutSystems Applications to use the Google Drive REST API to interact with your files.
996
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.
7323
Google Maps
Labs
Google Maps is a Google Maps Javascript V3 API component, providing Web Blocks and Actions to add interactive maps, markers and directions, along with event driven functionality.
10639
More from Experts
Infrastructure Monitor
Experts
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
324
Automated Web Theme Configurator
Experts
Use this application to quickly create the styles for any Silk UI based Theme.
245
Google Analytics Plugin
Experts
Plugin that enables an application to use the Google Analytics capabilities to get data analysis, visualizations and reports.
2505