Erstellen Sie Ihr erstes Mashup

Online bearbeiten

Um ein neues Mashup zu entwickeln, müssen Sie:

  1. Öffnen Sie als Administrator die Seite „Targetprocess-Einstellungen > Mashups “.
  2. Klicken Sie auf die Schaltfläche „Neues Mashup hinzufügen”.
  3. Platzhalter auswählen und eingeben – eine Stelle in der Targetprocess-Benutzeroberfläche, an der Ihr Skript eingefügt und gerendert wird
  4. Quellcode erstellen – der ausführbare Teil Ihres Mashups
  5. Speichern Sie das Mashup
  6. Aktualisieren Sie die Seite in Ihrem Webbrowser mit Strg+R / Cmd+R.

Wenn ein Mashup gespeichert wird, wird es für alle Benutzer in Ihrem Targetprocess-Konto aktiviert. Wenn Benutzer zum Zeitpunkt des Speicherns Targetprocess in ihrem Webbrowser geöffnet haben, müssen sie die Registerkarte manuell aktualisieren, damit die letzten Änderungen übernommen werden können.

1. Platzhalter auswählen

Jede Seite und Ansicht in Targetprocess verfügt über einen Bereich, in den Sie Ihr benutzerdefiniertes Mashup einfügen können. Eines der leeren Elemente mit unterschiedlichen IDs und Klassen _mashupPlaceholder muss verwendet werden. Mehrere Mashups können an denselben freigegebenen Platzhalter angehängt werden.

div-Platzhalter

Ein Mehrzweck-Platzhalter namens „footerplaceholder“ ist auf allen Seiten und in allen Ansichten vorhanden. Verwenden Sie es, wann immer es benötigt wird.

2. Quellcode verfassen

Im ausführbaren Code können Sie sich an die Struktur einer Seite (DOM) anhängen und die vorhandene Benutzeroberfläche ändern. Erstellen wir beispielsweise ein Mashup, das einen benutzerdefinierten Block „Custom Block” zwischen „Info” und „Lead Cycle Time” in den Detailansichten für alle Entitäten einfügt.

Block einfügen

Zunächst erstellen wir ein Element für den Block mit Klassen und Stilen, die bereits von vorhandenen Elementen verwendet werden. Zu diesem Zweck können wir das DevTools Chrome-Elements-Fenster verwenden. Dieser Beispielcode erstellt das Element:

var newBlockTitle = 'Custom Block';
var newBlockContent = 'Custom Content';
        
var newBlockContainer = '<div class="tau-container ui-collapsible">' +
'<div class="ui-collapsible-header expanded"><div class="ui-children-container"><div class="ui-label-container"><span class="ui-label">' +
newBlockTitle +
'</span></div></div></div>' +
'<div class="tau-container"><div class="ui-customfield"><table><tbody><tr><td class="ui-customfield__label">' +
newBlockContent +
'</td></tr></tbody></table></div></div>' +
'</div>';
benutzerdefinierter Block-Look Der nächste Teil des Codes überprüft die DOM-Struktur der geladenen Ansicht und versucht, eine geeignete Stelle zu finden, an der der neue Block eingefügt werden soll. Zu diesem Zweck verwendet es jQuery's Baumdurchquerungsfunktionen. Wir beenden den Ausführungsfluss, wenn die Seite nicht den erforderlichen Platz enthält. Darüber hinaus beschreiben wir, woher

$pageElement

Ressource mit allen Elementen der Webseite wird bereitgestellt.
var $insertAfterBlockSpan = $pageElement.find('.ui-label:contains("Info")');
var $insertAfterBlockContainer = $insertAfterBlockSpan.closest('.tau-container.ui-collapsible');
if ($insertAfterBlockContainer.length) {
    // do something if proper place is found
}
Wenn die richtige Stelle gefunden wurde, wird unser neuer benutzerdefinierter Block mithilfe von jQuery:
$insertAfterBlockContainer.after(newBlockContainer);
Das Mashup ist fast fertig. Jetzt müssen wir es in eine Abonnementfunktion einbinden. Es wird aktiviert, wenn eine Seite mit einer Detailansicht einer Entität vom Webbrowser gerendert wird:
tau.mashups
    .addDependency('tp/general/view')
    .addMashup(function(view) {
        view.onRender(function($pageElement) {
            // insert our custom code here
        });
    });
Wir sind nun bereit, alle Beispielblöcke zu einer einzigen Code-Datei zusammenzufügen.
tau.mashups
    .addDependency('tp/general/view')
    .addMashup(function(view) {
        view.onRender(function($pageElement) {
            var newBlockTitle = 'Custom Block';
            var newBlockContent = 'Custom Content';

            var newBlockContainer = '<div class="tau-container ui-collapsible">' +
                '<div class="ui-collapsible-header expanded"><div class="ui-children-container"><div class="ui-label-container"><span class="ui-label">' +
                newBlockTitle +
                '</span></div></div></div>' +
                '<div class="tau-container"><div class="ui-customfield"><table><tbody><tr><td class="ui-customfield__label">' +
                newBlockContent +
                '</td></tr></tbody> </table></div></div>' +
                '</div>';

            var $insertAfterBlockSpan = $pageElement.find('.ui-label:contains("Info")');
            var $insertAfterBlockContainer = $insertAfterBlockSpan.closest('.tau-container.ui-collapsible');
            if ($insertAfterBlockContainer.length) {
                $insertAfterBlockContainer.after(newBlockContainer);
            }
        });
    });

3. Mashup speichern

Installieren wir das Mashup in Ihrem Targetprocess-Konto.
  1. Melden Sie sich als Administrator bei Ihrem Konto an
  2. Öffnen Sie den Mashup-Manager unter „Einstellungen“ -> „Systemeinstellungen“ -> „Mashups“
  3. Klicken Sie auf die Schaltfläche „Neues Mashup hinzufügen“.
  4. Geben Sie CustomBlockAppender unter „Name“ ein
  5. Geben Sie „footerplaceholder“ unter „Platzhalter“ ein
  6. Kopieren Sie den gesamten Quellcode-Block und fügen Sie ihn unter „Code“ ein
  7. Klicken Sie auf die Schaltfläche „Mashup speichern“.
  8. Eine grüne Meldung „Mashup wurde erfolgreich gespeichert“ sollte Ihre Speicheraktion bestätigen.
mashup-installiertNeu-Mashup-hinzufügen-und-speichern Aus dieser Liste können Sie die Einstellungen Ihres installierten Mashups öffnen und bei Bedarf dessen Quellcode ändern.

4. Ergebnis überprüfen

Laden wir eine detaillierte Seite für eine User Story im Webbrowser neu. Unser Mashup funktioniert in Detailansichten für alle Entitäten und ist für alle Benutzer sichtbar. Wir sind fertig! Mashup