How to hide a box in a content page?

Engines Content Engine
1

We have a content page in our application where users are supposed to edit existing elements but cannot add or remove elements. In such a scenario how can I dynamically hide or show a box depending on the modeled content of that box?

In our use case a video is currently being procuded. As soon as the video is available we want to embed the video on the content page. However since users cannot add elements we need to already add the video element (incl. surrounding elements like heading and paragraph) now and then later on a user will edit the element to point to the correct video source. While there is no source specified for the video we don’t want to show the box containing the video and surrounding elements at all. Is this somehow possible?

Can I somehow add custom css classes to the elements of the content page so that a style to hide the elements can be applied?

2

Hi @andreas-fresh-mesa, you can adjust the render function of the Box module, e.g:

import { Provider, type ElementModule } from "@com.mgmtp.a12.contentengine/contentengine-core";
import {
	type BoxNode,
	DefaultElementLibrary,
	DefaultElementModules
} from "@com.mgmtp.a12.contentengine/contentengine-default-element-library";

const AutoHideBoxModule: ElementModule<BoxNode> = {
	...DefaultElementModules.Box,
	renderer: (props) => {
		const { node } = props;

		if (
			node.children?.some(
				(childNode) => DefaultElementModules.Video.isNodeInstance(childNode) && childNode.props.src === ""
			)
		) {
			return null;
		}

		return <DefaultElementModules.Box.renderer {...props} />;
	}
};

export const CustomElementLibrary = new Provider(() => {
	return {
		...DefaultElementLibrary.get(),
		modules: [
			...DefaultElementLibrary.get().modules.filter((module) => !DefaultElementModules.Box.isInstance(module)),
			AutoHideBoxModule
		]
	};
});
3

Would this rendering also apply to the content editor hence making it impossible for the user editing the content to edit the video element by setting a video source?

4

Then there are two options. Or you can use the default Box impl for the editor and the custom one for the runtime; or if you want to have a single renderer, you can get where it is rendered via the environment field inside the ContentEngineContext.