Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Info
Excerpt

This page demonstrates how to use ConfiForms REST API with a bit of custom scripting to enable quick feedback form


We have a very simple form

Image Added


With little bot of scripting to build custom UI for ConfiForms form

Image Added



ConfiForms Form Definition
formNamefeedbackForm

feedbackFeedbackgoodbadcheckbox

commentCommenttextarea

...

 

 

 

HTML
 
 
 

 

Image Removed

 

...

HTML
<img src="https://wiki.vertuna.com/download/attachments/11862271/thumbs-up.png?api=v2" id="thumbsup" style="cursor:pointer"/>
HTML
<img src="https://wiki.vertuna.com/download/attachments/11862271/thumbs-down.png?api=v2" id="thumbsdown" style="cursor:pointer"/>
<form class="aui" style="display:none" id="fform">
<textarea id="mycomment" class="textarea" cols="7" rows="4"></textarea><br/><input type="button" class="aui-button" value="Send" id="sendcommneg"/>
</form>

And some glueing code to link these parts together. See storage format below for the complete solution

HTML
<script type="text/javascript">
  AJS.toInit(function() {
	AJS.$('#thumbsup').click(function(){
       AJS.$.ajax({
        url: 'https://wiki.vertuna.com/ajax/confiforms/rest/save.action?pageId=11862271&f=feedbackForm&feedback=true',
        type: "GET",
        success: function (data) {
         AJS.$('#thankumsg').show();
		 window.setTimeout(function () {
  		 	AJS.$("#thankumsg").fadeOut("slow");
		 }, 2000);
        }  
		});
    });
 
    AJS.$('#thumbsdown').click(function(){
    	AJS.$('#fform').show();
		AJS.$('#mycomment').focus();
    });
 
	AJS.$('#sendcommneg').click(function(){
		AJS.$('#fform').hide();
       AJS.$.ajax({
        url: 'https://wiki.vertuna.com/ajax/confiforms/rest/save.action?pageId=11862271&f=feedbackForm&feedback=false&comment=' + AJS.$('#mycomment').val() ,
        type: "GET",
        success: function (data) {
         AJS.$('#thankumsg').show();
		 window.setTimeout(function () {
  		 	AJS.$("#thankumsg").fadeOut("slow");
		 }, 2000);
        }  
		});
    });
 
  });
</script>
 
<div id="thankumsg" style=" display:none">
  <div class="aui-message aui-message-info closeable shadowed success">
    <p>Thank you for your feedback</p>
  </div>
</div>

Storage format for the solution

Code Block
<ac:structured-macro ac:macro-id="016628d1-7649-46d0-9da1-738e6db4ef84" ac:name="confiform" ac:schema-version="1">
  <ac:parameter ac:name="formName">feedbackForm1</ac:parameter>
  <ac:rich-text-body>
    <p>
      <ac:structured-macro ac:macro-id="14193c01-7a5a-4de2-9301-c197f531d755" ac:name="confiform-field-definition" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">feedback</ac:parameter>
        <ac:parameter ac:name="fieldLabel">Feedback</ac:parameter>
        <ac:parameter ac:name="values">good</ac:parameter>
        <ac:parameter ac:name="extras">bad</ac:parameter>
        <ac:parameter ac:name="type">checkbox</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="bf9647d3-e1ef-4774-a87d-b2f53bc1497b" ac:name="confiform-field-definition" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">comment</ac:parameter>
        <ac:parameter ac:name="fieldLabel">Comment</ac:parameter>
        <ac:parameter ac:name="type">textarea</ac:parameter>
      </ac:structured-macro>
    </p>
  </ac:rich-text-body>
</ac:structured-macro>
<table style="width: 100.0%;border: 0;">
  <tbody>
    <tr>
      <td style="text-align: center;border: 0;">
        <ac:structured-macro ac:macro-id="86a09ce9-422e-4bbd-9cd6-b74fafd4f9a1" ac:name="html" ac:schema-version="1">
          <ac:plain-text-body><![CDATA[<img src="https://wiki.vertuna.com/download/attachments/11862271/thumbs-up.png?api=v2" id="thumbsup" style="cursor:pointer"/>]]></ac:plain-text-body>
        </ac:structured-macro>
      </td>
      <td style="text-align: center;border: 0;">
        <ac:structured-macro ac:macro-id="fe93e240-e8d2-4e97-b73b-3a271c12cefa" ac:name="html" ac:schema-version="1">
          <ac:plain-text-body><![CDATA[<img src="https://wiki.vertuna.com/download/attachments/11862271/thumbs-down.png?api=v2" id="thumbsdown" style="cursor:pointer"/>
<form class="aui" style="display:none" id="fform">
<textarea id="mycomment" class="textarea" cols="7" rows="4"></textarea><br/><input type="button" class="aui-button" value="Send" id="sendcommneg"/>
</form>]]></ac:plain-text-body>
        </ac:structured-macro>
      </td>
    </tr>
  </tbody>
</table>
<ac:structured-macro ac:macro-id="a6aa6358-866e-432e-8a1e-c900fb56b0ce" ac:name="html" ac:schema-version="1">
  <ac:plain-text-body><![CDATA[<script type="text/javascript">
  AJS.toInit(function() {
	AJS.$('#thumbsup').click(function(){
       AJS.$.ajax({
        url: 'https://wiki.vertuna.com/ajax/confiforms/rest/

...

save.action?pageId=11862271&f=

...

feedbackForm1&feedback=true',
        type: "GET",
        success: function (data) {
         AJS.$('#thankumsg1').show();
		 window.setTimeout(function () {
  		 	AJS.$("#thankumsg1").fadeOut("slow");
		 }, 2000);
        }  
		});
    });
 
    AJS.$('#thumbsdown').click(function(){
    	AJS.$('#fform').show();
		AJS.$('#mycomment').focus();
    });
 
	AJS.$('#sendcommneg').click(function(){
		AJS.$('#fform').hide();
       AJS.$.ajax({
        url: 'https://wiki.vertuna.com/ajax/confiforms/rest/save.action?pageId=11862271&f=feedbackForm1&feedback=false&comment=' + AJS.$('#mycomment').val() ,
        type: "GET",
        success: function (data) {
         AJS.$('#thankumsg1').show();
		 window.setTimeout(function () {
  		 	AJS.$("#thankumsg1").fadeOut("slow");
		 }, 2000);
        }  
		});
    });
 
  });
</script>
 
<div id="thankumsg1" style=" display:none">
  <div class="aui-message aui-message-info closeable shadowed success">
    <p>Thank you for your feedback</p>
  </div>
</div>]]></ac:plain-text-body>
</ac:structured-macro>
<p> </p>
<p> </p>