Geplaatst op 4. oktober 2025 door Jan Bunk
Voor sommige websites kan het handig zijn om de knoppen in de appbalk van de app dynamisch aan te passen. Dit kun je doen met deze JavaScript-functies.
executeWhenAppReady() functie van ons app-helper script. Het zorgt ervoor dat je website niet probeert te communiceren met de app voordat deze klaar is of wanneer je website wordt geladen met een gewone browser (ReferenceError, functie is niet gedefinieerd). getAppBarItemsGebruik deze functie om een lijst te krijgen van objecten die alle appbalk-items voorstellen die nu worden weergegeven.
<script>
try {
// returns a list of objects representing the app bar items
let appBarItems = (await getAppBarItems())["appBarItems"];
}
catch (e) {
// Can occur if:
// - the app couldn't connect to the native code. Should be very unlikely.
console.log(e);
}
</script>
setAppBarItemsGebruik deze functie om de appbalk-items aan te passen die getoond moeten worden.
<script>
try {
// example for an app bar item object
let newAppBarItem = {
action: {
urlToRedirectTo: "https://webtoapp.design/contact",
javascriptToExecute: null,
elementToClickSelector: null,
isFavoriteAction: false,
isShareAction: false,
isOpenExternallyAction: false,
isSettingsAction: false,
isRateAction: false,
isPastNotificationsAction: false,
},
icon: {
name: "list"
}
};
// get the currently displayed app bar items
let allAppBarItems = (await getAppBarItems())["appBarItems"];
// add the new app bar item to the list of app bar items
allAppBarItems.push(newAppBarItem);
// display the list of app bar items, including the new app bar item
await setAppBarItems(allAppBarItems);
}
catch (e) {
// Can occur if:
// - the app couldn't connect to the native code. Should be very unlikely.
console.log(e);
}
</script>
Hier is een lijst met gerelateerde ontwikkelaarsdocumentatie over het dynamisch wijzigen van het menu van de app. Zorg ervoor dat je degene bekijkt die van toepassing is op de lay-out van je app.