Page Comparison

In Quino ist es möglich, Klassen Teile einer Applikation “öffentlich” zur Verfügung zu stellen, um Teile der Applikation Usern ohne Authentifizierung benutzen Zugriff darauf zu können.

...

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 jeweiligen Projekt auf Client-Projekt ein Routing eingerichtet werden, welches alle “/public” Routes zu einer separaten Applikation umleitet. Beispiel:Seite statt des normalen QuinoApplicationRoot der QuinoPublicApplicationRoot verwendet werden. Dieser leitet automatisch alle /public URLs in den öffentlichen Applikationsteil.

export const RootPageApp: React.FC = () => {
  return (
    <BrowserRouter><QuinoPublicApplicationRoot
      <Routes>
        <Route path={`/${PublicModulePathIdentifier}`}>
          <Route index element={<AppPublic mainAppContent={<CommonUI />}
/>           <Route path={'*'} element={<AppPublic />} />
        </Route>
        <Route path={'/'}>mainAppSetup={(app) => {
          <Route index element={<App />} /> Your main app setup
      <Route path={'*'} element={<App />}
/>         </Route>
      </Routes>
    </BrowserRouter>
  );
};

Diese separate Applikation muss folgende Module benutzen:

export const AppPublic: React.FC = () => {
  return (
    <QuinoApplicationRoot
      setup={(publicAppSetup={(app) => {
        QuinoCoreModule.use(app);
    // Your public app module usages
   UIModule.use(app);     
   DevExpressModule.use(app);         PublicModule.use(app);

        // WeitereYour Registrierungenpublic undapp Usagessetup
    >   }}
   <PublicModuleRootView />
   
</QuinoApplicationRoot>   );
};

Anchor
Berechtigungen Berechtigungen

Berechtigungen

Die Berechtigungen für nicht authentifiziert 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 im Client ein öffentlicher Applikationsteil das Public Module wie oben beschrieben erstellt, funktionieren Listen- und Objektseiten per Default wie folgt:

...

verwendet, stehen per default folgende Ansichten zur Verfügung:

• Listen:

  • Pfad-Beispiel: /public/Person/

  LayoutAObjekt

  • ListLayoutA

  • Abweichungen zur “normalen” Listen-Darstellung:

    • Kein Breadcrumb

    • Kein Layout-Selector

• Objekte:

  • Pfad-Beispiel: /public/Person/

  LayoutX

  • DetailLayoutB/Id=ABC

Dabei ist der Typ vom angegebenen Layout ausschlaggebend. Wird ein Listen-Layout mit einer Id aufgerufen, wird diese Id nicht berücksichtigt.

Anpassungsmöglichkeiten

...

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

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 in der Url dann denn 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

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