...
| Code Block |
|---|
|
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 |
|---|
| Code Block |
|---|
| {
source: 'bloqs-list'
event: 'loaded',
content: {
visibleElements: number
}
} |
| | Code Block |
|---|
| {
source: 'bloqs-detail',
event: 'loaded'
content: {
primaryKey: string
}
} |
|
Beispiel: Dynamische Höhe des iFrames
| Code Block |
|---|
|
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;
}
}); |