Custom Manager Pages

The Easier Way to Build CMPs

 gourmet fare

CMPs Made Easy

Until now, getting a CMP to look like the rest of the ExtJS-based Manager involved a lot of Smarty tags and, well, ExtJS. As of Revo 2.5, there is a better way. This tip comes from the Slack community.

jaygilmore asked...

Does anyone know if there are examples of @rtripault’s changes to CMP dev in 2.5?

The Solution:

rtripault says...

i believe i did a "pretty simple example" for someone once, let me check if i can find it...

class AppParsedManagerController extends modParsedManagerController
{
    public function getPageTitle()
    {
        return 'Demo';
    }
    
    public function process(array $scriptProperties = [])
    {
        return '[[$chunk-name]]';
    }
}

I believe this is the simplest manager controller i can think of (hope the code makes sense even without comments).

And one with HTML (that could/should be inside a chunk) with a basic similar "look n feel" ExtJS could produce 

  class AppParsedManagerController extends modParsedManagerController
{

    public function getPageTitle()
    {
        return 'Demo';
    }

    public function process(array $scriptProperties = [])
    {
        $this->addHtml(<<<HTML
<style>
#modx-action-buttons .x-btn {
    display: inline-block;
}
</style>
HTML
);
        return <<<HTML
<div class="container">
    <h2  class="modx-page-header">[[+ph._pagetitle]]</h2>

    <div class="x-panel-body shadowbox">
        <div class="panel-desc">Some description</div>
        <div class="x-panel main-wrapper">
            <p>Content can take place here Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolore minima unde voluptatem voluptates. Consequuntur delectus id quo reiciendis sapiente voluptatum. Amet dignissimos eaque eum quae. Ad eveniet minus sunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa debitis eligendi eveniet excepturi, fugiat harum inventore itaque laboriosam laudantium nisi repellat repellendus repudiandae tempora vel voluptatem. Aliquid deleniti laudantium ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias architecto at atque commodi deserunt, dolores fugiat harum in iste laboriosam molestias officiis omnis quam reprehenderit saepe sunt veritatis voluptas voluptates?</p>

            <div>
                <span class="x-btn">
                    <button>Some button</button>
                </span>
            </div>
        </div>
    </div>
</div>


<div id="modx-action-buttons" class="x-toolbar">
    <span class="x-btn x-btn-small primary-button">
        <em class="">
            <button type="button" class="x-btn-text">Some button</button>
        </em>
    </span>
    <span class="x-btn x-btn-small">
        <em class="">
            <button type="button" class="x-btn-text">Some other button</button>
        </em>
    </span>
</div>
HTML;
    }
}

What's the Story?

The controllers for CMPs can now contain HTML and MODX tags. To make it look like the ExtJS-based Manager, just use the same classnames that ExtJS uses.

As rtripault said, the HTML content of the CMP can be put in a chunk, and the chunk tags used in your CMP.

Jako, also in the Slack conversation, explained where to put this class, and how to use it in your CMP:

That file has to go into '/core/components/yournamespace/controllers/whatever.class.php' (the namespace has to be created with the right path settings in 'system' -> 'namespaces' before). Then it could be called by '/manager/?a=whatever&namespace=yournamespace', and/or by a new menu entry with action 'whatever' and namespace 'yournamespace'. The namespace + menu entry creation could be done easily by a GPM (Git Package Management) config.