Slideout for custom content

[markhuot]

Is it possible to use the 3.7 introduced slide outs for custom plugin-generated content? I have a plugin that I need to offer inline editing of some non-element based content (it's a settings screen that needs to allow the creation of an object, synced with an API). I'd love to offer the creation UI in a slide out but I can't find any documentation on the usage and the only place I've found anything of use is inside the compiled cp.js which references the data-editable element to createElementEditor. But, again, I'm not editing an element. I really just need a slideout with blank HTML that I can customize to my liking.

[brandonkelly]

Working with slideouts (Craft.Slideout) is pretty similar to working with modals (Garnish.Modal). Here’s an example of how the Field Layout Designer creates them for its layout component settings in Craft 4:

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

Lines 219 to 238 in cf3f399

	const slideout = new Craft.Slideout($contents, {
	containerElement: 'form',
	containerAttributes: {
	action: '',
	method: 'post',
	novalidate: '',
	class: 'fld-element-settings',
	},
	});
	slideout.on('open', () => {
	// Hold off a sec until it's positioned...
	Garnish.requestAnimationFrame(() => {
	// Focus on the first text input
	slideout.$container.find('.text:first').trigger('focus');
	});
	});
	$cancelBtn.on('click', () => {
	slideout.close();
	});

(That code should be totally backwards-compatible with Craft 3 as the base Craft.Slideout class hasn’t really changed in v4.)

That said, the easiest way to work with them came in Craft 4, where controller actions can start representing “control panel screens”, which can double as full pages and slideouts.

If you can upgrade to Craft 4, you can take advantage by having your controller action return $this->asCpScreen()..., and creating the slideout in JS via new Craft.CpScreenSlideout('your/controller/action'). Details here: #10367

[markhuot]

Love this, thanks! Craft.CpScreenSlideout is exactly what I need.

[leevigraham]

@markhuot Wrote up a little post in May 14, 2022 https://dev-diary.newism.com.au/posts/creating-craft-cms-slideouts.html