Syntax for Flare Variable in Javascript

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
flequus
Jr. Propeller Head
Posts: 5
Joined: Mon Feb 25, 2019 4:14 pm
Location: Florida

Syntax for Flare Variable in Javascript

Post by flequus »

I am a brand spanking new user of Flare and I am trying to use a Flare system variable in JavaScript and I am failing miserably at getting the syntax correct. I have tried [] and <> both to no avail.

What I am trying to do is to get a feedback email to use the title of the topic in the subject. The email is generated from a toolbar button. I am successful in getting the JavaScript to create the email without the variable, but once I add the Flare, variable, it breaks.

This is the code that works, but does not have the topic title:

Code: Select all

function sendFeedback()
	{
		mail_str = "mailto:MyDepartment@mycompany.com?subject=Feedback on Help - "
		
	}
This is what doesn't work

Code: Select all

function sendFeedback()
	{
		var topicName = <MadCap:variable name="System.Title" />; 
		mail_str = "mailto:MyDepartment@MyCompany.com?subject=Feedback on Help - " + topicName ;
	
	
	}
Can you help a noob out? Thanks in advance.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Syntax for Flare Variable in Javascript

Post by NorthEast »

The bad news is that you can't use Flare system variables in Javascript - Flare won't insert/replace variables in scripts.

The good news is that for your example, you don't need to use the Flare variable System.Title, as you can use the javascript document.title to get the topic title. So get rid of the first line var topicName, and on the second line replace the part + topicName with + document.title
flequus
Jr. Propeller Head
Posts: 5
Joined: Mon Feb 25, 2019 4:14 pm
Location: Florida

Re: Syntax for Flare Variable in Javascript

Post by flequus »

Thank you so much. I searched the forums for instances where people were trying to do this; I guess this explains why this has not come up before.

Sad that I can't use the variable because I had another use for it on another button.
amitkapoor
Propeller Head
Posts: 33
Joined: Mon Sep 16, 2019 5:23 am

Re: Syntax for Flare Variable in Javascript

Post by amitkapoor »

Dave - what about other variables like custom ones too. Is there a way to use them in the script? I want to a few in my JavaScript...
devjoe
Sr. Propeller Head
Posts: 337
Joined: Thu Jan 23, 2014 1:43 pm

Re: Syntax for Flare Variable in Javascript

Post by devjoe »

Generally, no. The Javascript has to use what it has access to on the page at run time. The variable's definition is hidden away inside some other file which is not even part of the finished web site, and is only added to the page if you reference it in an HTML tag in the source file for the page. If you put the variable inside a named element on the page, then it might be possible for the script to access the text of the named element to get the content you want.
amitkapoor
Propeller Head
Posts: 33
Joined: Mon Sep 16, 2019 5:23 am

Re: Syntax for Flare Variable in Javascript

Post by amitkapoor »

I understand. So I made it work that way. Added this to master page:

Code: Select all

<p class="productattributes" style="display:none;" id="copyright"><MadCap:variable name="Primary.Copyright" /></p>
Added following to the JavaScript function where I needed to use the copyright value:

Code: Select all

var copyright = document.getElementById("copyright").value;
And now I could use copyright as I needed in my script.
oelgoetz
Propeller Head
Posts: 41
Joined: Wed Jun 23, 2010 8:04 am

Re: Syntax for Flare Variable in Javascript

Post by oelgoetz »

in fact you can use Flare variables in Javascript:

Code: Select all

<script>
    function emailFeedback()
    {
          window.location= 'mailto:me@mycompany.com?subject=Remark to help topic: "' 
         + document.title + '" (V' 
         + '<MadCap:variable name="MyVariables.VersionNumber" />)';
    }
</script>
works perfect for me ...
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Syntax for Flare Variable in Javascript

Post by NorthEast »

oelgoetz wrote:in fact you can use Flare variables in Javascript:

Code: Select all

<script>
    function emailFeedback()
    {
          window.location= 'mailto:me@mycompany.com?subject=Remark to help topic: "' 
         + document.title + '" (V' 
         + '<MadCap:variable name="MyVariables.VersionNumber" />)';
    }
</script>
works perfect for me ...
It doesn't work for me - the subject of the email looks like this: Remark to help topic: "TEST TITLE" (V<MadCap:variable name="MyVariables.VersionNumber" />)

The HTML for the variable is not converted to the variable text during the Flare build. I haven't yet found a way to get Flare to convert Flare variables that are inside JS. If you found a way to do it then please share - but the example you posted doesn't work.

You can insert variables in the mailto href though, using the format [%=MyVariables.VersionNumber%]
So you can get a variable in the email subject (or body) like this:

Code: Select all

<a href="mailto:email@you.com?subject=Feedback on version [%=MyVariables.VersionNumber%]">Email me</a>
flequus
Jr. Propeller Head
Posts: 5
Joined: Mon Feb 25, 2019 4:14 pm
Location: Florida

Re: Syntax for Flare Variable in Javascript

Post by flequus »

amitkapoor wrote:I understand. So I made it work that way. Added this to master page:

Code: Select all

<p class="productattributes" style="display:none;" id="copyright"><MadCap:variable name="Primary.Copyright" /></p>
Added following to the JavaScript function where I needed to use the copyright value:

Code: Select all

var copyright = document.getElementById("copyright").value;
And now I could use copyright as I needed in my script.
I ended up using this exact method to add a variable to our feedback button. We have a global project used by different divisions of our company that have individual email addresses for users to provide feedback.

Thank you.
apillman
Jr. Propeller Head
Posts: 5
Joined: Tue Apr 28, 2009 4:28 am

Re: Syntax for Flare Variable in Javascript

Post by apillman »

Update: The posted solution above did not work with Flare 2020 r3, and Dave Lee provided the reason and an updated solution in the Flare Slack channel. Posting his solution here.
Per DAVE:
I'd guess it doesn't work in the latest version of Flare, as variables in the output are now enclosed in a span tag. So that script is returning the value of the parent tag, not the tag containing the variable.

The following approach would work instead:

var MyVariableContent = document.getElementsByClassName("MyVariableSet.MyVariableName")[0].textContent;

This looks for the first instance of a tag with the class name MyVariableSet.MyVariableName , and puts the text in that tag (the variable span tag) into MyVariableContent.

Also, put the script right at the end of the page before the closing body tag (so it doesn't run before the part of the page containing the variable has loaded).
kathryngz
Propeller Head
Posts: 75
Joined: Wed May 14, 2014 11:31 am

Re: Syntax for Flare Variable in Javascript

Post by kathryngz »

Thanks for posting the updated solution from Dave Lee. It didn't work for me until I discovered something after several hours of trial and error. I'm posting my discovery here in case it's helpful to anyone else.

By the way, this post assumes the reader has basic familiarity with javascript. If you don't, https://www.w3schools.com/js is a great site for picking up the basics.

As noted, var MyVariableContent = document.getElementsByClassName("MyVariableSet.MyVariableName")[0].textContent does indeed return the Flare variable text. But it also contains a hidden newline character at the end of the variable. For many uses, this doesn't matter. But I was trying to use the variable to return a value from a JSON array of key/value pairs (language codes and corresponding language names). Because the variable didn't exactly match a key in the array, I kept getting an "undefined" error.

When I converted the javascript variable to a JSON string (using JSON.stringify()), I didn't get "en" as expected; instead, I got en\n. Apparently, converting the variable to a JSON string exposed the hidden newline character.

So I used substr() to extract just the language code from the variable, and reassigned it to the same variable. Then I was able to use the variable to get the required value from the array.

Since it will probably be helpful to see the actual code in addition to the explanation above, here it is. I put the code below in a template page:

Code: Select all

<span class="hide Language.LangCode"><MadCap:variable name="Language.LangCode" /></span>
(Language is the name of my Flare variable set, and LangCode is the variable itself.)

And here's the javascript code:

Code: Select all

var langcode = document.getElementsByClassName("Language.LangCode")[0].textContent;
langcode = langcode.substr(0,2); //extracts just the language code so \n is no longer included.
The result was a variable that only contained the expected language code and worked for the array.

I tried using substr() to count backward in the variable and remove \n, but I couldn't get it to work. So if you use this solution, you'll need to adjust the second argument in substr() to be the length of the text you want to extract.

Hope that helps someone!

Kathryn
Post Reply