I created a form with a Download button
My question is:
1. How can I get a randomly attached document? and downloading it using the download button I create in forms.
Thanks for helping me in advance.
As that is completely unrelated to the original question, it should be posted as a new question.
And I would not recommend trying to do that from scratch with HTML and Javascript. Use Form’s built-in table element and Lookup functionality - no use building from scratch what Forms can already do - you’ll save yourself a lot of time and headache.
Can you please explain what you mean by a "randomly attached document"?
As far as making a download button work, you can do that with a combination of custom HTML elements (to make the button) and Javascript (to tell it what to do when the button is clicked).
Here's one that I've used on multiple forms... This uses a hidden field on the form with class: documentEntryID. In my case, that hidden field contains the entry ID of a document in the repository (the field is populated by a Workflow) and clicking the button downloads a Windows Client Shortcut file that directs to that entry ID. Since we don't use Web Client, I've found this is one of the easier ways to direct a user from LFForms to the document inside the Windows Client.
HTML:
<button type="button" id="loadDocumentButton">Open Doc in LFClient</button>
Javascript:
//when the document shortcut button is clicked, create and download
//the Laserfiche shortcut file.
$('#loadDocumentButton').on('click', function() {
var LFEntryID = $('.documentEntryID input').val();
var t = '<?xml version="1.0" encoding="utf-8"?>\n<laserfiche>\n <repository name="MAIN">\n <entry id="' + LFEntryID + '" />\n </repository>\n</laserfiche>';
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(t));
element.setAttribute('download', 'shortcut_' + LFEntryID + '.lfe');
element.style.display = 'none';
if (typeof element.download != "undefined") {
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
else {
alert('This functionality is not supported by the current browser, recommend trying with Google Chrome instead. (http://caniuse.com/#feat=download)');
}
});
I use similar behavior to generate and download CSV and text files from LFForms for various purposes.
Interesting... What is the business case for this? I like it, but I've not come across a situation where I'd need it.
I was including it to try to address the question about doing a download. I use it on a few processes.
I have one form where staff do a Business Process from the Client when they need to delete a document they don't have permissions to, and it goes to LFForms to get approval before the workflow deletes it. The approval form includes links to the document being deleted and the folder it is in, and they can click the button which does the download for the shortcut, so they can quickly review the document and/or the folder it is in.
I have several accounting reconciliation processes that review items, many of which include items that were already archiving to the repository, so I include the download a shortcut buttons to allow them to review the items already in the repository.
We have audits and reviews of funded loans, and include the download shortcut to the funded loan documents with the repository.
In the case of the little extra text I added about CSV files, I have a bunch of "reports" that are forms that load info from various databases, mostly views and Stored Procedures. This allows me to make reports that staff can run on demand from the database without needing direct access to the database or experience with SQL - they just need to know how to use LFForms, which they all do. After they get the desired report, there is button to download the contents into a CSV. My Javascript for that just cycles through each field in the table, adding them to a string variable with commas and line breaks, and at the end it generates the actual file download with the CSV data included, and viola! you now have a CSV report from LFForms.
Regarding your question about "randomly attached document"?
what I mean is "Different types of document" that is from my desktop and upload it using file upload of Laserfiche Forms then the file attached in file upload I want to link it to the create download button.
How I suppose to do that?
Regards.
Once the file is uploaded it will show as a link beneath the upload button and can be downloaded by clicking the link. If you wanted you could make a button that clicked the link and subsequently downloaded the file, but that seems needlessly complicated since the functionality is built right in as a standard part of the upload functionality.
Hi Matthew Tingey is there a possible way to that link to become a button ? can you show me a sample of " make a button that clicked the link and subsequently downloaded the file" for me to understand.
Thank you!
Regards.
Okay, I was wrong, it's not as simple as clicking the link via Javascript, because modern browsers will block that behavior as it could be considered malicious to automatically click download links.
We can however, copy the information from the download links that Forms makes, and create our own download links from that information, and trigger those links we created, thus getting the desired result.
This works because the upload buttons create a table with the class of "files", and within that each record has a class of "file" and within that is an anchor element with the file name and URL. Normally you can click that file link to download the file, but that doesn't work from Javacsript. So we can loop through every anchor element (a) within each item with the file class (.file) within each table that has the files class (table.files). We do this via this code: $('table.files .file a').each(function() { xxxxx }); where xxxxx is the actual code being run.
On your submission form, add as many upload fields as you want.
Then on the form that is assigned via user task later in the process, make sure the upload fields are still included (though they can be marked as read-only), and add the download button using this HTML code in a custom HTML element:
<button type="button" id="downloadButton">Download All Attached Documents on the form</button>
Include this Javascript on your form, which tells it what to do when the button is clicked.
$(document).ready(function () {
//when the download all button is clicked, locate and click on all links for uploaded documents on the form.
$('#downloadButton').on('click', function() {
$('table.files .file a').each(function() {
var a = $(this);
var element = document.createElement('a');
element.setAttribute('href', a.attr("href"));
element.setAttribute('download', a.text());
element.style.display = 'none';
if (typeof element.download != "undefined") {
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
else {
alert('This functionality is not supported by the current browser, recommend trying with Google Chrome instead. (http://caniuse.com/#feat=download)');
}
});
});
});
The Javascript will loop through every one of the uploaded documents, pull out its name and URL, and create and trigger a new anchor element to download the document. And voila! every uploaded document from the submission has been downloaded on the secondary form with a single click (well, maybe two clicks since your browser might give you a warning about downloading multiple files).
Thank you Matthew Tingey for answering my concerns, This will help so I will give it a try.
if I have any question ,it is ok to ask you again ?
Thank you very much.
I’m always happy to help.
Hi, Matthew Tingey thank you this code works!
But I have an additional function for the user. Your code is working for what I asked before. But right now am thinking that the user must have an alert window before they can download the attached file from the download button.
For further understanding here's the scenario...
1st, the initiator attaches a file using the file upload in Laserfiche Forms then submits the Form.
2nd, the recipient clicks the button Download an alert window will show, If the recipient clicks the alert window confirmation it must download the attached file and automatically submit the form without clicking the default submit button of Laserfiche Form.
Hoping that you can help me regarding this.
Thank you in advance.
Yeah, that's possible.
The code to prompt a user for a Yes/No is confirm(). You can do an if...else with confirm to act on the Yes response or not act on the No response.
Then after the downloads are completed, we can submit the form by triggering the click on the Submit button.
The Javascript I posted before would look like this after being modified:
$(document).ready(function () {
//when the download all button is clicked, locate and click on all links for uploaded documents on the form.
$('#downloadButton').on('click', function() {
//Prompt user if they want to download all documents and submit the form.
//If they say yes, then all items are downloaded and the form is submitted.
if (confirm('Would you like to download all attached documents and then submit this form?'))
{
//Used to verify that download didn't fail before submitting the form.
var downloadSuccess = false;
//Cycle through all uploaded documents, copy their name and URL, and use those
//in a generated archor element to process the download of the file.
$('table.files .file a').each(function() {
var a = $(this);
var element = document.createElement('a');
element.setAttribute('href', a.attr("href"));
element.setAttribute('download', a.text());
element.style.display = 'none';
if (typeof element.download != "undefined") {
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
downloadSuccess = true;
}
else {
alert('This functionality is not supported by the current browser, recommend trying with Google Chrome instead. (http://caniuse.com/#feat=download)');
}
});
if(downloadSuccess)
{
$('.Submit').click();
}
}
//User selected not to proceed with download.
else
{
//Do Nothing.
}
});
});
Hi Matthew Tingey I try this code and it's working I appreciate all the help,
Also If I have a set of questions again hoping that you can help me again.
Thank you very much.
Hi Matthew Tingey,
Hoping your fine. Can I ask your assistants again regarding this code.
$(document).ready(function(){
// Hide the real Submit button from the page:
$(".Submit").hide();
//Email confirmation code
$('.email, .confirm').on('blur input', function () {
if ($('.email input').val() != $('.confirm input').val()) {
if ($('.warningText').length > 0 || $('.confirm input').val() == '') { return; }
else {
$('<p class="warningText">The email addresses you entered do not match.</p>').insertAfter('.confirm');
}
}
else
$('.warningText').remove();
});
});
//Company confirmation code
$('.company, .confirm').on('blur input', function () {
if ($('.company input').val() != $('.confirm input').val()) {
if ($('.warningText').length > 0 || $('.confirm input').val() == '') { return; }
else {
$('<p class="warningText">The company you entered do not match.</p>').insertAfter('.confirm');
}
}
else
$('.warningText').remove();
});
});
//when the download all button is clicked, locate and click on all links for uploaded documents on the form.
$('#downloadButton').on('click', function() {
//Prompt user if they want to download all documents and submit the form.
//If they say yes, then all items are downloaded and the form is submitted.
if (confirm('Would you like to download all attached documents and then submit this form?'))
{
//Used to verify that download didn't fail before submitting the form.
var downloadSuccess = false;
//Cycle through all uploaded documents, copy their name and URL, and use those
//in a generated archor element to process the download of the file.
$('table.files .file a').each(function() {
var a = $(this);
var element = document.createElement('a');
element.setAttribute('href', a.attr("href"));
element.setAttribute('download', a.text());
element.style.display = 'none';
if (typeof element.download != "undefined") {
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
downloadSuccess = true;
}
else {
alert('This functionality is not supported by the current browser, recommend trying with Google Chrome instead. (http://caniuse.com/#feat=download)');
}
});
if(downloadSuccess)
{
$('.Submit').click();
}
}
//User selected not to proceed with download.
else
{
//Do Nothing.
}
});
});
});
I try it but not functioning can you help me modify this code.
Hoping you can help me again.
Thank you in Advance :)
I can see you have too many function closures (the lines that state }); )
On line 22 you are closing the function that you started on line 5.
But then on line 24 you close another function, which ultiamately closes your $(document).ready(function(){ function - and I don't think you meant to close it until the end.
The same thing on lines 43 and 45 - 43 closes the function that started on line 26 - and then line 45 closes nothing - so that's a syntax error.
The same thing on lines 89, 91, and 92 - 89 closes the function that started on line 48 - and then lines 91 and 92 close nothing - so that's a syntax error.
You can see the error when you load the console (browser inspect element) and it shows an error stating "Uncaught SyntaxError: Unexpected token '}'"
If you delete lines code on lines 24, 45, and 91 - it should clear up that error.
This is your code, modified to comment out lines 24, 45, and 91:
$(document).ready(function(){
// Hide the real Submit button from the page:
$(".Submit").hide();
//Email confirmation code
$('.email, .confirm').on('blur input', function () {
if ($('.email input').val() != $('.confirm input').val()) {
if ($('.warningText').length > 0 || $('.confirm input').val() == '') { return; }
else {
$('<p class="warningText">The email addresses you entered do not match.</p>').insertAfter('.confirm');
}
}
else
$('.warningText').remove();
});
//}); //Commenting out this line instead of deleting for demonstrative purposes
//Company confirmation code
$('.company, .confirm').on('blur input', function () {
if ($('.company input').val() != $('.confirm input').val()) {
if ($('.warningText').length > 0 || $('.confirm input').val() == '') { return; }
else {
$('<p class="warningText">The company you entered do not match.</p>').insertAfter('.confirm');
}
}
else
$('.warningText').remove();
});
//}); //Commenting out this line instead of deleting for demonstrative purposes
//when the download all button is clicked, locate and click on all links for uploaded documents on the form.
$('#downloadButton').on('click', function() {
//Prompt user if they want to download all documents and submit the form.
//If they say yes, then all items are downloaded and the form is submitted.
if (confirm('Would you like to download all attached documents and then submit this form?'))
{
//Used to verify that download didn't fail before submitting the form.
var downloadSuccess = false;
//Cycle through all uploaded documents, copy their name and URL, and use those
//in a generated archor element to process the download of the file.
$('table.files .file a').each(function() {
var a = $(this);
var element = document.createElement('a');
element.setAttribute('href', a.attr("href"));
element.setAttribute('download', a.text());
element.style.display = 'none';
if (typeof element.download != "undefined") {
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
downloadSuccess = true;
}
else {
alert('This functionality is not supported by the current browser, recommend trying with Google Chrome instead. (http://caniuse.com/#feat=download)');
}
});
if(downloadSuccess)
{
$('.Submit').click();
}
}
//User selected not to proceed with download.
else
{
//Do Nothing.
}
});
//}); //Commenting out this line instead of deleting for demonstrative purposes
});
Hi again Matthew Tingey I just try your code and it's working fine but I have another concern if the email & company didn't match, the download button is still hidden. And if email and company are matched that's the time the download button will appear.
How we can solve these issues/concerns? Hoping you can help me again.
Thanks and sorry for the inconvenience.
Nothing in your code appears to be trying to hide/show the download button.
Are you using field rules to do it?
If so, please share a screenshot with that rule in order to speculate on why it is not working.
If not, then you need to add either field rules or Javascript to show/hide that button as needed.
Hi, Matthew Tingey can you help me to modify this code I try to modify it, but still not working, I think I am missing something.
$(document).ready(function () {
//hide submit button
$(".Submit").hide();
$(".SOADOWNLOAD").hide();
//Company and Email confirmation
$('.company, .companyconfirm','.email, .emailconfirm').on('blur input', function (){
if ($('.company input', '.email input').val() != $('.companyconfirm input', '.emailconfirm input').val()) {
$(".SOADOWNLOAD").hide();
if ($('.warningMessage').length > 0 || $('.companyconfirm', '.emailconfirm input').val() == '') { return; }
else {
$('<p class="warningMessage">The company you entered do not match.</p>').insertAfter('.companyconfirm', '.emailconfirm');
}
}
else
$('.warningMessage').remove();
$(".SOADOWNLOAD").show();
});
//when the download all button is clicked, locate and click on all links for uploaded documents on the form.
$('#downloadButton').on('click', function() {
//Prompt user if they want to download all documents and submit the form.
//If they say yes, then all items are downloaded and the form is submitted.
if (confirm('Would you like to download all attached documents and then submit this form?'))
{
//Used to verify that download didn't fail before submitting the form.
var downloadSuccess = false;
//Cycle through all uploaded documents, copy their name and URL, and use those
//in a generated archor element to process the download of the file.
$('table.files .file a').each(function() {
var a = $(this);
var element = document.createElement('a');
element.setAttribute('href', a.attr("href"));
element.setAttribute('download', a.text());
element.style.display = 'none';
if (typeof element.download != "undefined") {
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
downloadSuccess = true;
}
else {
alert('This functionality is not supported by the current browser, recommend trying with Google Chrome instead. (http://caniuse.com/#feat=download)');
}
});
if(downloadSuccess)
{
$('.Submit').click();
}
}
//User selected not to proceed with download.
else
{
//Do Nothing.
}
});
});
Thanks in advance :)
Have you checked the browser console log (right-click and choose inspect element) to see what kinds of errors are being thrown?
There are some changes I would recommend making for readability sake, and they are possibly syntax errors as well, I'm not quite certain.
//line 8 before:
$('.company, .companyconfirm','.email, .emailconfirm').on('blur input', function (){
//line 8 after:
$('.company, .companyconfirm, .email, .emailconfirm').on('blur input', function (){
//line 14 before:
if ($('.warningMessage').length > 0 || $('.companyconfirm', '.emailconfirm input').val() == '') { return; }
//line 14 after:
if ($('.warningMessage').length > 0 || $('.companyconfirm input').val() == '' || $('.emailconfirm input').val() == '') { return; }
//line 18 before:
$('<p class="warningMessage">The company you entered do not match.</p>').insertAfter('.companyconfirm', '.emailconfirm');
//line 18 after:
$('<p class="warningMessage">The company you entered do not match.</p>').insertAfter('.companyconfirm');
$('<p class="warningMessage">The company you entered do not match.</p>').insertAfter('.emailconfirm');
You are quite welcome.
If it is working, please consider marking your question as answered.
Hi, Matthew Tingey sadly to say that the code is not matched to the concept we want.
The concept is. if I enter a wrong email or company into the email field or company field the error message will pop-up saying "the email you enter does not match", and if the email field or company fields are not right the download button does not appear.
And if I enter the right email or company into the email field or company field the error message will not appear, and if email fields and company field are right the download button will appear.
What behavior are you seeing?
Does any part of the code work or is it all failing?
Are you seeing any errors in the console?
Can you share the most recent version of the Javascript since there has been so much back and forth?
Can you share a screenshot of your field rules?
Also, when you say entering the right email and company - what does that mean? What makes an email or company “right” in this scenario?
Hi Matthew Tingey sorry for the late response
I think wrong behavior : Email1 and Email2 or even Company1 and Company2 do not match the button appears.
The right behavior in our concept is: Email1 and Email2 even Company1 or Company2 do not matches the button does not appear, And If Email1 and Email2 even Company1 or Company2 matches the button appear.
This is the screenshot of our field rules its empty
Please see Attached code below
$(document).ready(function () {
//hide submit button
$(".Submit").hide();
$('.downloadbtn').hide();
//Company and Email confirmation
$('.company, .companyconfirm, .email, .emailconfirm').on('blur input', function (event){
if ($('.company input', '.email input').val() != $('.companyconfirm input', '.emailconfirm input').val()) {
$('.downloadbtn').hide();
if ($('.warningMessage').length > 0 || $('.companyconfirm input').val() == '' || $('.emailconfirm input').val() == '') { return; }
else {
$('<p class="warningMessage">The company you entered do not match.</p>').insertAfter('.companyconfirm');
$('<p class="warningMessage">The company you entered do not match.</p>').insertAfter('.emailconfirm');
}
}
else
$('.warningMessage').remove();
$('.downloadbtn').show();
});
//when the download all button is clicked, locate and click on all links for uploaded documents on the form.
$('#downloadButton').on('click', function() {
//Prompt user if they want to download all documents and submit the form.
//If they say yes, then all items are downloaded and the form is submitted.
if (confirm('Would you like to download all attached documents and then submit this form?'))
{
//Used to verify that download didn't fail before submitting the form.
var downloadSuccess = false;
//Cycle through all uploaded documents, copy their name and URL, and use those
//in a generated archor element to process the download of the file.
$('table.files .file a').each(function() {
var a = $(this);
var element = document.createElement('a');
element.setAttribute('href', a.attr("href"));
element.setAttribute('download', a.text());
element.style.display = 'none';
if (typeof element.download != "undefined") {
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
downloadSuccess = true;
}
else {
alert('This functionality is not supported by the current browser, recommend trying with Google Chrome instead. (http://caniuse.com/#feat=download)');
}
});
if(downloadSuccess)
{
$('.Submit').click();
}
}
//User selected not to proceed with download.
else
{
//Do Nothing.
}
});
});
Thank you again.
Okay, I think that makes sense. I see a couple syntax errors:
Lines 26 and 27 need to be wrapped inside opening and closing curly brackets: { and }. Without those only line 26 is being effected by the else statement, and line 27 runs regardless. So it always shows the download button.
The if statement on line 10 needs to be tweaked as well:
//Line 10 before:
if ($('.company input', '.email input').val() != $('.companyconfirm input', '.emailconfirm input').val()) {
//Line 10 after:
if ($('.company input').val() != $('.companyconfirm input').val() || $('.email input').val() != $('.emailconfirm input').val()) {
Hi Matthew Tingey I will try this hoping it work.
Also I have a favor, can I ask another question again ?
This is my Question
How to display data from database into html table using javascript? I have a sample screenshot of the table I create using custom HTML.
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<h2>Routing History</h2>
<table>
<tbody><tr>
<th>Status/Instruction</th>
<th>From</th>
<th>To</th>
<th>Date Sent </th>
</tr>
<tr>
<td>{/dataset/Status_}/{/dataset/Instruction_}</td>
<td>{/dataset/From_1}</td>
<td>{/dataset/Collection/To}</td>
<td>{/dataset/File_Upload_1}</td>
</tr>
<script>
</script>
</tbody></table>
Advance thanks :)
As that is completely unrelated to the original question, it should be posted as a new question.
And I would not recommend trying to do that from scratch with HTML and Javascript. Use Form’s built-in table element and Lookup functionality - no use building from scratch what Forms can already do - you’ll save yourself a lot of time and headache.