Implement Core Bridge Library for Custom Fields

[oidacra]

Parent Issue

#31129

Task

Develop the foundational bridge library to enable communication between Custom Fields and the Angular form system, including:

• Set up initial bridge library structure following existing examples
• Implement iframe-parent communication by integrating DotCustomFieldApi
• Create core API methods for field manipulation (getters/setters)
• Develop field registration system
• Create comprehensive unit tests for all bridge functionality

Acceptance Criteria

• Bridge library successfully initialized and structured
• DotCustomFieldApi properly integrated for iframe-parent communication
• Core API methods implemented and functional:
• • Field value getters and setters working
• • Field registration system operational

Proposed Objective

Technical User Experience

Proposed Priority

Priority 2 - Important

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

No response

Assumptions & Initiation Needs

No response

Quality Assurance Notes & Workarounds

No response

Sub-Tasks & Estimates

No response

[github-actions]

PRs:

• Add bridge to use form with Edit Contentlet DOJO and edit Contentenlet Angular #31201
• feat(edit-content-bridge) add small tweeks #31255

[oidacra]

Notes for QA

• Double check if the docker image generated includes the build JS library in the Edit Content Dojo http://localhost:8080/html/js/legacy_custom_field_bridge/edit-content-bridge.js
• Use a VTL and it needs work in New Edit Content and Old Edit Content without problems.

text-count.vtl

<style>
    #${fieldId}Count_tag{
        display: none;
    }
    .countWrapper {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        color: #6c7389;
        font-size: 0.875rem;
        line-height: 0.875rem;
        margin: -10px 10px 20px 10px;
    }
    .maxChar {
        padding: 0 5px;
    }
</style>

<div class="countWrapper">
    <div id="${fieldId}-counter-text">
        <span id="charactersRemaining-${fieldId}">$maxChar</span> characters
    </div>
    <div>Recommended Max $maxChar characters</div>
</div>

<script>
    DotCustomFieldApi.ready(() => {
        function updateCharacterCount() {
            const textEntered = DotCustomFieldApi.get('${fieldId}') || '';  
            const counter = textEntered.length;
            const countRemaining = document.getElementById('charactersRemaining-${fieldId}');
            const counterText = document.getElementById('${fieldId}-counter-text');
            
            countRemaining.textContent = counter;
            counterText.style.color = counter <= $maxChar ? "#6c7389" : "red";
        }

        // Initial count
        updateCharacterCount();

        // Watch for changes
        DotCustomFieldApi.onChangeField('${fieldId}', () => {
            updateCharacterCount();
        });
    });
</script>

[hmoreras]

Pass internal QA: The library by itself is working, for reference, based on a example of the current documentation of a custom field https://www2.dotcms.com/docs/latest/custom-field :

Before

## This example uses a custom field that is called "test" and has the variable name "test"

## first we get the content (we have access to all our 
## velocity tools, including any custom ones that have been written


#set($content = $dotcontent.find($request.getParameter("inode")))


## then we write some ugly js to get and set the values on the edit content form - 
## the dom.id of the hidden field that stores the value is just the velocity variable name
## so watch out for js variable scope issues

<script>
    function myButtonClick(){
        var x = document.getElementById('test').value;

        if(x==undefined || x.length==0){
            x=0;
        }
        else{
            x=parseInt(x)+1;
        }
        document.getElementById('test').value=x;
        document.getElementById('customValue').innerHTML=x;
    }
</script>

## then we write out our user controls, displaying the value stored in the content object by default
## with a button (dojo styled) that calls our js

Custom Value: <span id="customValue">$!content.test</span> 
<button dojoType="dijit.form.Button" id="myButton" onclick="myButtonClick">Click me!</button>

After

## This example uses a custom field that is called "test" and has the variable name "test"

## first we get the content (we have access to all our 
## velocity tools, including any custom ones that have been written


#set($content = $dotcontent.find($request.getParameter("inode")))


## then we write some ugly js to get and set the values on the edit content form - 
## the dom.id of the hidden field that stores the value is just the velocity variable name
## so watch out for js variable scope issues

<script>
    function myButtonClick(){
        var x = DotCustomFieldApi.get('test');

        if(x==undefined || x.length==0){
            x=0;
        }
        else{
            x=parseInt(x)+1;
        }
        DotCustomFieldApi.set('test', x);
        document.getElementById('customValue').innerHTML=x;
    }

    DotCustomFieldApi.ready(() => {
        const value = DotCustomFieldApi.get('test');
        document.getElementById('customValue').innerHTML = value;
    });

</script>


## then we write out our user controls, displaying the value stored in the content object by default
## with a button (dojo styled) that calls our js

Custom Value: <span id="customValue">$!content.test</span> 
<button dojoType="dijit.form.Button" id="myButton" onclick="myButtonClick">Click me!</button>

Readme as reference: https://github.com/dotCMS/core/blob/main/core-web/libs/edit-content-bridge/README.md

Video

Screenshare.-.2025-01-31.11_25_11.AM.mp4

cc @jdcmsd

[oidacra]

We will tackle the Banner Contentype VTL's with 31286