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

Question

Question

Creating a hyperlink on the form (google doc link)

asked on September 20, 2021

I have a process where the form auto populates the employee job details and the employee needs to sign off their responsibilities. The job details are in the form of google doc link.

The form loads all the details from a database table including the google doc link based on the employee id .

I have a large text field to load the google doc but the document does not load as a hyperlink for them to just click on it to read the description.

Is there a way for me to convert that google doc link into a hyperlink when the form loads?

 

0 0

Answer

SELECTED ANSWER
replied on September 21, 2021 Show version history

Ok, I see now! 

It is even easier as the value already exists in the hidden URL field.  We just need to get a reference to the hyperlink in the custom HTML field and then set the hyperlink HREF attribute to the value in the hidden URL field.

So we don't need trap the onchange event we just need to move the appropriate lines of code into the main document ready function so it fires as soon as the document is ready.

01$(document).ready (function () {
02 
03  //
04  // Get a reference to the hyperlink element and set the
05  // HREF attribute with the value in the hidden URL field...
06  //
07  var googleDocHyperlink = $('.googleDocHTML').find('a');
08  if (googleDocHyperlink.length == 1) {
09      googleDocHyperlink[0].href = $('.googleDocURL input').val();
10  }
11   
12});

Also note that the changes to the custom HTML field will not persist as the form moves through the process so this piece of code must be in every form that you expect the hyperlink to work.

2 0

Replies

replied on September 20, 2021

Rekha,

in order to provide a clickable hyperlink you need to add a Custom HTML field to your form then edit the HTML portion of the field to add an HTML hyperlink.  Here is a screen shot of a form with a custom HTML field with a hyperlink;

 

To make this work you need to assign the Google Doc URL value to a hidden single line field in your form during the lookup and then add some javascript to update the href attribute of the hyperlink in the custom HTML field with the value from the hidden field.

In this example I have added the class name 'googleDocURL' to the Hidden Hyperlink field and added the class name 'googleDocHTML' to the custom HTML field.

 

Here is the javascript that fires when the Hidden Hyperlink field gets updated after the lookup;

01$(document).ready (function () {
02 
03  //
04  // When the hidden hyperlink field is populated from a lookup
05  // load the value of the field into the href attribute of the
06  // HTML hyperlink element...
07  //
08  $('.googleDocURL input').on('change', function() {
09    var googleDocHyperlink = $('.googleDocHTML').find('a');
10    if (googleDocHyperlink.length == 1) {
11        googleDocHyperlink[0].href = $('.googleDocURL input').val();
12    }
13  });  
14 
15});

 

1 0
replied on September 20, 2021

Thanks a lot for the detailed description.

This is what i have:

 

 

I used field rules to hide the hidden hyperlink which has the google doc link as per the lookup rule.

When i click "here" to load job desc, the google doc link does not load, it reloads the same form in the next tab. Looks like am missing something .

0 0
replied on September 20, 2021 Show version history

Is your hidden 'googleDocURL' field that is receiving the lookup value a single line field or a multi-line field?  The javascript was written to read the value of a single line field.  If you are using a multi-line field replace the references to the field 'input' to 'textarea'.

0 0
replied on September 21, 2021 Show version history

Its a single line field. 

$(document).ready(function (){
  
  $('.googleDocURL input').on('change',function(){
    var googleDocHyperlink = $('.googleDocHTML').find('a');
    if (googleDocHyperlink.length==1) {
        googleDocHyperlink[0].href = $('.googleDocURL input').val();
    }
  });
});

0 0
replied on September 21, 2021

Interesting!  What happens with the hyperlink if you 'hard-code' one of the Google doc URL's in the href attribute of the custom HTML field?  If the hard-coded link opens the Google doc then the issue has to be with the code.  If so, how comfortable are you with using the Chrome developer tools to debug the script?

0 0
replied on September 21, 2021

I tried hardcoding it and it works. Have'nt used the Chrome developer tools to debug. If you brief me i can give it a try. But if that involves any downloads i think the office machine will not allow me to. With whatever available tools i can give it a try. I do use a chrome browser to load the forms.

This is how it looks in the lookup rules section

 

0 0
replied on September 21, 2021

The developer tools are built into Chrome.  You can do a quick Google search for Chrome DevTools to find some tutorials.  You will want to debug the script by setting some breakpoints in the document ready function when you preview the form and stepping through the code a line at a time to see if any errors are thrown.  

0 0
replied on September 21, 2021

Got it! Let me give that a try. Thx!

0 0
replied on September 21, 2021

I've been trying to do some alerts on the jscript to see at what point the code works.

When the form loads the data is already populated on the form including the url in the hidden field based on the emp_id

So i think the on change function is not firing, since my alert"stepping in" does not fire.

The input to the url field which is hidden  is not changing at any point. The page already loads with the data. 

 

$(document).ready(function (){
  //alert("starting...");
  $('.googleDocURL input').on('change',function(){
    alert("stepping in");
    var googleDocHyperlink = $('.googleDocHTML').find('a');
    if (googleDocHyperlink.length==1) {
        googleDocHyperlink[0].href = $('.googleDocURL input').val();
    }
  });
});

0 0
replied on September 21, 2021

When you hide the field, do you tell it to save the data?

1 0
replied on September 21, 2021

I just changed the field rule to save the data. I had it as "ignore" initially.

It still doesn't load the google doc when i click the "Click here..."  When i hover over the "Click here" hyperlink it points to the laserfiche form address, and hence loads the same laserfiche form in a new tab.

 

0 0
replied on September 21, 2021 Show version history

Rekha,

The hiddenURL onchange event only fires when the hidden URL field actually changes value.  It does not fire if you have any default values in the field or if the values are already contained in the fields when the form loads, i.e. from a previous step.

Is the form that you are trying to update the HREF attribute in the custom HTML hyperlink the starting form? Or is it a secondary form that already has the values in the fields when it displays?

0 0
replied on September 21, 2021

I have a database table with employee details along with the job description google link.

The form being discussed here is the primary form

I have a workflow which creates the link to employees with the form and the link has the guid and the employee id which is specific to each employee. The workflow sends emails to the employees with the link. 

I have a form lookup rule which populates the values from the database table onto the form, hence the google doc link also gets populated for each employee when they click the link in the email. This is what i meant when i said the form already has values when it loads.

So looks like the onchange event will not work for this scenario. What other options do i have? Thanks again for your inputs.

0 0
SELECTED ANSWER
replied on September 21, 2021 Show version history

Ok, I see now! 

It is even easier as the value already exists in the hidden URL field.  We just need to get a reference to the hyperlink in the custom HTML field and then set the hyperlink HREF attribute to the value in the hidden URL field.

So we don't need trap the onchange event we just need to move the appropriate lines of code into the main document ready function so it fires as soon as the document is ready.

01$(document).ready (function () {
02 
03  //
04  // Get a reference to the hyperlink element and set the
05  // HREF attribute with the value in the hidden URL field...
06  //
07  var googleDocHyperlink = $('.googleDocHTML').find('a');
08  if (googleDocHyperlink.length == 1) {
09      googleDocHyperlink[0].href = $('.googleDocURL input').val();
10  }
11   
12});

Also note that the changes to the custom HTML field will not persist as the form moves through the process so this piece of code must be in every form that you expect the hyperlink to work.

2 0
replied on September 22, 2021

Got it. Let me give it a try. Thankyou.

0 0
replied on September 22, 2021

Yes that worked . Thanks a lot for the help.

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

Sign in to reply to this post.