Custom html Button in Collection on New Forms Designer to Preview Documents

APPROVED ANSWER SELECTED ANSWER

replied on January 22, 2024

You can modify a Custom HTML field using the 'content' setting in changeFieldSettings. The key here is to perform your URL generation using the index (i.e., the row number) of the field. This code should be enough to get you on track. If you are loading the IDs from a lookup, you can listen to the on change event and pass the index of the field from the event parameter, and if the IDs exist on form load, you can just use the code as is.

// get all urls from url column
const urls = LFForm.getFieldValues({ fieldId: 13 });
// iterate the url list
for (let i=0; i<urls.length; i++) {
  const url = urls[i];
  // set the custom html field content to the url at its row
  LFForm.changeFieldSettings({ fieldId: 12, index: i }, {
      content: `<a href="${url}" target="_blank">google</a>`
  });
}

2 0

replied two days ago

I will give that a try, I had seen this on an ai search but also looks like its for classic.

$(document).ready(function() {
// Assuming your variable name is "DocumentURL"
var documentUrl = LFForm.getFieldValues({ variableName: "DocumentURL" });
// Set the iframe src attribute
$('#myIframe').attr('src', documentUrl);
});

Thanks again

0 0

replied two days ago

Ya do not use that code, you can also ignore the index property of the field identification object if your iframe isn't in a collection

0 0

replied 5 hours ago

Hi Zachary, I have tried really hard to figure this out myself but I think I have really hit the wall now. I finally got the url to generated and am able to embed the code into an Iframe. The final problem that I have been unable to overcome is that the iframe gets placed in the text view of the Custom HTML form not the code view and subsequently does not open the dynamically created link to an entry. If I copy and paste the iframe code from the text view to the code view it does work but not the desired outcome. The Devtool errors below are clearly saying nope can't do this.

My code is listed below the errors.

I am suspecting that I need to create an entire web page to post into the text view but I certainly do not know how or why Laserfiche handles the text and code views differently or what the right way to do it would be. Hoping you can help again. If you need anything more from me including remote access please let me know.

DEvTools Output:

Start
VM8:7 set fieldchange trigger event for when the Entry_ID is available
VM8:11 set fieldchange trigger event for when the URL is available
VM8:13 Init complete
app_options.js:571 The Preferences may override manually set AppOptions; please use the "disablePreferences"-option to prevent that.
_checkDisablePreferences @ app_options.js:571Understand this warning
app.js:1559 PDF ad42f5d00b5c275d75ca0cc523bfc955 [1.3 - / -] (PDF.js: 4.9.124 [867aaf01f])
plugin.laserfichelocalhost.com:18436/GetInfo:1 Failed to load resource: net::ERR_CONNECTION_REFUSEDUnderstand this error
plugin.laserfichelocalhost.com:18435/GetInfo:1 Failed to load resource: net::ERR_CONNECTION_REFUSEDUnderstand this error
plugin.laserfichelocalhost.com:18437/GetInfo:1 Failed to load resource: net::ERR_CONNECTION_REFUSED

JavaScript:

console.log("Start");
   var fullURL = "URL";
   var iframeLink = "URL2";
// Set fieldChange trigger event for when the Entry ID is available (rule)
   console.log ("set fieldchange trigger event for when the Entry_ID is available");
       LFForm.onFieldChange(CreateURL, { variableName: "Entry_ID" });
//       var URLfinal = LFForm.getFieldValues({variableName: "edited_URL" });
// Set fieldChange trigger event for when the URL is available (rule)
   console.log ("set fieldchange trigger event for when the URL is available");
       LFForm.onFieldChange(updateIframeSource, { variableName: "edited_URL" });
   console.log("Init complete");
// Function to create URL for document retrival
function CreateURL(fullURL,iframeLink) {
console.log("Create URL");
// Get the url strings and entry ID
var URLprefx = LFForm.getFieldValues({ variableName: "Prefix_URL" });
var URLpstfx = LFForm.getFieldValues({ variableName: "Postfix_URL" });
   var URLEntry = LFForm.getFieldValues({ variableName: "Entry_ID" });
// Concatenate the values
fullURL = URLprefx + URLEntry + URLpstfx;
console.log("The EntryID =",URLEntry);
   console.log("The concat URL=",fullURL);
// Set the concatenated value in the target field
    LFForm.setFieldValues({ variableName: "edited_URL"}, fullURL );
    iframeLink   = LFForm.getFieldValues({ variableName: "edited_URL" });
console.log("Create Iframe URL default=", iframeLink);
console.log ("URL created");

}
// now fix it to Iframe
   function updateIframeSource(iframeLink) {
console.log("Start iframe");
iframeLink   = LFForm.getFieldValues({ variableName: "edited_URL" });
console.log("Create Iframe URL after edit=", iframeLink);
// var iframeLink = "URL3";
console.log("Create Iframe URL=", iframeLink);
// Define the URL you want to embed
   let iframeURL = "https://app.laserfiche.ca/laserfiche/DocView.aspx?repo=r-000139b5c3c0&customerId=1556239797&id=18447#?openmode=PDF&lang=en-US";
// Create the iframe HTML code
   let iframeHTML = `<iframe name="myIframe" src="${iframeURL}" height="500" width="800" title="Document Preview"></iframe>`;
// Change the content of a Custom HTML field (replace 'yourFieldId' with the actual field ID)
   LFForm.changeFieldSettings(
{ fieldId: "29" }, // Replace with your field ID
{ content: iframeHTML }
);


// Set the iframe's src attribute to the new URL
//let encodedURL = encodeURIComponent("https://www.divemaster.ca");
// let link = `<a href="${encodedURL}" target="_blank">Document</a>`;
//LFForm.changeFieldSettings({ fieldId: 28 }, {
//content: <iframe name="myIframe" src="https://www.divemaster.ca" height="500" width="800" title="Document Preview"></iframe>
// });
}

0 0

Question

Question

Custom html Button in Collection on New Forms Designer to Preview Documents

Answer

Replies

Sign in to reply to this post.