4.8 C
New York
Sunday, November 19, 2023

Model Filters – Madcap Flare

Model filters or filter drop-down checklist, is used to dynamically change the content material as per the customers’s choice.

Do you might have on-line assist that serves a number of sorts of audiences? Do you need to give your consumer the liberty to decide on the model of the assistance?
When you have these questions in your thoughts and pondering the way to obtain it in Madcap Flare then, this put up is for you. On this put up, I’ll present you a step-by-step information to create a dropdown filter in Madcap Flare.
I’m utilizing Situation tags, somewhat little bit of Javascript, and Home windows session storage property of HTML5 output.

Don’t fear, if you happen to have no idea Javascript, I’ll attempt my finest to elucidate and make it easy on this put up. After studying this put up, I consider you wouldn’t solely have the ability to create the identical dropdown checklist I created, however you possibly can modify it in line with your wants.

I will likely be trustworthy, this hack is an improved model of Model Filters in HTML5 Output put up written by Thomas Tregner.

Create a brand new venture in madcap Flare

Let’s get began by creating a brand new venture utilizing the Empty template of FLARE and an HTML5 goal.

  1. Within the madcap Flare window, go to File > New Challenge.
  2. Enter the venture title, choose the Challenge Folder, and click on Subsequent.
  3. Within the New from template column, choose the Empty template, and click on Subsequent.
  4. From the Obtainable Targets, choose HTML5 as your goal and click on End.
A screenshot showing newly created project  in madcap flare using the Empty template.

Create circumstances in a conditional tag set

Within the madcap flare, a conditional tag set saves circumstances in your venture. You possibly can have a number of conditional tag units in a venture and one conditional tag set can have a number of circumstances. You need to use circumstances to generate present/disguise content material and generate a number of outputs in a single venture. Nonetheless, on this put up, we’ll use circumstances for the consumer to indicate disguise content material.

  1. To create a brand new conditional tag set, go to Challenge > New > Situation Tag Set. Alternatively, within the Challenge Organizer, right-click on the Conditional Textual content folder and choose the Add Situation Tag Set. For this put up, we’ll use the Default conditional tag set that got here with the manufacturing unit templates.
  2. Double-click a conditional tag set.
  3. There will likely be a couple of Conditional tags already accessible, rename them as the choice you need to give to your consumer. I’ve renamed them as follows:
    • Model 1
    • Model 2
    • Model 3
  4. Save the file.
An image showing conditional tag set in madcap flare to create version filters.

Apply circumstances to your content material

You possibly can apply circumstances to matters, pictures, stylesheet, glossary, pores and skin, goal recordsdata, complete paragraphs, and textual content inside paragraphs. desk rows and columns, desk of contents (TOC) entries, glossary phrases, index key phrase markers, and extra.

Sadly, this trick solely works on circumstances utilized at complete paragraphs, textual content inside paragraphs, and desk rows and columns.

  1. To use a situation tag to a paragraph, the quickest means is, right-click on the paragraph block, choose Circumstances, and on the Situation Tags dialog field, choose the situation.
  2. To use a situation to the textual content inside a paragraph, choose the textual content, right-click on the chosen textual content, choose Circumstances, and on the Situation Tags dialog field, choose the situation.
  3. Don’t overlook to put it aside.
applying conditions to create version filters in madcap flare

Add a generic class within the stylesheet

To cover particular content material from our HTML5 output, we have to create a generic model, which we’ll use later. So as to add a generic model, do the next steps:

  1. Double-click the default model sheet to open it within the madcap flare stylesheet editor.
  2. Click on Add Selector.
  3. From the HTML ingredient dropdown checklist, choose Generic.
  4. Within the Class Identify field, enter .hidden1, and click on OK so as to add a brand new class.
  5. Within the stylesheet editor, be sure that Present: All Properties is chosen.
  6. For the newly created .hidden1 class, within the block property group, within the show field, enter none.
A screenshot showing a generic class created and style display:none applied in madcap Flare stylesheet editor to create version filters.

Create a dropdown menu for filters

We are going to add the drop-down checklist on the grasp web page, in order that it seems on each web page. That is the drop-down checklist that may work as our model filters within the remaining output

  1. Double-click the grasp web page to open it.
  2. Click on the textual content editor as we have to put it in some HTML code.
  3. Within the grasp web page, above the physique proxy, copy and paste the beneath code, and save the grasp web page file.
<choose id="version-select" onchange="showHideVersion()">
    <possibility worth="Default.Model 1">Model 1</possibility>
    <possibility worth="Default.Model 2">Model 2</possibility>
    <possibility worth="Default.Model 3">Model 3</possibility>

Allow us to perceive what are we doing with this HTML code.
We’re making a drop-down checklist with an ID “version-select” and having three choices. The drop-down checklist will name a operate at any time when the consumer modifications choose an possibility. “Choose” is the HTML ingredient for a drop-down checklist. Each time consumer choose a model, “onchange” property triggers operate “showHideVersion()”.

We have now three choices for consumer Model 1, Model 2, and Model 3. These choices have a price related which is saved within the “worth” property of the “possibility” ingredient.

You could surprise, why “Default.Model 2”, “Default.Model 2”, and “Default.Model 3” and never the rest.
To seek out the reply to this query, check out the subject the place we had utilized the conditional tags to the paragraph blocks in a textual content editor. You can find that after we utilized the conditional tag to a paragraph, madcap Flare modifications its attributes. Flare provides “MadCap:circumstances” attribute to the ingredient. I’m utilizing the identical values as our choices.

In case you are utilizing a conditional tag set aside from the Default tag set then, these values will change. Use the identical worth that you simply see in your textual content editor.

Add a Javascript right into a madcap Flare venture to create model filters

Including a Javascript right into a madcap Flare venture is straightforward. You possibly can add a Javascript code in madcap Flare however you can’t create a Javascript file in Flare. You possibly can create a separate Javascript file utilizing a textual content editor, reserve it with a .js extension, after which hyperlink it into your venture. You possibly can add the Javascript code or hyperlink a Javascript file into a subject, a snippet, or a grasp web page. We are going to add our javascript code on to our grasp web page. This code will filter the content material primarily based on the worth chosen by consumer from our model filters drop-down checklist.

  1. Double-click on the grasp web page through which we added our dropdown checklist.
  2. Change to XML editor.
  3. Add a paragraph on the finish of the web page, go to Insert ribbon, and choose Script.
  4. Within the Insert Script dialog field, from the Language dropdown checklist, choose textual content/javascript.
  5. Within the Script Code field, copy and previous the next code, after which click on OK.
operate getElementsWithAttribute(attr) {
    var elementsWithAttribute = [];
    var parts = doc.physique.getElementsByTagName('*');
    for (var i = 0; i < parts.size; i++) {
        if (parts[i].getAttribute(attr)) {
    return elementsWithAttribute;
operate showHideVersion() {
    var parts = getElementsWithAttribute('data-mc-conditions');
    var e = doc.getElementById('version-select');
    var selectedVersion = e.choices[e.selectedIndex].worth;
    for (var i = 0; i < parts.size; i++) {
        if (parts[i].getAttribute('data-mc-conditions').indexOf(selectedVersion) > -1) {
            parts[i].classList.take away("hidden1");
            localStorage.id = e.choices[e.selectedIndex].worth;
        } else {
operate myFunction() {
    var parts = getElementsWithAttribute('data-mc-conditions');
    var locals = localStorage.getItem('id');
    if (locals == null) {
        localStorage.id = "Default.Model 3";
        locals = localStorage.getItem('id');
        for (var i = 0; i < parts.size; i++) {
            if (parts[i].getAttribute('data-mc-conditions').indexOf(locals) > -1) {
                parts[i].classList.take away("hidden1");
                doc.getElementById('version-select').worth = locals;
            } else {
    } else {
        for (var i = 0; i < parts.size; i++) {
            if (parts[i].getAttribute('data-mc-conditions').indexOf(locals) > -1) {
                parts[i].classList.take away("hidden1");
                doc.getElementById('version-select').worth = locals;
            } else {

The above code has three features. Allow us to perceive what are we doing on this code step-by-step.

The primary operate – getElementsWithAttribute

The operate is used within the second operate “showHideVersion” which does the primary job.

The second operate – showHideVersion

We name this operate at any time when the consumer modifications the worth of our dropdown checklist. Allow us to see what every line of code within the operate showHideVersion does.

var parts = getElementsWithAttribute('data-mc-conditions');

This assertion creates a variable (variable is used to retailer values) named “parts” and calls the primary operate “getElementsWithAttribute”. It’s going to discover all the weather in your web page having the “data-mc-conditions” attribute and retailer it within the “parts” variable. Keep in mind after we take a look at a subject with circumstances utilized. The madcap Flare added “MadCap:circumstances” attribute to our paragraph ingredient. Once we generate an HTML 5 output, the “MadCap:circumstances” attribute modifications to “data-mc-conditions”.

var e = doc.getElementById('version-select');

This assertion creates a variable “e” and shops the ingredient having ID “version-select”. Now, if you happen to bear in mind we gave this ID to our dropdown checklist.

var selectedVersion = e.choices[e.selectedIndex].worth;

This assertion creates a variable “selectedVersion” and shops the worth of the chosen possibility within the dropdown checklist with variable “e” which we created within the above assertion and saved our dropdown checklist.

for (var i = 0; i < parts.size; i++)

This can be a for loop that may iterate the beneath statements to the variety of occasions now we have the weather with the “data-mc-conditions” attribute.

if (parts[i].getAttribute('data-mc-conditions').indexOf(selectedVersion) > -1 )

This can be a situation that verifies if the ingredient with the data-mc-conditions attribute has the identical worth as the choice chosen by the consumer. For instance, from the dropdown checklist, we created, if a consumer selects Model 2. Then, this assertion will verify all the weather which have an attribute “data-mc-conditions = “Default.Model 2″”.
Due to this motive, after we created our dropdown checklist, we matched the worth within the “worth” property of choices to the worth of “MadCap:circumstances” attribute in paragraphs.

parts[i].classList.take away("hidden1");

For all these parts that match with the above situation, this assertion removes our “.hidden1” class and brings again to their default state. It will present the matched ingredient to a consumer.

localStorage.id = e.choices[e.selectedIndex].worth;

This assertion is to retailer the consumer choice in customers browser in order that when a consumer strikes from one web page to a different, the consumer sees the content material he selected.

else {             parts[i].classList.add("hidden1");         }

For all these parts that don’t match with the above situation, this assertion provides a category “hidden1”. We have now created this class with a method “show: none;”. It will disguise the unequalled ingredient from the consumer.

The third operate – myFunction

This operate is known as at any time when a web page masses. This operate is to verify the worth we saved within the consumer’s browser. The primary assertion is identical as we used within the second operate.

var locals = localStorage.getItem('id');

This assertion creates a variable with the title “locals”, will get the consumer’s choice from the consumer’s browser, and shops the worth within the variable.

if (locals == null)

That is to verify if the consumer is visiting our assist for the primary time. We’re saving our consumer’s choice worth and if a consumer is visiting for the primary time, there aren’t any values. On this case, the subsequent assertion does our job.

localStorage.id = "Default.Model 3";

This assertion shops a price within the consumer’s browser storage. This is identical as setting a default worth. For now, I’m choosing Model 3.0 as default as that is the most recent model. You possibly can modify it in line with your use case.
Relaxation all of the statements are doing the identical job as to indicate and conceal content material as we did in our second operate. The one distinction is that as an alternative of trying on the consumer’s choice we’re checking the worth saved within the consumer’s browser.

Generate the output and check it

The final step of this trick is to open the goal file, on the Superior tab, and from the Grasp Web page dropdown checklist, choose the created grasp web page. Now, we’re able to construct our goal and check it.

I hope this put up lets you construct an HTML5 output with model filters. If there’s something I missed, please be happy to touch upon this put up.

Additionally See

Find out how to earn a living on-line with out funding.

Greatest Wattage For LED Nail Lamp

Supply hyperlink

Related Articles


Please enter your comment!
Please enter your name here

Latest Articles