Skip to main content

A guide to Improvementsoft's plugins

· 2 min read
Mattias Sander
Mattias Sander

The Plugins That Actually Make Flare Better

If you’re using MadCap Flare and not taking advantage of these plugins, you’re leaving time and quality on the table. I built these tools to solve real problems technical writers run into every day. Here’s the lineup:


🧠 AI Helper Plugin

You want to use ChatGPT or Microsoft Copilot without breaking your Flare projects? This one’s for you. It converts content to Markdown and back while preserving structure, snippets, and variables. That means you can ask your AI to rewrite, summarize, or improve content—then slot it right back into Flare without cleanup hell.

👉 More on the AI Helper


🧹 Mad Quality Plugin

Think of this as your automatic editor. It scans your project and flags broken structure, inconsistent terminology, and style guide violations. Saves you hours of boring manual checks and lets you focus on writing, not hunting down rogue capital letters.

👉 More on Mad Quality


🧾 Markdown Plugin

This one bridges the gap between Flare and developers. Import and export Markdown without losing structure or formatting. Great if you’re working with GitHub, dev teams, or any system that likes Markdown more than XML.

👉 More on the Markdown Plugin


🎨 Style Stack Plugin

Tired of juggling 40 different classes just to make your content look decent? With this, you can apply multiple styles to a single element—just like in real-world CSS. Makes your stylesheet cleaner and your life easier.

👉 More on Style Stack


🔄 Kaizen Plugin (Free)

This one’s all about continuous improvement. It helps you identify and fix productivity leaks in your Flare workflow. Nothing fancy—just practical tools to work smarter.

👉 Get the Kaizen Plugin


In short?

These plugins exist because Flare didn’t do enough out of the box. They make your docs cleaner, your process faster, and your work less annoying. If you’re writing for a living, you should be using tools that pull their weight.

Let me know if you want help setting any of them up.

Implementing a dynamic search dropdown in MadCap Flare

· 3 min read
Mattias Sander
Mattias Sander

Here's a Javascript you can use to implement a dynamic search dropdown in Flare. Just save the script below in a file and include it in your Flare project, and then include the script in your template page, or any page where you want the dropdown to appear. You might need to adjust the CSS selector of the search input field based on your project's structure.

NOTE Updated 2024-10-14: Added word highlighting. Updated 2024-08-12: Fixed the bug related to boolean operators. Updated 2024-05-20: Added a method to show the dropdown when the search input is focused.

Flare Search Dropdown

class SearchManager {
constructor() {
this.debounce = this.debounce.bind(this);
this.handleSearch = this.handleSearch.bind(this);
this.displayResults = this.displayResults.bind(this);
this.clearResults = this.clearResults.bind(this);
this.showFullResults = this.showFullResults.bind(this);
this.hideDropDown = this.hideDropDown.bind(this);
this.showDropDown = this.showDropDown.bind(this); // Add this line
this.init();
}

debounce(func, delay) {
let debounceTimer;
return function () {
const context = this;
const args = arguments;
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => func.apply(context, args), delay);
};
}

handleSearch() {
let searchQuery = document.querySelector('.main-section .search-bar > input').value.trim();
const invalidPattern = /(\"|\($|\b(AND|OR|NOT|NEAR)\b)$/i;
const openParenthesesCount = (searchQuery.match(/\(/g) || []).length;
const closeParenthesesCount = (searchQuery.match(/\)/g) || []).length;

if (invalidPattern.test(searchQuery) || openParenthesesCount !== closeParenthesesCount) {
console.warn("Invalid search query. Please ensure proper use of operators and matching parentheses.");
return;
}

if (searchQuery.length > 0) {
MadCap.SearchHelper.SearchPane.Search(searchQuery, { searchContent: true })
.then(this.displayResults)
.catch(error => {
console.error("Search failed: ", error);
});
} else {
this.clearResults();
}
}

displayResults(results) {
const dropdown = document.getElementById('searchResultsDropdown');
dropdown.style.visibility = "visible"; // Ensure the dropdown is visible
dropdown.innerHTML = '';
const searchQuery = document.querySelector('.main-section .search-bar > input').value.trim(); // Get the current search query

results.content.slice(0, 5).forEach(item => {
const resultItem = document.createElement('li');
const title = document.createElement('div');
title.classList.add('title');
title.textContent = item.Title;
resultItem.appendChild(title);
const preview = document.createElement('div');
preview.classList.add('preview');
preview.textContent = item.AbstractText;
resultItem.appendChild(preview);
resultItem.addEventListener('click', () => {
// Append ?Highlight={searchword} to the URL
const urlWithHighlight = `${item.Link}?Highlight=${encodeURIComponent(searchQuery)}`;
window.location.href = urlWithHighlight;
});
dropdown.appendChild(resultItem);
});

if (results.content.length > 5) {
const showAll = document.createElement('li');
showAll.textContent = 'Showing 5 results. For all results, press ENTER';
showAll.addEventListener('click', this.showFullResults);
// Append this first so it's at the top:
dropdown.insertBefore(showAll, dropdown.firstChild);
}
}

displayAllResults(results) {
const dropdown = document.getElementById('searchResultsDropdown');
dropdown.innerHTML = '';
const searchQuery = document.querySelector('.main-section .search-bar > input').value.trim(); // Get the current search query

results.content.forEach(item => {
const resultItem = document.createElement('li');
const title = document.createElement('div');
title.classList.add('title');
title.textContent = item.Title;
resultItem.appendChild(title);
const preview = document.createElement('div');
preview.classList.add('preview');
preview.textContent = item.AbstractText;
resultItem.appendChild(preview);
resultItem.addEventListener('click', () => {
// Append ?Highlight={searchword} to the URL
const urlWithHighlight = `${item.Link}?Highlight=${encodeURIComponent(searchQuery)}`;
window.location.href = urlWithHighlight;
});
dropdown.appendChild(resultItem);
});
}


clearResults() {
const dropdown = document.getElementById('searchResultsDropdown');
dropdown.innerHTML = '';
}

showFullResults() {
// Implementation for showing full results
}


hideDropDown(event) {
const searchResultsDropdown = document.getElementById('searchResultsDropdown');
if (!event.target.closest(".search-field")) {
searchResultsDropdown.style.visibility = "hidden";
}
}

showDropDown() { // Add this method
const searchResultsDropdown = document.getElementById('searchResultsDropdown');
searchResultsDropdown.style.visibility = "visible";
}

init() {
$(document).ready(() => {
const searchInput = document.querySelector('.main-section .search-bar > input');
searchInput.addEventListener('input', this.debounce(this.handleSearch, 300));
searchInput.addEventListener('focus', this.showDropDown); // Add this line
const dropdown = document.createElement('ul');
dropdown.id = 'searchResultsDropdown';
document.querySelector('.main-section .search-bar').appendChild(dropdown);
});

document.addEventListener("click", this.hideDropDown);
}
}

new SearchManager();

Using Post Build Events in Flare for CSS Customization

· One min read
Mattias Sander
Mattias Sander

Post build events in MadCap Flare can append styles to the skin-specific CSS, enabling customization of elements not available in the Flare skin editor. This is particularly useful for Tripane skin where some elements, like the search bar proxy, lack direct support for modifications.

  1. Create Custom CSS and JavaScript: Prepare your additional CSS and JavaScript files with the desired styles and functionalities.

  2. Configure Post Build Events: In your Flare project, open your target, and looks under the 'Build Events' tab, add the following batch commands as post build events:

    type "$(ProjectDirectory)Content\Skin_CSS_additions.css" >> "$(OutputDirectory)\Skins\Default\Stylesheets\Styles.css"
    type "$(ProjectDirectory)Content\Skin_Javascript_additions.js" >> "$(OutputDirectory)\Resources\Scripts\MadCapAll.js"

    These commands append your custom CSS and JavaScript to Styles.css and MadCapAll.js in the output directory.

  3. Build the Project: Execute a build. The custom styles and scripts will be integrated into the skin files.

Post build events offer a practical solution to extend the customization capabilities of Flare’s Tripane skin, allowing for additional styling and functionality adjustments not provided by the default skin editor.

Supercharge Tables in Flare

· One min read
Mattias Sander
Mattias Sander

Supercharge your tables in MadCap Flare using the DataTables JavaScript plug-in. As a bonus it makes your tables mobile friendly automatically.

Just add these tags to your template page <head> element:

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/2.0.1/css/dataTables.dataTables.min.css">

<script type="text/javascript" src="//cdn.datatables.net/2.0.1/js/dataTables.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
let table = new DataTable('.myTable');
});
</script>

For more information, see https://datatables.net/.

Enhance Responsiveness with the <picture> Element

· One min read
Mattias Sander
Mattias Sander

When working with MadCap Flare, generating responsive HTML output is key for accessibility across various devices. The HTML <picture> element is an essential tool for this purpose, ensuring images in your documentation adapt seamlessly to different screen sizes and resolutions.

Simplified Approach

The <picture> element allows you to define multiple image sources for different viewing conditions. This flexibility is vital for technical documentation, where clarity and readability are paramount.

Usage in Flare

In your Flare project:

<picture>
<source media="(min-width: 800px)" srcset="large-image.jpg"/>
<img src="default-image.jpg" alt="Description"/>
</picture>

This code serves large-image.jpg for screens wider than 800px, with default-image.jpg as a fallback for smaller screens or unsupported browsers.

Benefits

  1. Responsive Design: Tailor images to fit various devices, enhancing user engagement.
  2. Efficiency: Reduce the need for multiple image versions in your Flare project.
  3. Clarity: Ensure images are crisp and clear, regardless of device or screen size.

Incorporating the <picture> element into your MadCap Flare HTML output is a straightforward yet impactful way to elevate your technical documentation. It's an easy step towards creating more responsive, device-friendly content.

Implementing CSS Clamp in MadCap Flare

· One min read
Mattias Sander
Mattias Sander

Clamp demo

What is CSS clamp()?

CSS clamp() is a function for responsive font sizing in web design, adjusting font size within specified minimum, preferred, and maximum sizes based on viewport size.

Using clamp() in MadCap Flare

To use clamp() in MadCap Flare for web outputs, update your CSS with a rule like .dynamic-font { font-size: clamp(1rem, 2vw, 3rem); } and apply this class to elements in Flare.

note

clamp() is not applicable to PDFs generated in Flare; adjust font settings for PDFs separately.

Additional Resources