Custom field and key-value field storage

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

Custom field and key-value field storage

Fredrik Westermarck
As a beginner with dotCMS, dojo and VTL I find it as a bit of a challenge to find examples on how to do rather simple, and in my opinion, common use-cases. So in order to check if I'm on the right track and also in hope of getting some answers to what I still haven't been able to figure out myself I'll post here. :)

Oh, I'm using dotCMS 4.2.2. That might be good to know.

I want to have a content type with repeatable fields, but a key is only allowed to appear once per content and the user have a limited number of keys that can be added. The pool of keys that are allowed needs to be able to be updated is necessary. If I'll be more concrete in my example, I want to be able to add a finite number of links associated with predefined keys for the available sites.

To implement it I started out with the example found at https://dotcms.com/docs/latest/custom-field. Currently I have the following code in my custom field:

#set($content = $dotcontent.find($request.getParameter("inode")))
<script>
  document.getElementById('test_tag').style.display = 'none';
  document.getElementById('test_field').style.display = 'none';
  
  function change() {
    var valuesJson = JSON.parse(document.getElementById('test').value);
    var key = this.id;
    var value = this.displayedValue;
    if (value !== undefined && value) {
      valuesJson[key]=value;
    } else {
      delete valuesJson[key];
    }
    document.getElementById('test').value = JSON.stringify(valuesJson);
  }
</script>
  
<label for="facebook">Facebook:</label><input dojoType="dijit.form.ValidationTextBox" type="text" id="facebook" value="$!content.test.map.get('facebook')" onchange="change" invalidMessage="Must be a valid URL" regEx="(((http[s]?\:)?\/\/)|(^$))"/>
<label for="instagram">Instagram:</label><input dojoType="dijit.form.ValidationTextBox" type="text" id="instagram" value="$!content.test.map.get('instagram')" onchange="change" invalidMessage="Must be a valid URL" regEx="(((http[s]?\:)?\/\/)|(^$))"/>
<label for="youtube">YouTube:</label><input dojoType="dijit.form.ValidationTextBox" type="text" id="youtube" value="$!content.test.map.get('youtube')" onchange="change" invalidMessage="Must be a valid URL" regEx="(((http[s]?\:)?\/\/)|(^$))"/>
<label for="googleplus">Google+:</label><input dojoType="dijit.form.ValidationTextBox" type="text" id="googleplus" value="$!content.test.map.get('googleplus')" onchange="change" invalidMessage="Must be a valid URL" regEx="(((http[s]?\:)?\/\/)|(^$))"/>

It works fine using the key-value field test as the field that backs the custom field with the storage. Is this the recommended way of implementing this or might there be a alternate and better solution?

Now to my questions:
 1. I would like to validate of the values put into the input fields in order to be able to validate that the input is actually a valid URL. Only allowing an empty string, leading http://, https:// or //.
 2. How can I hide the HTML-elements related to the key-value field named test? Ideally I would like to hide the whole div with the class 'fieldWrapper' that is automatically created for the field 'test'.

Any help would be greatly appreciated.

Best regards,
Fredrik Westermarck

--
http://dotcms.com - Open Source Java Content Management
---
You received this message because you are subscribed to the Google Groups "dotCMS User Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/dotcms/28b366cd-647a-45c7-9072-70dfeaa8c033%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.