Follow

Follow
Advanced Text Area

Advanced Text Area

TailwindUI Kit

Ahmad Sammour's photo
Ahmad Sammour
ยทOct 16, 2022ยท

2 min read

Table of contents

  • Intro
  • Parameters
  • Output Parameters

Intro

Advanced Text Area is a control that speeds up creating records.

Screenshot 2022-10-16 185923.png

Why advanced?

The control can be configured to let users attach files and set statuses

For installation follow the link here

Parameters

image.png

Control Key

This is a required input, and it must be unique if you use the control multiple times in the same screen

Button Label

Label of the button of the text area

Placeholder

Placeholder of the text area

ImgSrc

The source of the image, this will be passed to an "img" tag, so you can set a url or a base64 image

Profile Picutre

Display or hide the profile picture on the control

Options

The additional options the user can select from

For example: status of the record that will be created

For example: Sentiment indication, happy, neutral, unhappy

This is a JSON field, below is an example

[
   { "key": "complete", "label": "Complete", "imgSrc":"https://cdn-icons-png.flaticon.com/512/845/845646.png"},
   { "key": "pending", "label": "In progress", "imgSrc":"https://cdn-icons-png.flaticon.com/512/189/189792.png" },
   { "key": "cancel", "label": "Cancel", "imgSrc":"https://cdn-icons-png.flaticon.com/512/399/399274.png"}
]

Option Type:

{
  key:string; //required
  label:string; //required
  imgSrc:string; //image url of the option
}

Attach

To enable or disable attaching files with the control, the attached files are stored in an array in the Attached Files parameter

Attachment Options

Attaching configurations in json, refer to this link to see configurations options

{
    "allowMultipleFiles":true //enable multiple attachments
}

Output Parameters

Value

Entered text value

Option Selected

Select option key if any

Files Attached

Attached files by the user in array json object

Please refer to this link

[{"fileName":"thunder.svg","mimeType":"image/svg+xml","fileContent":"filecontent","fileSize":213}]
ย 
Share this