Page History

Info
This page demos how to make a drag and drop table, and make use of REST APIs

Warning
This demo will not work when used by anonymous users, as it uses REST APIs to update the records stored (changing their order). And this is not allowed for anonymous users, as anonymous users don't "own" a record and therefore the update will not happen

form itself

ConfiForms Form Definition

formName	f

titleTitletext

ordernrOrderNrnumber

ordernr=([entry._count]+1)Lookup and set valuef:12222999

records

ConfiForms TableView

formName	f
sort	ordernr ASC

ordernr

title

Source

HTML

<script>
 
var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index) {
        AJS.$(this).width($originals.eq(index).width())
    });
    return $helper;
},
    updateIndex = function(e, ui) {
        AJS.$('td.cf_ordernr', ui.item.parent()).each(function (i) {
            AJS.$(this).html(i + 1);
        });
 
		AJS.$(".cf_f_table tbody").find('tr').each(function(i, tr){
			var entryId = AJS.$(this).attr('confi-data-id');

			AJS.$.ajax({
        		url: 'https://wiki.vertuna.com/ajax/confiforms/rest/update.action?pageId=12222999&f=f&q=id:' + entryId + '&fv=ordernr:' + (i+1),
        		type: "GET",
                cache: false,
        		success: function (data) {
         		
        		}  
			});
        });
    };

AJS.$(".cf_f_table tbody").sortable({
    helper: fixHelperModified,
    stop: updateIndex
}).disableSelection();
 
 
</script>

Warning

You will need to change the pageId parameter and the server URl in this line

Code Block
url: 'https://wiki.vertuna.com/ajax/confiforms/rest/update.action?pageId=12222999&f=f1&q=id:' + entryId + '&fv=ordernr:' + (i+1),

Expand

title	Click here to expand the source

Code Block

<p>form</p>
<ac:structured-macro ac:macro-id="fcf72246-a695-44d5-b265-b3991503ecf3" ac:name="confiform" ac:schema-version="1">
  <ac:parameter ac:name="formName">f1</ac:parameter>
  <ac:rich-text-body>
    <ac:structured-macro ac:macro-id="6b21d235-3cb2-4f1c-b95c-1a7b09df9071" ac:name="confiform-entry-register" ac:schema-version="1">
      <ac:rich-text-body>
        <p> </p>
      </ac:rich-text-body>
    </ac:structured-macro>
    <p>
      <ac:structured-macro ac:macro-id="76d1b01f-667b-4025-86a7-876f87dcdf3d" ac:name="confiform-field-definition" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">title</ac:parameter>
        <ac:parameter ac:name="fieldLabel">Title</ac:parameter>
        <ac:parameter ac:name="type">text</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="82dec850-ce96-4cd6-8cf9-47e641e8904f" ac:name="confiform-field-definition" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">ordernr</ac:parameter>
        <ac:parameter ac:name="fieldLabel">OrderNr</ac:parameter>
        <ac:parameter ac:name="type">number</ac:parameter>
      </ac:structured-macro>
    </p>
  </ac:rich-text-body>
</ac:structured-macro>
<p>records</p>
<ac:structured-macro ac:macro-id="4cc00cf5-1070-4a28-824f-b0d7ec842421" ac:name="confiform-table" ac:schema-version="1">
  <ac:parameter ac:name="formName">f</ac:parameter>
  <ac:parameter ac:name="sort">ordernr ASC</ac:parameter>
  <ac:rich-text-body>
    <p>
      <ac:structured-macro ac:macro-id="c3b75cf6-477a-49b2-9f8e-d9267c81dceb" ac:name="confiform-field" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">ordernr</ac:parameter>
      </ac:structured-macro>
    </p>
    <ac:structured-macro ac:macro-id="33d8e448-f88d-4f62-94b7-05ba87601181" ac:name="confiform-field" ac:schema-version="1">
      <ac:parameter ac:name="fieldName">title</ac:parameter>
    </ac:structured-macro>
    <p> </p>
  </ac:rich-text-body>
</ac:structured-macro>
<ac:structured-macro ac:macro-id="c0a424df-5b20-486c-8045-71b66e9e9814" ac:name="html" ac:schema-version="1">
  <ac:plain-text-body><![CDATA[<script>
 
var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index) {
        AJS.$(this).width($originals.eq(index).width())
    });
    return $helper;
},
    updateIndex = function(e, ui) {
        AJS.$('td.cf_ordernr', ui.item.parent()).each(function (i) {
            AJS.$(this).html(i + 1);
        });
 
		AJS.$(".cf_f_table tbody").find('tr').each(function(i, tr){
			var entryId = AJS.$(this).attr('confi-data-id');
			AJS.$.ajax({
        		url: 'https://wiki.vertuna.com/ajax/confiforms/rest/update.action?pageId=12222999&f=f1&q=id:' + entryId + '&fv=ordernr:' + (i+1),
        		type: "GET",
                cache: false,
        		success: function (data) {
         		
        		}  
			});
        });
    };
AJS.$(".cf_f_table tbody").sortable({
    helper: fixHelperModified,
    stop: updateIndex
}).disableSelection();
 
 
</script>]]></ac:plain-text-body>
</ac:structured-macro>

Page tree

Versions Compared

Old Version 29

New Version 30

Key

form itself

records

Source