Skip to main content
Ben Nadel at CFCamp 2023 (Freising, Germany) with: Luis Majano and Michael Hnat
Ben Nadel at CFCamp 2023 (Freising, Germany) with: Luis Majano ( @lmajano ) Michael Hnat ( @madmike_de )

Importing Multiple ColdFusion Custom Tag Directories Using The Same Prefix

By on
Tags:

One of the nice things you can do with ColdFusion custom tags is import a given directory of custom tags into a "prefix". This allows custom tags to be aliased in the CFML markup; which is a technique that I use quite heavily in my Domain Specific Language (DSL) for generating Emails. One additional feature that I just learned about this prefixing functionality is that you can import multiple directories under the same prefix.

As I try to decide if I'm going to start my next project in Hotwire or Angular, one idea that I'm playing with is creating a design system using ColdFusion custom tags. Essentially, I want to be able to take some of the UI (User Interface) encapsulation techniques that I learned in Angular and apply them to Hotwire.

In Angular, I have my design system organized into different folders so that I don't end up with a hundred files in one place. Hoping to do the same thing with my ColdFusion design system, I wanted to see if I could aggregate different custom tags under the same prefix.

For example, I have a "Checkbox" custom tag at:

./design-system/checkbox/Checkbox.cfm

<div>
	<mark>[Checkbox]</mark>
</div>

And, I have a "Radio Button" custom tag at:

./design-system/radio/Radio.cfm

<div>
	<mark>[Radio]</mark>
</div>

Now, what I want to do is be able to import both of those custom tags under the same prefix (ui:):

<!--- Notice that are are grouping MULTIPLE PATHS under the SAME PREFIX (ui). --->
<cfimport prefix="ui" taglib="./design-system/checkbox/" />
<cfimport prefix="ui" taglib="./design-system/radio/" />

<p>
	Product: <cfoutput>#server.coldfusion.productName#</cfoutput>
</p>

<!---
		These are two different ColdFusion custom tags, pulled from two different
		directories, but referenced under the same prefix (ui:).
--->
<ui:Checkbox>
<ui:Radio>

As you can see, I have two CFImport tags, one for each of the custom tags that I want to use in my view rendering. And, each of these tags is targeting the ui: prefix. Now, if I run this is in both Lucee CFML and Adobe ColdFusion, I get the following output:

Output from multiple ColdFusion custom tags that were imported using the same prefix.

As you can see, both the Checkbox.cfm custom tag and the Radio.cfm custom tag - which live in separate directories - were both imported and consumed under the ui: prefix. This CFML feature is super convenient for related custom tags that work together but aren't necessarily collocated in the same place.

Want to use code from this post? Check out the license.

Reader Comments

Post A Comment — I'd Love To Hear From You!

Post a Comment

I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
Ben Nadel