Page Comparison

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 /Layouts für den öffentlichen Bereich freigeben

• Eigene “Widgets” mit komplett frei definierbarem Inhalt erstellen

Verwendung des Public Module

...

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
      }}
    />
  );
};

Anchor
Berechtigungen Berechtigungen

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.

...

• 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.

Anchor
Widgets Widgets

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).

...

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

{
  source: 'bloqs-list'
  event: 'loaded',
  content: {
    visibleElements: number
  }
}

{
  source: 'bloqs-detail',
  event: 'loaded'
  content: { 
    primaryKey: string
  }
}

Beispiel: Dynamische Höhe des iFrames

const iframe = document.getElementById('remote');
window.addEventListener("message", (event) => {
    
    const minHeight = 400;
    const maxHeight = 800;
    const drilldownHeight = 600;

    if (event.data && event.data.source === 'bloqs-list' && event.data.event === 'loaded') {
        const calculatedHeight = 250 + event.data.content.visibleElements * 33.5;
        if (calculatedHeight < minHeight) {
            iframe.height = minHeight
        } else if (calculatedHeight >= minHeight && calculatedHeight < maxHeight){
            iframe.height = calculatedHeight;
        } else {
            iframe.height = maxHeight;
        }
    }

    if (event.data && event.data.source === 'bloqs-detail' && event.data.event === 'loaded'){
        iframe.height = drilldownHeight;
    }
});