GUI extension to hide field in 2011 SP1

Question

I'm in the process of developing a GUI extension to hide a schema field when the component loads. For now I am testing the feasibility in Firebug using the following code to get the actual field:

function getControlForFieldName(name){
    var fieldBuilder = $display.getView().properties.controls.fieldBuilder;
    var fieldsContainer = fieldBuilder.properties.input;
    var fieldsNode = fieldsContainer.getElement();
    var fieldContainer = $dom.getFirstElementChild(fieldsNode);
    while (fieldContainer) {
        var labelNode = $dom.getFirstElementChild(fieldContainer);
        var fieldNode = $dom.getNextElementSibling(labelNode);
        var control = fieldNode.control;
        if (control.getFieldName() == name) {
            return control;
        }
        fieldContainer = $dom.getNextElementSibling(fieldContainer);
     }
}

From here I am able to call it and I get the field successfully:

var fieldControl = getControlForFieldName('some_xml_field_name');   

I am now stuck trying to find a method that the fieldControl object can use to hide the field. I've tried fieldControl.disable() and fieldControl.dispose() with no luck. I also tried experimenting with the jQuery .hide() method but I can't seem to find a valid selector through this API.

I was thinking something along this form:

$j(fieldControl.getId()).hide()

I think I'm close to solving the problem but I am missing one or two final pieces. Has anyone done this yet?

Also, in case anyone is wondering why I decided on the GUI ext. as opposed to a simpler method (such as instructions on the field description or educating users):

1. I already have hundreds of components created using those schema fields and
2. I'm migrating from 5.3 and this extension already exists - I need to continue supporting a similar functionality in 2011 SP1 - disabling the fields would work also.

Answer 1

I seem to remember that old extension for some reason. ;)

You are pretty close... I rewrote some of the logic to the following:

var fieldBuilder = $display.getView().properties.controls.fieldBuilder;
    fieldsContainer = fieldBuilder.properties.input;
    fieldsNode = fieldsContainer.getElement();
    control = null;

$j(fieldsNode).children().each(function (index, elm) {
    var cntrl = $j('div.input', elm)[0].control;
    if (cntrl.getFieldName() === name) {
        control = cntrl;
    }
});

return control;

Now once you have that control, you can just get the element from it and hide it like:

$j(control.getElement()).parent().hide();

This works because the getElement() of the control will return the element matching div.input. We wrap the dom element into jquery, then call it's parent() method, which will return the entire div.field element that we can now hide.

Hope that helps!

Answer 2

Out of interest, If you hide a schema field when the component loads, why would you have the schema field there in the first place? Would it be easier to simply not have the field in the schema?

I've used CSS to hide (not show the display) GUI elements in the past and it worked perfectly, i felt a bit more comfortable doing it this way in the event the CME View was doing additional processing on the item without my knowledge.

Update:

I've also written GUI extensions in the past that updated the properties of an interface element. To do so injected this code into my view when the view started:

$evt.addEventHandler($display, "start", onDisplayStarted);

function onDisplayStarted() {
        $("#elementId").disabled = true;
    }

I suspect this might be the code you are looking for?