Page Comparison

...

• 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

...

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