How to: Get and Set the App's App Bar Items

Posté le 4. octobre 2025 par Jan Bunk


For some websites it may be useful to dynamically modify the buttons in the apps' app bar. You can achieve this with these JavaScript functions.

Utilisation des fonctions JavaScript

Nous vous conseillons de consulter la fonction executeWhenAppReady()dans notre script d'aide de l'application. Elle garantit que votre site web n'essaie pas d'interagir avec l'application avant qu'elle ne soit prête ou lorsque votre site web est chargé à l'aide d'un navigateur normal (Erreur de référence, la fonction n'est pas définie).

getAppBarItems

Use this function to get a list of objects representing all the app bar items that are currently being displayed.


<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

Use this function to modify the app bar items that should be displayed.


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

Modification du menu de l'application

Voici une liste de documentation pour développeurs concernant la modification dynamique du menu de l'application. Assurez-vous de consulter celle qui s'applique à la mise en page de votre application.