Set condition dynamically?

This forum is for Single-Sourcing your Flare content to multiple outputs.

Set condition dynamically?

Postby BongeSpob on Fri Jun 14, 2019 12:28 am

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!
BongeSpob
Jr. Propeller Head
 
Posts: 3
Joined: Thu Jun 13, 2019 12:56 am

Re: Set condition dynamically?

Postby doc_guy on Wed Jun 19, 2019 10:31 am

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.
User avatar
doc_guy
Propellus Maximus
 
Posts: 1954
Joined: Tue Nov 28, 2006 11:18 am
Location: Crossroads of the West

Re: Set condition dynamically?

Postby chrisj on Thu Jun 20, 2019 2:02 pm

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
chrisj
Propeller Head
 
Posts: 86
Joined: Thu Jun 26, 2014 8:08 am
Location: Omaha, NE

Re: Set condition dynamically?

Postby BongeSpob on Mon Jun 24, 2019 1:38 am

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!
BongeSpob
Jr. Propeller Head
 
Posts: 3
Joined: Thu Jun 13, 2019 12:56 am

Re: Set condition dynamically?

Postby Dave Lee on Mon Jun 24, 2019 5:35 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5657
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Set condition dynamically?

Postby chrisj on Mon Jun 24, 2019 7:49 am

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
chrisj
Propeller Head
 
Posts: 86
Joined: Thu Jun 26, 2014 8:08 am
Location: Omaha, NE

Re: Set condition dynamically?

Postby Dave Lee on Mon Jun 24, 2019 7:54 am

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?
Dave Lee
Master Propellus Maximus
 
Posts: 5657
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Set condition dynamically?

Postby chrisj on Mon Jun 24, 2019 7:56 am

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
chrisj
Propeller Head
 
Posts: 86
Joined: Thu Jun 26, 2014 8:08 am
Location: Omaha, NE

Re: Set condition dynamically?

Postby jjw on Mon Jun 24, 2019 5:23 pm

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
jjw
Sr. Propeller Head
 
Posts: 133
Joined: Thu May 08, 2014 4:18 pm
Location: Melbourne

Re: Set condition dynamically?

Postby BongeSpob on Fri Jun 28, 2019 12:31 am

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"
BongeSpob
Jr. Propeller Head
 
Posts: 3
Joined: Thu Jun 13, 2019 12:56 am

Re: Set condition dynamically?

Postby chrisj on Mon Jul 01, 2019 12:39 pm

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
chrisj
Propeller Head
 
Posts: 86
Joined: Thu Jun 26, 2014 8:08 am
Location: Omaha, NE


Return to Single-Sourcing

Who is online

Users browsing this forum: No registered users and 1 guest