You are viewing limited content. For full access, please sign in.

Discussion

Discussion

Additional Action Buttons

posted on December 5, 2019 Show version history

So I noticed in this post that a feature request was given. In that post, I commented on my way of doing this as well. And while I still agree that this a much needed NATIVE feature. I have a way (if it was intentional by Laserfiche, great) to add as many action buttons as needed.

 

BE WARNED: This can make your process very complicated and if you don't know how to handle this it may be a good idea to limit your use of this.

 

Here goes:

To add an action button on top of the built-in 3 action buttons you need to mess with the DOM a little bit. I had originally added a button to the page and it still functioned as an action button. I then inserted the action button with JavaScript into the button area on the bottom of the page. From there I realized I could accomplish the same thing but while maintaining the functionality of the custom HTML field properties. Here are my code samples and some screenshots to make it easier to walk through it.

So first, the button's HTML code:

<input type="submit" class="newButton action-btn Submit" value="Save For Later" aria-labelledby="action" name="action">

I used an input element to match the other buttons that Laserfiche creates. The "newButton" class is so I can target that button specifically should I need to. The "action-btn" class is a built-in class that makes the button look like the other buttons. And the "Submit" class gives it the same look as the other buttons (we turn ours blue, but it stays the same based on the theme settings). The value is what shows on the button and what you will use in your "User Action" part of the process. The 'aria-labelledby="action"' is just a part of the other action buttons.

 

Now to add this to the bottom (and remove the blank space it leaves behind use the following JavaScript:

$(document).ready(function(){
  
  //Moves button from form to lower button wrapper and removes DIV that button was housed in
  $('.newButton').detach().appendTo($('.btn-wrapper:first'))
  $('#q2').remove();
  
})

 

This is all you need to move the button down and remove the space it was in. Keep in mind that .newButton is the class you set yourself, and #q2 is the container the button was in. These can vary based on your form. Also keep in mind the ":first" portion of the code. This is because Laserfiche adds an entirely separate btn-wrapper for the "Save as Draft" button. If you don't include the :first you will duplicate all of the buttons and add them behind the Save as Drafts button.

 

Now that's for a submission form. The HTML changes a little bit for a User Task form. The code for that is the following: 

<input type='submit' class='action-btn ellipsis Submit sendToHR buttons hidden' name='action' value='Send To HR'><br class='lf-responsive-navigation'>

Notice a few small changes to the HTML and a <br> element thrown in. Again we use an input HTML element to match the buttons. The class now has an ellipsis class and a hidden class (buttons is a custom CSS class I made). The important part of this is the hidden class. Laserfiche adds and removes the hidden attribute in any action button on the bottom if you have any pagination to your form. The button will hang out at the bottom if you don't start with it hidden. We also add the <br> element to this. This is because each of the buttons has a <br> element between them and also aids in the "navigation" of the bottom of the page.

 

Keep in mind that you can also now do as you please with these action buttons as you can set an individual ID or class to identify them with. For my form specifically, the one I created this on, I hide and unhide the buttons based on the user. This allows the initiator to only see the buttons I want them to and a specific group to see another set of buttons.

 

There is a lot of really neat things you can do with this if you know how to tweak the DOM and know a fair amount of JavaScript. The sky is the limit once you get to tweaking things, and now you have another tool in your toolbox.

 

Hopefully, that wasn't too much for anyone. I'll be happy to help anyone out with this and how to make it function correctly. I've got this to work on a few different forms and it's helped me reduce the number of forms I'm using on one of my processes. Good luck to anyone trying this out, it can be daunting to have extra buttons if you're used to only having 3. 

 

For the sake of image integrity, I've attached the photos I have since they are over the 1MB limit to put it in the post itself.

 

EDIT: I'd like to clarify a point that I didn't touch on enough. When adding the conditional expressions to your gateways the buttons will not list on your dropdown of actions. This is because Laserfiche Forms only recognizes buttons it made itself. To get around this (as shown in the pictures below) you need to add a blank "Last User Action = " expression and fill in the value of the button.

I show in the pictures below that the buttons I had added aren't listed in the dropdown, but the next two pictures after that show that you can type into the empty parenthesis the value of the button you are trying to use.

I can show what the flow looks like if anyone is interested (through the monitor tab). It will show what Forms would see when the custom action button is clicked.

Extra Action Buttons in Payroll Ticket.png
Extra Submit Buttons Process Path.png
Extra Submit Buttons Process Path1.png
Button in Form.png
Button in Form Result.png
9 0
replied on January 6, 2023

Forms 11 Update 3 has added support for more action buttons on user tasks.

You can see other changes of Forms 11 Update 3 from  https://support.laserfiche.com/kb/1014413/list-of-changes-for-laserfiche-forms-11-update-3 and get Forms 11 Update 3 from Laserfiche 11 package  https://support.laserfiche.com/kb/1014263/software-versions-and-fixes-included-in-the-laserfiche-11-download-package

2 0
replied on August 16, 2021

This is fantastic and addressed my problem!  Thanks Tanner for your brain power on this!

I had a little trouble with it so I created a step-by-step cookbook  based on the original post and additional comments for my benefit.  Maybe it will be a help to someone else:
 

Adding an Approval Process with four or more buttons
1.  Open Forms 
2.  Go to Design Mode (New Form + Form Approval template)
3.  Edit the Form that needs a 4th or more button (ex. "Starting Form")
4.  Click the Custom HTML to add that field to the canvas.
5.  Remove the test "Enter the text you want this field to display"
6.  Click the Html tab
7.  Go to the beginning of the line and paste the following:
<input type="submit" class="newButton action-btn Submit" value="Hold" aria-labelledby="action" name="action">
8.  Go to the ending of the line and remove the following:
<p><br></p>
9.  Replace the variable in value with the name of the button that you are adding (ex. "Hold")
10. Click Done  -  you should now see a button on the canvas with the name that you gave it.
11. Click the "CSS and JavaScript" tab at the top of the canvas.
12. Click in the JavaScript section and past the following:
$(document).ready(function(){
  //Moves button from form to lower button wrapper and removes DIV that button was housed in
  $('.newButton').detach().appendTo($('.button-wrap:first'))
  $('#q2').remove();
})  
13. Click the "Save" button

At this point the new button(s) will not show for the originator - only the "Submit" button (discussed below).

Changes to the Process Diagram
1.  Click Process Diagram
2.  Create a User Task from the "Message Start Event"
3.  Double-click the User Task to show the details
4.  Under the General tab name the process (ex. "Approval") and assign users or groups for the approval
5.  Click the Form tab & select the form that you were working on (ex. "Starting Form)
6.  Select the Action Buttons that you want to show 
7.  Click the Outflows tab and add the condition for each button.
8.  Click the User Task (ex. "Approval") 
9.  Click the arrow and select "Gateways" - then "Exclusive Gateway"
10. Click the Exclusive Gateway that you just created and add an outflow (ex "End Event")
11. Double-click the Exclusive Gateway and select outflow.
12. Add a Path Name (ex. Hold) the add the text "Hold"
13. Click the Conditional Expression & add the name of the button (ex. "Hold")
14. Click the drop-down and select "Last User Action" then click Insert
15. Edit the condition from: /dataset/_fs_action=""  to /dataset/_fs_action="Hold"
where "Hold is the name of the button.
16. Double-click the User Task (ex "Approval") & click on the Outflows tab
17. Edit the condition from: /dataset/_fs_action=""  to /dataset/_fs_action="Hold"
where "Hold is the name of the button.
18. Click Save
19. Click "Process Options" under Setting and select "Published"
20. Click Save


Test - Start the process (the form) and click "Submit"
Have the user assigned to approve go to their Forms Inbox and select this test form.
The form will display with the additional button(s).

Note:  if you wanted an additional button so that the originator can select a choice other than 
       Submit( the submission form), follow the above steps but modify step 12. Click in the JavaScript section and past the following:
$(document).ready(function(){
  //Moves button from form to lower button wrapper and removes DIV that button was housed in
  $('.newButton').detach().appendTo($('.btn-wrapper:first'))
  $('#q2').remove();
}) 

btn-wrapper is used for the initation form.
button-wrap is used for the user task (approval) form.
 

7 0
replied on August 16, 2021

That's awesome Chuck! I hope it helps someone out as well. Thanks for adding this!

2 0
replied on November 15, 2021

I just used this to get myself out of a logical corner I'd painted myself into. Thanks for this. I was a bit concerned I'd have to implement a more convoluted solution. Again thanks Tanner and Chuck!

0 0
replied on June 14, 2021

Would it be possible to get you to walk me through this process of adding a fourth Action Button to my form?

 

Dawn

 

0 0
replied on June 16, 2021

Sure, Dawn. If you have some time let me know your situation and I'll be happy to help. Thankfully a 4th button shouldn't complicate things too much. 

0 0
replied on June 16, 2021

I have a form which a Committee uses to approve or reject a candidate for their program on campus.  Right now the three buttons read Fully Admit, Admit with Conditions, and Reject.  What I need is a fourth button marked No Vote for when Committee members don't have to vote because a majority has already been reached.  Thank you!

0 0
replied on March 8, 2021 Show version history

I am tying to do this on the initiating form and it's just terminating when I click the added button or the default submit button and I'm not sure why. At first I thought it could because I had set up a 'normal' button on the second stage with the same value. So I changed the value from "Save to Repository" to "Save to Repo" to make sure the two buttons did not conflict with each other but It still is not working. I am using the default submit button and named it "Save Progress"

What they are wanting is if a team member is entering the data they have the option of saving directly to the repository or saving the progress and making the form available for another member of the team to pick up and add to the form.

 

My custom HTML

<input type="submit" class="saveToRepoButton action-btn Submit" value="Save to Repo" aria-labelledby="action" name="action">

My JavaScript (note I commented out the call that would be used if it was not an initial submission form)

$(document).ready (function () {

  /************************************************************************************/
  /*                      START: Move Additional Action Button                        */
  /* https://answers.laserfiche.com/questions/167540/Additional-Action-Buttons#183898 */
  /*                                                                                  */
  /* Moves button from form to lower button wrapper and removes DIV that button was   */
  /* housed in                                                                        */
  /************************************************************************************/
  /* used for initiation/submission form */
  $('.saveToRepoButton').detach().appendTo($('.btn-wrapper:first'));
  
  /* used after initiation/submission form */
//  $('.saveToRepoButton').detach().appendTo($('.button-wrap:first'));

  $('#q271').remove();  
  
  /************************************************************************************/ 
  /*                       END: Move Additional Action Button                         */
  /************************************************************************************/ 

}); /* END: $(document).ready (function ()*/

Image is how I have the action set up

 

 

If I remove the added button my submit(Save Progress), works as expected and sends the from to the next step.

 

EDIT:

I'm not sure if this could be causing the issue but my form is a pagination form and I'm showing the buttons on each page using the code below

  /*******************************************************************************/
  /*                       START: show buttons on each tab                       */
  /*******************************************************************************/ 
  function showButtonWrapper() {
    /* used for initiation/submission form */ 
    $('.btn-wrapper input[type=submit]').removeClass('hidden');
    /* used after initiation/submission form */
    //$('.button-wrap input[type=submit]').removeClass('hidden');
    
  };  
  
  /* next button clicked */
  $(document).on('click','.cf-next-btn ',function(){    
    showButtonWrapper()
  }); 

  /* Previous button clicked */
  $(document).on('click','.cf-prev-btn ',function(){    
    showButtonWrapper()
  });
  
  /* tab clicked */
  $('.cf-pagination-tabs li').click(function(){
    showButtonWrapper();
  }); 
  
  $('.cf-pagination-tabs li').eq(0).trigger('click'); 
  /*******************************************************************************/
  /*                        END: show buttons on each tab                        */
  /*******************************************************************************/

 

1 0
replied on March 8, 2021

Do you have access to the Monitor tab? I might be able to shed some light on it if you can get the Error Log text and if the Value of the button shows in the "Action" column of the process that terminated. Thanks!

1 0
replied on March 8, 2021

It looks like the action matches as far as the values it is showing. How would I find the error #/msg I can see variables tab but I don't see error listed there.

 

0 0
replied on March 8, 2021

Found the error msg....

 

Error 3/8/2021 1:28:44 PM
No condition should be set for the outgoing sequence flow of a start event "Form Submitted" (business process ID: 93, step ID: 20). [LFF5402-RemoveConditionFromStartFlow] Details: URL: Error: RemoveConditionFromStartFlow Date: 3/8/2021 1:28:44 PM (Central Standard Time) HTTP Status Code: 400 Business Process ID: 93 Instance ID: 2056 Business Process Name: HC: COVID-19 Daily Monitoring Log Stack Trace: Caught exception: Laserfiche.Forms.CommonUtils.Exceptions.LFFormsException Message: No condition should be set for the outgoing sequence flow of a start event "Form Submitted" (business process ID: 93, step ID: 20). [LFF5402-RemoveConditionFromStartFlow] at Laserfiche.Forms.Routing.StartEvent.GetAllSubsequentSteps(Int32 instanceId, Int32 processId, Int32 sourceStepId, IRoutingContext routingContext) at Laserfiche.Forms.Routing.RoutingContext.GetAllSubsequentRoutingSteps() at Laserfiche.Forms.Routing.RoutingDispatcher.GetSubsequentRoutingStepList() at Laserfiche.Forms.Routing.RoutingDispatcher.ExecuteSteps(Int32 processWorkerInstanceId, ActionType action, Int32 stepIdToAct, String comment) at Laserfiche.Forms.Routing.RoutingDispatcher.RunProcess(Int32 currentStepId, Int32 processWorkerInstanceId, Int32 processId, Int32 boundaryEventStepId, SubmissionDataSet inputData, Int32 mainProcessInstanceId, Int32 refMainProcessInstanceId, Int32 lastSubmissionId, PaymentParams paymentParams) at Laserfiche.Forms.Routing.RoutingEngineService.RunRouting(RoutingRequestParameters requestParam) at Laserfiche.Forms.Routing.RoutingEngineService.<>c__DisplayClass6_0.<StartRouting_Async>b__0()
0 0
replied on March 8, 2021

I'm not sure this would help but here is my process diagram so far.  Should I maybe have just the one path out of "From Submitted" and add an exclusive gateway and then check the action at that point and rout accordingly?

0 0
replied on March 8, 2021

I was just writing to ask about the process diagram. What you'll need to do is set an exclusive gateway that the start event flows into. Here's a picture of what yours should look like:

The exclusive gateway should be configured like this:

You can also set a condition for the "Save to Repository" path if you have something specific in mind, but when there are two paths and one has a condition and the other doesn't, having it as the default path can prevent unintended terminations or suspensions. 

 

This should fix the problem. The underlying issue wasn't actually the button, but the fact that the start event didn't like the condition paths coming directly from the event itself.

 

Let me know if this doesn't fix it and I'll see if I can find a different reason.

1 0
replied on March 8, 2021

Just an update got it working... adding the gateway. :) Thanks for your help!

1 0
replied on March 6, 2020

0 0
replied on March 6, 2020

I guess this is the part where I should ask what the cancel button is expected to do? Do you want it to "submit" the form but in a state of cancel? Or do you just simply want to close the form out completely? Or is there an ulterior motive behind it (maybe close the form but submit it with the fact that the user clicked the cancel button?

I'll make you some code to do what you need it to. I think the current way we're going about it is much more complicated then you need. I'll also explain what it does so you can learn a little bit about how I got to that code.

0 0
replied on March 6, 2020

I REALLY appreciate that.  I have created a "Menu" form that calls other forms with hyperlinks.  So, what I want the cancel button to do is Exit form without submitting anything.  In the message event I selected the redirect to website radio and put the URL to the "Menu" form.  So when I cancel out of the form I want it to redirect back to the menu.

0 0
replied on March 6, 2020 Show version history

Ok. So to save you any complications (both in the process diagram and the coding portion) I made this for you.

<input type="button" class="newButton action-btn Submit" name="action" value="Cancel" aria-labelledby="action" onclick="location.href='YOUR URL HERE';">

That is the same button your using now, but it will go to the URL you place in the appropriate spot. This closes out the form without submission and goes directly to the URL.

So if you want it to go back to the menu, put the menu URL in place and it will close the form and automatically go back to the menu. The nice thing about this way is that it won't clog up your monitor tab with processes that were canceled. 

 

As usual, let me know if this doesn't work.

 

EDIT: I should add real quickly, make sure to add the https:// or http:// to the URL or it will try to open the URL by placing it at the end of your forms URL.

1 0
replied on March 6, 2020

Beautiful.  Much easier and works great!

0 0
replied on February 18, 2021

Hi Tanner,

This is a wonderful thread and I've been using it to great effect however I'm having trouble now trying to get links to open as a result of the button click.

When I click the button it closes the form and returns to the forms inbox but doesn't open a new tab or even navigate within the currently open tab.

 

Here's the code I was using for the button within the custom HTML:
 

<input type="submit" class="newButton action-btn Reject" name="action" value="Project Drawings" aria-labelledby="action" onclick="location.href='https://www.google.co.uk';">

Here's the Javascript I was using to close the form:

$(document).ready(function()
{

//When the newButton classed button is clicked
$('.newButton').on('click', function()
   {

  $("*[required]").each(function()
      {  
    $(this).removeClass('required');
    $(this).removeAttr('required');
   
      }); 
   });
}); 

I tried opening the link via javascript in a workaround but that lead to a disaster with it opening 8 or so tabs so I'm hoping I can make the button do it just once.

0 0
replied on February 18, 2021

So, I'm not sure if I'm looking at the question wrong or I'm misunderstanding you but it looks like the JavaScript only attempts to remove the required portion of all the required fields.

It sounds like what your asking is that when someone clicks the button it closes the form and opens the link you specify, is that right?

I just want to make sure I understand before I give you something you can use. Thanks!

0 0
replied on February 27, 2020

Thank you for this info.  I applied your code but I have an issue.  When I go to configure the Sequence Flow, the Action is not listed.

 

0 0
replied on February 27, 2020

Excellent catch. I didn't highlight it but included a couple of pictures that showed it (I'll bold it for future cases). Since this is a "custom button" you have to add the value of the button yourself. Laserfiche only recognizes (in the backend) buttons that it creates itself.

The 2nd, 3rd, and 4th pictures show that they won't list them in the dropdown.

 

The fix for this is to add the Last User Action="" to the expression and fill in the value you set for the button inside the parenthesis. The value you place inside the parenthesis is the value="" part of the button. I say this because it's possible to set the value to something other than what is displayed on the button itself.

 

If any of that is confusing or you can't figure it out, just let me know.

1 0
replied on February 27, 2020

Got it.  You have to insert it first then edit it.  I was trying to edit the value in the field before I inserted it.  Thank you!!!

0 0
replied on February 27, 2020

Not a problem. Just glad I could help!

1 0
replied on February 27, 2020

Getting an error when clicking new button.  Here is the process

Seq Flow

Error

0 0
replied on February 27, 2020

Html

<input type="submit" class="newButton action-btn Submit" value="Cancel" aria-labelledby="action">

0 0
replied on February 27, 2020 Show version history

That might be my bad, or it could be a new change to the back-end. Add  name="action" to your HTML. It got it to work on my quickly put together process. I'll edit the code above now.

EDIT: Actually it was my bad, I have name="action" on all of the other code portions. I must've just missed it on the first one.

1 0
replied on February 27, 2020

Bingo -- Thank you!

0 0
replied on February 27, 2020

It's kind of weird it gave an error though. My quick mockup didn't pop an error it just went down the submit path instead and ignored the other path completely. But I'm glad it works for you!

1 0
replied on March 5, 2020

The Cancel button is working great.  However, if there are required fields on the form the Cancel button cannot be used in the same way as the submit button.  Do you know how to get around this?

0 0
replied on March 5, 2020 Show version history

Hi Jim,

Here is a bit of code I commonly use for reject / return buttons that removes the required attribute from all fields when clicking a reject button (add reject class for custom buttons): 

      // If "reject" button is clicked
    $('.Reject').click(function(){
      
      // un-require required fields for reject button
      $('input, select, div').each(function() {    
          $(this).removeAttr('required');
      });

});

 

If you have more than one "Reject" button, you can also add an "if" statement validating the value (text) of the cancel button you want to act on.

1 0
replied on March 5, 2020

Thank you.  I will give it a try!

0 0
replied on March 6, 2020

I am having issues getting this to work.  I am not a java developer so that is probably why.  :)  Below is the code I am using for the button.

 

<input type="submit" class="newButton action-btn Submit" name="action" value="Cancel" aria-labelledby="action">

0 0
replied on March 6, 2020

Hi again Jim,

  So, based on that code. To do what Sean said above you would place this in your JavaScript.

//When the newButton classed button is clicked
$('.newButton').on('click', function(){

   //cycle through every input, select, and div in the document
   $('input, select, div').each(function(){

      //remove the required property from the current object (this)
      $(this).removeProp('required');

   })

});

I added some comments to the code for you to better understand what it's doing. Let me know if that works.

 

You could also try adding a class (maybe cancel or something like that) to your code you posted. Then change the .newButton to the class you entered. That would allow you to have a different class for each button you might add. However, if you're not planning on adding any more buttons, by all means, keep it like that. 

 

I'm here if you need more assistance. Good luck Jim!

1 0
replied on March 6, 2020

Thank you very much.  I added the code but the clicking Cancel button still does not remove the required property.  I am not sure what I doing wrong.  Here is all the java on this form.

 

$(document).ready(function(){
//Moves button from form to lower button wrapper and removes DIV that button was housed in
$('.newButton').detach().appendTo($('.btn-wrapper:first'))
$('#q117').remove();
})

//When the newButton classed button is clicked
$('.newButton').on('click', function(){
   //cycle through every input, select, and div in the document
   $('input, select, div').each(function(){
      //remove the required property from the current object (this)
      $(this).removeProp('required');
   })
});

0 0
replied on December 6, 2019 Show version history

Addendum - sometimes the div class to identify the buttons is "button-wrap" instead of "btn-wrapper."  This appears to be the case when working off a user task vs. an initiation form.

1 0
replied on December 6, 2019 Show version history

Sean is actually 100% right and I missed that in my post. The code below is what you would use to add the button when dealing with a form after the initiation/submission form.

 

$('.button-wrap').append("<input type='submit' class='action-btn ellipsis Submit sendToHR buttons hidden' name='action' value='Send To HR'><br class='lf-responsive-navigation'>");

 

This does the same thing as the code above but will target the button-wrap for the form when it's not an initializing form. 

 

You can also simply change the code from above:

$(document).ready(function(){
  
  //Moves button from form to lower button wrapper and removes DIV that button was housed in
  $('.newButton').detach().appendTo($('.btn-wrapper:first'))
  $('#q2').remove();
  
})

To this code below:

$(document).ready(function(){
  
  //Moves button from form to lower button wrapper and removes DIV that button was housed in
  $('.newButton').detach().appendTo($('.button-wrap:first'))
  $('#q2').remove();
  
})

Good catch Sean. Thanks!

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.