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

Nachdem wir in meinem ersten Artikel das benutzerdefinierte Feld und die entsprechenden Icons in der PowerApp bereitgestellt und veröffentlicht haben, zeige ich Ihnen in diesem Artikel wie Sie den entsprechenden JScript-Code der Spalte einbinden, so das diese an den Namen des entsprechenden Status angehangen werden.

Hierzu gehen Sie wie folgt vor. Öffnen Sie erneut das Model-Driven-App Project in Ihrem Microsoft 365 Tenant. Klicken Sie hierzu in PowerAPPs auf der linken Seite die Option „Apps“ und öffnen Sie dann die App „Projekt“. Klicken Sie dann in der oberen rechten Ecke auf die Einstellungen (Zahnrad) und wählen Sie dann in dem sich öffnenden Kontextmenü die Option „Erweiterte Einstellungen“ aus. Wechseln Sie dann in die Systemanpassungen, wie in meinem ersten Artikel beschrieben. Suchen Sie unter den Entitäten „Projekt“; und führen Sie einen Doppelklick auf diese aus.

Klicken Sie in dem geöffneten Dateibaum die Option „Ansichten“. Wählen Sie jetzt auf der rechten Seite die Ansicht, in der die grafischen Indikatoren dargestellt werden sollen. In meinem Beispiel ist das die Ansicht „Alle Projekte“. Markieren Sie die Ansicht und wählen Sie dann im Spaltenkopf die Option „Bearbeiten“.

Klicken Sie jetzt auf die Spalte, in der die grafischen Indikatoren angehangen werden sollen. Sie können die korrekte Auswahl an dem grünen Rahmen um den markierten Spaltennamen erkennen.

Wählen Sie danach aus dem Menü auf der rechten Seite die Option „Eigenschaften ändern“.

Klicken Sie auf die Lupe, um eine neue Webressource für unseren JavaScript-Code anzulegen. Scrollen Sie in der Auswahl ganz nach unten und wählen Sie dann die Option „Weitere Datensätze nachschlagen“ aus!

Hinweis: Wir haben versucht die Webressource über den gleichen Weg anzulegen wie aus meinem ersten Artikel die Icons. Allerdings wird die Ressource dann bei der Suche hier nicht gefunden. Aus diesem Grund haben wir die Code-Ressource hier erstellt.

Klicken Sie im unteren Bereich auf den Button „Neu„!

Geben Sie einen Namen und einen Anzeigenamen für die neue Webressource ein. Bei Bedarf können Sie auch noch eine Beschreibung hinzufügen. Klicken Sie anschließend auf das Auswahlfeld „Typ“ und suchen Sie die Option „Skript (JScript)„. Klicken Sie dann auf den Button „Text-Editor„.

Passen Sie jetzt den folgenden Code an Ihre Umgebung an.

//Den Funktionsnamen benötigen wir später, um die Referenzierung zwischen dem Script und der Statusspalte zu erstellen.
function displayIconPMStatus(rowData, userLCID) {
var str = JSON.parse(rowData);
//Trage Sie hier den Spaltennamen ein, den Sie aus dem ersten Teil gemerkt haben.
var coldata = str.cr802_pmstatus;
var imgName = „“;
var tooltip = „“;
switch (coldata) {
//Trage hier die Optionsnamen ein
case „Plan„:
//Trage hier den Namen der oben angegelgten Icons an
imgName = „new_tb_icon_plan“;
//Trage hier den Text ein, der im Mausover angeziegt werden soll!
tooltip = „Projekt ist in der Planungsphase!“;
break;
case „Do“:
imgName = „new_tb_icon_run“;
tooltip = „Projekt ist in der Durchführungsphase!“;
break;
case „Hold“:
imgName = „new_tb_icon_hold“;
tooltip = „Projekt wurde gestoppt!“;
break;
case „Ende“:
imgName = „new_tb_icon_ende“;
tooltip = „Projekt wurde beendet!“;
break;
default:
imgName = „“;
tooltip = „“;
break;
}
var resultarray = [imgName, tooltip];
return resultarray;
}

Klicken Sie dann im unteren Bereich des Fensters auf „Ok„.

Veröffentlichen Sie jetzt die Einstellungen. Klicke hierzu auf „Veröffentlichen“!

Markieren Sie die dargestellt Webressource und klicke anschließend auf „Hinzufügen“.

Tragen Sie unter Funktionsnamen den oben aus dem Script verwendeten Funktionsnamen ein. Das ist in meinem Beispiel der Name: „displayIconPMStatus“.

Klicken Sie jetzt auf „Speichern und schließen“.

Jetzt brauchen Sie nur noch das App veröffentlichen. Klicken hierzu auf den Button „Alle Anpassungen veröffentlichen„.

Das war’s. Wechseln Sie in das „Projekt“ App und öffnen Sie die entsprechende Ansicht. Ihnen werden jetzt die Icons neben den entsprechenden Status angezeigt. Sollten Sie mit der Maus über das Icon scrollen, wird Ihnen auch der entsprechende Text angezeigt.