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
4 0
replied on March 6

0 0
replied on March 6

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

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 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

Beautiful.  Much easier and works great!

0 0
replied on February 27

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

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

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

Not a problem. Just glad I could help!

1 0
replied on February 27

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

Seq Flow

Error

0 0
replied on February 27

Html

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

0 0
replied on February 27 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

Bingo -- Thank you!

0 0
replied on February 27

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

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 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

Thank you.  I will give it a try!

0 0
replied on March 6

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

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

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.