javascriptjqueryotrs

Show/Hide dropdown based on another option in OTRS

Im trying to create a .js (similar to Core.Agent.Znuny4OTRSShowPendingTimeIfNeeded.js), which the main function is show/enable specific dynamicField dropdown when a specific option are selected in Next State dropdown. All of this, for now, only affect ATPending action. This is my try so far:

$(document).ready(function() {
            setTimeout(function() {
                    const Action = Core.Config.Get("Action");
                    const SupportedActions = ["AgentTicketPending"];

                    if ($.inArray(Action, SupportedActions) !== -1) {
                        if (Action === "AgentTicketPending")
                        document.getElementsByClassName("Row Row_DynamicField_ApproverList")[0].style.visibility = "hidden";
                        $('#NewStateID').on('change', function() {
                                const Option = $(this).val();
                                if (Option === 'pending approval') {
                                    document.getElementsByClassName("Row Row_DynamicField_ApproverList")[0].style.visibility = "visible";
                                } else if (Option !== 'pending approval') {
                                    document.getElementsByClassName("Row Row_DynamicField_ApproverList")[0].style.visibility = "hidden";
                                }
                            }
                        );
                    }
                });
            });

Resume: When "pending approval" state is selected, DF "Approver" is visible. enter image description here enter image description here

Solution

  • This example uses the typical structure of OTRS/Znuny JS files. That way you don't need $(document).ready or a timeout. I suppose you also create your own xml file to load this JS globally. You should use the IDs for the state if you want to support more languages, i used StateID 4 (open) here. Hope that helps.

    "use strict";

var Core = Core || {};
Core.Agent = Core.Agent || {};

/**
 * @namespace Core.Agent.HideField
 * @memberof Core.Agent
 * @description
 *      This namespace contains the functions for handling Agent.HideField.
 */
Core.Agent.HideField = (function (TargetNS) {

    /**
     * @name Init
     * @memberof Core.Agent.HideField
     * @function
     * @description
     *      Initializes the module functionality.
     */
    TargetNS.Init = function () {

        const SupportedActions = ["AgentTicketPending"];
        const Action = Core.Config.Get("Action");

        if ($.inArray( Action, SupportedActions) !== -1) {

            $('#NewStateID').on('change', function() {
                if (Action === "AgentTicketPending") {
                    // use:
                    // $("#NewStateID").children("option").filter(":selected").text()
                    // to get the text of the selected option

                    if ( $('#NewStateID').val() == "4" ) {
                        // hide dynamic field
                        $('.Row.Row_DynamicField_ApproverList').hide();
                    }else{
                        // show dynamic field
                        $('.Row.Row_DynamicField_ApproverList').show();
                    }
                }
            });
        }

    };

    Core.Init.RegisterNamespace(TargetNS, 'APP_MODULE');

    return TargetNS;
}(Core.Agent.HideField || {}));