Team Forms
Log in

Join the Team Forms community

Editable Content Component

Updated 2 months ago
TTom

This is Based on a Quoting System we would like to implement. Is it possible to enable Editing a content component during submission of a form similar to a text area? I would use a Text Area but I need it to remain as a certain Format.

I'm currently using Dynamic Fields to updated certain parts of the Content Component but sometimes we require Additional Information and changes to the Content Component per Quote

E
T
1 comment·4 replies
EErin Dwyer

Hi Tom,

The text area can be configured to use different editors (e.g. CKEditor and Quill). So, to achieve what you're describing you should use a text area component configured with the editor setting set to CKEditor. This is what the content component also uses to allow you to add content.

The steps below can be used to achieve this:

  1. Drag and drop a text area component into your form

  2. Within the components setting under the display tab set the Editor property to CKEditor

  3. Like all other components you can also set a default value for the text area or have its value dynamically updated.

Here's an example of the output.


TTom

Hey Erin,


Awesome, didn't know you could do this. but I'm now having trouble with the Dynamic Content not update, It is just saying the Line '' {{ data.clientname }} "

EErin Dwyer

To dynamically update the value of a text area based the response to another field you could use the "On Change" setting available in the logic tab. For example, let's say you have text field capturing a name and you want to display a hello message to that user in a text area, you could use the steps below:

  1. Open the settings for the component that will update the text area (not the text areas settings), in this case this is the name field.

  2. Within the logic tab locate open the "On Change" setting and add the following JavaScript to update the value of the text area. Note you will need to adapt the code below for your specific form/scenario.

JavaScript
instance.root.getComponent('message').setValue(`Hi ${data.name} 👋, how are you today?`)


Here is an example of the output:

TTom

Hey Erin, Dont think I can achieve what I'm after as that deletes the Default or any Data added into the Text Component when changes are made

TTom

Don't worry, Figured it out with a Custom Button Function

Plain Text
const clientNameKey = 'clientName';
const projectKey = 'project'; 
const quillComponentKey = 'Annex';

const clientName = data[clientNameKey] || '';
const project = data[projectKey] || '';

const quillComponent = instance.root.getComponent(quillComponentKey);

if (quillComponent) {
    let currentContent = quillComponent.getValue();
    currentContent = currentContent.replace(/{{clientName}}/g, clientName);
    currentContent = currentContent.replace(/{{project}}/g, project);
    quillComponent.setValue(currentContent);
  }