Skip to main content

TRANSACTION Tag Conditional Display

Ever wished you could show different information based on what type of request someone is viewing? Maybe you want to display article-specific fields only for articles, or show a "Renew" button only for loans? That's exactly what TRANSACTION tag conditional display lets you do!

This feature allows you to show or hide parts of your HTML pages based on the values stored in transaction fields. It's perfect for creating cleaner, more relevant user interfaces that adapt to different request types.

How to Use It​

The magic happens with a special TRANSACTION tag that includes a few extra parameters:

<#TRANSACTION field='FieldName' displayStyle='CompareValue' compareValue='ValueToMatch' disabledValue='CSSClassWhenNotMatching'>

What Each Part Does​

  • field - Which transaction field you want to check (like RequestType or DocumentType)
  • displayStyle - Always set this to 'CompareValue' for conditional display
  • compareValue - The specific value you're looking for (like 'Article' or 'Loan')
  • disabledValue - The CSS class to apply when it doesn't match (usually 'd-none' to hide things)

How It Works​

Think of it like a simple if/then statement for your HTML:

  1. If the field value matches what you're looking for: The content shows up normally (no extra CSS class gets added)
  2. If the field value doesn't match: The CSS class you specified gets applied (usually hiding the content with d-none)

Real-World Examples​

Let's look at some practical ways you might use this feature:

Only Show Renewal Options for Loans​

Nobody should see a "Renew" button on an article request - that doesn't make sense! Here's how to show it only for loans:

<div class="<#TRANSACTION field='RequestType' displayStyle='CompareValue' compareValue='Loan' disabledValue='d-none'>">
    <button type="button" class="btn btn-secondary" aria-describedby="renew-help">
        <span aria-hidden="true" class="fas fa-redo"></span>
        Renew Item
    </button>
    <div id="renew-help" class="sr-only">Extend the due date for this borrowed item</div>
</div>

Show Different Fields Based on What You're Requesting​

Sometimes you need different information depending on the type of document. For example, book chapters might need special fields that regular journal articles don't:

<!-- Article Fields -->
<section class="<#TRANSACTION field='RequestType' displayStyle='CompareValue' compareValue='Article' disabledValue='d-none'>" 
         aria-labelledby="article-section">
    <h3 id="article-section" class="sr-only">Article Request Details</h3>
    
    <!-- Book Chapter specific field -->
    <div class="<#TRANSACTION field='DocumentType' displayStyle='CompareValue' compareValue='BookChapter' disabledValue='d-none'>">
        <dl>
            <dt>Book Chapter Title:</dt>
            <dd><#TRANSACTION field='PhotoJournalTitle'></dd>
        </dl>
    </div>
    
    <!-- Standard article fields always shown -->
    <dl>
        <dt>Article Title:</dt>
        <dd><#TRANSACTION field='PhotoArticleTitle'></dd>
    </dl>
</section>

Getting Fancy with Multiple Conditions​

You can stack these conditions inside each other to create more complex logic. Here's an example where we show different fields for books vs. DVDs, but only within loan requests:

<!-- Loan requests only -->
<div class="<#TRANSACTION field='RequestType' displayStyle='CompareValue' compareValue='Loan' disabledValue='d-none'>">
    
    <!-- Books within loans -->
    <div class="<#TRANSACTION field='DocumentType' displayStyle='CompareValue' compareValue='Book' disabledValue='d-none'>">
        <div class="field">
            <span>Book Title:</span>
            <strong><#TRANSACTION field='LoanTitle'></strong>
        </div>
    </div>
    
    <!-- DVDs within loans -->
    <div class="<#TRANSACTION field='DocumentType' displayStyle='CompareValue' compareValue='DVD' disabledValue='d-none'>">
        <div class="field">
            <span>DVD Title:</span>
            <strong><#TRANSACTION field='LoanTitle'></strong>
        </div>
        <div class="field">
            <span>Runtime:</span>
            <strong><#TRANSACTION field='Runtime'></strong>
        </div>
    </div>
</div>

CSS Classes You Can Use​

Bootstrap Classes (The Easy Option)​

If you're using Bootstrap (which most ILLiad sites do), you've got some handy classes ready to go:

  • d-none - Completely hides the element (this is what you'll use 90% of the time)
  • d-sm-none - Hides on small screens and larger
  • d-md-none - Hides on medium screens and larger

Roll Your Own Custom Classes​

Want something fancier than just hiding content? You can create your own CSS classes:

<div class="<#TRANSACTION field='Status' displayStyle='CompareValue' compareValue='Completed' disabledValue='faded-out'>">
    Content for completed requests
</div>

Then define the class in your CSS:

.faded-out {
    opacity: 0.3;
    pointer-events: none;
}

Complete Examples You Can Actually Use​

Ready to see this in action? Here are some copy-and-paste examples for common scenarios:

A Smart Transaction Details Page​

This example shows how to build a detailed information page that adapts based on what type of request you're viewing:

<section class="transaction-details" aria-labelledby="transaction-details-heading">
    <h2 id="transaction-details-heading" class="sr-only">Transaction Details</h2>
    
    <!-- Always show basic info -->
    <dl class="transaction-basic-info">
        <dt>Transaction Number:</dt>
        <dd><#TRANSACTION field='TransactionNumber'></dd>
        
        <dt>Status:</dt>
        <dd><#TRANSACTION field='TransactionStatus'></dd>
    </dl>
    
    <!-- Article-specific fields -->
    <section class="<#TRANSACTION field='RequestType' displayStyle='CompareValue' compareValue='Article' disabledValue='d-none'>" 
             aria-labelledby="article-info-heading">
        <h3 id="article-info-heading">Article Information</h3>
        
        <dl class="article-details">
            <dt>Article Title:</dt>
            <dd><#TRANSACTION field='PhotoArticleTitle'></dd>
            
            <dt>Journal:</dt>
            <dd><#TRANSACTION field='PhotoJournalTitle'></dd>
            
            <dt>Pages:</dt>
            <dd><#TRANSACTION field='PhotoJournalInclusivePages'></dd>
        </dl>
    </section>
    
    <!-- Loan-specific fields -->
    <section class="<#TRANSACTION field='RequestType' displayStyle='CompareValue' compareValue='Loan' disabledValue='d-none'>" 
             aria-labelledby="loan-info-heading">
        <h3 id="loan-info-heading">Loan Information</h3>
        
        <dl class="loan-details">
            <dt>Title:</dt>
            <dd><#TRANSACTION field='LoanTitle'></dd>
            
            <dt>Author:</dt>
            <dd><#TRANSACTION field='LoanAuthor'></dd>
            
            <dt>Due Date:</dt>
            <dd><time datetime="<#TRANSACTION field='DueDate' format='ISO'>"><#TRANSACTION field='DueDate'></time></dd>
        </dl>
    </section>
</section>

Tips to Save You Time (and Headaches)​

1. Double-Check Your Values​

Make sure your compareValue exactly matches what's actually stored in your database. "Article" is not the same as "article" - capitalization matters!

<!-- This works if your database stores "Article" -->
<#TRANSACTION field='RequestType' displayStyle='CompareValue' compareValue='Article' disabledValue='d-none'>

<!-- This won't work if there's a case mismatch -->
<#TRANSACTION field='RequestType' displayStyle='CompareValue' compareValue='article' disabledValue='d-none'>

2. Test with Real Data​

Don't just assume it works - actually test your conditional display with transactions that have different field values. You'll catch issues early this way.

3. Always Have a Plan B​

What happens if someone has a request type you didn't account for? Make sure there's something sensible for them to see:

<!-- Show specific content for known types -->
<div class="<#TRANSACTION field='DocumentType' displayStyle='CompareValue' compareValue='Book' disabledValue='d-none'>">
    Book-specific content
</div>

<div class="<#TRANSACTION field='DocumentType' displayStyle='CompareValue' compareValue='Article' disabledValue='d-none'>">
    Article-specific content
</div>

<!-- Always include fallback content that shows for everything -->
<div class="default-content">
    <dl>
        <dt>Title:</dt>
        <dd><#TRANSACTION field='LoanTitle'></dd>
    </dl>
</div>

4. Keep Your Code Readable​

When you're nesting conditions, add comments so future you (or your coworkers) can understand what's happening:

<!-- Article Requests Only -->
<div class="<#TRANSACTION field='RequestType' displayStyle='CompareValue' compareValue='Article' disabledValue='d-none'>">
    
    <!-- Special handling for book chapters within articles -->
    <div class="<#TRANSACTION field='DocumentType' displayStyle='CompareValue' compareValue='BookChapter' disabledValue='d-none'>">
        <!-- Book chapter specific fields here -->
    </div>
    
    <!-- Regular article fields appear here for all articles -->
    
</div>

5. Don't Forget About Accessibility​

Your conditional content should work well for everyone, including people using screen readers or keyboard navigation:

Use Proper HTML Elements​

Instead of just throwing everything in <div> tags, use HTML elements that actually describe what they contain:

<!-- Much better: tells screen readers what this content is -->
<section class="<#TRANSACTION field='RequestType' displayStyle='CompareValue' compareValue='Article' disabledValue='d-none'>" 
         aria-labelledby="article-heading">
    <h3 id="article-heading">Article Information</h3>
    <dl>
        <dt>Title:</dt>
        <dd><#TRANSACTION field='PhotoArticleTitle'></dd>
    </dl>
</section>

<!-- Not as good: screen readers don't know what this is for -->
<div class="article-section">
    <div class="title">Article Title</div>
    <div class="value"><#TRANSACTION field='PhotoArticleTitle'></div>
</div>

Help Screen Reader Users​

Add labels and descriptions to help people understand what buttons and sections do:

<button type="button" class="btn <#TRANSACTION field='RequestType' displayStyle='CompareValue' compareValue='Loan' disabledValue='d-none'>"
       aria-describedby="renew-help">
    Renew Item
</button>
<div id="renew-help" class="sr-only">Extend the due date for this loan</div>

Add Context for Screen Readers​

Sometimes you need headings or explanations that sighted users don't need to see:

<section aria-labelledby="transaction-info">
    <h2 id="transaction-info" class="sr-only">Transaction Information</h2>
    <!-- Your conditional content goes here -->
</section>

When Things Go Wrong (And How to Fix Them)​

Don't panic if your conditional display isn't working! Here are the most common issues and how to solve them:

"My Content Isn't Hiding"​

The Fix: Check that you're using displayStyle='CompareValue' and not display='CompareValue'. This is the #1 mistake people make!

"The Wrong Content Is Showing"​

The Fix: Your compareValue probably doesn't match exactly what's in the database. Remember, "Article" ≠ "article" - check your capitalization and spelling.

"My CSS Class Isn't Working"​

The Fix: Make sure you spelled the class name correctly in disabledValue, and that the CSS class actually exists on your site.

Debug Like a Pro​

When something's not working, try this step-by-step approach:

<!-- Step 1: First, show the field value so you can see what you're working with -->
<div class="field">
    <span>Document Type (debug):</span>
    <strong><#TRANSACTION field='DocumentType'></strong>
</div>

<!-- Step 2: Then test your conditional logic -->
<div class="<#TRANSACTION field='DocumentType' displayStyle='CompareValue' compareValue='BookChapter' disabledValue='d-none'>">
    <div class="field">
        <span>Book Chapter Title:</span>
        <strong><#TRANSACTION field='PhotoJournalTitle'></strong>
    </div>
</div>

Once you see the actual field value, you can adjust your compareValue to match exactly!