Team Forms
Log in

Join the Team Forms community

Updated 3 months ago

Editable Content Component

Help
At a glance

The community member is trying to implement a quoting system and wants to enable editing a content component during form submission, similar to a text area, while maintaining a specific format. They are currently using dynamic fields to update parts of the content component, but sometimes require additional information and changes to the content component per quote.

Another community member suggests using a text area component configured with the CKEditor setting, which allows editing content similar to the content component. They provide steps to achieve this, including dragging and dropping a text area component into the form and setting the Editor property to CKEditor.

However, the original community member then encounters an issue with the dynamic content not updating, only displaying the line "{{ data.clientname }}". Another community member suggests using the "On Change" setting in the logic tab to dynamically update the value of the text area based on the response to another field.

The original community member indicates that this approach deletes the default or any data added into the text component when changes are made. Finally, the community member figures out a solution using a custom button function to replace the placeholders in the text component with the actual values.

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);
  }