Hi there!
I’m trying to get some TVs into a separate panel on the first tab “document” on the resource-edit page.
So far I could display the wanted TVs on the first tab by using “form customization”. Right now I placed these TV in the “modx-resource-main-right”. But I would like to separate these into an own panel.
I’m also using the Extra “Tagger”. With Tagger you can have an extra panel to the first tab right above the content-edit window (I thinks it’s also customizable with some system-settings, where to place this panel).
This is somehow what I want to achieve:
Adding another panel above or below the Tagger-panel, which contains some TVs I would like to define.
So far I found out that Tagger adds the panel by using a plugin, which fires “OnDocFormPrerender”.
Tagger-plugin:
<?php
/**
* Tagger
*
* DESCRIPTION
*
* This plugin inject JS to add Tab with tag groups into Resource panel
*/
$corePath = $modx->getOption('tagger.core_path', null, $modx->getOption('core_path', null, MODX_CORE_PATH) . 'components/tagger/');
/** @var Tagger $tagger */
$tagger = $modx->getService(
'tagger',
'Tagger',
$corePath . 'model/tagger/',
array(
'core_path' => $corePath
)
);
$className = 'Tagger' . $modx->event->name;
$modx->loadClass('TaggerPlugin', $tagger->getOption('modelPath') . 'tagger/events/', true, true);
$modx->loadClass($className, $tagger->getOption('modelPath') . 'tagger/events/', true, true);
if (class_exists($className)) {
/** @var TaggerPlugin $handler */
$handler = new $className($modx, $scriptProperties);
$handler->run();
}
return;
I tried to understand the logic and how it’s done, but I’m kinda lost here. It uses some files in the “core/components” folder. Duplicating this folder to a different name, and editing the paths to the duplicated compoment didn’t do the trick either.
I found another post from the old modx-forum with the code for a plugin, which adds another tab on the resource-edit-page:
<?php
switch ($modx->event->name) {
// Add a custom tab to the MODX create/edit resource pages
case 'OnDocFormPrerender':
$custom_html = 'Your custom HTML, e.g. from a model function or API lookup etc.';
$modx->regClientStartupHTMLBlock('<script type="text/javascript">
MODx.on("ready",function() {
MODx.addTab("modx-resource-tabs",{
title: "My Custom Tab",
id: "custom-resource-tab",
width: "95%",
html: '.json_encode(utf8_encode("$custom_html")).'
});
});
</script>');
}
Close to what I am looking for…
Further research on this directed me to the " 5. Ext JS Tutorial - Panels", but this did not work as well:
<?php
$eventName = $modx->event->name;
switch ($eventName) {
case 'OnDocFormPrerender':
$modx->regClientStartupScript('
<script type="text/javascript">
Ext.onReady(function() {
var myPanel = new Ext.Panel({
renderTo : document.body,
height: 200,
width: 950,
title: "Simple Panel",
html: "This is my content",
frame: true
});
});
</script>
');
break;
default:
break;
}
Any hint would be much appreciated…
Greetings to the forum!