Wichtige Kundeninformationen hervorheben.

[asegojv]

Hallo,
gibt es eine Möglichkeit einige der Kundeninfos auf der rechten Seite bei Ticketerstellung hervorzubenen?
Wir haben z.B. einen Vertragsstatus hinterlegt, der unbeding in Rot angezeigt werden soll, wenn die Auswahl auf "nein" steht.

Außerdem soll das Feld Kommentar hervorgehoben werden, wenn dort etwas drin steht. sei es Fettschrift, eine Farbe oder evtl. sogar ein Popup.
Dazu wäre es ganz gut, wenn der Freitext, der in dem Feld hinterlegt ist, nicht abgeschnitten wird, sondern vollständig auf einem Blick sichtbar ist.

Vielen Dank für jegliche Hilfe!

[reneeb]

Das könnte man mit JavaScript lösen. Dazu musst Du unter <OTRS_HOME>/var/httpd/htdocs/js mal nach der Datei suchen, in der die Kundeninfo geholt wird (wenn ich mich richtig erinnere heißt die JS-Funktion "GetCustomerInfos"). Nach dem Setzen der Info musst Du den DOM durchschauen ob die Infos drin sind und ggf. die Darstellung anpassen.

[asegojv]

Hallo,
ich bin da etwas Laie Gibt es eine Schritt für Schritt Anleitung?

[reneeb]

Kannst Du mal so ein Ticket öffnen und dann den Ausschnitt aus dem HTML-Quelltext liefern? Also im Quelltext nach den Bezeichnungen suchen und ein paar Zeilen davor und danach kopieren und hier posten. Welche OTRS-Version benutzt Du?

[asegojv]

Das müsste der Part sein. Im wichtigen Feld habe ich jetzt "Dieser Kommentar soll hervorgehoben werden" reingeschrieben
Anbei auch noch mal ein Screenshot um welche Felder es geht. Außerdem wäre es gut, wenn der Kommentar vollständig angezeigt wird und man nicht auf das Mouseover angewiesen ist.
Installiert ist momentan das OTRS 3.1.12. Ende Januar updaten wir aber auch noch auf das 3.2. da die aktuelle Version ein Bug hat..eine Funktion auf die wir nicht verzichten können.

Danke!

Code: Select all

<fieldset class="TableLike FixedLabelSmall">


    <label>Suchbegriff:</label>
    <p class="Value FixedValueSmall" title="Testkunde">
        Testkunde

    </p>
    <div class="Clear"></div>
    <label>Titel:</label>
    <p class="Value FixedValueSmall" title="3  ">
        3  

    </p>
    <div class="Clear"></div>
    <label>Nachname:</label>
    <p class="Value FixedValueSmall" title="Test">
        Test

    </p>
    <div class="Clear"></div>
    <label>Benutzername:</label>
    <p class="Value FixedValueSmall" title="Testino">
        Testino

    </p>
    <div class="Clear"></div>
    <label>E-Mail:</label>
    <p class="Value FixedValueSmall" title="Test@test.de">
        Test@test.de

    </p>
    <div class="Clear"></div>
    <label>Kommentar:</label>
    <p class="Value FixedValueSmall" title="Dieser Kommentar soll hervorgehoben werden">
        Dieser Kommentar soll [...]

    </p>
    <div class="Clear"></div>
    <label>Typ:</label>
    <p class="Value FixedValueSmall" title="Einzelbetrieb">
        Einzelbetrieb

    </p>
    <div class="Clear"></div>
    <label>Bundesland:</label>
    <p class="Value FixedValueSmall" title="Baden-Württemberg">
        Baden-Württemberg

    </p>
    <div class="Clear"></div>
    <label>Support:</label>
    <p class="Value FixedValueSmall" title="Ja">
        Ja

    </p>
    <div class="Clear"></div>
    <label>Beta:</label>
    <p class="Value FixedValueSmall" title="Ja">
        Ja

    </p>
    <div class="Clear"></div>
    <label>Newsletter:</label>
    <p class="Value FixedValueSmall" title="Ja">
        Ja

    </p>
    <div class="Clear"></div>
    <label>Vertragsservice:</label>
    <p class="Value FixedValueSmall" title="Ja">
        Ja

    </p>
    <div class="Clear"></div>
    <label>Dakota:</label>
    <p class="Value FixedValueSmall" title="Ja">
        Ja

    </p>
    <div class="Clear"></div>
    <label>Asego2Go:</label>
    <p class="Value FixedValueSmall" title="Ja">
        Ja

    </p>
    <div class="Clear"></div>
    <label>Wochenbericht:</label>
    <p class="Value FixedValueSmall" title="Ja">
        Ja

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


    <ul class="ItemRow">

        <li>
            <a class="NoOpenTicket" href="/otrs/index.pl?Action=AgentTicketSearch;Subaction=Search;CustomerID=1234;StateType=Open" target="_blank" title="Offene Tickets">
                Offene Tickets (0)
            </a>
        </li>
    </ul>
</fieldset>

[reneeb]

Code: Select all

 $(document).ready( function() {
     $('label').each( function() {
         if ( $(this).text() != 'Kommentar:' ) {
             return;
         }
                                      
         var comment = $(this).next(); 
         comment.text( comment.attr('title') );

         if ( comment.text() === 'nein' ) {
             comment.css('background-color', 'red' );
         }
     });
 });

In der var/httpd/htdocs/Core.Agent.TicketZoom.js hinzufügen. Das musst Du beim Upgrade mit umziehen. Alternativ in eine eigen JS auslagern und in der SysConfig eintragen, damit die JS-Datei geladen wird.

Für die Vertragssituation muss das genauso aussehen...

[asegojv]

Hallo,
ich habe das jetzt mal in die JS-Datei eingebaut. Leider ist die Anzeige unverändert.
Muss das dort an eine bestimmte Stelle geschrieben werden oder einfach ans Ende ran?
Müssen evtl auch Dienste neu gestartet werden?

Danke!

[KlausNehrer]

Bei uns gehts damit:

Code: Select all

$(document).ready( function() {
     $('label').each( function() {
         if ( $(this).text() != 'Position:' ) {
             return;
         }
                                      
         var comment = $(this).next(); 
         comment.text( comment.attr('title') );

         if ( comment.text() != '' ) {
             comment.css('background-color', 'red' );
         }
		});
	});

Das Feld Position wird, wenn es nicht leer ist, rot hinterlegt.

[asegojv]

hmm...auch die Änderungen bringen bei mir nichts.
Müssen irgendwelche Dienste neu gestartet werden?
An welche Position in der Core.Agent.TicketZomm.js muss es stehen?
Reicht es den Code ganz ans ende anzufügen?

[reneeb]

Ja, das sollte reichen...

Hast Du den JavaScript-Cache mal gelöscht (var/httpd/htdocs/js/js-cache/) und den Browsercache auch?

[asegojv]

hmm...trotz chache löschen und browser cahce löschen klappt es nicht.
Allerdings habe ich ein andere Phänomen wenn ich den Code eintrage:
Wenn man im Ticketzoom steht, kann man die Tickethistorie, die Toolbar, die Menüleiste sowie Ticketaktionen nicht mehr anklicken.
Also irgendwas tut sich da schon...

[reneeb]

Dann zeig mal Deine komplette .js im aktuellen Zustand...

[asegojv]

Code: Select all

// --
// Core.Agent.TicketZoom.js - provides the special module functions for TicketZoom
// Copyright (C) 2001-2012 xxx, http://otrs.org/
// --
// $Id: Core.Agent.TicketZoom.js,v 1.40 2012/10/23 11:55:31 mn Exp $
// --
// This software comes with ABSOLUTELY NO WARRANTY. For details, see
// the enclosed file COPYING for license information (AGPL). If you
// did not receive this file, see http://www.gnu.org/licenses/agpl.txt.
// --

"use strict";

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

/**
 * @namespace
 * @exports TargetNS as Core.Agent.TicketZoom
 * @description
 *      This namespace contains the special module functions for TicketZoom.
 */
Core.Agent.TicketZoom = (function (TargetNS) {
    var CheckURLHashTimeout,
        InitialArticleID;

    /**
     * @function
     * @param {String} TicketID of ticket which get's shown
     * @return nothing
     *      Mark all articles as seen in frontend and backend.
     *      Article Filters will not be considered
     */
    TargetNS.MarkTicketAsSeen = function (TicketID) {
        TargetNS.TicketMarkAsSeenTimeout = window.setTimeout(function () {
            // Mark old row as readed
            $('#FixedTable .ArticleID').closest('tr').removeClass('UnreadArticles').find('span.UnreadArticles').remove();

            // Mark article as seen in backend
            var Data = {
                Action: 'AgentTicketZoom',
                Subaction: 'TicketMarkAsSeen',
                TicketID: TicketID
            };
            Core.AJAX.FunctionCall(
                Core.Config.Get('CGIHandle'),
                Data,
                function () {}
            );
        }, 3000);
    };

    /**
     * @function
     * @param {String} TicketID of ticket which get's shown
     * @param {String} ArticleID of article which get's shown
     * @return nothing
     *      Mark an article as seen in frontend and backend.
     */
    TargetNS.MarkAsSeen = function (TicketID, ArticleID) {
        TargetNS.MarkAsSeenTimeout = window.setTimeout(function () {
            // Mark old row as readed
            $('#FixedTable .ArticleID[value=' + ArticleID + ']').closest('tr').removeClass('UnreadArticles').find('span.UnreadArticles').remove();

            // Mark article as seen in backend
            var Data = {
                Action: 'AgentTicketZoom',
                Subaction: 'MarkAsSeen',
                TicketID: TicketID,
                ArticleID: ArticleID
            };
            Core.AJAX.FunctionCall(
                Core.Config.Get('CGIHandle'),
                Data,
                function () {}
            );
        }, 3000);
    };

    /**
     * @function
     * @param {jQueryObject} $Iframe The iframe which should be auto-heighted
     * @return nothing
     *      This function initializes the special module functions
     */
    TargetNS.IframeAutoHeight = function ($Iframe) {
        if (isJQueryObject($Iframe)) {
            var NewHeight = $Iframe.contents().height();
            if (!NewHeight || isNaN(NewHeight)) {
                NewHeight = Core.Config.Get('Ticket::Frontend::HTMLArticleHeightDefault');
            }
            else {
                if (NewHeight > Core.Config.Get('Ticket::Frontend::HTMLArticleHeightMax')) {
                    NewHeight = Core.Config.Get('Ticket::Frontend::HTMLArticleHeightMax');
                }
            }
            $Iframe.height(NewHeight + 'px');
        }
    };

    /**
     * @function
     * @private
     * @param {String} ArticleURL The URL which should be loaded via AJAX
     * @param {String} ArticleID The article number of the loaded article
     * @return nothing
     *      This function loads the given article via ajax
     */
    function LoadArticle(ArticleURL, ArticleID) {
        // Clear timeout for URL hash check, because hash is now changed manually
        window.clearTimeout(CheckURLHashTimeout);

        // Add loader to the widget
        $('#ArticleItems .WidgetBox').addClass('Loading');
        Core.AJAX.ContentUpdate($('#ArticleItems'), ArticleURL, function () {
            var TicketScrollerTop = 0;

            $('#ArticleItems a.AsPopup').bind('click', function (Event) {
                var Matches,
                    PopupType = 'TicketAction';

                Matches = $(this).attr('class').match(/PopupType_(\w+)/);
                if (Matches) {
                    PopupType = Matches[1];
                }
                Core.UI.Popup.OpenPopup($(this).attr('href'), PopupType);
                return false;
            });

            // Add event bindings to new widget
            Core.UI.InitWidgetActionToggle();

            // Add hash to the URL to provide direct URLs and history back/forward functionality
            // If new ArticleID is again the InitialArticleID than remove hash from URL
            if (ArticleID === InitialArticleID) {
                location.hash = '';
                TargetNS.ActiveURLHash = ArticleID;
            }
            else {
                location.hash = '#' + ArticleID;
                TargetNS.ActiveURLHash = ArticleID;
            }

            //Remove Loading class
            $('#ArticleItems .WidgetBox').removeClass('Loading');

            // Scroll to new active article
            TicketScrollerTop = parseInt($('#FixedTable tbody tr.Active').offset().top, 10) - parseInt($('#FixedTable tbody').offset().top, 10);
            $('div.Scroller').get(0).scrollTop = TicketScrollerTop;

            // Initiate URL hash check again
            TargetNS.CheckURLHash();

            // If session is over and login screen
            // is showed in article area
            Core.Agent.CheckSessionExpiredAndReload();

        });
    }

    /**
     * @function
     * @return nothing
     *      This function checks if the url hash (representing the current article)
     *      has changed and initiates an article load. A change can happen by clicking
     *      'back' in the browser, for example.
     */
    TargetNS.CheckURLHash = function () {
        var URLHash = location.hash.replace(/#/, ''),
            $ArticleElement;

        // if URLHash is empty, that means we are watching the initial article,
        // save this information in URLHash as if it would have been in the URL
        if (URLHash === '') {
            URLHash = InitialArticleID;
        }

        // if not defined yet
        if (typeof TargetNS.ActiveURLHash === 'undefined') {
            TargetNS.ActiveURLHash = InitialArticleID;
        }
        // if defined and saved value is different to latest value (= user has used history back or forward)
        else if (TargetNS.ActiveURLHash !== URLHash) {
            TargetNS.ActiveURLHash = URLHash;

            // if article ID is found in article list (= article id is valid)
            $ArticleElement = $('#FixedTable').find('input.ArticleID[value=' + TargetNS.ActiveURLHash + ']');
            if ($ArticleElement.length) {
                // Add active state to new row
                $($ArticleElement).closest('table').find('tr').removeClass('Active').end().end().closest('tr').addClass('Active');

                // Load content of new article
                LoadArticle($ArticleElement.closest('td').find('input.ArticleInfo').val(), TargetNS.ActiveURLHash);
            }
        }

        // start check again in 500ms
        window.clearTimeout(CheckURLHashTimeout);
        CheckURLHashTimeout = window.setTimeout(function () {
            TargetNS.CheckURLHash();
        }, 500);

    };

    /**
     * @function
     * @return nothing
     *      This function initializes the special module functions
     */
    TargetNS.Init = function (Options) {
        var $THead = $('#FixedTable thead'),
            $TBody = $('#FixedTable tbody'),
            ZoomExpand = false,
            URLHash,
            $ArticleElement,
            ResizeTimeoutScroller,
            ResizeTimeoutWindow;

        // Check, if ZoomExpand is active or not
        // Only active on tickets with less than 400 articles (see bug#8424)
        if ($('div.ArticleView a.OneArticle').length) {
            ZoomExpand = !$('div.ArticleView a.OneArticle').hasClass('Active');
        }

        Core.UI.Resizable.Init($('#ArticleTableBody'), Options.ArticleTableHeight, function (Event, UI, Height, Width) {
            // remember new height for next reload
            window.clearTimeout(ResizeTimeoutScroller);
            ResizeTimeoutScroller = window.setTimeout(function () {
                Core.Agent.PreferencesUpdate('UserTicketZoomArticleTableHeight', Height);
            }, 1000);
        });
        Core.UI.InitTableHead($THead, $TBody);

        $(window).bind('resize', function () {
            window.clearTimeout(ResizeTimeoutWindow);
            ResizeTimeoutWindow = window.setTimeout(function () {
                Core.UI.AdjustTableHead($THead, $TBody, 0);
            }, 500);
        });

        $('.TableSmall tbody td a.Attachment').bind('click', function (Event) {
            var Position, HTML, $HTMLObject;
            if ($(this).attr('rel') && $('#' + $(this).attr('rel')).length) {
                Position = $(this).offset();
                Core.UI.Dialog.ShowContentDialog($('#' + $(this).attr('rel'))[0].innerHTML, 'Attachments', Position.top, parseInt(Position.left, 10) + 25);
            }
            Event.preventDefault();
            Event.stopPropagation();
            return false;
        });

        // Table sorting
        Core.UI.Table.Sort.Init($('#FixedTable'), function () {
            $(this).find('tr')
                .removeClass('Even')
                .filter(':even')
                .addClass('Even')
                .end()
                .removeClass('Last')
                .filter(':last')
                .addClass('Last');
        });

        // load another article, if in "show one article" mode and article id is provided by location hash
        if (!ZoomExpand) {
            URLHash = location.hash.replace(/#/, '');

            // if URL hash is empty, set it initially to the active article for working browser history
            if (URLHash === '') {
                InitialArticleID = $('#FixedTable tr.Active input.ArticleID').val();
                //location.hash = '#' + $('#FixedTable tr.Active input.ArticleID').val();
            }
            else {
                // if article ID is found in article list (= article id is valid)
                $ArticleElement = $('#FixedTable').find('input.ArticleID[value=' + URLHash + ']');
                if ($ArticleElement.length) {

                    // Add active state to new row
                    $ArticleElement.closest('table').find('tr').removeClass('Active').end().end().closest('tr').addClass('Active');

                    // Load content of new article
                    LoadArticle($ArticleElement.closest('td').find('input.ArticleInfo').val(), URLHash);
                }
            }
        }

        // loading new articles
        $('#FixedTable tbody tr').bind('click', function (Event) {
            // Mode: show one article - load new article via ajax
            if (!ZoomExpand) {
                // Add active state to new row
                $(this).closest('table').find('tr').removeClass('Active').end().end().addClass('Active');

                // Mark old row as readed
                $(this).closest('tr').removeClass('UnreadArticles').find('span.UnreadArticles').remove();

                // Load content of new article
                LoadArticle($(this).find('input.ArticleInfo').val(), $(this).find('input.ArticleID').val());
            }

            // Mode: show all articles - jump to the selected article
            else {
                location.href = '#Article' + $(this).find('input.ArticleID').val();
            }

            return false;
        });

        // init control function to check the location hash, if the user used the history back or forward buttons
        if (!ZoomExpand) {
            TargetNS.CheckURLHash();
        }

        $('a.AsPopup').bind('click', function (Event) {
            var Matches,
                PopupType = 'TicketAction';

            Matches = $(this).attr('class').match(/PopupType_(\w+)/);
            if (Matches) {
                PopupType = Matches[1];
            }

            Core.UI.Popup.OpenPopup($(this).attr('href'), PopupType);
            return false;
        });

        // Scroll to active article
        if ( !ZoomExpand && $('#FixedTable tbody tr.Active').length ) {
            $('div.Scroller').get(0).scrollTop = parseInt($('#FixedTable tbody tr.Active').position().top, 10) - 30;
        }
    };
    return TargetNS;
}(Core.Agent.TicketZoom || {}));
$(document).ready( function() {
     $('label').each( function() {
         if ( $(this).text() != 'Kommentar:' ) {
             return;
         }
                                      
         var comment = $(this).next(); 
         comment.text( comment.attr('title') );

         if ( comment.text() != '' ) {
             comment.css('background-color', 'red' );
         }
      });
   });

[reneeb]

Hast Du Firefox? Wenn ja, kannst Du unter Extras -> Web-Entwickler die Fehlerkonsole öffnen und dann TicketZoom aufrufen? Das hilft mit Sicherheit auch bei der Fehlersuche...

[asegojv]

Ja, Firefox ist am Start.
Dort stehen ettliche Warnungen

[reneeb]

Auch Fehler im Zusammenhang mit *.js?

[asegojv]

jede Menger solcher einträge

Zeitstempel: 15.02.2013 12:03:22
Warnung: Fehler beim Verarbeiten des Wertes für 'background'. Deklaration ignoriert.
Quelldatei: http://192.168.2.209/otrs-web/skins/Age ... 2ce81f.css
Zeile: 35

Zeitstempel: 15.02.2013 12:03:22
Warnung: Unbekannte Eigenschaft '-moz-border-radius-bottomright'. Deklaration ignoriert.
Quelldatei: http://192.168.2.209/otrs-web/skins/Age ... 2ce81f.css
Zeile: 47

Zeitstempel: 15.02.2013 12:03:23
Warnung: Unbekannte Eigenschaft 'zoom'. Deklaration ignoriert.
Quelldatei: http://192.168.2.209/otrs-web/skins/Age ... ery-ui.css
Zeile: 395

Und zwei Error:
Zeitstempel: 15.02.2013 12:03:35
Fehler: ReferenceError: reference to undefined XML name *::*
Quelldatei: javascript:%20*.js
Zeile: 1

Zeitstempel: 15.02.2013 12:05:14
Fehler: NS_ERROR_ILLEGAL_VALUE: Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIWebNavigation.loadURI]
Quelldatei: chrome://global/content/viewSource.js
Zeile: 177

[asegojv]

Ahhh...
wenn ich ein bereits erstelltes Ticket zoome, dann ist der Kommentar rot.
Aber beim erstellen ist er noch nicht rot hinterlegt.

Schön wäre wenn es auch bei der Erstellung ersichtlich ist.

[reneeb]

Dann musst Du dort eingreifen, wo das Kundeninfo-Widget zusammengebaut wird. Da weiß ich jetzt aber nicht die Dateien...

[asegojv]

hmm...ich hab mir jetzt diverse Dateien angeguckt, aber ich kann es nicht finden.
Hat sonst noch jemand eine Idee?


PS: War trotzdem sehr lehrreich konnte durch das Suchen und Probieren viele andere Dinge lösen

[reneeb]

Kernel/Output/HTML/LayoutTicket.pm => sub AgentCustomerViewTable -> dort die Werte prüfen und dann Werte für das Template generieren
Kernel/Output/HTML/Standard/AgentCustomerViewTable.dtl -> das entsprechende Template

[asegojv]

Kernel/Output/HTML/LayoutTicket.pm => sub AgentCustomerViewTable -> dort die Werte prüfen und dann Werte für das Template generieren
Kernel/Output/HTML/Standard/AgentCustomerViewTable.dtl -> das entsprechende Template

Moin noch mal!
Habe jetzt mal versucht das nachzuvollziehen, bekomme es aber nicht hin.
Wäre super wenn mir noch mal jemand schreiben könnte, was ich wo einzutragen habe.

Danke!