Freetext Shown Based on State

[leeroys]

Hi Community

I was wondering if any one has done this.

I want a freetext to be shown, if a specific state is selected.

eg, lets say i have a freetext field called "test" and a state called test.

If state is equalled to test, freetext field test becomes available.

This should be effective on , a noteview, phoneoutbound, and email reply.


Your thoughts are welcome.

[crythias]

http://forums.otrs.org/viewtopic.php?f=60&t=8032 Concepts should similarly apply.

[gulas]

Hello Crythias,

can you help me with this :

i want to have 4 types of "responses":
1- Req. info; 2- comment ; 3- solution ; 4 - implementation.

- when Im going to reply the ticket, i only want to have the numeric field "effort" when i choose nº 3 and 4.

- Is it possible the relation between the response and the states ??
For example: when i choose nº 1, the next states only can be pending or in progress;
Nº 3, state only can be close, reject
Nº 4, state confirm close.

how can i do this 2 questions ??
thanks thanks

[gulas]

Crythias

i already use your advices on showing freetext when choosing queue in costumer and its working perfectly.

now, i want to show another freetext, choosing state close in agent interface when replying a ticket.

i used the same concepts i already used in customer interface.
in the agentTicketCompose i put this code but nothing happens.
---------------------------------------------------------------------------------------------------------------
function nonetext() {
document.getElementById('TicketFreeText1').style.display = 'none';
document.getElementById('TicketFreeText1').style.value = '';
document.getElementById('LabelTicketFreeText1').style.display = 'none';

}

switch ($('#StateID').val() ) {

case "1\|\|In Progress:
nonetext();
break;

case "3\|\|Rejected:
nonetext();
break;

case "5\|\|cancelled:
nonetext();
break;

case "7\|\|pending:
nonetext();
break;

case "8\|\|Close:

nonetext();
document.getElementById('TimeUnits').style.display = 'block';
document.getElementById('LabelTimeUnits').style.display = 'block';

break;
default:
}

---------------------------------------------------------------------------------------------------------------

is it missing something or am i doing something wrong ?
hope you can help me .
thanks

[gulas]

sorry, the code is :

Code: Select all

function nonetext() {
document.getElementById('TicketFreeText1').style.display = 'none';
document.getElementById('TicketFreeText1').style.value = ' ';
document.getElementById('LabelTicketFreeText1').style.display = 'none';

}

switch ($('#StateID').val() ) {

case "1\|\|In Progress:
nonetext();
break;

case "3\|\|Rejected:
nonetext();
break;

case "5\|\|cancelled:
nonetext();
break;

case "7\|\|pending:
nonetext();
break;

case "8\|\|Close:

nonetext();
document.getElementById('TicketFreeText1').style.display = 'block';
document.getElementById('LabelTicketFreeText1').style.display = 'block';

break;
default:
}

[crythias]

in agent, it's best to include the code in the script around the entry that's changing. make sure you read the entire topic.

[gulas]

i didnt understand..
can you explain how can i do this ?

[crythias]

http://forums.otrs.org/viewtopic.php?f=60&t=8032#p43215 This applies to change of TypeID. So you'd find where State changes, and place your code there.

[gulas]

i put this code below the state in AgentTicketCompose. can you verify if everything is correct ? because nothing change

Code: Select all

<script type="text/javascript">//<![CDATA[

$('#StateID').bind('change', function (Event) {
Core.AJAX.FormUpdate($('#NewPhoneTicket'), 'AJAXUpdate', 'TypeID', ['NewUserID', 'NewResponsibleID', 'NextStateID', 'PriorityID', 'ServiceID', 'SLAID', 'SignKeyID', 'CryptKeyID', 'TicketFreeText1', 'TicketFreeText2', 'TicketFreeText3', 'TicketFreeText4', 'TicketFreeText5', 'TicketFreeText6', 'TicketFreeText7', 'TicketFreeText8', 'TicketFreeText9', 'TicketFreeText10', 'TicketFreeText11', 'TicketFreeText12', 'TicketFreeText13', 'TicketFreeText14', 'TicketFreeText15', 'TicketFreeText16', 'To', 'Cc', 'Bcc']);
 function nonetext() {

      document.getElementById('TicketFreeText3').style.display = 'none';
      document.getElementById('LabelTicketFreeText3').style.display = 'none';    
} 

       
 switch ($('#StateID').val() ) 
 {        
		case  "1\|\|open":
                   nonetext(); 
					break;
		
		case "3\|\|pending auto": 
                     nonetext(); 
					break;
					
		case  "5\|\|pending auto": 
					nonetext(); 
					break;
		
		case "7\|\|pending reminder": 
                     nonetext(); 
					break;

       case "8\|\|pending auto": 
    
			nonetext(); 
			document.getElementById('TicketFreeText3').style.display = 'block';
			document.getElementById('LabelTicketFreeText3').style.display = 'block';
        
			break;
        default;
}
    });
   
//]]></script>

[crythias]

Code: Select all

      case  "1\|\|open":

You can only switch on what value is provided in the <select> <option>. If the value is 1||open, it'll work. if the value is "1", it will not. View source on your page to determine what values are passed.

[gulas]

thanks crythias , but im becoming confused. t tried a lot, but its not working.
are you saying that i need to have a code like this :

Code: Select all

				<script type="text/javascript">//<![CDATA[

$('#StateID').bind('change', function (Event) {
Core.AJAX.FormUpdate($('#NewPhoneTicket'), 'AJAXUpdate', 'TypeID', ['NewUserID', 'NewResponsibleID', 'NextStateID', 'PriorityID', 'ServiceID', 'SLAID', 'SignKeyID', 'CryptKeyID', 'TicketFreeText1', 'TicketFreeText2', 'TicketFreeText3', 'TicketFreeText4', 'TicketFreeText5', 'TicketFreeText6', 'TicketFreeText7', 'TicketFreeText8', 'TicketFreeText9', 'TicketFreeText10', 'TicketFreeText11', 'TicketFreeText12', 'TicketFreeText13', 'TicketFreeText14', 'TicketFreeText15', 'TicketFreeText16', 'To', 'Cc', 'Bcc']);
 function nonetext() {

      document.getElementById('TicketFreeText3').style.display = 'none';
      document.getElementById('LabelTicketFreeText3').style.display = 'none';    
} 

       
 switch ($('#StateID').val() ) 
 {        
		case  1||In Progress:
                   nonetext(); 
					break;
		
		case 3||Rejected: 
                     nonetext(); 
					break;
					
		case  5||cancelled: 
					nonetext(); 
					break;
		
		case 7||pending: 
                     nonetext(); 
					break;

       case 8||Close: 
    
			nonetext(); 
			document.getElementById('TicketFreeText3').style.display = 'block';
			document.getElementById('LabelTicketFreeText3').style.display = 'block';
        
			break;
        default;
}
    });
   
//]]></script>

can you change on your way, so i can compare with my code ?

[crythias]

Read my last comment again.
case 1||In Progress:
shoud be
case '1':
but only if "In Progress" is StateID 1. I don't know what it is for you, but you will know it from view source or simply hovering over the state list in the admin bar.

[gulas]

Thanks Crythias, i changed and checked the id´s but it doesn't work.

thanks

[crythias]

This is what's in view source.

Code: Select all

<select name="NextStateID" id="NextStateID" aria-invalid="false">
  <option value="2">closed successful</option>
  <option value="3">closed unsuccessful</option>
  <option value="4" selected="selected">open</option>
  <option value="7">pending auto close+</option>
  <option value="8">pending auto close-</option>
  <option value="6">pending reminder</option>
</select>

I'd expect
to see

Code: Select all

<script type="text/javascript">//<![CDATA[

$('#StateID').bind('change', function (Event) {
Core.AJAX.FormUpdate($('#NewPhoneTicket'), 'AJAXUpdate', 'TypeID', ['NewUserID', 'NewResponsibleID', 'NextStateID', 'PriorityID', 'ServiceID', 'SLAID', 'SignKeyID', 'CryptKeyID', 'TicketFreeText1', 'TicketFreeText2', 'TicketFreeText3', 'TicketFreeText4', 'TicketFreeText5', 'TicketFreeText6', 'TicketFreeText7', 'TicketFreeText8', 'TicketFreeText9', 'TicketFreeText10', 'TicketFreeText11', 'TicketFreeText12', 'TicketFreeText13', 'TicketFreeText14', 'TicketFreeText15', 'TicketFreeText16', 'To', 'Cc', 'Bcc']);
function nonetext() {

      document.getElementById('TicketFreeText3').style.display = 'none';
      document.getElementById('LabelTicketFreeText3').style.display = 'none';    
} 

       
switch ($('#StateID').val() ) 
{        
      case  "1":
                   nonetext(); 
               break;
      
      case "3": 
                     nonetext(); 
               break;
               
      case  "5": 
               nonetext(); 
               break;
      
      case "7": 
                     nonetext(); 
               break;

       case "8": 
         nonetext(); 
         document.getElementById('TicketFreeText3').style.display = 'block';
         document.getElementById('LabelTicketFreeText3').style.display = 'block';
        
         break;
        default;
}
    });
   
//]]></script>

This should only show TicketFreeText3 when you choose the pending autoclose unsuccessful state.

But the code is awkward in that it will hide TicketFreeText3 only if one of the other cases are chosen, and do nothing on load (if you want it to do something, you'll have to hide the code before you do an on-change (or after the page loads), but not *IN* the on change.) ... it also will do nothing if you choose a state that isn't listed, so if TicketFreeText3 is shown, it'll stay shown, but if it's not shown, it'll stay hidden.

[gulas]

Code: Select all

      <select name="StateID" id="StateID">
  <option value="8">Close</option>
  <option value="1" selected="selected">In Progress</option>
  <option value="3">Rejected</option>
  <option value="5">cancelled</option>
  <option value="7">pending </option>
</select>

and my code is :

Code: Select all

                    <label for="StateID">$Text{"Next ticket state"}:</label>
                    <div class="Field">
                        $Data{"NextStatesStrg"}
                    </div>
                    <div class="Clear"></div>
<script type="text/javascript">//<![CDATA[

$('#StateID').bind('change', function (Event) {
Core.AJAX.FormUpdate($('#NewPhoneTicket'), 'AJAXUpdate', 'TypeID', ['NewUserID', 'NewResponsibleID', 'NextStateID', 'PriorityID', 'ServiceID', 'SLAID', 'SignKeyID', 'CryptKeyID', 'TicketFreeText1', 'TicketFreeText2', 'TicketFreeText3', 'TicketFreeText4', 'TicketFreeText5', 'TicketFreeText6', 'TicketFreeText7', 'TicketFreeText8', 'TicketFreeText9', 'TicketFreeText10', 'TicketFreeText11', 'TicketFreeText12', 'TicketFreeText13', 'TicketFreeText14', 'TicketFreeText15', 'TicketFreeText16', 'To', 'Cc', 'Bcc']);
function nonetext() {

      document.getElementById('TicketFreeText3').style.display = 'none';
      document.getElementById('LabelTicketFreeText3').style.display = 'none';   
}

       
switch ($('#StateID').val() )
{       
      case  "1":
                   nonetext();
               break;
     
      case "3":
                     nonetext();
               break;
               
      case  "5":
               nonetext();
               break;
     
      case "7":
                     nonetext();
               break;

       case "8":
         nonetext();
         document.getElementById('TicketFreeText3').style.display = 'block';
         document.getElementById('LabelTicketFreeText3').style.display = 'block';
       
         break;
        default;
}
    });
   
//]]></script>

i dont have to change nothing in :
Core.AJAX.FormUpdate($('#NewPhoneTicket'), 'AJAXUpdate', 'TypeID' ??

[danialpaul1]

I guess you're professional developer & I think that might be correct coding format but really don't know exactly which coding is that !