TEST : ConfiForms form with drag and drop and REST API

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

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

records

OrderNr

Title

1 test
2 Yes?
2 aaaa
3 place
4 me
5 reorder
6 hello
7 1
8 kkka
9 abc
10 arg
11 testorder9
12 1
13 test
14 test
15 wer
16 42
17 and
18 s
19 oi
20 xhxgf
21 екнке
22 123123412
23 987
24 dsss
25 css
26 5321
27 uo
28 teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
29 kj
30 ggggggggggggggggggggggg
31 wdfwdfw
32 abc
33 TTESTETETETETETET
34
35 m.
36 t

Source

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

url: 'https://wiki.vertuna.com/ajax/confiforms/rest/update.action?pageId=12222999&f=f1&q=id:' + entryId + '&fv=ordernr:' + (i+1),
Click here to expand the source
<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:structured-macro ac:macro-id="0f086456-1234-4143-bc47-80115ccce664" ac:name="confiform-field-definition-rules" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">ordernr=([entry.ordernr]+1)</ac:parameter>
        <ac:parameter ac:name="action">Lookup and set value</ac:parameter>
        <ac:parameter ac:name="values2">f:12222999</ac:parameter>
        <ac:parameter ac:name="values3">ordernr DESC LIMIT 1</ac:parameter>
      </ac:structured-macro>
  </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,
                async: false,
        		success: function (data) {
         		
        		}  
			});
        });
    };
AJS.$(".cf_f_table tbody").sortable({
    helper: fixHelperModified,
    stop: updateIndex
}).disableSelection();
 
 
</script>]]></ac:plain-text-body>
</ac:structured-macro>