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

Publicado em 4. outubro 2025 por 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.

Usando as funções do JavaScript

Recomendamos que verifique a função executeWhenAppReady() do nosso script auxiliar de aplicação. Ele garante que seu site não tente interagir com o aplicativo antes que ele esteja pronto ou quando o site for carregado usando um navegador comum (ReferenceError, a função não está definida).

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>
    

Modificando o Menu do App

Aqui está uma lista de documentação de desenvolvedores relacionada a como mudar dinamicamente o menu do app. Certifique-se de que está vendo a documentação aplicável ao layout do seu app.