Hiding Resource Panel Elements

Hiding Resource Panel Elements in the Manager using CSS


In the previous articles, we used a plugin to hide various Manager-page elements. In this article we'll look specifically at how to hide the elements on the Create/Edit Resource page.


MODX logo

Why Hide Resource Elements?

The Create/Edit Resource panel has lots of elements that you might want to hide from some or all users. You may choose to use the summary (introtext) field, but not the description field, or vice versa. Maybe your users shouldn't see the various date fields (pub_date, publishedon, unpub_date). In some cases, you might even want to hide the Resource Content field. I've worked on client sites where the previous developer put all the page content in the page Template and the Resource Content field was always meant to be completely empty.

You might also want to hide the Published checkbox, so users could save resources but only the admin could publish them.


The Official Method

The traditional method for hiding the elements on the Create/Edit Resource panel is Form Customization. I have to confess that I hate Form Customization. I seldom use it, and I always have trouble getting things right. If you want to hide a tab, reorder the tabs, or create custom tabs, Form Customization is your best option. There are also some cases where you want a complicated system with Constraints to show things to some users and not others based on the 'template' or 'parent field that Form Customization will handle, though in those cases, I would still use a plugin and CSS.


Security Concerns

As I mentioned in a previous article, a very clever user with the right tools can bypass the CSS technique used in this article. I don't consider this a serious concern, however, since all they can do is see and edit the hidden fields. Few user would have the skills, and even fewer would want to do this.

Finding the CSS Selector

I covered this in a previous article, so this is to refresh your memory.

The key to finding the appropriate selector, is to use a browser tool to "inspect" the page. While looking at the page in Chrome, for example, you press Ctrl-Shift-i. Make sure the Published checkbox is visible. (A similar method can be used in Firefox and some other browsers). In Chrome, click on the "Elements tab" in the display that appears at the bottom of the screen (not the Manager's Element tab). At the left side of that bottom section's menu bar, you'll see an icon with an arrow pointing to a square. This is the inspector. Click on on the icon, then hover over the Published checkbox. Try to hover over the containing div (not just its text), then click again. If you've done it right, the window at the bottom of the screen will be showing you something like this (for the Published checkbox):

<div class="x-form-item x-tab-item x-hide-label" tabindex="-1" id="ext-gen113"><label
        for="modx-resource-published" style="width:auto;" class="x-form-item-label"
        id="ext-gen114"></label>
    <div class="x-form-element" id="x-form-el-modx-resource-published" style="padding-left:0;">
        <div class="x-form-check-wrap" id="ext-gen115"><input type="hidden" id="ext-gen117"
                                                              value="0" name="published"><input
                type="checkbox" autocomplete="off" id="modx-resource-published" name="published"
                class=" x-form-checkbox x-form-field" value="1"><label for="modx-resource-published"
                                                                       class="x-form-cb-label"
                                                                       id="ext-gen116">Published</label>
        </div>
    </div>
    <div class="x-form-clear-left"></div>
</div>

Because we want to hide both the checkbox and its label, we want to use the selector for the outer div. The classes are not useful because they are used for multiple fields. In a previous article, I said to avoid ids that end in a number, but here, we have no choice. The selector we want is: id="ext-gen113", found in the first line of the code above.

The number used in the id could change in different versions of MODX or possibly as a result of elements hidden with Form Customization that are above the one you're hiding, so you should check periodically to make sure that your plugin is still working and change the selector if necessary.


Hiding the Published Checkbox

We'll use the CSS injection technique we used in the previous articles. Create a plugin connected to the OnManagerPageBeforeRender System Event (check that box on the System Events tab when editing the plugin). The code of the plugin should look like this:

if (! $modx->user->isMember('Administrator')) {
    $css = '
    <style>
        #ext-gen113 {
            display: none !important;
        }
    </style>
    ';

    $modx->regClientCSS($css);
}
return '';

Other Elements

The same technique can be used to hide other elements on the page. Just find the selector as describe above and use it in the CSS. In some cases, you may have to have two CSS rules, one for the input field, and another for its label.


Here Comes Trouble

If you look at the selectors for a given element on various manager pages, you'll see that they aren't necessarily the same. For example the selector for the Static field is not the same for plugins as it is for snippets. This is because the identifiers are generated on-the-fly by the page's JS code and depend on how many elements are above the current one. That means that if our code above executes on a page other than the Create/Edit Resource panel, it may well hide something that shouldn't be hidden. That would be very bad. It's essential that we modify our plugin code above so that it only executes on the Create/Edit Resource page. The selector should be the same for creating or editing all resources, but this might be affected by Form Customization rules, so check several pages to make sure the selector is the same before implementing the plugin.

If fields start disappearing from various Manager panels, remember that it's probably this plugin that's causing the trouble. The selector may need adjusting and you need to make sure it only executes on the pages it's designed for.


Coming Up

In the next article, we'll see how to make sure the plugin only executes on the Create/Edit Resource panel.


For more information on how to use MODX to create a web site, see my web site Bob's Guides, or better yet, buy my book: MODX: The Official Guide.

Looking for high-quality, MODX-friendly hosting? As of May 2016, Bob's Guides is hosted at A2 hosting. (More information in the box below.)



Comments (0)


Please login to comment.

  (Login)