How-to: De knoppen van de appbalk van de app ophalen en instellen

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.

De JavaScript-functies gebruiken

Je zou eens kunnen kijken naar de 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).

getAppBarItems

Gebruik 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>
    

setAppBarItems

Gebruik 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>
    

Het App-menu aanpassen

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.