Show Dynamic Fields only in Free Fields for Particular Queue

Moderator: crythias

Locked
Jpio630
Znuny newbie
Posts: 12
Joined: 16 Aug 2019, 21:49
Znuny Version: 4.0.32
Real Name: Jack Piotrowski
Company: MAT Holdings Inc.

Show Dynamic Fields only in Free Fields for Particular Queue

Post by Jpio630 »

Hi OtterHub,

I am working on Red Hat Enterprise Linux 7.6

OTRS Version: 4.0.32

I am trying to make it so two of my Dynamic Fields only display in the "Free Fields" section for one queue in particular.

I have seen multiple posts about displaying dynamic fields for a particular queue(s), i.e:

viewtopic.php?f=60&t=8032&start=50#p82769
viewtopic.php?t=37613
viewtopic.php?t=25805

After reviewing these forums I chose to edit the CustomerTicketMessage.tt file under /opt/otrs/Kernel/Output/HTML/Standard.

I wanted to test it for just one Dynamic Field first, and I have the following Javascript injected in this file next to $('#Dest').bind

Here is the Javascript I injected:

Code: Select all

<script type="text/javascript">//<![CDATA[
function nonetext() {
    $("[id^=DynamicField_MESCodeReview]").parent().addClass( 'Hidden' );
    $("[id^=LabelDynamicField_MESCodeReview]").parent().addClass('Hidden');
}
    $('#Dest').bind('change', function (Event) {
      	 switch ( $('#Dest').val() ) {
            case "58\|\|MES::5. Testing": // need to slash escape the pipes. Also, need to be in numerical order
		nonetext();
                $('#DynamicField_MESCodeReview').parent().removeClass( 'Hidden' );
                $('#LabelDynamicField_MESCodeReview').parent().removeClass( 'Hidden' );
            break;
            default:
                nonetext();

        } 
    });
//]]></script>
In this script I attempted to do the following:

Create a function nonetext() that adds a hidden class to my Dynamic Field variables.

Then I create a jQuery bind call on the Destination (I saw similar usage in one of the aforementioned forums)

Then I start a switch statement that checks the destination value (which queue the ticket is in that an end-user is trying to open)

And on the Case "58||MES::5. Testing" I remove the 'Hidden' classes. (58 is the queue_id for the "MES::5. Testing" queue, and I followed the escaping pipe convention)

The default case is set to just run the nonetext() function so that the classes are hidden for all other queue cases.

After running it, it is still not working.

Do you notice any errors in the Javascript?

Am I correct in injecting it into CustomerTicketMessage.tt if I am looking for it to affect the "Free Fields" section of tickets?

Should I actually be performing this functionality with an ACL, like one of the forums I mentioned suggested?

Any and all help is greatly appreciated,

Jack P.

P.S. In case anyone is interested, here is the entirty of CustomerTicketMessage.tt with my injected Javascript highlighted:

Code: Select all

# --
# Copyright (C) 2001-2018 xxx, https://otrs.com/
# --
# This software comes with ABSOLUTELY NO WARRANTY. For details, see
# the enclosed file COPYING for license information (GPL). If you
# did not receive this file, see https://www.gnu.org/licenses/gpl-3.0.txt.
# --
<div id="MainBox" class="TicketCompose ARIARoleMain">
    <div class="Content">
        <form action="[% Env("CGIHandle") %]" method="post" name="compose" id="NewCustomerTicket" enctype="multipart/form-data" class="Validate PreventMultipleSubmits">
            <input type="hidden" name="Action" value="[% Env("Action") %]" />
            <input type="hidden" name="Subaction" value="StoreNew" />
            <input type="hidden" name="Expand" id="Expand" value="" />
            <input type="hidden" name="FormID" value="[% Data.FormID | html %]" />
            <fieldset>

            <p class="AsteriskExplanation">[% Translate("All fields marked with an asterisk (*) are mandatory.") | html %]</p>

[% RenderBlockStart("TicketType") %]
                <div>
<!--
                    <label for="TicketNumber">[% Config("Ticket::Hook") %]</label>
                    <input title="Ticket#" type="text" name="TicketNumber" size="30" value="[% Data.TicketNumber | html %]" />
                    -->
                    <label for="TypeID" class="Mandatory"><span class="Marker">*</span>[% Translate("Type") | html %]:</label>
                    [% Data.TypeStrg %]
                    <div id="TypeIDError" class="TooltipErrorMessage" ><p>[% Translate("This field is required.") | html %]</p></div>
                    <div id="TypeIDServerError" class="TooltipErrorMessage NoJavaScriptMessage[% Data.TypeIDInvalid | html %]" ><p>[% Translate("This field is required.") | html %]</p></div>
                    <div class="Clear"></div>
                </div>

[% WRAPPER JSOnDocumentComplete %]
<script type="text/javascript">//<![CDATA[
    $('#TypeID').bind('change', function (Event) {
        Core.AJAX.FormUpdate($('#NewCustomerTicket'), 'AJAXUpdate', 'TypeID', ['Dest', 'PriorityID', 'ServiceID', 'SLAID', [% Data.DynamicFieldNamesStrg %]]);
    });
//]]></script>
[% END %]
[% RenderBlockEnd("TicketType") %]

[% RenderBlockStart("Queue") %]
                <div>
                    <label for="Dest" class="Mandatory">
                        <span class="Marker">*</span>
                        [% Translate("To") | html %]:
                    </label>
                    [% Data.ToStrg %]
                    <div id="DestError" class="TooltipErrorMessage" ><p>[% Translate("This field is required.") | html %]</p></div>
                    <div id="DestServerError" class="TooltipErrorMessage NoJavaScriptMessage[% Data.QueueInvalid | html %]" ><p>[% Translate("This field is required.") | html %]</p></div>
                    <div class="Clear"></div>
                </div>
[% WRAPPER JSOnDocumentComplete %]
[b]<script type="text/javascript">//<![CDATA[
function nonetext() {
    $("[id^=DynamicField_MESCodeReview]").parent().addClass( 'Hidden' );
    $("[id^=LabelDynamicField_MESCodeReview]").parent().addClass('Hidden');
}
    $('#Dest').bind('change', function (Event) {
      	 switch ( $('#Dest').val() ) {
            case "58\|\|MES::5. Testing": // need to slash escape the pipes. Also, need to be in numerical order
		nonetext();
                $('#DynamicField_MESCodeReview').parent().removeClass( 'Hidden' );
                $('#LabelDynamicField_MESCodeReview').parent().removeClass( 'Hidden' );
            break;
            default:
                nonetext();

        } 
    });
//]]></script>[/b]
[% END %]
[% RenderBlockEnd("Queue") %]

[% RenderBlockStart("TicketService") %]
                <div>
                    <label for="ServiceID">[% Translate("Service") | html %]:</label>
                    [% Data.ServiceStrg %]
                    <div class="Clear"></div>
                </div>
[% WRAPPER JSOnDocumentComplete %]
<script type="text/javascript">//<![CDATA[
    $('#ServiceID').bind('change', function (Event) {
        Core.AJAX.FormUpdate($('#NewCustomerTicket'), 'AJAXUpdate', 'ServiceID', ['TypeID', 'Dest', 'PriorityID', 'SLAID', [% Data.DynamicFieldNamesStrg %]]);
    });
//]]></script>
[% END %]
[% RenderBlockEnd("TicketService") %]

[% RenderBlockStart("TicketServiceMandatory") %]
                <div>
                    <label for="ServiceID" class="Mandatory"><span class="Marker">*</span> [% Translate("Service") | html %]:</label>
                    [% Data.ServiceStrg %]
                    <div id="ServiceIDError" class="TooltipErrorMessage" ><p>[% Translate("This field is required.") | html %]</p></div>
                    <div id="ServiceIDServerError" class="TooltipErrorMessage" ><p>[% Translate("This field is required.") | html %]</p></div>
                    <div class="Clear"></div>
                </div>
[% WRAPPER JSOnDocumentComplete %]
<script type="text/javascript">//<![CDATA[
    $('#ServiceID').bind('change', function (Event) {
        Core.AJAX.FormUpdate($('#NewCustomerTicket'), 'AJAXUpdate', 'ServiceID', ['TypeID', 'Dest', 'PriorityID', 'SLAID', [% Data.DynamicFieldNamesStrg %]]);
    });
//]]></script>
[% END %]
[% RenderBlockEnd("TicketServiceMandatory") %]

[% RenderBlockStart("TicketSLA") %]
                <div>
                    <label for="SLAID" title="[% Translate("Service level agreement") | html %]">[% Translate("SLA") | html %]:</label>
                    [% Data.SLAStrg %]
                    <div class="Clear"></div>
                </div>
[% WRAPPER JSOnDocumentComplete %]
<script type="text/javascript">//<![CDATA[
    $('#SLAID').bind('change', function (Event) {
        Core.AJAX.FormUpdate($('#NewCustomerTicket'), 'AJAXUpdate', 'SLAID', ['TypeID', 'Dest', 'ServiceID', 'PriorityID', 'SignKeyID', 'CryptKeyID', [% Data.DynamicFieldNamesStrg %]]);
    });
//]]></script>
[% END %]
[% RenderBlockEnd("TicketSLA") %]

[% RenderBlockStart("TicketSLAMandatory") %]
                <div>
                    <label for="SLAID" title="[% Translate("Service level agreement") | html %]" class="Mandatory"><span class="Marker">*</span> [% Translate("SLA") | html %]:</label>
                    [% Data.SLAStrg %]
                    <div id="SLAIDError" class="TooltipErrorMessage" ><p>[% Translate("This field is required.") | html %]</p></div>
                    <div id="SLAIDServerError" class="TooltipErrorMessage" ><p>[% Translate("This field is required.") | html %]</p></div>
                    <div class="Clear"></div>
                </div>
[% WRAPPER JSOnDocumentComplete %]
<script type="text/javascript">//<![CDATA[
    $('#SLAID').bind('change', function (Event) {
        Core.AJAX.FormUpdate($('#NewCustomerTicket'), 'AJAXUpdate', 'SLAID', ['TypeID', 'Dest', 'ServiceID', 'PriorityID', 'SignKeyID', 'CryptKeyID', [% Data.DynamicFieldNamesStrg %]]);
    });
//]]></script>
[% END %]
[% RenderBlockEnd("TicketSLAMandatory") %]

                <div>
                    <label for="Subject" class="Mandatory">
                        <span class="Marker">*</span>
                        [% Translate("Subject") | html %]:
                    </label>
                    <input title="Subject" type="text" id="Subject" name="Subject" value="[% Data.Subject | html %]" class="Validate_Required [% Data.SubjectInvalid | html %]" />
                    <div id="SubjectError" class="TooltipErrorMessage" ><p>[% Translate("This field is required.") | html %]</p></div>
                    <div id="SubjectServerError" class="TooltipErrorMessage NoJavaScriptMessage[% Data.SubjectInvalid | html %]" ><p>[% Translate("This field is required.") | html %]</p></div>
                    <div class="Clear"></div>
                </div>
                <div class="RichTextHolder">
                    <label for="RichText" class="Mandatory">
                        <span class="Marker">*</span>
                        [% Translate("Text") | html %]:
                    </label>
[% RenderBlockStart("RichText") %]
[% InsertTemplate("CustomerRichTextEditor.tt") %]
[% RenderBlockEnd("RichText") %]
                    <textarea id="RichText" class="RichText Validate_Required [% Data.BodyInvalid | html %]" name="Body" rows="15" cols="[% Config("Ticket::Frontend::TextAreaNote") %]">[% Data.Body | html %]</textarea>
                    <div id="RichTextError" class="TooltipErrorMessage" ><p>[% Translate("This field is required.") | html %]</p></div>
                    <div id="RichTextServerError" class="TooltipErrorMessage NoJavaScriptMessage[% Data.BodyInvalid | html %]" ><p>[% Translate("This field is required.") | html %]</p></div>
                    <div class="Clear"></div>
                </div>
                <div>
                    <label for="Attachment">[% Translate("Attachment") | html %]:</label>
                    <input name="file_upload" id="Attachment" title="Attachment" type="file" size="40" />
                    <input type="hidden" id="AttachmentUpload" name="AttachmentUpload" value="0" />
[% WRAPPER JSOnDocumentComplete %]
<script type="text/javascript">//<![CDATA[
    $('#Attachment').bind('change', function (Event) {
        var $Form = $('#Attachment').closest('form');
        Core.Form.Validate.DisableValidation($Form);
        $Form.find('#AttachmentUpload').val('1').end().submit();
    });
//]]></script>
[% END %]
[% RenderBlockStart("Attachment") %]
                    <div class="Attachment" title="[% Data.Filename | html %] - [% Data.Filesize | html %]">
                        [% Data.Filename | html %] ([% Data.Filesize | html %])
                        <button type="button" id="AttachmentDeleteButton[% Data.FileID | html %]" name="AttachmentDeleteButton[% Data.FileID | html %]" value="[% Translate("Delete") | html %]">[% Translate("Delete") | html %]</button>
                        <input type="hidden" id="AttachmentDelete[% Data.FileID | html %]" name="AttachmentDelete[% Data.FileID | html %]" />
[% WRAPPER JSOnDocumentComplete %]
<script type="text/javascript">//<![CDATA[
    $('#AttachmentDeleteButton[% Data.FileID | html %]').bind('click', function () {
        var $Form = $('#AttachmentDeleteButton[% Data.FileID | html %]').closest('form');
        $('#AttachmentDelete[% Data.FileID | html %]').val(1);
        Core.Form.Validate.DisableValidation($Form);
        $Form.trigger('submit');
    });
//]]></script>
[% END %]
                    </div>
[% RenderBlockEnd("Attachment") %]

                    <div class="Clear"></div>
                </div>
[% RenderBlockStart("Priority") %]
                <div>
                    <label for="PriorityID">[% Translate("Priority") | html %]:</label>
                    [% Data.PriorityStrg %]
                    <div class="Clear"></div>
                </div>
[% WRAPPER JSOnDocumentComplete %]
<script type="text/javascript">//<![CDATA[
    $('#PriorityID').bind('change', function (Event) {
        Core.AJAX.FormUpdate($('#NewCustomerTicket'), 'AJAXUpdate', 'PriorityID', [ 'TypeID', 'Dest', 'ServiceID', 'SLAID', [% Data.DynamicFieldNamesStrg %]]);
    });
//]]></script>
[% END %]
[% RenderBlockEnd("Priority") %]

[% RenderBlockStart("DynamicField") %]
                <div class="Row Row_DynamicField_[% Data.Name | html %]">
                    [% Data.Label %]
                    <div class="Field">
                        [% Data.Field %]
                    </div>
                    <div class="Clear"></div>
                </div>
[% RenderBlockEnd("DynamicField") %]

# example of how to use fixed dynamic field blocks for customizations
# Note: Field1 and Field2 are the names of the fields and had to be replaced with the actual
# field names
#[% RenderBlockStart("DynamicField_Field1") %]
#                <div class="Row Row_DynamicField_[% Data.Name | html %]">
#                    [% Data.Label %]
#                    <div class="Field">
#                        [% Data.Field %]
#                    </div>
#                    <div class="Clear"></div>
#                </div>
#[% RenderBlockEnd("DynamicField_Field1") %]
#[% RenderBlockStart("DynamicField_Field2") %]
#                <div class="Row Row_DynamicField_[% Data.Name | html %]">
#                    [% Data.Label %]
#                    <div class="Field">
#                        [% Data.Field %]
#                    </div>
#                    <div class="Clear"></div>
#                </div>
#[% RenderBlockEnd("DynamicField_Field2") %]

            </fieldset>
            <div id="BottomActionRow" class="ActionRow">
                <button id="submitRichText" accesskey="g" title="[% Translate("Submit") | html %] (g)" type="submit" value="[% Translate("Submit") | html %]">[% Translate("Submit") | html %]</button>
            </div>
        </form>
    </div>
</div>
[% WRAPPER JSOnDocumentComplete %]
<script type="text/javascript">
    Core.Customer.InitFocus();
</script>
[% END %]
In my Javascript I did the following:

Code: Select all

<script type="text/javascript">//<![CDATA[
function nonetext() {
    $("[id^=DynamicField_MESCodeReview]").parent().addClass( 'Hidden' );
    $("[id^=LabelDynamicField_MESCodeReview]").parent().addClass('Hidden');
}
    $('#Dest').bind('change', function (Event) {
      	 switch ( $('#Dest').val() ) {
            case "58\|\|MES::5. Testing": // need to slash escape the pipes. Also, need to be in numerical order
		nonetext();
                $('#DynamicField_MESCodeReview').parent().removeClass( 'Hidden' );
                $('#LabelDynamicField_MESCodeReview').parent().removeClass( 'Hidden' );
            break;
            default:
                nonetext();

        } 
    });
//]]></script>
Locked