Page tree

Playground and DEMO space

This is a playground and demo space for ConfiForms and ConfiDoc addons developed and supported by Vertuna LLC

Most pages provide a storage format for the demo, so you can use the free add-on from Atlassian Confluence Source Editor to import this configuration into your Confluence and see it in action

To import examples from the storage format on Confluence Cloud please see this page

Please note, all the examples here are provided without any obligation and may or may not be incomplete or may have bugs, and we provide NO SUPPORT for these examples and demos.

Simple demo to show how to use Javascript function with ConfiForms Field Definition Rule


We just add a counter to textarea field and track the user input (there is no validation here, it is just a demo on how to glue together ConfiForms  field definition rule with custom JavaScript function and how to access the form field)


Start typing something inside the text area below

Storage format

<ac:structured-macro ac:macro-id="cc63f296-c16b-49ac-ae4c-4f4df68a6c7a" ac:name="confiform-entry-register" ac:schema-version="1">
  <ac:parameter ac:name="embedded">true</ac:parameter>
  <ac:rich-text-body>
    <p>
      <br/>
    </p>
  </ac:rich-text-body>
</ac:structured-macro>
<ac:structured-macro ac:macro-id="4fd4a40e-d0a0-47b0-82f7-7f034a606568" ac:name="confiform" ac:schema-version="1">
  <ac:parameter ac:name="formName">myform1</ac:parameter>
  <ac:rich-text-body>
    <p>
      <ac:structured-macro ac:macro-id="abdd5765-8d68-4fc9-8d9f-715c68fdeddc" ac:name="confiform-field-definition" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">ta</ac:parameter>
        <ac:parameter ac:name="fieldLabel">ta</ac:parameter>
        <ac:parameter ac:name="type">textarea</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="24c415b4-ba74-429b-a651-cf9521913dab" ac:name="confiform-field-definition-rules" ac:schema-version="1">
        <ac:parameter ac:name="values">addCounter(formName, formId);</ac:parameter>
        <ac:parameter ac:name="action">Run custom JavaScript</ac:parameter>
      </ac:structured-macro>
    </p>
  </ac:rich-text-body>
</ac:structured-macro>
<ac:structured-macro ac:macro-id="3496b6cf-5467-45eb-a4db-0cdb4c0a423e" ac:name="html" ac:schema-version="1">
  <ac:plain-text-body><![CDATA[<script>  
function addCounter(formName, formId) {
  var taElem = AJS.$('#' + formId).find('#i_ta'); // find the "textare field" by name "ta"
  if (!taElem.hasClass('cfcounter')) {
   taElem.addClass('cfcounter'); // this is sort of a marker that tells if the "counter div" is initialized
   taElem.after('<div id="i_taCharNum">10 characters left</div>');

   // setup handler
   taElem.on("input", function(){
    var maxlength = 10;
    var currentLength = AJS.$(this).val().length;

	var charsLeft = maxlength - currentLength;
    AJS.$('#i_taCharNum').html(Math.max(0, charsLeft, charsLeft) + " chars left");
   });
  }
}  
</script>]]></ac:plain-text-body>
</ac:structured-macro>


  • No labels