Confiforms Drag and Drop: Index does not update after refreshing the page

[Ulrich Brinker]

I have used this example (ConfiForms form with drag and drop and REST API - Vertuna WIKI - TEST) to build a dragable form in Confiforms but unfortunately, the 'Ordernr' doesn't update after refreshing the page. 

When changing the order of the rows (by drag and drop) in my form and refreshing afterwards, it will fall back to the previous state. Is it possible that the rows remain in the new order?

[Alex Medved _ConfiForms_ · Accepted solution]

Hi @Ulrich Brinker 

Welcome to this community!

The question is tagged with cloud and confluence-cloud... I dont think there is a possibility to do what you want in the cloud.

The example you refer to is for server/dc

I have verified that example just now and it works fine for me - what exactly do you have? Let's see what is different

Alex

[Ulrich Brinker]

Hey @Alex Medved _ConfiForms_

thanks for your reply.

Since I never worked with Confluence/Confiforms before, I am the excact opposite of an expert. I can access my company's confluence page via browser, when I am connected into their network (VPN) and therefore, thought that it is cloud based, so maybe it is hosted on a server. I honestly don't know. Sorry.

However, I copied the sourcecode given under above mentioned link and get the non-persistant result described. After refreshing the page, the 'Ordernr' gets set back to the order number that I've assigned in the registration form beforehand. 

Is it possible that my form saves the new positions (new 'Ordernr') after Drag-and-Dropping them into the new position I need?

[Alex Medved _ConfiForms_]

Have you changed the code to match your form and page id?

[Ulrich Brinker]

I have changed the formname of the ConfiForms Form Definition from "f1" to "f".

Thats all I changed.

[Ulrich Brinker]

If its relevant, here is the codeblock I am using right now:

<p>form</p>
<ac:structured-macro ac:macro-id="4f63e526-ab65-4a59-8cf7-baff43e3bf29" ac:name="confiform" ac:schema-version="1">
<ac:parameter ac:name="formName">f</ac:parameter>
<ac:rich-text-body>
<p class="auto-cursor-target">
<br/>
</p>
<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>
<br/>
</p>
</ac:rich-text-body>
</ac:structured-macro>
<p>
<ac:structured-macro ac:macro-id="5f9ed3ad-449d-4a85-bdb7-d4b92262356c" 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="9cd1501b-4577-42ca-9f55-a219b455d126" 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">numberhidden</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>
<br/>
</p>
</ac:rich-text-body>
</ac:structured-macro>
<p class="auto-cursor-target">
<br/>
</p>
<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>
<p class="auto-cursor-target">
<br/>
</p>

[Alex Medved _ConfiForms_]

The code uses page id 12222999, which is the id of the page where the example is located.

You need to adjust it to match yours

And it also uses form name f1 (in the code)

f=f1

So, if you changed that you need to adjust that as well.

[Ulrich Brinker]

Thank you very much, it worked. 

I had to change this URL in the source code:

https://xxx.yyy.com/ajax/confiforms/rest/update.action?pageId=1122486467&f=f&q=id:

whereas xxx and yyy is the URL of my institution and 1122486467 the PageID for my specific page.

At the end of the URL I changed "f=f1" to "f=f" because I renamed the "Confiforms form definition Form Name" from "f1" to "f". 

[Kire Trajkovski]

Hi @Alex Medved _ConfiForms_ ,

Can you help me convert the ConfiForm into html, so I can add a script for drag&drop?
What I see is only a confiForm section with confiForm fields within, but not sure how can I edit the html of the exact same form. 

[Alex Medved _ConfiForms_]

Do you have an HTML macro installed/enabled in your Confluence instance?

[Kire Trajkovski]

Yes, but how to translate a confiForm form to confiForm Plain, do I have to learn confiForm from scratch?

[Alex Medved _ConfiForms_]

I am not sure I understand - what is "confiForm Plain"? What do you want to "translate"?

[Kire Trajkovski]

thanks for the prompt reply. Sorry I though I put the whole context. 

My goal is to have drag&drop functionality on the confiForm when I open it with edit and this is applied on the original (source) form. Currently they are build with confiForm form and confiFields not with HTML, but for this (judging on the answer above) I need to have HTML and javascript.

Let me know how can I do this on the easiest way possible.

[Alex Medved _ConfiForms_]

There is no need to rebuild anything in HTML and javascript. Why?

I am not following...

The configuration shared here earlier is a storage format that you can take and put on your Confluence instance to replicate the example immediately

It contains the configuration of the form and some extra bits that are put inside the HTML macro that enable the drag and drop functionality

[Kire Trajkovski]

Ok, so my current setup with confiForms which is just UI based using confiFields is not working with drag&drop of the rows which for me means a priority of the things in that table.

So, in order to prioritise the work stored in that source table and avoid sequential number, 1,2,3, etc., I would like to simply drag&drop the form while in edit mode and this is saved somehow in the source table.

How can I do this?

[Alex Medved _ConfiForms_]

Do you have an HTML macro installed/enabled in your Confluence instance?

[Kire Trajkovski]

If you mean this, yes I have.

[Kire Trajkovski]

@Alex Medved _ConfiForms_ that's a screenshot from my macros

[Alex Medved _ConfiForms_]

Are you familiar with scripting and HTML?

You will need to a script that is shown in the earlier mentioned in the question page https://wiki.vertuna.com/spaces/TEST/pages/12222999/ConfiForms+form+with+drag+and+drop+and+REST+API

<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 span', ui.item.parent()).each(function (i) {
            var currentIndex = AJS.$(this).html();
            if (currentIndex != (i+1)) {
              var entryId = AJS.$(this).closest('tr').attr('confi-data-id');
              AJS.$.ajax({
          url: 'https://wiki.vertuna.com/ajax/confiforms/rest/update.action?pageId='+ AJS.Meta.get('page-id') +'&f=f&q=id:' + entryId + '&fv=ordernr:' + (i+1),
          type: "GET",
                async: true,
                cache: false,
          success: function (data) {
           
          }  
     });
            }
            AJS.$(this).html(i + 1);
        });
    };

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

And adjust it a bit to fit your form (page and fields, and the server (url)) and set up (if you dont have the same as in the example)

Alex

[Kire Trajkovski]

I am familiar with HTML and javascript. 

Last questions ...

The URL base url should be my company one?
 - If yes, do I need a specific setup for the ajax call, or it should work by default?

Is the table selector correct, tried the log below and it's returning me 0 elements.
Also does this applies on the source table or on the one in edit mode?

console.log(AJS.$(".cf_f_table tbody"));

[Alex Medved _ConfiForms_]

- It should be to your server, form name should match

- does your form name is "f"?

[Kire Trajkovski]

I managed to make it working, thanks.

One final question, since I have an edit on a form, when I open the edit mode (confiform Form), the order is not respected on how I sorted the records from the source table by the table view (confiform Table) which I made sortable.

It seems that it does only fetch + ORDER BY "StackRank" DESC.
Any clues how to fix this so the same order is applied in the edit form below?

[Alex Medved _ConfiForms_]

Form's admin UI always sorts data by "created DESC". It has no idea about your "stack rank"

Create a TableView over your data and set it to be sorted by the stack rank

[Kire Trajkovski]

Will try that, thanks.

In the meantime, is there a way to make the numbering update with the position like it's on the demo you've shared?

Also, the order is not saved, after a page reload, it resets to default, I guess 'created ASC'. This is why I have the ajax call right, but it's not saved for some reason. Any ideas?

[Alex Medved _ConfiForms_]

The demo we have saves the order correctly. 

[Kire Trajkovski]

I just revisited the demo. It's not saving the order permanently, it returns "302 Found". After I refresh the page the order is back to defaults, not in the order I created.But for me there is no ajax call happening and also no console error. Any clues?

[Kire Trajkovski]

I fixed the Ajax call and it's returning 200 OK, but still not permanently keeping the order. Can you just confirm that the reordering should be permanent change so I don'w waste my time implementing it if that's not the case?

[Alex Medved _ConfiForms_]

Of course it is permanent, as this is exactly what the API calls do - they persist the data to the form. 

What do you have now?

[Kire Trajkovski]

So here is what it's working:
- sortable

- dynamic order number just like on the demo

Not working:

- keeping the order permanently, after reorder and reload the page the order is gone even though the ajax call is 200 OK

[Alex Medved _ConfiForms_]

HOW do you have it configured?  Could you share your configuration? 

Otherwise I cannot help you - the demo on our wiki works, the code I have shared with you - works... What code and the form configuration do you have - I have no idea

[Kire Trajkovski]

I am not sure what you mean by "configured"? Do you mean the form config or the JS code? If form, how can I share all that here?

[Alex Medved _ConfiForms_]

The storage format of the page or at least a screenshot from the editor (where I can see the form definition and field definitions) with full code you have in the HTML macro