> For the complete documentation index, see [llms.txt](https://docs.flosum.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flosum.com/devops/devops-de/ubergang-zur-neuen-ui-ux/screenshots-der-neuen-benutzeroberflache.md).

# Screenshots der neuen Benutzeroberfläche

## ![](https://578823411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FG5ZbxX918xOHwbAwAJ4n%2FSummary2-Small-Icon.svg?alt=media\&token=da26a67f-ff7f-47b3-8669-06be960dc2d7) Übersicht

Dieser Artikel zeigt Screenshots der alten und neuen Cloud-DevOps-UIs für jeden Bereich des Seitenleistenmenüs, damit Sie sich schnell mit der neuen UI vertraut machen können. Außerdem enthält er zwei ausklappbare Abschnitte, die die neue UI für Folgendes eines Branchs behandeln:

* **Branch > Komponenten** Registerkarte: [#branch-components-tab](#branch-components-tab "mention")
* **Branch > Aktivitäten** Registerkarte: [#branch-activities-tab](#branch-activities-tab "mention")

Der Code Viewer enthält viele Verbesserungen der Benutzererfahrung, die in einem separaten Artikel ausführlich beschrieben werden; siehe den folgenden Link.

* [Verbesserter Code-Viewer](/devops/devops-de/ubergang-zur-neuen-ui-ux/verbesserter-code-viewer.md)

{% hint style="info" %}
Jeder Screenshot in diesem Vergleich verwendet dieselbe Fenstergröße, sodass Sie die neue und die alte UI auf Augenhöhe vergleichen können. Nebeneinander betrachtet nutzt die neue UI den Bildschirmplatz effizienter und zeigt mehr Informationen, ohne überladen zu wirken.
{% endhint %}

## Organisationen

Die **Organisationen** Die Seite bietet in der neuen wie auch in der alten UI eine Tabelle mit Salesforce-Organisationen, die mit Ihrem DevOps-Tenant verbunden sind, aber die neue UI verbessert das Tabellenlayout.

<figure><img src="https://578823411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FH1D0EY1TupYDH8xbDFjE%2FUiScreenshotComparison-S01-new.png?alt=media&amp;token=2fb799a1-7d98-47ed-b1dc-31e988e2d68a" alt=""><figcaption><p>Neue UI</p></figcaption></figure>

<figure><img src="https://578823411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FNcQHWB1zH6YvxHNQTfIT%2FUiScreenshotComparison-S01-old.png?alt=media&amp;token=e17db6ad-e677-4caa-a5dd-e299fa798838" alt=""><figcaption><p>Alte UI</p></figcaption></figure>

## Dashboard

Die **Dashboard** Die Seite weist zwischen der neuen und der alten UI nur geringfügige Stiländerungen auf.

<figure><img src="https://578823411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FhGgXg3cxPw8BNuJWZr5N%2FUiScreenshotComparison-S02-new.png?alt=media&amp;token=5ed2db25-2a27-416e-8013-bd33cdabf91d" alt=""><figcaption><p>Neue UI</p></figcaption></figure>

<figure><img src="https://578823411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FFYok6Ch8WdwI9Ba3imfT%2FUiScreenshotComparison-S02-old.png?alt=media&amp;token=7a11ef31-dd2f-4f36-a91f-0ba9e46c5afc" alt=""><figcaption><p>Alte UI</p></figcaption></figure>

## Code → Branches

Die **Code** Seite heißt jetzt **Branches**, ein Name, der den Zweck des Abschnitts besser widerspiegelt. In der neuen UI zeigt die Branches-Tabelle mehr Informationen in einem verbesserten Layout und mit klareren Spaltenbezeichnungen, sodass Sie die wichtigsten Details zu jedem Branch auf einen Blick sehen können, ohne ihn zu öffnen.

<figure><img src="https://578823411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FqJzPu61Zq5Y62itXJgEf%2FUiScreenshotComparison-S03-new.png?alt=media&amp;token=33252e82-f1ac-45f3-8b39-aa88ff127c2f" alt=""><figcaption><p>Neue UI</p></figcaption></figure>

<figure><img src="https://578823411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FNvU5BWWeZg66JBfkklpS%2FUiScreenshotComparison-S03-old.png?alt=media&amp;token=9096f8e3-30c9-4c47-9d63-20e2351890f7" alt=""><figcaption><p>Alte UI</p></figcaption></figure>

<details>

<summary>Registerkarte Branch-Komponenten</summary>

Die Registerkarte Branch-Komponenten wurde neu gestaltet, um mehr Informationen auf einen Blick anzuzeigen und häufig verwendete Schaltflächen an logischeren Stellen zu platzieren. Die **Komponenten** Registerkarte ist jetzt in zwei auswählbare Tabellenansichten unterteilt: **Komponenten** und **Destruktive Änderungen**. Ein neuer **Übersicht** Bereich auf der rechten Seite der Registerkarte bietet wichtige Branch-Informationen und Schaltflächen für zugehörige Aktionen.

Die folgenden Screenshots der neuen UI heben Elemente hervor, die auf der **Branches > Branch > Komponenten** Registerkarte verschoben wurden. Jedes Element ist nummeriert, und die folgende Liste erklärt, wofür jede Zahl steht.

<figure><img src="https://578823411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FSw5UwuGkvosjNCIj0pG9%2FUiScreenshotComparison-S03-2-new.png?alt=media&amp;token=a4b24b1c-c4a3-47df-9ac3-3452403554a7" alt=""><figcaption></figcaption></figure>

<figure><img src="https://578823411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FED7QuNBwNpDBPChdTEDt%2FUiScreenshotComparison-S03-3-new.png?alt=media&amp;token=cf00be23-90cf-4611-b2e2-8bb72a29387f" alt=""><figcaption></figcaption></figure>

1. **Komponenten**: Der Branch **Komponenten** Tabelle wird durch Auswahl der **Komponenten** Tabellenansicht angezeigt.
2. **+ Komponente hinzufügen**: Diese Schaltfläche wurde in die **Übersicht** Abschnitt.
3. **+ Pull Request erstellen**: Diese Schaltfläche wurde aus dem **Drei-Punkte** Dropdown-Menü in die **Übersicht** Abschnitt.
4. **Destruktive Änderungen**: Der Branch **Destruktive Änderungen** Tabelle wird durch Auswahl der **Destruktive Änderungen** Tabellenansicht angezeigt.
5. **+ Vorab-Änderung hinzufügen**: Diese Schaltfläche ist nur sichtbar, wenn die **Destruktive Änderungen** Tabellenansicht ausgewählt ist.
6. **+ Nachträgliche Änderung hinzufügen**: Diese Schaltfläche ist nur sichtbar, wenn die **Destruktive Änderungen** Tabellenansicht ausgewählt ist.

</details>

<details>

<summary>Registerkarte Branch-Aktivitäten</summary>

Die Registerkarte Branch-Aktivitäten wurde neu gestaltet, um die Organisation von Branch-Aktivitätsinformationen zu vereinfachen. Die **Aktivitäten** Registerkarte ist jetzt in drei auswählbare Ansichten unterteilt: **Branch**, **Pipeline**, und **Zustandsdiagramm**. Jede Ansicht ist in den folgenden Screenshots zu sehen und wird in der dazugehörigen Liste erläutert.

Die folgenden Screenshots der neuen UI heben verschiedene Ansichten auf der **Branches > Branch > Aktivitäten** Registerkarte hervor. Jede Ansicht ist nummeriert, und die folgende Liste erklärt, wofür jede Zahl steht.

<figure><img src="https://578823411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FElMzBiel8BRiqbc8lN1Q%2FUiScreenshotComparison-S03-4-new.png?alt=media&amp;token=72773f27-f791-47b6-815b-c5e894faf4dc" alt=""><figcaption></figcaption></figure>

<figure><img src="https://578823411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FW0wxRsvmx0e939NqJbP6%2FUiScreenshotComparison-S03-5-new.png?alt=media&amp;token=1795a897-c307-4576-8bfb-a7cbd74c3751" alt=""><figcaption></figcaption></figure>

<figure><img src="https://578823411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FLAsxx9qxCYadIjwQutB2%2FUiScreenshotComparison-S03-6-new.png?alt=media&amp;token=7ff38e99-b60a-4661-b649-b730d091d4b8" alt=""><figcaption></figcaption></figure>

1. Die **Branch** Ansicht zeigt eine Zeitleiste der Job-Aktivitäten des Branchs und war zuvor die **Jobs** Tabelle in der alten UI.
2. Die **Pipeline** Ansicht zeigt eine Zeitleiste der Pipeline-Job-Aktivitäten des Branchs und war zuvor die **Pipelines** Tabelle in der alten UI.
3. Die **Zustandsdiagramm** Ansicht zeigt die Quellen, die in den Branch einfließen, und die Ziele, die ihn verlassen. Sie war zuvor die **Zustandsdiagramm** Registerkarte in der alten UI.

</details>

## Pull Requests

Die **Pull Requests** Die Seite verfügt über eine aktualisierte Tabelle und vereinfachte Statuszustände. Die Tabelle zeigt mehr Details zu jedem Pull Request und hält jetzt **Geschlossen** und **Zusammengeführt** Pull Requests sichtbar. Die Status wurden auf nur drei reduziert.

**Neue Status**

* **Offen**: Deckt alle Status der alten UI (**Erstellt**, **Prüfung angefordert**, **Änderungen angefordert**, **Genehmigt**) ab und kennzeichnet einen Pull Request, der Maßnahmen erfordert.
* **Zusammengeführt**: Zuvor in der Tabelle verborgen, bedeutet dieser Status, dass ein Pull Request abgeschlossen wurde, indem der Quell-Branch in den Ziel-Branch zusammengeführt wurde.
* **Geschlossen**: Zuvor in der Tabelle verborgen, bedeutet dieser Status, dass ein Pull Request ohne Zusammenführung geschlossen wurde, wodurch der Quell-Branch und der Ziel-Branch unverändert blieben.

<figure><img src="https://578823411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FBwsLGq2bLKa8TxC13rWQ%2FUiScreenshotComparison-S04-new.png?alt=media&amp;token=e8b39529-7a12-4b70-b848-f4bedf730aa2" alt=""><figcaption><p>Neue UI</p></figcaption></figure>

<figure><img src="https://578823411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2F27cqT3la6CRlWwF37no6%2FUiScreenshotComparison-S04-old.png?alt=media&amp;token=655d8454-71d3-42dc-a6e5-e020193ce1a0" alt=""><figcaption><p>Alte UI</p></figcaption></figure>

## Pipelines

In der neuen wie auch in der alten UI bietet die **Pipelines** Seite eine Tabelle der verfügbaren Pipelines, aber die neue UI zeigt mehr Details zu jeder einzelnen.

<figure><img src="https://578823411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FblYGxZ4kHnVOdjTMlFdq%2FUiScreenshotComparison-S05-new.png?alt=media&amp;token=8cc048ad-ead1-4c34-a0dd-74f32586db08" alt=""><figcaption><p>Neue UI</p></figcaption></figure>

<figure><img src="https://578823411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2F1hbsizY2osTxq5Io1o9M%2FUiScreenshotComparison-S05-old.png?alt=media&amp;token=716c1e3d-ab93-4f39-96c1-88a04aaf7cef" alt=""><figcaption><p>Alte UI</p></figcaption></figure>

## Einstellungen

In der neuen UI wurden die **Einstellungen** Optionen von einer einzelnen Seite in einzelne Menüeinträge verschoben. Sie können jetzt jede Einstellungsseite direkt über das Seitenleistenmenü öffnen. Das Seitenleistenmenü enthält jetzt die folgenden Einstellungen:

* Git-Integration
* KI-Einstellungen
* Integration von User Stories
* Umgebungsvariablen
* Pull-Request-Einstellungen

{% tabs %}
{% tab title="Git-Integration" %}

<figure><img src="https://578823411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FNqJqOV9yjS5P47qKBP4P%2FUiScreenshotComparison-S06-new-1.png?alt=media&amp;token=e19c6309-7a8f-4f64-a3da-8f43be6a9d8f" alt=""><figcaption><p>Neue UI</p></figcaption></figure>
{% endtab %}

{% tab title="KI-Einstellungen" %}

<figure><img src="https://578823411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FJf1p3LX5lQgCDjCeko4H%2FUiScreenshotComparison-S06-new-2.png?alt=media&amp;token=760fb12d-d12e-4168-a46f-01750725787e" alt=""><figcaption><p>Neue UI</p></figcaption></figure>
{% endtab %}

{% tab title="Integration von User Stories" %}

<figure><img src="https://578823411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2F0TqHhCSm6hsxYrT6H8HP%2FUiScreenshotComparison-S06-new-3.png?alt=media&amp;token=40713153-a73b-4176-bb4f-3c81cdb5ec3d" alt=""><figcaption><p>Neue UI</p></figcaption></figure>
{% endtab %}

{% tab title="Umgebungsvariablen" %}

<figure><img src="https://578823411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FPWOeyxGqF2fAOmv6ecxE%2FUiScreenshotComparison-S06-new-4.png?alt=media&amp;token=c50d3874-1ec3-4f24-9268-8ab3b7eae994" alt=""><figcaption><p>Neue UI</p></figcaption></figure>
{% endtab %}

{% tab title="Pull-Request-Einstellungen" %}

<figure><img src="https://578823411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FFnj7cJ6Q3IXJekWX9aOE%2FUiScreenshotComparison-S06-new-5.png?alt=media&amp;token=5fd01ffc-ab11-4600-97ed-b58c8f679be8" alt=""><figcaption><p>Neue UI</p></figcaption></figure>
{% endtab %}
{% endtabs %}

<figure><img src="https://578823411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRpUu5iMlzMFAudyBvMOl%2Fuploads%2FYevdRWpx3zhxO3tlDCno%2FUiScreenshotComparison-S06-old.png?alt=media&amp;token=24327c90-99cf-46ef-900a-b382b824199c" alt=""><figcaption><p>Alte UI</p></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.flosum.com/devops/devops-de/ubergang-zur-neuen-ui-ux/screenshots-der-neuen-benutzeroberflache.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.