dev/core#6308 FormBuilder - allow tokens and html markup in `label`, `help_pre`, `help_post` and rich content by ufundo · Pull Request #35562 · civicrm/civicrm-core

ufundo · 2026-04-30T09:49:14Z

Overview

Adds <af-markup> and <af-token> elements to which allow for generic rendering of markup with tokens inside an afform -- including markup coming from angular expressions like {{ $ctrl.defn.label }}.

Before

label, help_pre, help_post can only be plain text

After

new civi-rich-text-input - similar to CRM.wysiwyg.createCollapsed but usable in angular context; and supports a token picker
label, help_pre, help_post include html markup and or tokens with afform values
rich content areas can include tokens

Technical Details

The use of the custom elements may seem a bit roundabout, but it seems to me a good way to handle the joint challenge of rendering html provided by the form admin without rendering any html that a form user might try to sneak in via token values.

It also lends itself nicely to onward development of generic expression evaluation / math; and avoids entrenching angular dependency.

Comments

Having the token pickers on all these fields feels a bit much. It would be good if we could tuck them away somehow.

civibot · 2026-04-30T09:49:17Z

🤖 Thank you for contributing to CiviCRM! ❤️ We will need to test and review this PR. 👷

Introduction for new contributors...

If this is your first PR, an admin will greenlight automated testing with the command ok to test or add to whitelist.
A series of tests will automatically run. You can see the results at the bottom of this page (if there are any problems, it will include a link to see what went wrong).
A demo site will be built where anyone can try out a version of CiviCRM that includes your changes.
If this process needs to be repeated, an admin will issue the command test this please to rerun tests and build a new demo site.
Before this PR can be merged, it needs to be reviewed. Please keep in mind that reviewers are volunteers, and their response time can vary from a few hours to a few weeks depending on their availability and their knowledge of this particular part of CiviCRM.
A great way to speed up this process is to "trade reviews" with someone - find an open PR that you feel able to review, and leave a comment like "I'm reviewing this now, could you please review mine?" (include a link to yours). You don't have to wait for a response to get started (and you don't have to stop at one!) the more you review, the faster this process goes for everyone 😄
To ensure that you are credited properly in the final release notes, please add yourself to contributor-key.yml
For more information about contributing, see CONTRIBUTING.md.

Quick links for reviewers...

➡️ PR Demo site (can be rebuilt with the command test this please).
📖 Review standards
🗒️ Review template (brief or verbose)

➡️ Online demo of this PR 🔗

civibot · 2026-04-30T09:49:20Z

The issue associated with the Pull Request can be viewed at https://lab.civicrm.org/dev/core/-/issues/6308

ufundo · 2026-04-30T09:54:42Z

Having the token pickers on all these fields feels a bit much. It would be good if we could tuck them away somehow.

Or could we have one token picker somewhere in a corner of the screen, that could be used for any of the fields that allow tokens?

ufundo · 2026-04-30T17:29:18Z

@colemanw for WYSIWYG editor question - do you think it's reasonable to leave for a separate PR?

I appreciate it's a slightly awkward middle ground when markup is supported, but you have to enter it manually. But it feels quite distinct implementation-wise; and I'd rather confirm/get this merged before starting out on the WYSIWYG side.

mattwire · 2026-05-01T08:31:14Z

@ufundo a screenshot would probably be helpful here to understand what we should be seeing when testing this?

ufundo · 2026-05-12T09:41:45Z

@colemanw I've added the wysiwyg editing now. The interplay between angular, CRM.wysiwyg and token picking was... painful. But I think it's a good solution. The civi-rich-text-input should be able to replace CRM.wysiwyg.createCollapsed on the quickform forms as well, but it's a little bit of work.

@mattwire here's before:

no tokens in Rich content blocks; weird bug if you click Cancel rather than Done

Screencast.from.2026-05-12.10-02-09.mp4

raw html editing in the confirmation message

Screencast.from.2026-05-12.10-04-33.mp4

no html in help_pre / help_post

Screencast.from.2026-05-12.10-03-50.mp4

After:

Screencast.from.2026-05-12.10-08-17.mp4

(fixed the undefined thing in the confirmation message)

ufundo · 2026-05-12T10:26:35Z

The civi-rich-text-input should be able to replace CRM.wysiwyg.createCollapsed on the quickform forms as well, but it's a little bit of work

Done with b6bba19 and 6328ca4

colemanw · 2026-05-12T12:51:58Z

+    }
+
+    get afFormCtrl() {
+      return angular.element(this.afForm).controller('afForm');


Kindof amazing that this even works, but I'm glad it does!

Yep.

One day when the af-form is a WebComponent it can just become this.closest('af-form').getTokens() etc. But until then this seems to work pretty well for interfacing / piecewise conversion.

colemanw · 2026-05-12T12:55:12Z

+      if (this.closest('af-gui-editor')) {
+        const afGuiEditor = angular.element(this.closest('af-gui-editor')).controller('afGuiEditor');
+        return {
+          results: afGuiEditor.getTokens(this.hasAttribute('include-submission-tokens'))
+        };
+      }
+      else {
+        throw new Error('civi-rich-text-input[token-picker] doesn\'t know how to get available tokens outside of af-gui-editor context yet');
+      }


This coupling is far from ideal as I'm sure you know. But it gets the job done for now.

Yes...

I think it would probably be better to pass the token list through to the component as a JSON attribute, something like

afGuiField.html:

... <civi-rich-text-input token-list="{{ $ctrl.getTokensJson() }}" > ...

I was worried this might be inefficient given a) it's a dynamic list based on what fields are currently placed on the form; b) there will likely be multiple civi-rich-text-inputs. But it may still be better to reduce the coupling.

override for special context af-gui-container

ufundo · 2026-05-12T21:48:56Z

@colemanw let me know if it helps to break out some of the constituent parts of this PR as it has become a bit of a monster now.

I think if breaking it up I would reverse the order:

add civi-rich-text-input for the quickform places first
then switch in for the existing FormBuilder rich text inputs
then add for help_pre and help_post
then add the token picker / token support

colemanw · 2026-05-13T00:46:29Z

@ufundo I think it's fine to merge & iterate on this. Thanks for all your work on it.

colemanw · 2026-08-07T20:21:54Z

Commit 575232f caused a regression. See #36439

civibot Bot added the master label Apr 30, 2026

ufundo changed the title ~~dev/core#6308 allow tokens and html markup in FormBuilder label, help_pre, help_post~~ dev/core#6308 FormBuilder - allow tokens and html markup in label, help_pre, help_post Apr 30, 2026

colemanw reviewed Apr 30, 2026

View reviewed changes

Comment thread ext/afform/core/ang/af/afMarkup.element.js

ufundo marked this pull request as ready for review April 30, 2026 14:50

ufundo added 3 commits May 12, 2026 09:19

Afform - fix token replacement if multiple instances of same token

575232f

Afform.replaceTokens - handle gracefully if data isn't loaded yet

835c431

Afform - allow tokens and markup in label / help_pre / help_post

61e81da

ufundo force-pushed the afform-tokens-in-copy branch 2 times, most recently from a783e38 to 127d15f Compare May 12, 2026 08:46

ufundo added 3 commits May 12, 2026 09:49

afForm - support tokens in .af-markup divs

369d157

afGuiEditor - hide label token picker until editing

7bf386d

afGuiEditor - move token getter to top level controller

15ea739

ufundo changed the title ~~dev/core#6308 FormBuilder - allow tokens and html markup in label, help_pre, help_post~~ dev/core#6308 FormBuilder - allow tokens and html markup in label, help_pre, help_post and rich content May 12, 2026

ufundo added 5 commits May 12, 2026 10:41

add civi-rich-text-input element

f3fa129

afGuiEditor - use civi-rich-text-input for af-markup, help_pre/post

01a4105

afGuiEditor - save any open rich text inputs on save

035d2a7

afGuiEditor - use civi-rich-text-input for confirmation message

2755b48

civi-rich-text-input - better empty value handling

61bcae8

ufundo force-pushed the afform-tokens-in-copy branch from 127d15f to 61bcae8 Compare May 12, 2026 09:41

civi-rich-text-input - use for CRM.wysiwyg.createCollapsed

f24f3ed

ufundo force-pushed the afform-tokens-in-copy branch from b6bba19 to f24f3ed Compare May 12, 2026 10:30

colemanw reviewed May 12, 2026

View reviewed changes

civi-rich-text-input - style like a normal input by default

719a0fe

override for special context af-gui-container

ufundo force-pushed the afform-tokens-in-copy branch from 6328ca4 to 719a0fe Compare May 12, 2026 14:04

colemanw merged commit f9aa997 into civicrm:master May 13, 2026
1 check passed

colemanw mentioned this pull request Aug 7, 2026

Afform - Fix live-update of token-based field defaults #36439

Merged

Uh oh!

Uh oh!

Conversation

ufundo commented Apr 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Before

After

Technical Details

Comments

Uh oh!

civibot Bot commented Apr 30, 2026

Uh oh!

civibot Bot commented Apr 30, 2026

Uh oh!

ufundo commented Apr 30, 2026

Uh oh!

Uh oh!

ufundo commented Apr 30, 2026

Uh oh!

mattwire commented May 1, 2026

Uh oh!

ufundo commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ufundo commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

colemanw May 12, 2026

Choose a reason for hiding this comment

Uh oh!

ufundo May 12, 2026

Choose a reason for hiding this comment

Uh oh!

colemanw May 12, 2026

Choose a reason for hiding this comment

Uh oh!

ufundo May 12, 2026

Choose a reason for hiding this comment

Uh oh!

ufundo commented May 12, 2026

Uh oh!

colemanw commented May 13, 2026

Uh oh!

Uh oh!

colemanw commented Aug 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ufundo commented Apr 30, 2026 •

edited

Loading

ufundo commented May 12, 2026 •

edited

Loading

ufundo commented May 12, 2026 •

edited

Loading