Set condition dynamically?

This forum is for Single-Sourcing your Flare content to multiple outputs.
Post Reply
BongeSpob
Jr. Propeller Head
Posts: 3
Joined: Thu Jun 13, 2019 12:56 am

Set condition dynamically?

Post by BongeSpob »

Hi,

I have a project where some images have to be shown or not depending on some conditions set or not. The point is, I do not want to generate my HTML output several times for all the different combinations of conditions, but want to have one set of HTML documents and then set the condition from outside dynamically when viewing these HTML files.

The files itself are stored locally (so not HTTP-access to them).

So my question: how can I set such a condition from outside dynamically?

Thanks!
doc_guy
Propellus Maximus
Posts: 1979
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West
Contact:

Re: Set condition dynamically?

Post by doc_guy »

Flare is not designed to do this. However, I suppose if there is a will, there is a way.

When you generate output, content that has conditions applied to it has an attribute applied to the tag similar to the following:

Code: Select all

<div class="note" data-mc-conditions="Default.ScreenOnly"> Content </div>
So, I suppose you could write a script that would dynamically update the CSS style to change some attributes with style 1 to hidden and other attributes with style 2 to display.

I'm thinking you have something like this in your code:

Code: Select all

<img src="image1.png" data-mc-conditions="Default.Condition1" />
<img src="image2.png" data-mc-conditions="Default.Condition2" />
So in your target, you would leave both the Condition1 and the Condition2 blank (so they will be included). Then when you load the page there is a javascript that takes a parameter, probably passed through the URL, and based on that parameter, targets all content with data-mc-conditions="Default.Condition1" and marks it display: block, while simultaneously looking for all content with a data-mc-conditions="Default.Condition2" and marks it display:none.

Then if it receives a different parameter, it would do the opposite.

But you're looking for somebody to create a custom script based on your conditions, and you better hope you don't need to add new conditions down the line, or you're going to have to rewrite your script.
Paul Pehrson
My Blog

Image
chrisj
Propeller Head
Posts: 87
Joined: Thu Jun 26, 2014 8:08 am
Location: Omaha, NE

Re: Set condition dynamically?

Post by chrisj »

doc_guy wrote:Flare is not designed to do this. However, I suppose if there is a will, there is a way.

When you generate output, content that has conditions applied to it has an attribute applied to the tag similar to the following:

Code: Select all

<div class="note" data-mc-conditions="Default.ScreenOnly"> Content </div>
So, I suppose you could write a script that would dynamically update the CSS style to change some attributes with style 1 to hidden and other attributes with style 2 to display.

I'm thinking you have something like this in your code:

Code: Select all

<img src="image1.png" data-mc-conditions="Default.Condition1" />
<img src="image2.png" data-mc-conditions="Default.Condition2" />
So in your target, you would leave both the Condition1 and the Condition2 blank (so they will be included). Then when you load the page there is a javascript that takes a parameter, probably passed through the URL, and based on that parameter, targets all content with data-mc-conditions="Default.Condition1" and marks it display: block, while simultaneously looking for all content with a data-mc-conditions="Default.Condition2" and marks it display:none.

Then if it receives a different parameter, it would do the opposite.

But you're looking for somebody to create a custom script based on your conditions, and you better hope you don't need to add new conditions down the line, or you're going to have to rewrite your script.
I don't think this scenario would necessarily mean a rewrite of the script when a new condition is added. I use an approach like you've suggested, except my parameter is set via a dropdown (kind of like a version filter). As long as the script is written to say "if parameter = condition", then you don't have to update the script. It does get a bit harder if you have a bunch of different condition sets that all have conditions with the same name...
Chris Jones
Product Content Manager - TEAM Software
Image
BongeSpob
Jr. Propeller Head
Posts: 3
Joined: Thu Jun 13, 2019 12:56 am

Re: Set condition dynamically?

Post by BongeSpob »

Ok, it seems I have to clarify things a bit. This is what the editor generates for me:

Code: Select all

<img src="../Images/ManualB2T.png" MadCap:conditions="GUIDirection.B2T,GUIDirection.none" />
<img src="../Images/ManualL2R.png" MadCap:conditions="GUIDirection.L2R" />
The images "ManualB2T.png" and "ManualL2R.png" need to be shown/hidden depending on the conditions "GUIDirection.B2T" and "GUIDirection.L2R".

After MadCap generates a HTML file where both images are contained, my assumption is that there is a way to set these conditions from outside somehow.

And that's exactly what I want to do: turn on/off the images depending on these conditions. What I can do is to hand over a parameter on loading (which would not work for a HTML file?) or actively inject a JavaScript file into the already loaded HTML file.

When JavaScript is the solution: what do I have to do to enable one of these conditions? The "MadCap:conditions" thingy looks like a JavaScript-hack for me which corresponds to some hidden functions in the different MadCap.js-files which are always used.

When JavaScript is not the solutions: how can I "activate" these conditions from outside?

Thanks!
NorthEast
Master Propellus Maximus
Posts: 6354
Joined: Mon Mar 05, 2007 8:33 am

Re: Set condition dynamically?

Post by NorthEast »

I do something like this:

I mark content with conditions; e.g. product1 and product2.

I pass a parameter in links to the HTML file, e.g. topic.htm?parameter=product1

I use a script to get the parameter value, and then save this to local storage, so it remembers the value when you browse to other pages.

When I open a page, I have another script that reads the parameter from local storage, and then uses this value to add a class on the html tag; e.g. <html class="product1">

I have my CSS set up to hide content for each product based on the parameter; so when it's set to "product1", it hides product2.

Code: Select all

html.product1 [data-mc-conditions="condition.product2"] { display: none; }

html.product2 [data-mc-conditions="condition.product1"] { display: none; }
Note that you don't have to use conditions to tag the content, you could tag them using a class, or a data attribute - anything you can reference in the CSS. I just use conditions because they're easy to see and work with in the editor.

Mind, the one thing I have learnt from using 'dynamic conditions' this way is that it only really works for topic content.
You can't dynamically hide topics from the search or the TOC, as they are generated by Flare at build time.
chrisj
Propeller Head
Posts: 87
Joined: Thu Jun 26, 2014 8:08 am
Location: Omaha, NE

Re: Set condition dynamically?

Post by chrisj »

Dave Lee wrote:I do something like this:

I mark content with conditions; e.g. product1 and product2.

I pass a parameter in links to the HTML file, e.g. topic.htm?parameter=product1

I use a script to get the parameter value, and then save this to local storage, so it remembers the value when you browse to other pages.

When I open a page, I have another script that reads the parameter from local storage, and then uses this value to add a class on the html tag; e.g. <html class="product1">

I have my CSS set up to hide content for each product based on the parameter; so when it's set to "product1", it hides product2.

Code: Select all

html.product1 [data-mc-conditions="condition.product2"] { display: none; }

html.product2 [data-mc-conditions="condition.product1"] { display: none; }
Note that you don't have to use conditions to tag the content, you could tag them using a class, or a data attribute - anything you can reference in the CSS. I just use conditions because they're easy to see and work with in the editor.

Mind, the one thing I have learnt from using 'dynamic conditions' this way is that it only really works for topic content.
You can't dynamically hide topics from the search or the TOC, as they are generated by Flare at build time.
Sort of off topic, but there is actually a (somewhat hacky) way that you can dynamically show/hide elements in a TOC using classes. Check out the properties of a TOC element and you'll see a "Style Class" property that is available. The issue is that you seemingly can't create these elements in the GUI unless you have a webhelp skin. What's interesting, is that you can just have a dummy skin to create the classes and then you can select them from the TOC and they will work in ANY skin. And, of course, if you need to apply multiple classes, you can do that if you open the TOC in your text editor.

I played around with this a while back while creating "wizards" in my help that would show/hide elements in a menu proxy. You can imagine the possibilities of this if you are using grid or flexbox to change the display of your menu items. Or, in your case, if you are saving to local storage based on product or version or whatever other parameter.
Chris Jones
Product Content Manager - TEAM Software
Image
NorthEast
Master Propellus Maximus
Posts: 6354
Joined: Mon Mar 05, 2007 8:33 am

Re: Set condition dynamically?

Post by NorthEast »

chrisj wrote:Sort of off topic, but there is actually a (somewhat hacky) way that you can dynamically show/hide elements in a TOC using classes. Check out the properties of a TOC element and you'll see a "Style Class" property that is available.
Cheers.

So does the TOC class persist in the generated output - e.g. is there a class or data attribute on the generated menu item?
chrisj
Propeller Head
Posts: 87
Joined: Thu Jun 26, 2014 8:08 am
Location: Omaha, NE

Re: Set condition dynamically?

Post by chrisj »

Dave Lee wrote:
chrisj wrote:Sort of off topic, but there is actually a (somewhat hacky) way that you can dynamically show/hide elements in a TOC using classes. Check out the properties of a TOC element and you'll see a "Style Class" property that is available.
Cheers.

Do these conditions persist in the generated output - e.g. is there a class or data attribute in the generated menu item?
You got it. That's exactly how you can then manipulate them with a script.
Chris Jones
Product Content Manager - TEAM Software
Image
jjw
Sr. Propeller Head
Posts: 133
Joined: Thu May 08, 2014 4:18 pm
Location: Melbourne

Re: Set condition dynamically?

Post by jjw »

Code: Select all

When you generate output, content that has conditions applied to it has an attribute applied to the tag 
I notice that this doesn't happen if you publish to "Clean XHTML" - don't know why though, there's nothing especially unclean about data attributes is there?

J
BongeSpob
Jr. Propeller Head
Posts: 3
Joined: Thu Jun 13, 2019 12:56 am

Re: Set condition dynamically?

Post by BongeSpob »

Dave Lee wrote:I pass a parameter in links to the HTML file, e.g. topic.htm?parameter=product1
When I do this, the browser complains about a "file not found" - which for sure is correct, because the name of the file is "topic.htm" but not "topic.htm?parameter=product1"
chrisj
Propeller Head
Posts: 87
Joined: Thu Jun 26, 2014 8:08 am
Location: Omaha, NE

Re: Set condition dynamically?

Post by chrisj »

BongeSpob wrote:
Dave Lee wrote:I pass a parameter in links to the HTML file, e.g. topic.htm?parameter=product1
When I do this, the browser complains about a "file not found" - which for sure is correct, because the name of the file is "topic.htm" but not "topic.htm?parameter=product1"
The parameter string needs to be formatted in quotes (...?parameter="product1").
Chris Jones
Product Content Manager - TEAM Software
Image
mdpais-c
Propeller Head
Posts: 20
Joined: Wed May 13, 2020 11:56 am

Re: Set condition dynamically?

Post by mdpais-c »

My company is trying to have our online help work exactly like this (no multiple targets, content displays based on parameters in the URL). I'm the technical writer that's working on the online help using Madcap Flare and I have the support of the Dev team (they have no knowledge of Madcap Flare). Putting our heads together we've figured out some stuff, but here's where we're stuck.

The dev team has created a javascript that will display any content with the tag data-mc-conditions based on the parameters obtained through the URL. However, for this to work they need me to set all content with condition tags to display:none in the css. I tried doing this by setting the display attribute for Madcap|conditionalText to none, but that doesn't seem to work. Is there something I'm missing?
NorthEast
Master Propellus Maximus
Posts: 6354
Joined: Mon Mar 05, 2007 8:33 am

Re: Set condition dynamically?

Post by NorthEast »

mdpais-c wrote:My company is trying to have our online help work exactly like this (no multiple targets, content displays based on parameters in the URL). I'm the technical writer that's working on the online help using Madcap Flare and I have the support of the Dev team (they have no knowledge of Madcap Flare). Putting our heads together we've figured out some stuff, but here's where we're stuck.

The dev team has created a javascript that will display any content with the tag data-mc-conditions based on the parameters obtained through the URL. However, for this to work they need me to set all content with condition tags to display:none in the css. I tried doing this by setting the display attribute for Madcap|conditionalText to none, but that doesn't seem to work. Is there something I'm missing?
During the build process, Flare converts all Madcap| prefixed tags/CSS into the actual tags/CSS used in the output.
My guess is that the display attribute isn't converted into the output CSS - it's quite common for Madcap| styles to only support certain attributes, but unfortunately that's not documented anywhere.

Anyway, if you look at my example in this thread, you'll see that I handle this by basing my CSS on the tags/attributes in the built output; e.g.

Code: Select all

[data-mc-conditions="myconditions.condition1"] { display: none; }
That's because in the output, all tags that were marked with a condition have a data-mc-conditions attribute.
mdpais-c
Propeller Head
Posts: 20
Joined: Wed May 13, 2020 11:56 am

Re: Set condition dynamically?

Post by mdpais-c »

Dave Lee wrote:During the build process, Flare converts all Madcap| prefixed tags/CSS into the actual tags/CSS used in the output.
My guess is that the display attribute isn't converted into the output CSS - it's quite common for Madcap| styles to only support certain attributes, but unfortunately that's not documented anywhere.

Anyway, if you look at my example in this thread, you'll see that I handle this by basing my CSS on the tags/attributes in the built output; e.g.

Code: Select all

[data-mc-conditions="myconditions.condition1"] { display: none; }
That's because in the output, all tags that were marked with a condition have a data-mc-conditions attribute.
Thanks Dave. I was hoping there was a way to do it for any content that had a condition tag but I guess I'll have to put in the code for each condition tag.
NorthEast
Master Propellus Maximus
Posts: 6354
Joined: Mon Mar 05, 2007 8:33 am

Re: Set condition dynamically?

Post by NorthEast »

mdpais-c wrote:Thanks Dave. I was hoping there was a way to do it for any content that had a condition tag but I guess I'll have to put in the code for each condition tag.
You can do if for any content that has a condition tag, for example:

Code: Select all

[data-mc-conditions] { display: none; }
If you're not sure how to reference attributes in CSS, take a look here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
mdpais-c
Propeller Head
Posts: 20
Joined: Wed May 13, 2020 11:56 am

Re: Set condition dynamically?

Post by mdpais-c »

Dave Lee wrote:You can do if for any content that has a condition tag, for example:

Code: Select all

[data-mc-conditions] { display: none; }
Oh brilliant. Thank you.
Post Reply