2018-02-05
1.0.1
OutSystems Experts
All
All
Components, Widgets
[Overview]
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/
[Detail]
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": TEXTThe symbol/word to work with;
"configs": STRUCTURE"infoCollection": LIST OF TEXTList 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": TEXTTitle 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": TEXTThis 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": BOOLEANDefault value True
If value is False, it will replace info without symbol/word;
"pattern": BOOLEANDefault value False
If set to True, the inserted text has to start with the symbol/word
"higlightOnReplace": BOOLEANDefault 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.