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

Question

Question

Adding text via field variable to my custom html in Forms

Forms
Updated July 11
asked on July 8

I feel like what I'm trying to do is quite simple, but in practice nothing is working. I have the following field:

I would like whatever the user types into this field to auto-populate in this place in my custom html at the bottom of my form:

I have gone through all the most relevant Answers here that discuss this, like 

Forms 11 custom HTML Field Values from a lookup - Laserfiche Answers and

How to add variable to custom HTML? - Laserfiche Answers and many more but nothing seems to be working despite all my attempts at troubleshooting. I'm not a great coder so the more involved JS solutions are tricky for me. Did anything change in more recent versions of Forms that would make the previously linked 'oath' form solution stop working? Does anyone have some quick tips for me? I would ideally prefer the text to populate even before the user submits the form.

1 0

Answer

SELECTED ANSWER
replied on July 11 • Show version history

Did you also change it in on the date fields "onFieldChange" function? 

 

Something like this:

LFForm.onFieldChange(function(){
  
  manualDate = LFForm.getFieldValues({fieldId: Publication_Date}).dateStr;
  dateSpan.textContent = manualDate;
  LFForm.changeFieldSettings(manualHTMLObj, { content: manualHTMLDataParse.innerHTML });
  
}, {fieldId: Publication_Date});

 

 

0 0

Replies

replied on July 11

First add a class name to the HTML mine is "agreementHTML"

Wrap the HTML in a DIV, and then use spans where you want to add your field data. Give the spans matching id and class values. My example below. 

<div>
<p>I, <span id="authorizedSignatoryHTML" class="authorizedSignatoryHTML">___________________</span>, hereby grant permission to Southern Illinois University School of Medicine, in partnership with SIU-C (when applicable), to bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla and shall include but not be limited to the following purpose(s):</p>

<p>Bla bla bla bla bla bla bla bla bla.</p>

<p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</p>


<p>IN WITNESS WHEREOF this permission form is executed this <span id="dayHTML" class="dayHTML">DAY HERE</span> day of <span id="monthHTML" class="monthHTML">MONTH HERE</span>, <span id="yearHTML" class="yearHTML">YEAR HERE</span>.</p>
  
</div>

 

My Custom HTML uses 'ordinal suffix' for displaying the day. So you can ignore that code. But here is my JavaScript.

 

/*----------------------------------------------------------*/
/*                START: Read Only mode code                */
/*----------------------------------------------------------*/
let form = Object.values(window.states)[0];
console.log('form.readonly: ' + form.readonly); 

/*----------------------------------------------------------*/
/*                 END: Read Only mode code                 */
/*----------------------------------------------------------*/

/*----------------------------------------------------------*/
/*            START: get Ordinal suffix of a day            */
/*----------------------------------------------------------*/
/* Found the following lines of code here */
/* https://answers.laserfiche.com/questions/153152/Forms--Custom-row-labels#153197 */  

function getOrdinalSuffix(theDay)
{
  
  var j = theDay % 10;
  var k = theDay % 100;
  
  if (j == 1 && k != 11) 
  {
    return theDay + "st";
  };
  
  if (j == 2 && k != 12) 
  {
    return theDay + "nd";
  };
  
  if (j == 3 && k != 13) 
  {
    return theDay + "rd";
  };
  
  return theDay + "th";

};
/*----------------------------------------------------------*/
/*             END: get Ordinal suffix of a day             */
/*----------------------------------------------------------*/

/*----------------------------------------------------------*/
/*           START:check if DOMParser is supported          */
/*----------------------------------------------------------*/
function isDOMParsSupported () 
{
  if (!window.DOMParser) return false;
  
  let parser = new DOMParser();
  try {
    parser.parseFromString('x', 'text/html');
  } catch(err) {
    return false;
  };
  
  return true;
};
/*----------------------------------------------------------*/
/*            END:check if DOMParser is supported           */
/*----------------------------------------------------------*/

/*----------------------------------------------------------*/
/*   START: Convert a template string into HTML DOM nodes   */
/*----------------------------------------------------------*/
function convertToDom(str) { 
  
  /* use DOPParser() if it is supported */
  if(isDOMParsSupported){
    let parser = new DOMParser();
    let doc = parser.parseFromString(str, 'text/html');
    return doc.body;
  };
  
  /* runs if DOPParser() is NOT supproted */
  let dom = document.createElement('div');
  dom.innerHTML = str;
  return dom;
};

/*----------------------------------------------------------*/
/*    END: Convert a template string into HTML DOM nodes    */
/*----------------------------------------------------------*/

/* field IDs where data is pulled from */
const sigNameID = 11;
const dayID = 56;
const dayOrdinalSuffixID = 63;
const monthID = 58;
const yearID = 17;

/* grab the current field values -- on load these will be blank for me */
let sigName = LFForm.getFieldValues({fieldId: sigNameID});
let theDay = getOrdinalSuffix(LFForm.getFieldValues({fieldId: dayID}));
let theMonth = LFForm.getFieldValues({fieldId: monthID});
let theYear = LFForm.getFieldValues({fieldId: yearID});

/* this is the class name of the HTML field*/
const agreementHTMLObj = LFForm.findFieldsByClassName("agreementHTML")[0];
//  console.log('agreementHTMLObj: ' + agreementHTMLObj); 
//  console.table(agreementHTMLObj)

let agreementHTMLData;

/* NOTE: when in read only view the HTML may or may not be saved in a */
/* couple different places. If the first comes back as undefined then */
/* I grab the next spot. */
if (form.readonly) {  
  agreementHTMLData = agreementHTMLObj.settings.label;
  if (agreementHTMLData === undefined) {
    agreementHTMLData = agreementHTMLObj.settings.default;
  }
} else {
   agreementHTMLData = agreementHTMLObj.data;
  
};

let agreementHTMLDataParse = convertToDom(agreementHTMLData);

/* find the spans */
let authSigSpan = agreementHTMLDataParse.getElementsByClassName("authorizedSignatoryHTML")[0];
let theDaySpan = agreementHTMLDataParse.getElementsByClassName("dayHTML")[0];
let theMonthSpan = agreementHTMLDataParse.getElementsByClassName("monthHTML")[0];
let theYearSpan = agreementHTMLDataParse.getElementsByClassName("yearHTML")[0];


function setAuthorizedSignatoryHTML(){
  console.log('authSigSpan: ' + authSigSpan); 
  console.table(authSigSpan);

  /* Update the content of the elements */
  authSigSpan.textContent = sigName;  
  theDaySpan.textContent = theDay; 
  theMonthSpan.textContent = theMonth;
  theYearSpan.textContent = theYear;

  /* update the custom HTML */
  LFForm.changeFieldSettings(agreementHTMLObj, { content: agreementHTMLDataParse.innerHTML });

};

/* On Load */
setAuthorizedSignatoryHTML();

/* A LFForm.onFieldChange is needed for each field that will be used to */ 
/* update the HTML */
LFForm.onFieldChange(function(){  
  
  /* Update the content of the elements */
  sigName = LFForm.getFieldValues({fieldId: sigNameID}); 
  authSigSpan.textContent = sigName; 
  LFForm.changeFieldSettings(agreementHTMLObj, { content: agreementHTMLDataParse.innerHTML });
  
}, {fieldId: sigNameID});

LFForm.onFieldChange(function(){  
  
  /* Update the content of the elements */
  theDay = getOrdinalSuffix(LFForm.getFieldValues({fieldId: dayID}));
  theDaySpan.textContent = theDay; 
  LFForm.changeFieldSettings(agreementHTMLObj, { content: agreementHTMLDataParse.innerHTML });
  
  /* update the hidden field - this field is used in another step */
  LFForm.setFieldValues({fieldId: dayOrdinalSuffixID}, theDay);
  
}, {fieldId: dayID});

LFForm.onFieldChange(function(){
  
  /* Update the content of the elements */
  theMonth = LFForm.getFieldValues({fieldId: monthID});
  theMonthSpan.textContent = theMonth
  LFForm.changeFieldSettings(agreementHTMLObj, { content: agreementHTMLDataParse.innerHTML });

}, {fieldId: monthID});

LFForm.onFieldChange(function(){  
  
  /* Update the content of the elements */
  theYear = LFForm.getFieldValues({fieldId: yearID});
  theYearSpan.textContent = theYear;
  LFForm.changeFieldSettings(agreementHTMLObj, { content: agreementHTMLDataParse.innerHTML });

}, {fieldId: yearID});

 

Down the line in the process when the values are not being changed you can go back to just referencing the 'dataset' values within the Custom HTML (ex: {/dataset/Initiator_Name_Display} ) 

 

Let me know if you need any of this explained .. not sure it's all clear. :) 

 

 

2 0
View 11 previous replies
replied on July 11

Thought I would add in a screen shot of the result. 

 

1 0
replied on July 11

Works for me!

1 0
replied on July 11

I'm glad it worked for you! 

0 0
replied on July 11

@████████, please consider marking this as the answer so others can see your question has been resolved.

1 0
replied on July 11 • Show version history

@Jennifer Washburn 

yes. If it were my question, I would have absolutely marked it as answered.

2 0
replied on July 11

My apologies!

1 0
replied on July 11 • Show version history

Wow, thank you so much! This worked great! Took me a while to make the correct variable/field adjustments and debug it but I did get it in the end!

 

I even successfully made it work for another span in my custom html (revision). I'm having trouble making it work with a Date field though, I'm guessing because there's something else I need to do with the formatting? When I test it out, it looks like this (you'll see it works for the other fields):

I'm drawing the date value from a Date Time field type.

Here's my Custom HTML:

<div>
<p>This manual is not being supported any further by <span id="owneroperatorHTML" class="owneroperatorHTML"> _________________</span> and the latest revision <span id="revHTML" class="revHTML"> ____</span> dated <span id="dateHTML" class="dateHTML"> __________</span> is the final revision.</p>
</div>

and here's my JS code adapted from yours!

let form = Object.values(window.states)[0];
console.log('form.readonly: ' + form.readonly);

//start of 'domparser' support (whatever that means!)//
function isDOMParsSupported ()
{
  if (!window.DOMParser) return false;
  
  let parser = new DOMParser();
  try {
    parser.parseFromString('x', 'text/html');
  } catch(err) {
    return false;
  };
  
  return true;
};

//end of 'domparser' code//

//start of conversion template string into HTML DOM nodes//
function convertToDom(str) {
  if(isDOMParsSupported){
    let parser = new DOMParser();
    let doc = parser.parseFromString(str, 'text/html');
    return doc.body;
  };
  
  let dom = document.createElement('div');
  dom.innerHTML = str;
  return dom;
};


//these are the field IDs where data is pulled from (only using 1 rn)//
const Founding_Owner_Operator_ = 6;
const Rev_ = 11;
const Publication_Date = 25;

//grab the current field values -- on load these will be blank for me//
let founderName = LFForm.getFieldValues({fieldId: Founding_Owner_Operator_});
let manualRev = LFForm.getFieldValues({fieldId: Rev_});
let manualDate = LFForm.getFieldValues({fieldId: Publication_Date});

//this is the class name of the HTML field//
const manualHTMLObj = LFForm.findFieldsByClassName("manualHTML")[0];

let manualHTMLData;

if (form.readonly) {
  manualHTMLData = manualHTMLObj.settings.label;
  if (manualHTMLData === undefined) {
    manualHTMLData = manualHTMLObj.settings.default;
  }
} else {
  manualHTMLData = manualHTMLObj.data;
};

let manualHTMLDataParse = convertToDom(manualHTMLData);

//find the spans//
let founderSpan = manualHTMLDataParse.getElementsByClassName("ownerOperatorHTML")[0];
let revSpan = manualHTMLDataParse.getElementsByClassName("revHTML")[0];
let dateSpan = manualHTMLDataParse.getElementsByClassName("dateHTML")[0];

function setOwnerOperatorHTML(){
  console.log('founderSpan: ' + founderSpan);
  console.table(founderSpan);
  
//update content of the elements//
  founderSpan.textContent = founderName;
  revSpan.textContent = manualRev;
  dateSpan.textContent = manualDate;
  
//update the custom HTML//
  LFForm.changeFieldSettings(manualHTMLObj, { content: manualHTMLDataParse.innerHTML });
};

//on Load//
setOwnerOperatorHTML();

//LFForm.onFieldChange is needed for each field that will be used to update HTML//
LFForm.onFieldChange(function(){
  
  //update content of elements//
  founderName = LFForm.getFieldValues({fieldId: Founding_Owner_Operator_});
  founderSpan.textContent = founderName;
  LFForm.changeFieldSettings(manualHTMLObj, { content: manualHTMLDataParse.innerHTML });
  
}, {fieldId: Founding_Owner_Operator_});

LFForm.onFieldChange(function(){
  
  manualRev = LFForm.getFieldValues({fieldId: Rev_});
  revSpan.textContent = manualRev;
  LFForm.changeFieldSettings(manualHTMLObj, { content: manualHTMLDataParse.innerHTML });
  
}, {fieldId: Rev_});

LFForm.onFieldChange(function(){
  
  manualDate = LFForm.getFieldValues({fieldId: Publication_Date});
  dateSpan.textContent = manualDate;
  LFForm.changeFieldSettings(manualHTMLObj, { content: manualHTMLDataParse.innerHTML });
  
}, {fieldId: Publication_Date});

 

1 0
replied on July 11 • Show version history

Yeah dates are a bit difference... this might work 

 

let manualDate = LFForm.getFieldValues({fieldId: Publication_Date}).dateStr;

 

EDIT: In my form/example I used functions in single line fields to separate the month, day and year. Then pulled from there, because mine needed formatted differently anyway. 

0 0
replied on July 11

When I get [Object Object] back when I expect a value, I will often do a 'console.table(varaibleName); line to see what exactly is being returned and sometimes I'm able to figure out how to get the data I really want. :) 

1 0
replied on July 11 • Show version history

That solution didn't quite do it, but I will mess around with it some more! Thanks for the tips with the console stuff, I haven't explored that yet. So much to learn!

 

edit: btw how do I view what is being returned with the console.table(variableName) function? Just in the browser Inspect tab?

0 0
replied on July 11 • Show version history

With your form either up and running or in preview click your "F12" button. It will either pop up a new window or add a pane to the right of your current window. See image.

 

 

You may need to click where it says "Console" to view it. 

 

Console.log ('some text" + orVariable); will show up as a line of text. 
Console.table(theVariable); will often show up as it does in my image above and you can see what is in it. That is why I added a '.dateStr' behind the 'getFieldValues' for the date field. 

 

EDIT: 

Here is the code snip of the above. 

    let tempDate = LFForm.getFieldValues({ fieldId: tableOneFieldSevenID });
    console.log('date field');
    console.table(tempDate);

 

1 0
SELECTED ANSWER
replied on July 11 • Show version history

Did you also change it in on the date fields "onFieldChange" function? 

 

Something like this:

LFForm.onFieldChange(function(){
  
  manualDate = LFForm.getFieldValues({fieldId: Publication_Date}).dateStr;
  dateSpan.textContent = manualDate;
  LFForm.changeFieldSettings(manualHTMLObj, { content: manualHTMLDataParse.innerHTML });
  
}, {fieldId: Publication_Date});

 

 

0 0
replied on July 11

Aha! I forgot the .datestr in that function. Wow, thanks so much!!

1 0
replied on July 11

You are welcome! I was happy to help! 

0 0
replied on July 8
0 0
replied on July 9 • Show version history

Thanks for the link! Unfortunately that is using Classic Designer instead of Modern, which my company uses (I should have specified that before)

0 0
replied on July 9

There is no change that would make the previous solution stop working. But the 'oath' solution you linked was for classic form, not modern form.

Can you post more details about your form so we could do troubleshooting? Like the field settings screenshots and detailed script you have tried using.

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

Sign in to reply to this post.

Details
Related Posts
Loading ...