Project for the Web – Teil 1, grafische Indikatoren für den Projektstatus erstellen

Sollten Sie sich für Project für das Web interessieren, sind Sie sicherlich auch schon auf die schönen Screenshots gestoßen, die Ihnen innerhalb des Project Model-Driven-App grafische Indikatoren zeigen. Hierzu habe ich einige Anfragen erhalten und möchte Ihnen in dieser Blog-Serie zeigen, wie Sie diese grafischen Indikatoren für einen Projektstatus erstellen können.

Hinweis: In der Vorbereitung zu diesem Artikel habe ich in der Entität „Project“ ein neues Feld „PM-Status“ erstellt und die Statusbezeichnungen Plan, Do, Hold und Close hinzugefügt.

Ich möchte gerne, dass ich meinen Projekten einen aktuellen Status zuweisen kann. Je nach Status soll dann ein grafischer Indikator angehangen werden. Als Status soll in der Planungsphase der Status „Plan“, in der Steuerungsphase der Status „Run“, bei einer Unterbrechung der Status „Hold“ und am Ende des Projektes der Status „Close“ verwendet werden. Zu den entsprechenden Status soll dann der grafische Indikator angezeigt werden.

Hierzu möchte ich eine Art Ampelsystem einführen. Aus diesem Grund habe ich mich zu der folgenden Farbenwahl entschieden. Sollte sich das Projekt in der Planungsphase befinden, soll ein blaues, in der Durchführungsphase ein grünes, in der gestoppten Phase ein rotes und nach Abschluss des Projektes ein graues Icon angezeigt werden. Ebenfalls möchte ich, sollte der User mit der Maus über das Icon scrollen, soll ihm der entsprechende Status als Text („Mouse-Over“) angezeigt werden. Die Ansicht sollte wie folgt aussehen.

Project Online

Machen wir einen kurzen Blick zurück in die alte Project Online Welt. Hier war es relativ einfach einen grafischen Indikator zur implementieren. Hierzu ging der Administrator einfach auf die Option „PWA-Einstellungen“, legte dann eine Nachschlagetabelle mit den entsprechenden Status an. Danach legte er ein benutzerdefiniertes Enterprise-Feld an und verknüpfte anschließend die Nachschlagetabelle mit dem entsprechenden benutzerdefinierten Feld. Damit konnten wir unseren entsprechenden Status dem Projekt zuweisen. Da wir in Project Online nicht den Text und einen Indikator zusammen in einer Spalte erfassen konnten, benötigten wir immer zwei benutzerdefinierte Felder. In dem zweiten benutzerdefinierten Feld konnte dann anhand einer simplen Abfrage der Status des ersten Feldes ausgewertet und demnach der grafische Indikator angezeigt werden. Abschließend wurden dann beide benutzerdefinierten Felder der gewünschten Ansicht hinzugefügt.

Stellt sich die Frage, können wir das auch in Project für das Web? Anders wie bei Projekt Online wird der Indikator aber direkt an den Status angehangen. Leider ist die Konfiguration hierzu nicht so einfach wie bei Project Online, sondern Sie benötigen einen kleinen JScript-Code. Diesen kann man relativ einfach anpassen, wie mich unser Entwickler überzeugt hat.

An dieser Stelle möchte ich mich herzlich bei unserem Entwickler „Irakli Abetschkhrischwili“ bedanken. Er hat mir sehr viel Zeit mit diesem Artikel erspart, da er mir den Code für das hier beschriebene Szenario erstellt hat.

Grafische Indikatoren einbinden

Im ersten Schritt werden wir die grafischen Indikatoren hinterlegen. Erstellen Sie hierzu die gewünschten Grafiken als PNG-, GIF oder JPG-Datei in einer Größe von 16px x 16px. Nun benötigen Sie den Namen der Spalte, an der die Indikatoren angehangen werden sollen. In meinem Beispiel heißt die Spalte „cr802_pmstatus“.

Wechseln Sie jetzt in die allgemeinen Optionen der App. Klicken Sie hierzu in PowerApp in dem linken Menü auf die Option „Apps“ und öffne dann die App „Projekt“.

Klicken Sie jetzt in der oberen rechten Ecke auf das Zahnrad und wählen Sie im Kontextmenü die Option „Erweiterte-Einstellungen“.

Hinweis: Das öffnen der App, kann etwas dauern.

Öffnen Sie jetzt das Menü unter „Einstellungen“. Klicken Sie hierzu auf den Pfeil nach unten, hinter dem Menüpunkt „Einstellungen“ und wählen Sie aus dem Kontextmenü die Option „Anpassungen“.

Klicken Sie dann auf die Option „System anpassen“.

Hinweis: Die nächsten hier beschriebenen Anweisungen sind wiederkehrend und müssen für jedes Icon wiederholt werden.

Klicken Sie auf der linken Seite auf die Option „Webressourcen“. Klicken Sie dann im oberen Bereich auf die Option „Neu“.

Geben Sie einen aussagekräftigen Namen ein. In meinem Beispiel „tb_icon_plan“. Tragen Sie dann den gewünschten Anzeigenamen ein. In meinem Beispiel habe ich den Namen übernommen. Wählen Sie dann als Dateityp den entsprechenden Dateityp ihrer Grafik aus, den Sie verwendet haben. Ich nutze bei meinen Icons das Dateiformat „png“. Sollten Sie die Icons auch mobil zur Verfügung stellen wollen, so wählen Sie diese Option im unteren Bereich ebenfalls aus. Klicken Sie im oberen Bereich auf den Button „Speichern“. Klicken Sie oben rechts auf das Untermenü und wählen Sie dann aus dem sich öffnenden Kontextmenü die Option „Alle Anpassungen veröffentlichen“ aus.

Führen Sie jetzt diesen Schritt für den Status „DO, Hold, Ende“ ebenfalls aus.

tb_icon_ende = black

tb_icon_run = green

tb_icon_hold = red

tb_icon_plan = blue

Ihre Ansicht sollte ähnlich wie meine aussehen.

Wichtig: Merken Sie sich hierbei den Namen und nicht den Anzeigenamen für den weiteren Blog-Artikel.

In meinem nächsten Beitrag werden wir das JScript erstellen und die Webressourcen einbinden.