Gantt Chart

Ein umfassender Leitfaden zum Erstellen eines Gantt Charts in Power Apps

Ein Gantt Chart ist ein leistungsfähiges Werkzeug zur Projektplanung. Es bietet eine visuelle Darstellung des Zeitplans und hilft, den Projektstatus zu kommunizieren und Engpässe frühzeitig zu identifizieren. Ich zeige dir Schritt für Schritt, wie du ein Gantt Chart als Canvas App in Power Apps erstellen kannst. 

Schritt 1: App erstellen und designen

Starte damit, deine App zu erstellen und zu designen. Füge am besten für jeden Bereich einen Container ein. Dadurch schaffst du einerseits Struktur und andererseits gibt es dir zusätzliche Darstellungsmöglichkeiten. Mithilfe von Containern kannst du deine App auch komplett Responsive gestalten (Wie du deine App Responsive gestaltest zeige ich hier).

Schritt 2: Jahresübersicht erstellen

Um eine gute Darstellung deiner Projekte zu gewährleisten, füge nun eine Jahresübersicht ein. Erstelle dazu eine Headerzeile, in der die Monate dargestellt werden. Nutze dazu am besten einen leeren horizontalen Katalog, den du mithilfe der Items Eigenschaft befüllst. Du kannst einen zusätzlichen leeren horizontalen Katalog verwenden, um die Hintergrundfarbe jedes 2. Monats zu verändern. Das erhöht die Übersichtlichkeit deiner App zusätzlich.

Schritt 3: SharePoint Liste anlegen und verbinden

Als Datenquelle nutze ich in meinem Beispiel eine SharePoint Liste. Wichtig sind vor allem Spalten für die Projektbeschreibung sowie Start- und Enddatum. Ebenfalls relevant sind der Status und die verantwortliche Person. Nachdem du deine Liste erstellt hast, kannst du diese direkt mit deiner App verbinden und darauf zugreifen.

Schritt 4: Gantt Chart erstellen

Jetzt kannst du in deiner App einen vertikalen Katalog einfügen, den du mit deiner Datenquelle verbindest. Um die Projekte anzuzeigen, nutze ich einen Button, der entsprechend des Startdatums positioniert wird. Anhand des Startdatums soll der Katalog zusätzlich sortiert werden. Die Breite des Buttons lege ich mithilfe der Differenz zwischen Start- und Enddatum fest. Anhand des Status kannst du die Farbe des Buttons festlegen, um die Übersichtlichkeit weiter zu erhöhen.

Button
X = DateDiff(Date(Year(Now());1;1);ThisItem.Startdatum) / 365 * Parent.Width
Width = DateDiff(ThisItem.Startdatum;ThisItem.Enddatum) / 365 * Parent.Width
Fill = Switch(ThisItem.Status.Value;"Abgeschlossen";RGBA(174;228;179;1);
"In Arbeit";RGBA(255;249;183;1);"Geplant";RGBA(135;186;240;1))

gal_Gantt
Items = Sort('Gantt Chart';Startdatum)

Schritt 5: Bearbeitungsformular erstellen

Ein Bearbeitungsformular hilft dir dabei, die Verwaltung der Projekte zu vereinfachen. Durch Icons kannst du BenutzerInnen Projekte hinzufügen, bearbeiten und löschen lassen. Außerdem kannst du mithilfe des Bearbeitungsformulars Inhalte des ausgewählten Datensatzes anzeigen lassen.

Schritt 6: Projekte Filtern

Du kannst zusätzlich Filtermöglichkeiten hinzufügen. Dadurch gewinnt die App maßgeblich an Benutzerfreundlichkeit. In diesem Beispiel habe ich die Filtermöglichkeit nach der verantwortlichen Person sowie anhand des Status integriert.

gal_Gantt
Items = If(
    dd_Verantwortliche.Selected.Value="" And dd_Status.Selected.Value="";
    Sort('Gantt Chart';Startdatum);
    dd_Verantwortliche.Selected.Value<>"" And dd_Status.Selected.Value<>"";
    Filter(Sort('Gantt Chart';Startdatum);Verantwortliche.DisplayName=dd_Verantwortliche.Selected.Value And Status.Value=dd_Status.Selected.Value);
    dd_Verantwortliche.Selected.Value<>"" And dd_Status.Selected.Value="";
    Filter(Sort('Gantt Chart';Startdatum);Verantwortliche.DisplayName=dd_Verantwortliche.Selected.Value);
    dd_Verantwortliche.Selected.Value="" And dd_Status.Selected.Value<>"";
    Filter(Sort('Gantt Chart';Startdatum);Status.Value=dd_Status.Selected.Value)
)

Ich hoffe, diese Anleitung hilft dir dabei, deine Gantt App zu erstellen und diese  benutzerfreundlicher zu gestalten.

Lade dir hier gerne die kostenlose Vorlage herunter.

Hier gehts zum Detailvideo: