Creating fields on demand within a content type

Product Discussions
,
1

How would you create a custom field in a content type that can add a new field in on demand? I’ve successfully was able to add text fields, but I’d like to add the block editor field as well.

Here’s what I have so far

<div id="dynamicFieldsContainer"></div>
<button id="addFieldButton">Add New Field</button>
<script>
let fieldCount = 0; // Initialize a counter for the fields

document.getElementById('addFieldButton').addEventListener('click', function() {
    fieldCount++; // Increment counter with each button press

    // Create a new paragraph element for the heading input
    const paragraph = document.createElement('p');

    // Create a new text field for heading
    const textField = document.createElement('input');
    textField.type = 'text';
    textField.placeholder = `Heading ${fieldCount}`; // Dynamic placeholder
    textField.name = `heading${fieldCount}`; // Unique name for the text field
    
    // Append the text field to the paragraph
    paragraph.appendChild(textField);

  
    // HOW DO I ADD THE BLOCK EDITOR HERE?
    
 
});


</script>
2

Hi Brad,

Welcome to the community.Can you please let me know if you rendering the content using headless mode or using traditional mode.

Thanks

3

traditional mode using the content type menu

4

Totally get the use case :+1: — unfortunately, you can’t dynamically add a real dotCMS Block Editor at runtime. It’s a content-type–level field (not a DOM component), and custom fields currently only support native HTML elements like inputs and textareas. For what is possible with custom fields, the docs here are a good reference: Custom Field | dotCMS Dev Site

5

can it be done with the wysiwyg editor?

6

Hi Brad,

I am afraid this is not possible since wysiwyg is not a native html element.