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.

Project-Entität

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“.

weitereaktionen

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.

SelectRow

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

ChangeConfig

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!

lupe

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„!

ButtonNeu

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„.

texteditor

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„.

 

Code

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

 

published

 

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

 

webressource_select

 

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

 

referenzierung

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

 

Save_and_published

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

Save_all_and_publsihed

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.

example

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.