Public Module

In Quino ist es möglich, Teile einer Applikation “öffentlich” zur Verfügung zu stellen, um Usern ohne Authentifizierung Zugriff darauf zu geben. Dazu existieren zwei Optionen:

Klassen für den öffentlichen Bereich freigeben
Eigene “Widgets” mit komplett frei definierbarem Inhalt erstellen

Verwendung des Public Module

Um den öffentlichen Bereich verwenden zu können, muss im Projekt auf Client-Seite statt des normalen QuinoApplicationRoot der QuinoPublicApplicationRoot verwendet werden. Dieser leitet automatisch alle /public URLs in den öffentlichen Applikationsteil.

Wichtig: Im publicAppSetup muss PublicModule.use() aufgerufen werden, damit der öffentliche Bereich korrekt funktioniert.

export const App: FC = () => {
  return (
    <QuinoPublicApplicationRoot
      mainAppContent={<CommonUI />}
      mainAppSetup={(app) => {
        // Your main app setup
      }}
      publicAppSetup={(app) => {
        // Your public app module usages
        
        PublicModule.use(app);

        // Your public app setup
      }}
    />
  );
};

Berechtigungen

Die Berechtigungen für nicht authentifizierte User werden über die Rolle “anonymous” vergeben. Für jede Klasse, die im öffentlichen Bereich sichtbar sein soll, muss also eine Rollenberechtigung (mind. “lesen”) für die Anonymous-Rolle bestehen.

Listen- und Objekt-Ansichten

Wird das Public Module wie oben beschrieben verwendet, stehen per default folgende Ansichten zur Verfügung:

Listen:
- Pfad-Beispiel: /public/Person/ListLayoutA
- Abweichungen zur “normalen” Listen-Darstellung:
  - Kein Breadcrumb
  - Kein Layout-Selector
Objekte:
- Pfad-Beispiel: /public/Person/DetailLayoutB/Id=ABC
- Abweichungen zur “normalen” Listen-Darstellung
  - Kein Breadcrumb
  - Kein Object Paging
  - Kein Layout-Selector
  - Keine Tags
  - Keine Sidebar

Anpassungsmöglichkeiten

Für die visuelle Anpassung von Listen- und Objekt-Layouts stehen (zusätzlich zu den normalen Optionen) folgende Aspekte zur Verfügung:

WidthAspect: Breite bzw. Maximal-Breite des Inhalt-Blocks
MarginAspect: Margin um den Inhalt-Block herum
PaddingAspect: Padding innerhalb des Inhalt-Blocks
BackgroundColorAspect: Hintergrund des Inhalt-Blocks
PublicWidgetOptionsAspect:
- titleFontColor: Farbe des Seitentitels
- hideTitleRow: Ob die Titel-Zeile komplett versteckt werden soll
- invertBackButton: Ob der “Zurück”-Button invertiert (d.h. weiss) dargestellt werden soll
- hideContentBorder: Ob der graue Rand der Inhalts-Blöcke ausgeblendet werden soll
- cssClass: Eigene Klasse, die auf den Wrapper angewendet wird. Kann in Kombination mit public:UiConfiguration:publicCSS dazu verwendet werden, eigene Styles einzusetzen.

Eigene Widgets

Es ist zudem möglich, eigene “Widgets” mit komplett frei definierbarem Inhalt zu registrieren. Dazu muss im Client ein “PublicBookmark” mit einem fixen Namen (z.B. “Demo”) erstellt und registriert werden. Dieser Name erlaubt den Zugriff auf das Widget mittels url (z.B. /public/demo).

Registrierungs-Beispiel:

app.registerStartupAction(Symbol.for('RegisterDemoBookmarkSerializer'), (app) => {
  const publicBookmarkProvider = app.get<IPublicBookmarkProvider>(PublicBookmarkProviderSymbol);
  publicBookmarkProvider.register(new DemoPublicBookmark(), Symbol.for('DemoBookmark'));
})
.moveTo(FrameworkStartupGroup);

Einbindung als iFrame

Es ist möglich, öffentliche Listen und Objekte als iFrame auf einer externen Webseite einzubinden.

Um gewisse Informationen über den eingebundenen Inhalt zu erhalten, werden Events per postMessage kommuniziert. Somit kann auf den Inhalt des iFrames reagiert werden. Mit diesen Informationen kann z.B. die Höhe des iFrames dynamisch angepasst werden.

Events

Liste wurde geladen	Objekt wurde geladen

Liste wurde geladen	Objekt wurde geladen
`{ source: 'bloqs-list' event: 'loaded', content: { visibleElements: number } }`

ECUI Benutzerhandbuch