Hiding Add / Edit / Delete buttons on Datatable on customForm

Hiding Add / Edit / Delete buttons on Datatable on customForm

book

Article ID: KB0081368

calendar_today

Updated On:

Products Versions
TIBCO MDM 9.x
TIBCO Cloud MDM 2.x

Description

Sometimes, the customForm widgets as supplied may need slight modifications to be applied to their appearance and/or offered functionality in a way that cannot be readily configured with radio buttons and lists in the properties view.

This article explains how to set up a customForm to hide the Add/Edit/Delete Buttons for a deployed datatable widget element, on the understanding that the approach shown here can be adapted for other purposes and other sub-elements under other deployed widget elements.

Issue/Introduction

This article explains how to set up a customForm to hide the Add/Edit/Delete Buttons for a deployed datatable widget element. This approach can also be used for other sub-elements under other deployed widget elements.

Resolution

This is how you "hide" the Add / Edit / Delete buttons on a Datatable element on a customUI form:
 
1. Create the form with the datatable element for the relationship (in this case, Associated_Addresses) - having done so, click on External Browser, then F12 and finally use the "Pick an element" button and click on the plus or edit or delete symbols to get the names of the elements that are created:
 
 
The names are really just add_<x>, edit_<x>, del_<x>, where <x> is the name of the datatable element (in this case, datatable_0):
 
 
2. Create an event DOMSubtreeModified and add the following code against it:
 
function enableHideCustomEditButtons() {
    var frame = top.window.frames["customFrame"];
    if (frame != null) {
        var frameDoc = frame.document;
        if (frameDoc != null) {
                     window.rel1Changed = false;
            jQuery(frameDoc).ready(
                function () {
                                   var x = this;
                    var doc = top.window.frames["customFrame"].document;
                                   if (!window.rel1Changed)
                        window.rel1Changed = hideCustomEditButtons(doc,"add_datatable_0") && hideCustomEditButtons(doc,"edit_datatable_0")  && hideCustomEditButtons(doc,"del_datatable_0");
                }
            );
        }
    }
}
 
 
3. now create the javascript function hideCustomEditButtons in the file <project>/resources/<mub_name>/customJs/<mub_name> against the top level panel (panel_0) containing the following code:
 
function hideCustomEditButtons(link) {
    var result = false;
    if (link != null) {
        link.style.display = "none";
        link.style.visibility = "hidden";
        result = true;
    }
    return result;
}
 
4. Finally, deploy the mub to the MDM server :
 
 
This page will now display without the edit buttons:
 
 
So, this is how you hide the edit buttons.  The approach shown here can be adapted for other purposes and other sub-elements under other deployed widget elements.
 
Powered by Wolken Software