How to intiatlize Condition Builder in custom plugin

[BenParizek]

I am trying to use the native Craft conditional builder in a Tab Layout in a custom Form plugin. The tab opens in a slideout and I retrieve the condition builder HTML by calling the Tab Layout ->getSettingsHtml() method. That returns a layout with the Tab Name, Current User Condition, and My Element Condition fields.

After rendering the page, I call Craft.initUiElements($form); and that makes the condition builder dropdown fields interactive. I can see all the options and select an option, and then nothing happens.

My best guess at this point is that I'm not initializing HTML properly. If I render the condition builder HTML directly to the page on page load, I can create new conditions and interact with it, but currently, I believe it would be easier if I could render the Tab Settings slideout via an ajax request and initialize the Condition Builder on the fly.

I've also tried to re-initialize HTMX after the tab is rendered, but that doesn't seem to do anything.

htmx.process(htmx.find('#tab1'));
htmx.trigger(htmx.find('#tab1'), 'htmx:load');
Craft.initUiElements($form);

I've also tried to initialize the individual condition fields

htmx.process(htmx.find('#field1377826869-field'));
htmx.trigger(htmx.find('#field1377826869-field'), 'htmx:load');
Craft.initUiElements($form);

But again, no luck.

How can I initialize a conditional builder after an AJAX request so that I can interact with the dropdown and create new conditions?

[bencroker]

After rendering the page, I call Craft.initUiElements($form); and that makes the condition builder dropdown fields interactive. I can see all the options and select an option, and then nothing happens.

You haven't said what you expect to happen. Normally in the condition builder, you have to apply your rules for something to happen. Or are you trying to use it for conditional fields outside of a custom entry type? Either way, your question is so specific to your use-case that it's starting to sound like you may stepping outside of the API that is available for condition builders.

[BenParizek]

All I expect to happen is that when I select an item from the condition builder, it adds the settings for the that Rule that I selected to the UI. Right now, all I see is the dropdown and when I select any Rule from the dropdown, nothing happens aside from the dropdown menu disappearing. No errors in the console or on the network tab.

This is a different use case, but I can get the condition builder to work on the page without an ajax request. And I do see alternate use cases for the condition builder on settings pages in the Commerce plugin, so I don't think I'm outside the realm of possibility here. I just can't get it to initialize yet.

[bencroker]

If you look at the raw AJAX response from the condition builder (initiated by htmx.js.min) in the case when you can get it to work, you should see some inline JavaScript. htmx will execute that JavaScript after swapping in the raw response, so that might be the missing piece in the scenario in which you load the code via AJAX. FYI script tags returned in AJAX responses are not executed by the browser (this is a built-in security feature), instead it is htmx that runs what is contained in the script tags.

So if the theory above is correct, you could either find a way to execute what comes back inside script tags yourself, or just use htmx to swap it in, in which case it will execute the JavaScript code for you.

[brandonkelly]

How are you rendering the field layout designer in the first place?

[BenParizek]

I'm not using the field layout designer. I've got my own form builder designer and I'm just trying to lean on the condition builder.

From what I can tell, you folks don't load anything over ajax and all the condition builder logic is output on page load. But I don't understand if that is necessary, or that was just a choice in your architecture.

[BenParizek]

And, while I can initially output things and get them to work, where I have yet to make sense of how things work is how I initialize new condition builder settings if I add a new tab to the page.

[brandonkelly]

CustomizeSourcesModal might be a better example for you. (It drives the modal that comes up when you click on “Customize…” at the bottom of the sidebar on element index pages, in environments that allow admin changes.)

Here’s how the condition builder gets initialized in the back-end (over an Ajax request) for new custom sources:

cms/src/controllers/ElementIndexSettingsController.php

Lines 119 to 129 in 2ee1ed6

	$condition = $elementType::createCondition();
	$condition->id = '__ID__';
	$condition->name = 'sources[__SOURCE_KEY__][condition]';
	$condition->mainTag = 'div';
	$condition->forProjectConfig = true;
	$condition->queryParams = ['site', 'status'];
	$condition->addRuleLabel = Craft::t('app', 'Add a filter');
	$view->startJsBuffer();
	$conditionBuilderHtml = $condition->getBuilderHtml();
	$conditionBuilderJs = $view->clearJsBuffer();

And for existing ones:

cms/src/controllers/ElementIndexSettingsController.php

Lines 79 to 91 in 2ee1ed6

	if (isset($source['condition'])) {
	/** @var ElementConditionInterface $condition */
	$condition = $conditionsService->createCondition(ArrayHelper::remove($source, 'condition'));
	$condition->mainTag = 'div';
	$condition->name = "sources[{$source['key']}][condition]";
	$condition->forProjectConfig = true;
	$condition->queryParams = ['site', 'status'];
	$condition->addRuleLabel = Craft::t('app', 'Add a filter');
	$view->startJsBuffer();
	$conditionBuilderHtml = $condition->getBuilderHtml();
	$conditionBuilderJs = $view->clearJsBuffer();
	$source += compact('conditionBuilderHtml', 'conditionBuilderJs');

And either way, here’s how the modal JS will create it:

cms/src/web/assets/cp/src/js/CustomizeSourcesModal.js

Lines 616 to 631 in 2ee1ed6

	const conditionBuilderHtml =
	this.sourceData.conditionBuilderHtml ||
	swapPlaceholders(this.modal.conditionBuilderHtml);
	const conditionBuilderJs =
	this.sourceData.conditionBuilderJs ||
	swapPlaceholders(this.modal.conditionBuilderJs);
	Craft.ui
	.createField($('<div/>').append(conditionBuilderHtml), {
	id: 'criteria',
	label: Craft.t('app', '{type} Criteria', {
	type: this.modal.elementTypeName,
	}),
	})
	.appendTo($container);
	Craft.appendBodyHtml(conditionBuilderJs);

(Existing sources will have this.sourceData.conditionBuilderHtml and this.sourceData.conditionBuilderJs defined; new sources will fall back to this.modal.conditionBuilderHtml + this.modal.conditionBuilderJs.)