Embed "dynamic" image(s) into Laserfiche Form

asked on August 16, 2021 • Show version history

Hello,

We're trying to come up with a solution for a customer who wants to try to use Forms to get approval on artwork from their customers. For example, someone wants a specific design on an order of t-shirts. Before they print the shirts, they want the customer to approve the artwork first.

They would really like the artwork to be embedded within a Laserfiche form that asks for their approval. At a certain point in this process, we export the artwork out of Laserfiche into the Forms image directory in a folder specific to an order - something like C:\Program Files\Laserfiche\Laserfiche Forms\img\Document\%Company_Name\%Order_ID\ . From there, we're trying to embed the Company Name and Order ID into form fields using URL parameters.

It works well if we specify the image path using a custom HTML field, but we'd like to use the values in the form fields that are getting filled by the URL parameters to make this "dynamic" for each customer order. However, I can tell that the custom HTML is loading at the same time as the form fields we're filling with URL parameters as the image address is missing the values from the form fields. At least, that's what I think is going on.

So, after that long explanation, my question comes down to the ability to delay loading the custom HTML field until the Customer Name and Order ID fields get filled out by the URL parameters. We'll have to figure out how to handle multiple pieces of artwork, but we'll worry about that once we figure this part out.

Any help is appreciated. Thanks!

0 0

SELECTED ANSWER

replied on August 17, 2021 • Show version history

I developed my answer from the answer by Carl Hunter in Build Weblink URL from entry id variable passed to form from workflow

First I added 2 fields to my form.

The first field is for the image file name that will be found in the img folder under Forms (C:\Program Files\Laserfiche\Laserfiche Forms\Forms\img) and I named it imgName and set the class to the same thing.

The second field is for the alternate text to associate with the image and is an optional setting. I named this field altText and set the class to match.

These 2 fields can be filled by a lookup

The next thing I added was an html object and in the html tab I set the HTML value as

<div class="myDiv" style="text-align:center;"><img src="https://forms.server/forms/img/cc-visa.png" alt="This is your alt text"></div>

This should show the cc-visa.png as a place holder and you can create whatever placeholder image you want and swap out the name in the src path. Note that I set a Class of myDiv on the div object and we will use this in the javascript.

Next, we go to the javascript and add the following

$(document).ready(function(){
  $('.imgName').change(function() {
    //console.log('File name changed');
    var base_url = 'http://forms.server/forms/img/' 
    var img_name = $('.imgName input').val();
    //console.log(img_name);
    var img_url = base_url + img_name;
    //console.log(img_url);
    var alt_text = $('.altText input').val();
    //console.log(alt_text);
    var myImg = $('.myDiv>img:first-child');
    //console.log(myImg);
    if ( myImg.length ) {
      myImg.attr('src',img_url);
      myImg.attr('alt',alt_text);
    }
  });
  // Trigger the imgName change event
  $('.imgName input').change();
});

Notice that I am using the $('.imgName').change event, but you could use the lookup complete event instead if you wished.

Now when you enter a file name (that is in the img folder) into the imgName field, such as favicon.ico, the image that is displayed will change.

Finally, you can pass the image name in the url and the image will display on the form:

https://forms.server/forms/formName?imgName=PoweredbyForms.png&altText=Laserfiche%20Powers%20the%20World

1 0

replied on September 1, 2021

Hi Bert,

Thanks for the help. This definitely gets us started. I'll need to figure out how to add another folder level in the image directory and include that in the img_url variable, but I can figure that out with what you've provided.

One other part of this that makes this more complicated (to me, at least) is that there may be more than one image we want to display. Does anything immediately come to mind on how we can have the form display any number of images practically?

Thanks again for the help!

0 0

Question

Question

Embed "dynamic" image(s) into Laserfiche Form

Answer

Replies

Sign in to reply to this post.