Using values from ConfiForms in custom Javascript in Confluence

This is the documentation for ConfiForms Server/Data Center app

However, this might also work for ConfiForms cloud and in most cases it does. But please see this page to understand the differences between server and cloud versions of the ConfiForms app.

In this tutorial you will learn how to use values stored in ConfiForms form in Javascript, directly on your Confluence page.

We will use built-in HTML macro (disabled by default in Confluence), but you can do the same thing using Confluence custom User Macro.

If you are new to ConfiForms, please take a few minutes to read the Basic concepts Guide, or go through the video tutorial on that page.

ConfiForms ListView macro is quite powerful tool, it allows you to have custom layouts for your content and have dynamics of ConfiForms merged together.

This is done as usual by using ConfiForms Field macros and referencing the form fields with styling you need.

But there is more to it. ConfiForms ListView actually supports referencing fields data using the approach used in IFTTT macro or by using a

[entry.fieldname]

notation. And this means we can easily put the values inside the script blocks without ruining it with unnecessary tags.

So, we start with simple form definition, will have just one field to store text and will give it a name - mytext

Then we add a simple Javascript function which adds the content to some "div" element

It will add a "msg" to "listsContent" div element and will add it as lozenge (AUI element)

And the last bit is configuration of the ConfiForms ListView together with HTML macro

This renders a button with a click handler to execute the function "showMessage" and the value is taken from the ConfiForms Field named "mytext". See [entry.mytext] bit...

So the end result looks like this: When admin UI is closed and "Say it!" button not pressed

And when Admin UI is opened and "Say it!" button is pressed

This tutorial is just a demonstration of techniques, and has many improvement points. The intention is to show the technique which can be used to help you to get the most of ConfiForms

Full storage format for the solution is here

<ac:structured-macro ac:macro-id="410266f2-68ba-4623-a800-cc8ce9f642e2" ac:name="confiform" ac:schema-version="1">
  <ac:parameter ac:name="formName">lists</ac:parameter>
  <ac:rich-text-body>
    <p>
      <ac:structured-macro ac:macro-id="3264aa5c-1076-4f06-8d56-3b133f3cff48" ac:name="confiform-field-definition" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">mytext</ac:parameter>
        <ac:parameter ac:name="fieldLabel">My Text</ac:parameter>
        <ac:parameter ac:name="type">text</ac:parameter>
      </ac:structured-macro>
      <ac:structured-macro ac:macro-id="1855b42d-ccf2-40d6-ac6a-2cd112057d3e" ac:name="confiform-entry-register" ac:schema-version="1">
        <ac:parameter ac:name="atlassian-macro-output-type">INLINE</ac:parameter>
        <ac:rich-text-body>
          <p> </p>
        </ac:rich-text-body>
      </ac:structured-macro>
    </p>
  </ac:rich-text-body>
</ac:structured-macro>
<ac:structured-macro ac:macro-id="ebde5948-c9d4-490a-b0d2-b4e8aee7ccca" ac:name="html" ac:schema-version="1">
  <ac:plain-text-body><![CDATA[  <div id="listsContent"></div>
  <script type="text/javascript">
    function showMessage(msg) {
       AJS.$('#listsContent').html('<span class="aui-lozenge aui-lozenge-success">'+msg+'</span>'); 
    }
  </script>]]></ac:plain-text-body>
</ac:structured-macro>
<p> </p>
<p> </p>
<ac:structured-macro ac:macro-id="246ece23-d9db-4c2b-a344-864d6d68f049" ac:name="confiform-list" ac:schema-version="1">
  <ac:parameter ac:name="formName">lists</ac:parameter>
  <ac:rich-text-body>
    <ac:structured-macro ac:macro-id="1e5a17a3-d7e3-43cf-8987-8a731c68e4a7" ac:name="html" ac:schema-version="1">
      <ac:plain-text-body><![CDATA[<button class="aui-button submit" type="button" onclick="showMessage('[entry.mytext]')">Say it!</button>]]></ac:plain-text-body>
    </ac:structured-macro>
  </ac:rich-text-body>
</ac:structured-macro>

As always, feel free to contact us at vertuna(at)vertuna.com if you have any questions or need support around ConfiForms plugin

Space shortcuts

Child pages