# Simplifier – HowTo: Wie realisiere ich eine SplitApp?

Quelle: https://mission-mobile.de/app-entwicklung/splitapp-mit-simplifier/
Stand: 2026-07-27

Die App-Entwicklung mit [Simplifer](https://mission-mobile.de/knowhow/simplifier/) ist einfach? Die Umsetzung einer SplitApp kann eine Herausforderung darstellen. In diesem Howto zeigen wir Ihnen, wie Sie am besten vorgehen.

## **1. Ich brauche nur eine Master- und eine Detailseite!**

Wenn dies der Fall ist, reicht es aus nur einen Screen mit einer Master- und Detailseite gemeinsam anzulegen.

Benutzen Sie dazu das Widget *SplitApp* und fügen die Widgets *semantic_MasterPage* und *semantic_DetailPage* in die entsprechende Aggregation hinzu. Schon ist ihre SplitApp aufgebaut und Sie können ihrer Master- und Detailseite anschließend die benötigten Widgets hinzufügen.

Zum Aufbau der SplitApp ist hier somit nur der UI Designer notwendig.

## **2. Ich brauche mehrere Master- und Detailseiten!**

Oft reicht eine Master- und Detailseite nicht aus und man möchte zwischen verschiedenen Master- oder Detailseiten hin und her navigieren können. Hier gibt es nun zwei Varianten, die ich Ihnen vorstellen, um dies zu realisieren.

### **[![](https://mission-mobile.de/files/2019/07/Screen2.jpg)](https://mission-mobile.de/files/2019/07/Screen2.jpg)**

### **Variante 1: Ich möchte alle Seiten in einem Screen haben.**

Erweitern Sie die *SplitApp* je nach Belieben mit weiteren *semantic_MasterPage* und *semantic_DetailPage* Widgets. Achten Sie darauf, diese in die entsprechende Aggregation einzufügen. (Es wäre auch möglich die Widgets gar nicht in das Widget *SplitApp* einzuordnen, aber der übersichtshalber ist dies zu empfehlen!)

Die initiale Master- bzw. Detailseite richtet sich nach der Reihenfolge der Seiten in der *SplitApp* (hier die Widgets mit der ID *Hauptscreen_MasterPage1* und *Hauptscreen_DetailPage1*).

Wie navigieren Sie nun zwischen den verschiedenen Master- & Detailseiten?

Dazu brauchen Sie den Process Designer. In einer neuen Story wählen Sie zunächst den Auslöser bspw. einen Button-Druck, um zur nächsten Seite zu navigieren. Die Navigation selbst muss gecodet werden und sieht folgendermaßen aus.

[![](https://mission-mobile.de/files/2019/07/Screen3.jpg)](https://mission-mobile.de/files/2019/07/Screen3.jpg)

Sie fügen Ihrer SplitApp (*oSplit*) eine neue Masterseite (*oMaster*) hinzu (Zeile 1-3) und navigieren anschließend dahin (Zeile 4).

### **Variante 2: Ich möchte jede Seite auf einem eigenen Screen darstellen.**

Der übersichtshalber empfehle ich jede Master- und Detailseite in einen eigenen Screen auszulagern, auch die initiale Master- und Detailseite! Das heißt alle Seiten sind eigene Screens und können entsprechend als Master-/Detailseite aufgerufen werden. Im Hauptscreen befindet sich dann nur noch die *SplitApp* selbst, an die die Master- und Detailseiten angehängt werden.

[![](https://mission-mobile.de/files/2019/07/Screen4.jpg)](https://mission-mobile.de/files/2019/07/Screen4.jpg)

Die Navigation erfolgt genauso wie bei Variante 1 durch Coding. Achten Sie darauf, dass der richtige Pfad bzw. die richtige Widget-ID angegeben wird! Die Master- bzw. Detailscreens besitzen dann das *semantic_MasterPage* bzw. *semantic_DetailPage* Widget.

## Fazit

Die 2. Variante erscheint aufwändiger, ist jedoch für die weitere Benutzung praktikabler. Abgesehen davon, dass es übersichtlicher ist, da eine klare Trennung zwischen den Seiten herrscht, bietet die Auslagerung in eigene Screens eine höhere Wartbarkeit. Master- und Detailseiten können zudem komplexer gestaltet werden ohne dabei den Überblick zu verlieren, wie es bei einem Screen gegeben wäre.

Sollte jedoch von vornherein klar sein, dass nur eine geringe Anzahl an Master- oder Detailseiten (1-2 Seiten) benötigt wird, bietet sich natürlich die 1. Variante an.

Probieren Sie es doch direkt aus: [Simplifier](https://www.simplifier.io/plattform-kennenlernen/freemium/)

Haben Sie noch Fragen? Dann kontaktieren Sie uns direkt oder schreiben Sie einen Kommentar. Weitere Blogartikel zu Simplifer finden Sie auf [mission-mobil.de.](https://mission-mobile.de)