Wednesday, November 26, 2008

Javascript to make fields readonly in edit view

The following javascript can be used to hide Input, Date and Select fields in the builtin SharePoint edit pages. This should cover most fields. Haven't touched the People fields yet as they look to be a lot more complicated.

I have almost completed incorporating these functions into a webpart that can customise the readonly permissions based on the current users SharePoint group membership.



<script language='javascript'>

 

function GetControlByTypeAndName(type, name)

{

    var controls = document.body.all.tags(type);

    for (var i = 0; i < controls.length; i++)

    {

        var control = controls[i];

        if (control.title.toLowerCase() == name.toLowerCase())

            return control;

    }

    return null

}

 

function SetInputReadOnly(name)

{

    var control = GetControlByTypeAndName('input', name);

    if (control)

    {

        control.style.display = 'none';

        var label = document.createElement('');

        label.innerHTML = control.value;

        control.parentElement.insertBefore(label, control);

    }

}

 

function SetSelectReadOnly(name)

{

    var control = GetControlByTypeAndName('select', name);

    if (control)

    {

        control.style.display = 'none';

        var label = document.createElement('');

        label.innerHTML = control.value;

        control.parentElement.insertBefore(label, control);

    }

}

 

function SetDateReadOnly(name)

{

    var control = GetControlByTypeAndName('input', name);

    if (control)

    {

        var parentControl = control.parentElement.parentElement.parentElement.parentElement;

        parentControl.style.display = 'none';

        var label = document.createElement('');

        label.innerHTML = control.value;

        parentControl.parentElement.appendChild(label);

    }

}

 

SetInputReadOnly('Author Surname');

SetInputReadOnly('Author First Name');

SetDateReadOnly('Document Date');

SetSelectReadOnly('Type of Document');

 

</script>

No comments: