apps

2024.10

true

Wichtig :

Bitte beachten Sie, dass dieser Inhalt teilweise mithilfe von maschineller Übersetzung lokalisiert wurde. Es kann 1–2 Wochen dauern, bis die Lokalisierung neu veröffentlichter Inhalte verfügbar ist.

Apps-Benutzerhandbuch

BEREITSTELLUNG:

Automation Cloud Automation Cloud Public Sector Automation Suite

Letzte Aktualisierung 18. Dez. 2024

Reaktionsfähige und für Mobilgeräte optimierte eingebettete Apps

Sie können Ihrer externen Webseite Logik hinzufügen, sodass Ihre eingebettete App auf Änderungen der Bildschirmgröße reagiert. Dies kann nützlich sein, wenn Sie Geräte mit kleinem Bildschirm verwenden, z. B. Mobiltelefone, da Sie so nicht mehrmals scrollen müssen, um den eingebetteten App-Inhalt anzuzeigen.

Wenn Sie diese Logik nicht zu Ihrer Webseite hinzufügen, behält die Einbettung eine statische Höhe bei und zeigt eine Bildlaufleiste an.

Entwerfen von reaktionsfähigen und für Mobilgeräte optimierten eingebetteten Apps

Setzen Sie die Kommunikation mit Ihrer externen Domäne auf die Zulassungsliste, indem Sie Ihrer vorhandenen Einbettung oder Ihrem iFrame einen zusätzlichen Parameter hinzufügen: &target=https://mywebsite.com. Der folgende Code zeigt ein Beispiel:
```
<embed title="Embedded app" src="<PUBLIC-APP-URL>?el=VB&target=https://mywebsite.com"><embed title="Embedded app" src="<PUBLIC-APP-URL>?el=VB&target=https://mywebsite.com">
```
Um Größenaktualisierungen bei Ihrer Einbettung zu berücksichtigen, fügen Sie der Webseite, die die eingebettete App hostet, die folgende JavaScript-Logik hinzu:
Hinweis:
Die spezifischen Werte variieren je nach Design Ihrer App.
```
<script>  
const MIN_HEIGHT = 800; // Minimum height of the app  
var embed = document.querySelector('embed');  window.addEventListener('message', function(event) {  
if (event.data.event === "APP_CONTENT_HEIGHT_UPDATED" && event.data.height) {  embed.style.height = Math.max(event.data.height, 800);  
}  
if (event.data.event === "APP_CONTENT_RESIZED" && event.data.height !== MIN_HEIGHT) {  
if(event.data.height > 0) {  embed.style.height = Math.max(parseInt(event.data.height) - 10, 850);  
}  
}  
}); 
</script><script>  
const MIN_HEIGHT = 800; // Minimum height of the app  
var embed = document.querySelector('embed');  window.addEventListener('message', function(event) {  
if (event.data.event === "APP_CONTENT_HEIGHT_UPDATED" && event.data.height) {  embed.style.height = Math.max(event.data.height, 800);  
}  
if (event.data.event === "APP_CONTENT_RESIZED" && event.data.height !== MIN_HEIGHT) {  
if(event.data.height > 0) {  embed.style.height = Math.max(parseInt(event.data.height) - 10, 850);  
}  
}  
}); 
</script>
```

Das Skript führt die folgenden Vorgänge aus:

Wenn ein Steuerelement zur App hinzugefügt oder aus ihr entfernt wird, löst das Skript das APP_CONTENT_HEIGHT_UPDATED -Ereignis aus und aktualisiert die Höhe der embed -Variablen.
- Das Ereignis APP_CONTENT_HEIGHT_UPDATED löst APP_CONTENT_RESIZED aus, wodurch die Höhe der embed -Variable um 10 Pixel reduziert wird.
  - Das APP_CONTENT_RESIZED -Ereignis löst ein weiteres APP_CONTENT_RESIZED -Ereignis aus, wodurch die Höhe der embed -Variable erneut um 10 Pixel reduziert wird.

Das Skript wiederholt diese Vorgänge, bis:

Die Variable embed befindet sich auf der Mindesthöhe, auf der eine Bildlaufleiste zum Anzeigen der App nicht erforderlich ist.
Die Variable embed wird auf den Anfangswert reduziert, der durch MIN_HEIGHT angegeben wird.

Demo

Reaktionsfähige und für Mobilgeräte optimierte eingebettete App

Einleitung

Auf dieser Webseite wird eine mobile App in einen Geräterahmen eingebettet. Die App zeigt Inhalte für die mobile Nutzung an. Ein iFrame lädt den Inhalt dynamisch und zeigt ihn innerhalb des Geräteframes an. Der App-Inhalt passt seine Höhe basierend auf seinem Inhalt an, um Bildlaufleisten zu vermeiden.