Solution to hide the plus button in detail views

[Stephan-H]

DaDaBIK version 11.12-Elba enterprise

Problem:
In a master/detail view, when you create a new item, the foreign key field is visible but disabled - but the + button remains active, allowing users to add master table records from here. To prevent this, the + button should be hidden.

Solution:
We will apply a css class to this button that will hide it depending on the enabled state of the corresponding key field. This must be done using Javascript.

Step 1:
Add a css class to styles_screen_custom.css, e.g.

.button-disabled {display:none;}

Step 2:
Add a custom javascript (JQuery) function to custom_functions.js to target the specific + button (and only this one) and add the css class defined in step 1:

$(document).ready(function() {
    // Function to update the button class based on the select state
    function updateButtonClass() {
        var isDisabled = $('#cont_field_button_hint_id-location #id-location select').prop('disabled');
        var $button = $('#cont_field_button_hint_id-location .form_input_element_button button');
       
        if (isDisabled) {
            $button.addClass('button-disabled'); // this class is defined in styles_screen_custom.css
        } else {
            $button.removeClass('button-disabled');
        }
    }

    // Call the function on page load
    updateButtonClass();

    // Also call the function whenever the select state changes,  just in case
    $('#cont_field_button_hint_id-location #id-location select').on('change', updateButtonClass);
});

Note that you must use the correct ids of the applicable html elements, in the example above it is #cont_field_button_hint_id-location for the parent element used to set the scope of the function and #id-location for the parent element of the select field. Consult your browser's developer console to find out the ids.

Best Regards,
Stephan