How To Add Save As Draft Button in JOGET


Welcome to practice house.  in this post, I will share with you How To Add Save As Draft Button in JOGET.

First of all, let’s have a clear concept about this that why we want this save as draft button. your perception might be different.

Scenario: We want to save as draft button in our first form. when user will add some fields and then they will not submit the form they want to save first. after that, they want to edit the form and they will submit. The complicated part is both forms will be our first form means this form is connected with the run process. so we will save our data only and later we will start our process.

Let’s Start:

    1.  in our first form, we need two hidden fields
      ID: id , default Value: #requestparam.recordId# (Using Hash Variable)
      ID: link, default Value:  all_ext_draft (data list ID)joget hidden field

the id field we will use to store our id and link field we will use to redirect.

2. in this same form, we will take a section. we will navigate Edit Section -> Data Binder -> Bean Shell Form Binder and then add this code. in the code line no 26,27, you use your section id name or you can keep the section ID as sectionSaveAsDraft.

change your section ID name in the mentioned line: 26 & 27 line

script += "$(\"#sectionSaveAsDraft\").find(\".form-cell\").prependTo(\"#section-actions .form-column\");";
script += "$(\"#sectionSaveAsDraft\").remove();";

Code For Bean Shell Form Binder :

3. in the list of our draft, we will use a hyperlink to view our draft. in the link, we will use our runProcess id from the userview section. inside our SQL Query we will create this.


'<a href="runProcessIdName?recordId=',,'">View</a>'

this record id we will catch through our id hidden filed using the hash variable of #requestParam.recordId#

4. we already saved our data so Now we want to load that data whenever our user click the view button in our data list. To load our data we will use Bean shell form binder into our first form. Navigate to form properties -> advanced under data binder section choose bean shell form binder for load binder. Then add this code into your load binder and you are good to go.

FYI: JOGET Knowledgebase already have the solution but it will not work properly if you have a grid in your form. it will not be able to grab the grid data from different table alongside your main table. in this case, if you use my way of doing then you will get your all the data even if it’s from different table also.

Thanks for reading this post. I already told you that your perception might be different Still if you have any question or suggestion about this save as draft button in joget please comments below I will love to hear from you.

Leave a Reply

1 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
1 Comment authors
Anna Kieu Recent comment authors
newest oldest most voted
Notify of
Anna Kieu
Anna Kieu

Thank you very much for this one. You have provided an nice article!