Workaround for maximum 25 data types

  • Created: May 11, 2017
  • Author: Nollymar Longa
  • Title: Java Developer
  • Company: dotCMS

Description

The idea is to create additional fields using a custom field and save their values as a JSON object into the custom field. This idea was suggested by a client in a Bootcamp session. I implemented it using Velocity. The Velocity code included creates three input fields using a custom field, then it saves the input fields values as a json object into the custom field. As a simple test, you can add a custom field to the News content type as defined here (using the attached velocity code): https://dotcms.com/docs/latest/custom-field

Code

 
 
 
 
 
 
<script>
    var jsonObj = { 
      "extendedField1"  :  "First field", 
      "extendedField2"  :  "Second field", 
      "extendedField3"  :  "Third field" 
    }
    
    if (document.getElementById('test').value != ''){
        jsonObj = JSON.parse(document.getElementById('test').value);
    }
	function myButtonClick(){
		document.getElementById('test').value=JSON.stringify(jsonObj);
		document.getElementById('customValue').innerHTML=JSON.stringify(jsonObj);
	}
</script>
 
 
 

    <input type="text" id="extendedField1" /></br>    
    <script type="text/javascript"> 
        document.getElementById("extendedField1").value = jsonObj["extendedField1"];
        
        document.getElementById("extendedField1").onblur = function() {
          jsonObj["extendedField1"] = this.value;
        };
    </script>
    <input type="text" id="extendedField2" /></br>    
    <script type="text/javascript"> 
        document.getElementById("extendedField2").value = jsonObj["extendedField2"];
        
        document.getElementById("extendedField2").onblur = function() {
          jsonObj["extendedField2"] = this.value;
        };
    </script>
    <input type="text" id="extendedField3" /></br>    
    <script type="text/javascript"> 
        document.getElementById("extendedField3").value = jsonObj["extendedField3"];
        
        document.getElementById("extendedField3").onblur = function() {
          jsonObj["extendedField3"] = this.value;
        };
    </script>

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