[otrs] show/hide dynamic fields on phone ticket

Kent Kollasch

unread,

Oct 31, 2016, 4:12:24 PM10/31/16

to User questions and discussions about OTRS.

Hi,

I'm trying to show/hide dynamic fields on new phone ticket based on ticket type.

I'm having mixed results, only the first dynamic field shows up, the rest stay hidden. I've add the following to Custom/Kernel/Output/HTML/Templates/Standard/AgentTicketPhone.tt.

[% RenderBlockStart("TicketType") %]
                    <label class="Mandatory" for="TypeID"><span class="Marker">*</span> [% Translate("Type") | html %]:</label>
                    <div class="Field">
                        [% Data.TypeStrg %]
                        <div id="TypeIDError" class="TooltipErrorMessage"><p>[% Translate("This field is required.") | html %]</p></div>
                        <div id="TypeIDServerError" class="TooltipErrorMessage"><p>[% Translate("This field is required.") | html %]</p></div>

[% WRAPPER JSOnDocumentComplete %]
<script type="text/javascript">//<![CDATA[
    $('#TypeID').bind('change', function (Event) {
        Core.AJAX.FormUpdate($('#NewPhoneTicket'), 'AJAXUpdate', 'TypeID', ['Dest', 'NewUserID', 'NewResponsibleID', 'NextStateID', 'PriorityID', 'ServiceID', 'SLAID', 'SignKeyID', 'CryptKeyID', 'To', 'Cc', 'Bcc', 'StandardTemplateID' [% Data.DynamicFieldNamesStrg %]]);

### shows dynamic fields based on ticket type ###
       switch ($('#TypeID').val() ) {
            case "4":
                document.getElementById('id name').style.display = 'block';
            break;

        default:
                 document.getElementById('id name').style.display = 'none';
       }

    });
//]]></script>
[% END %]

[% RenderBlockStart("DynamicField") %]
                        <div id="id name" style="display:none;" class="Row Row_DynamicField_[% Data.Name | html %]" className="TicketFreeText Validate_Required ServerError" >
                            [% Data.Label %]<div class="Field">[% Data.Field %]</div>
                            <div class="Clear"></div>
                        </div>
[% RenderBlockEnd("DynamicField") %]

Thanks,
Kent

-- 
Kent C. Kollasch <mailto:Kent.K...@artsway-mfg.com>
Director of Information Technology
Art's-Way Manufacturing Co., Inc.
Phone: (712) 864-0025
Fax: (712) 864-3154

This message may contain information that is confidential and subject to privilege. 
If you are not the intended recipient and have received this e-mail in error, please 
disregard and do not open attachments, if any. Please note that the view or opinions 
presented in this e-mail are solely those of the author.

Kent Kollasch

unread,

Oct 31, 2016, 4:32:08 PM10/31/16

to User questions and discussions about OTRS.

I figured it out... Works pretty good...

### shows dynamic fields based on ticket type ###
switch ($('#TypeID').val() ) {
case "4":

                document.getElementById('id Supervisor').style.display = 'block';
                document.getElementById('id Department').style.display = 'block';
                document.getElementById('id ProdLine').style.display = 'block';
                document.getElementById('id Item').style.display = 'block';
                document.getElementById('id Problem').style.display = 'block';
                document.getElementById('id Solution').style.display = 'block';
            break;

        default:
                document.getElementById('id Supervisor').style.display = 'none';
                document.getElementById('id Department').style.display = 'none';
                document.getElementById('id ProdLine').style.display = 'none';
                document.getElementById('id Item').style.display = 'none';
                document.getElementById('id Problem').style.display = 'none';
                document.getElementById('id Solution').style.display = 'none';
            break;
       }

[% RenderBlockStart("DynamicField") %]

                            [% Data.Label %]<div class="Field">[% Data.Field %]</div>
                            <div class="Clear"></div>
                        </div>
[% RenderBlockEnd("DynamicField") %]

---------------------------------------------------------------------
OTRS mailing list: otrs - Webpage: http://otrs.org/
Archive: http://lists.otrs.org/pipermail/otrs
To unsubscribe: http://lists.otrs.org/mailman/listinfo/otrs

Kent Kollasch

unread,

Oct 31, 2016, 5:39:59 PM10/31/16

to User questions and discussions about OTRS.

the last problem is setting/removing the class Validate_Required for the dynamic fields. If I set it in sysconfig to manditory, I need to be able to clear this if the field isn't being shown.

Carlos Rodríguez

unread,

Oct 31, 2016, 7:07:51 PM10/31/16

to User questions and discussions about OTRS.

I would recommend the OTRS Business Solution™ Freely Selectable Feature OTRSTicketMaskExtensions (Ticket Forms), it with handle the show and hide of the dynamic fields but also the mandatory status, that is not trivial.

((enjoy))

Carlos Rodríguez

signature.asc

Dimitrakakis Georgios

unread,

Nov 4, 2016, 7:21:27 AM11/4/16

to User questions and discussions about OTRS.

I am interested in this as well but what do you mean by “freely selectable feature”? Can it be installed without an OTRS Business Solution license and how?

Regards,

G.

Kent Kollasch

unread,

Nov 4, 2016, 10:54:05 AM11/4/16

to User questions and discussions about OTRS.

I was able to get it working. I don't use Sysconfig to set they Dynamic fields mandatory. It's done based on ticket type. We have multiple helpdesks setup and use ticket type to define where the ticket is routed and what dynamic fields are displayed. Here's an example.

[% RenderBlockStart("TicketType") %]
                    <label class="Mandatory" for="TypeID"><span class="Marker">*</span> [% Translate("Type") | html %]:</label>
                    <div class="Field">
                        [% Data.TypeStrg %]
                        <div id="TypeIDError" class="TooltipErrorMessage"><p>[% Translate("This field is required.") | html %]</p></div>
                        <div id="TypeIDServerError" class="TooltipErrorMessage"><p>[% Translate("This field is required.") | html %]</p></div>

[% WRAPPER JSOnDocumentComplete %]
<script type="text/javascript">//<![CDATA[
    $('#TypeID').bind('change', function (Event) {

$('#Dest').val('143||Incoming');

Core.AJAX.FormUpdate($('#NewPhoneTicket'), 'AJAXUpdate', 'TypeID', ['Dest', 'NewUserID', 'NewResponsibleID', 'NextStateID', 'PriorityID', 'ServiceID', 'SLAID', 'SignKeyID', 'CryptKeyID', 'To', 'Cc', 'Bcc', 'StandardTemplateID' [% Data.DynamicFieldNamesStrg %]]);

### shows dynamic fields based on ticket type ###
switch ($('#TypeID').val() ) {

          case "1":
                document.getElementById('id ktst').style.display = 'block';
            $("#LabelDynamicField_ktst").addClass("Mandatory");
              $("#DynamicField_ktst").addClass("Mandatory Validate_Required ServerError");
            break;

            case "4":
                document.getElementById('id Supervisor').style.display = 'block';
                document.getElementById('id Department').style.display = 'block';
                document.getElementById('id ProdLine').style.display = 'block';

$("#LabelDynamicField_ProdLine").addClass("Mandatory");
$("#DynamicField_ProdLine").addClass("Mandatory Validate_Required ServerError");

document.getElementById('id Item').style.display = 'block';

$("#LabelDynamicField_Item").addClass("Mandatory");
$("#DynamicField_Item").addClass("Mandatory Validate_Required ServerError");

document.getElementById('id Problem').style.display = 'block';

$("#LabelDynamicField_Problem").addClass("Mandatory");
$("#DynamicField_Problem").addClass("Mandatory Validate_Required ServerError");

document.getElementById('id Solution').style.display = 'block';

$("#LabelDynamicField_Solution").addClass("Mandatory");
$("#DynamicField_Solution").addClass("Mandatory Validate_Required ServerError");

              break;

        default:
                document.getElementById('id Supervisor').style.display = 'none';
                document.getElementById('id Department').style.display = 'none';
                document.getElementById('id ProdLine').style.display = 'none';
                document.getElementById('id Item').style.display = 'none';
                document.getElementById('id Problem').style.display = 'none';
                document.getElementById('id Solution').style.display = 'none';

document.getElemnetById('id ktst').style.display = 'none';
break;

}
});
//]]></script>
[% END %]

</div>
<div class="Clear"></div>

[% RenderBlockEnd("TicketType") %]

Reply all

Reply to author

Forward