Zum Hauptinhalt springen

Editor und Widgets für Portale

Der Portal-Editor kombiniert ein navigierbares Dateirepository mit einem visuellen Composer. Beide Modi arbeiten mit demselben Entwurf: Visuelle Änderungen aktualisieren die Quellen, und direkt im Code bearbeitete Teile werden beibehalten.

Code-Modus​

Der Modus Code zeigt:

  • Explorer, um Dateien zu suchen, zu erstellen, umzubenennen und zu organisieren;
  • Bild hochladen, um PNG-, JPEG-, GIF- oder WebP-Assets im Repository hinzuzufügen;
  • Tabs für geöffnete Dateien;
  • Editor mit Hervorhebung für JSON, HTML, CSS und JavaScript;
  • Status des Speicherns und die aktuelle Versionsnummer;
  • das Probleme-Panel mit Fehlern und korrigierbaren Hinweisen.

Explorer und Probleme können mit dem Button in ihrer Kopfzeile eingeklappt werden. Im Explorer lässt sich außerdem mit dem Pfeil neben jedem Verzeichnis gezielt nur dieser Zweig ein- oder ausklappen. Der Zustand der Verzeichnisse bleibt während der Bearbeitungssitzung erhalten; bei einer Suche werden die für Treffer benötigten Zweige vorübergehend aufgeklappt.

Änderungen werden asynchron gespeichert. Wenn der Entwurf von einer anderen Sitzung aktualisiert wurde, unterbricht der Editor das Speichern und meldet den Konflikt: Laden Sie die aktuelle Version neu, bevor Sie mit der Arbeit fortfahren.

Verwenden Sie Checkpoint, um eine unveränderliche und nachvollziehbare Version des Entwurfs festzuhalten. Ein Checkpoint veröffentlicht das Portal nicht.

Wenn Sie eine Datei öffnen, die kein Seiten-Artefakt darstellt – zum Beispiel portal.json, eine Data Resource, ein CSS oder eine Komponenten-Datei – wechselt der Editor automatisch in den Code-Modus. Der visuelle Composer bleibt nur mit Seiten verknüpft und zeigt niemals die Leinwand einer zuvor geöffneten Datei an. Der Editor merkt sich den für jede Seite gewählten Modus während der Bearbeitungssitzung: War eine Seite im visuellen Modus geöffnet, kehrt sie nach dem Anzeigen einer Konfigurationsdatei automatisch dorthin zurück.

Um eine Seite zu erstellen, wählen Sie Neue Datei und verwenden Sie einen JSON-Pfad unter pages/, zum Beispiel pages/dashboard.json oder pages/orders/detail.json. Der Dateiname ist frei: Der Editor generiert automatisch UUID, Titel, Rasterlayout und Widget-Liste. Um sie navigierbar zu machen, fügen Sie in portal.json eine Route hinzu, die auf den vollständigen Pfad der Seite verweist.

Visueller Modus​

Der Modus Visuell stellt Paletten, die Leinwand und den Inspektor zur Verfügung. Es ist möglich, ein Widget hinzuzufügen, es auszuwählen und zu konfigurieren:

  • Titel und Eigenschaften;
  • Position, Breite und Höhe im Raster;
  • Stile für die einzelne Instanz;
  • Scoped CSS;
  • Darstellung für Desktop, Tablet und Mobil.

Die gesteuerten Eigenschaften werden angewendet und gespeichert, wenn das Steuerelement geändert wird; ein Toaster bestätigt das Ergebnis. Erweiterte Änderungen speichern dient stattdessen für JSON- und CSS-Container, in denen es normal ist, während der Eingabe temporär ungültigen Inhalt zu haben. Der Status in der Kopfzeile unterscheidet zwischen laufenden Änderungen, Speichern und gespeicherter Quelle.

Die Felder des Inspektors hängen vom Widget ab: Routen, Bilder, Benutzeransichten, einzelne Widgets einer Ansicht, Workflows, Parameter und Data Resources werden aus Menüs gefiltert nach dem Projekt ausgewählt. Farben können mit dem Farbwähler ausgewählt oder als CSS-Wert oder Design-Token eingegeben werden.

Die Viewport-Voreinstellungen legen die simulierte Größe fest. Die Zoomleiste bietet −, +, das Zurücksetzen auf 100 % und Anpassen. Anpassen berücksichtigt sowohl die verfügbare Breite als auch die Höhe, verkleinert die Leinwand gleichmäßig und erhält die Proportionen der Vorschau. Ein Klick auf die Prozentangabe setzt auf 100 % zurück; ein Doppelklick ermöglicht die direkte Eingabe eines Werts zwischen 5 % und 200 %. Bei benutzerdefiniertem Zoom erschließen Bildlaufleisten die Bereiche außerhalb der Arbeitsfläche. Der Zoom ändert nur die Darstellung im Editor, nicht die gespeicherte Geometrie oder die Laufzeitdarstellung. Jedes Widget zeigt außerdem Breite × Höhe in Rasterzellen an.

Um die Geometrie eines Widgets zu ändern:

  • Ziehen Sie den Griff oben links, um es zu verschieben;
  • Ziehen Sie den Griff in die untere rechte Ecke, um es zu vergrößern/verkleinern;
  • Verwenden Sie Alt + Pfeil, um es um eine Zelle zu verschieben;
  • Verwenden Sie Shift + Alt + Pfeil, um die Breite oder Höhe einer Zelle zu ändern.

Um ein Widget zu löschen, wählen Sie es aus und verwenden Sie Widget löschen im Inspektor. Alternativ drücken Sie Entf oder Backspace, wenn der Cursor nicht in einem Feld steht. Der Editor fordert immer eine Bestätigung an.

Wenn ein Bereich Eigenschaften enthält, die nicht vom Composer verwaltet werden, identifiziert der Editor ihn als vom Code verwaltet und behält ihn bei visuellen Aktualisierungen bei.

Um die Seite anstatt eines Widgets zu konfigurieren, klicken Sie auf einen freien Bereich des Leinwandhintergrunds. Der Inspektor Seitenstil ermöglicht die Einstellung von Farbe, Hintergrund, Innenabstand und Mindesthöhe; JSON-Stil und Scoped CSS der Seite bleiben für erweiterte Anpassungen verfügbar.

Aussehen und CSS konfigurieren​

Der Gesteuerte Stil zeigt Farbe, Hintergrund, Schriftgröße, Ausrichtung, Abstand und Eckenradius an. Die Werte akzeptieren normale CSS-Syntax, zum Beispiel #0f172a, 1rem oder 8px.

Die Erweiterte Konfiguration ermöglicht die Verwendung von CSS-Eigenschaften im kebab-Case, Zuständen und Breakpoints:

{
  "color": "#0f172a",
  "background-color": "#ffffff",
  "padding": "1rem",
  "states": {
    "hover": {"background-color": "#e0f2fe"}
  },
  "breakpoints": {
    "md": {"font-size": "18px"}
  }
}

Das Feld CSS scoped ermöglicht die Bearbeitung jeder einzelnen Details, ohne andere Widgets zu beeinflussen. & repräsentiert den Container der Instanz; .portal-text wählt den Inhalt des Text-Widgets:

&:hover { transform: translateY(-2px); }
.portal-text { font-weight: 600; letter-spacing: .02em; }

Wählen Sie Erweiterte Änderungen speichern, um JSON und CSS auf der Seite zu speichern. Die Vorschau zeigt die endgültig kompilierte Darstellung.

Projektkataloge​

Die Schaltflächen Benutzerdefiniertes Widget und Bilder öffnen einen vereinheitlichten Katalog. Jedes Element gibt immer seine Herkunft an: Aktuelles Portal, ein anderes Portal desselben Projekts, veröffentlichte Benutzeransicht oder gemeinsamer Katalog der Ansichten. Externe Objekte, die nicht zum Projekt gehören oder dem Benutzer nicht zugänglich sind, werden nicht angezeigt.

Die Palette enthält außerdem die Widgets der veröffentlichten Benutzeransichten des Projekts. Es können sowohl Standard-Widgets – einschließlich Grafiken, KPIs, Tabellen und Karten – als auch Widgets aus dem benutzerdefinierten Katalog eingebettet werden. Die Auswahl protokolliert die Ansicht, die veröffentlichte Version und den Widget-Schlüssel; eine Version bleibt daher stabil, auch wenn die Ansicht später geändert wird.

Wird ein Bild oder eine Komponente aus einem anderen Objekt verwendet, erstellt der Editor eine Kopie im Portal-Repository. Diese Materialisierung macht Checkpoints, Builds und Releases reproduzierbar; die Katalogkarte behält die Angabe der Herkunft bei, um Ambiguitäten zu vermeiden.

Verfügbare Widgets​

Der verwaltete Katalog umfasst:

  • Text, Hero, Karte, Bild und Trennlinie;
  • Verknüpfung, Menü, Navigationsregisterkarten und Breadcrumb;
  • Sektion, ausklappbares Panel, Seitenleiste und Drawer;
  • Nur-Lese-Formular, Datenformular, Datentabelle, Balkendiagramm und Datenexport;
  • Vollständige Benutzeransicht und einzelnes Benutzeransicht-Widget;
  • Workflow-Aktion;
  • Power BI Berichte und Qlik Dashboards;
  • Benutzerdefiniertes Sandbox-Widget.

Jedes Widget unterstützt Stil-Eigenschaften, visuelle Zustände und Breakpoints. Das scoped CSS ermöglicht es auch, Hover-, Fokus-, aktiven und deaktivierten Zustand anzupassen, ohne andere Komponenten der Seite zu verändern.

Die Schaltfläche Widget-Anleitung öffnet die integrierte Referenz des ausgewählten Widgets: Sie listet Eigenschaften, Typen, Standardwerte, Fähigkeiten und Stilbeispiele auf. Die vollständige Referenz ist auch unter Reference dei widget verfügbar.

Bild hochladen und verwenden​

  1. Wenn die Datei lokal ist, verwenden Sie Bild hochladen im Explorer und wählen Sie ein PNG, JPEG, GIF oder WebP.
  2. Um ein Asset wiederzuverwenden, öffnen Sie Bilder und filtern Sie den Katalog nach Name oder Herkunft.
  3. Wählen Sie Bild verwenden oder Kopieren und verwenden: Der Editor schlägt einen Pfad unter assets/ vor und wertet das ausgewählte Widget aus.
  4. Immer alt ausfüllen und dann die Anpassung (contain, cover, fill, none, scale-down) und Position auswählen.
  5. Das Ergebnis in der Vorschau überprüfen.

Die für das Widget in der Rasterstruktur festgelegte Höhe bestimmt auch den von dem Bild eingenommenen Platz. Standardmäßig wird das Bild ohne Verzerrung enthalten; das scoped CSS kann object-fit über den Selektor .portal-image ändern.

Data Manager und visuelle Abfragen​

Daten öffnet den Data Manager des Portals. Die Struktur des Ordners data/ muss nicht im Voraus bekannt sein:

  1. Eine Datenressource erstellen und Schlüssel und Namen zuweisen;
  2. Umgebungskonnektivität oder Semantisches Modell auswählen;
  3. Für Umgebung laden Sie den Katalog und wählen dann Schema, Tabelle, Dimensionen, Kennzahlen, Aggregationen und Aliase;
  4. Für ein Semantisches Modell wählen Sie die veröffentlichte Version des Projekts, dann verwaltete Felder und Kennzahlen;
  5. Maximale Zeilen, Timeouts und Parameter nur bei Bedarf einstellen;
  6. Speichern: Die Datei data/<chiave>.resource.json wird erstellt und mit dem ausgewählten Widget verknüpft.

Der Modus Erweiterte benutzerdefinierte SQL ist für nur lesende Abfragen reserviert, die nicht vom Konfigurator ausgedrückt werden können. Er erfordert auch die Deklaration der Ausgabespalten. Komplexe Joins, Filter oder Sortierungen können durch Öffnen des generierten JSON im Code-Modus verfeinert werden.

Der Browser empfängt die Anmeldeinformationen nicht und fragt die Quelle nicht direkt ab. Abfragen, Parameter, Limits und Berechtigungen werden zur Laufzeit erneut überprüft.

Daten und Sybot-Integrationen​

Datenressourcen können autorisierte Quellen und Semantische Modelle verwenden. Die Abfragen sind nur lesend und respektieren die Benutzerberechtigungen zum Zeitpunkt der Ausführung erneut.

Im Widget Benutzeransicht wählen Sie aus dem Dropdown-Menü eine veröffentlichte Ansicht des Portalprojekts. Die Auswahl speichert automatisch sowohl die Ansicht als auch die gepinnten veröffentlichten Versionen.

Im Widget Workflow-Aktion wählen Sie einen ausführbaren Workflow des Projekts. Für jeden Parameter geben Sie an, ob der Standardwert, die Abfrage des Werts beim Benutzer oder die Speicherung eines festen Werts zu verwenden ist. Sensible Parameter können nur zur Laufzeit angefordert werden; Workflows mit Dateiparametern sind nicht verfügbar. In der Vorschau wird nur die Konfigurationsprüfung ausgeführt.

Ein benutzerdefiniertes Widget schreiben​

Durch das Hinzufügen von Benutzerdefiniertes Sandbox-Widget erstellt der Editor ein explizites Verzeichnis:

components/<chiave>/
├── component.json
├── template.html
├── styles.css
└── index.js

Code-Komponente öffnen wechselt zu Code und öffnet alle vier Dateien. template.html enthält das Markup, styles.css den isolierten Stil, index.js exportiert mount(sdk) und component.json deklariert Dateien und Fähigkeiten. Der Code kann das DOM seines iFrames modifizieren, auf Ereignisse reagieren und PortalWidgetSDK für Daten, interne Navigation und autorisierte Workflows verwenden. Er kann nicht auf das übergeordnete Dokument, die Sitzung, andere Widgets, Cookies oder das direkte Netzwerk zugreifen.

Power BI und Qlik​

Power BI Bericht unterstützt Secure URL mit der Microsoft-Sitzung des Lesers und App owns data mit einem projektverwalteten Profil und einer Bindung. Qlik Dashboard unterstützt Secure URL und OAuth impersonation mit qlik-embed. Secrets verbleiben in der administrativen Konfiguration; das Widget speichert nur URL oder logische Bindung. Führen Sie vor der Vorschau die Diagnose aus und testen Sie Berechtigungen, Lizenz und Anbieterregeln auf der veröffentlichten Domain.

Die vollständige Anleitung steht unter Verwaltete Integrationen.

Entwurf validieren und testen​

  1. Die Datei speichern oder die Eigenschaften vom Composer ausführen.
  2. Validieren auswählen.
  3. Die im Bereich Probleme aufgeführten Elemente korrigieren.
  4. Build auswählen, um den Aufbau des Entwurfs zu überprüfen.
  5. Vorschau auswählen und Layout, Daten und Interaktionen testen.

Die Vorschau ist von der veröffentlichten Version getrennt. Fehler zeigen eine nutzbare Meldung und, wenn verfügbar, eine Kennung an, die dem Support mitgeteilt werden kann.

Für Zugriffe und den Veröffentlichungszyklus konsultieren Sie Pubblicazione e accessi.