Sempre l’interno del progetto CRM ho avuto la necessità di utilizzare un editor più complesso del semplice campo form nel quale scrivere una descrizione del ticket. Dopo varie prove ho scelto CKEditor, un prodotto davvero molto potente che, proprio per questo, necessita spesso di essere configurato un minimo. Dopo averlo scaricato ed integrato nel sistema (operazione davvero molto semplice) è possibile modificarlo in base alle proprie necessità agendo sul file “config.js” disponibile nella cartella principale.

In particolare io ho dovuto limitare il numero di funzioni presenti sulle barre degli strumenti (molti non mi servivano ed occupavano spazio inutilmente). Per farlo potete mettere nel file config.js all’interno della già presente funzione “CKEDITOR.editorConfig = function( config ) {“ tutto ciò che segue:

// This is actually the default value.
config.toolbar_Full =
[
    ['Source','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
    '/',
    ['Styles','Format','Font','FontSize'],
    ['TextColor','BGColor'],
    ['Maximize', 'ShowBlocks','-','About']
];

Lo slash (‘/’) indica un “a capo” fra le barre, il trattino (‘-’) indica una spaziatura fra le barre. I nomi credo non serva commentarli. Eliminate, spostate o aggiungete, dunque, tutto quello che volete in base alle vostre specifiche esigenze.

Questa settimana mi è stato richiesto di progettare un modulo CRM, in particolare legato al solo aspetto di Customer Support, che attraverso un sistema di ticketing permettesse di tener traccia di tutte le attività correlate alle comunicazioni con i clienti. Allo stesso tempo il modulo deve essere in grado di registrare anche richieste provenienti da contatti di qualunque genere che in futuro potrebbero trasformarsi in clienti.

Qui non voglio discutere della progettazione, che mi pare troppo specifica al caso trattato. Parlerò invece delle scelte che andrò ad effettuare circa i singoli componenti legati all’interfaccia utente. Ritengo infatti che per rendere questa soluzione efficace sia necessario fornire il miglior supporto possibile a chi lo sta utilizzando che potrebbe trovarsi di fronte al cliente al quale deve dare risposte immediate e precise.

Giusto per mettere qualche paletto, il sistema sarà basato su uno schema MVC nel quale Model e Controller saranno realizzati in JAVA (J2EE) mentre la View sarà prodotta in HTML usando pagine JSP (utilizzerò componenti EJB ed il framework Struts).

Tornando all’interfaccia utente l’idea è quella di integrare componenti AJAX per svolgere tutte le principali funzionalità. Ciò che il cliente mi ha richiesto, in particolare, è la possibilità di realizzare quanto segue:

• Creazione ticket
• Assegnazione del ticket
• Rilevazione della qualità del lavoro svolto
• Possibilità di allegare documenti e file al ticket
• Registrazione delle attività e dei tempi sul ticket
• Possibilità di trasformare in automatico i file in formato PDF standard (PDF/A-1)
• Invio segnalazione via email al destinatario del ticket
• Invio di questionario soddisfazione via email al cliente quando il ticket viene risolto (chius0)
• Apertura di documenti e procedure direttamente dal ticket (questo aspetto è legato al software ERP Bizbrain Core installato in azienda)
• Riepilogo ticket con pannelli che permettono di controllare tutta la vita dello stesso e cosa ne è scaturito

Nel prossimo appuntamento farò un elenco dei componenti che ritengo necessario integrare e del perché sono stati scelti. Parlerò anche della loro integrazione nel progetto. Sono però aperto anche a suggerimenti da parte vostra…

Chiunque abbia mai provato ad utilizzare nella stessa pagina le due librerie javascript jQuery e Prototype sa bene che esse non riescono a coesistere se non con qualche piccola modifica. Il problema sta nel fatto che entrambe utilizzano la funzione di default “$”. Ecco allora come fare:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
JQ = jQuery.noConflict();
</script>
<script src="prototype.js" type="text/javascript"></script>

Come vedete sarà sufficiente includere le due librerie nell’ordine suddetto e chiamare la funzione jQuery.noConflict() assegnandola alla variabile JQ. Le altre modifiche da effettuare all’interno della pagina che utilizza le funzioni di jQuery sono nella sostituzione della chiamata “$” con la chiamata “JQ”.

In pratica

Chi volesse applicare degli effetti di comparsa e scomparsa di elementi HTML (div) può pensare alla libreria Scriptaculous che offre il metodo toggle della funzione Effect per creare un ingresso a tendina o con apparizione del div che si vuole mostrare o nascondere. L’utilizzo è davvero semplice.

1. Scaricate le librerie Javascript scriptaculous da scriptaculous e prototype.
2. Richiamatele nella pagina dove volete applicare l’effetto:
   <script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>
3. Racchiudete l’elemento che volete far sparire e/o comparire in due <div> dando un id univoco al primo:
   <div id="x">
<div>
contenunto
</div>
</div>
4. Aggiungete la chiamata alla funzione sull’evento di un elemento che desiderate, ad esempio sull’evento onclick di un tag <a>
   <a href="#"  onclick="Effect.toggle('x', 'slide', { delay: 0.5 });  return false;">Apri dettagli</a>

Tipi di effetti ed opzioni

Per Effect.toggle è prevista la seguente sintassi:
Effect.toggle(element, ['appear' | 'slide' | 'blind'], [options] );

Ecco alcuni esempi:
Effect.toggle('id_of_element', 'appear');
Effect.toggle('id_of_element', 'slide', { delay: 0.5 });
Effect.toggle('id_of_element', 'blind', { duration: 2.0 });


Riferimenti

Primi passi con scriptaculous: http://wiki.github.com/madrobby/scriptaculous
Esempi: http://wiki.github.com/madrobby/scriptaculous/effect-toggle