ActionItem with different content depending on tab


#1

Hello,

I’m new to Nativescript and JS. Currently, I’m working on a little app which has 3 different tabs:

<Page 
    xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page" 
    xmlns:mapTab="divesite/map" 
    xmlns:favoriteTab="divesite/favorite" 
    xmlns:searchTab="divesite/search" 
    xmlns:nsDrawer="nativescript-pro-ui/sidedrawer" 
    xmlns:myDrawer="shared/my-drawer">>
    <ActionBar class="action-bar">
        <NavigationButton ios:visibility="collapsed" icon="res://menu" tap="onDrawerButtonTap"></NavigationButton>
        <ActionItem icon="res://navigation/menu" android:visibility="collapsed" tap="onDrawerButtonTap" ios.position="left"></ActionItem>
        <Label class="action-bar-title" text="{{ diveSites }}"></Label>
        <ActionItem tap="onDelete" ios.systemIcon="16" ios.position="right" text="delete" android.position="popup"></ActionItem>
    </ActionBar>
    <nsDrawer:RadSideDrawer id="sideDrawer" showOverNavigation="true">
        <nsDrawer:RadSideDrawer.drawerTransition>
            <nsDrawer:SlideInOnTopTransition/>
        </nsDrawer:RadSideDrawer.drawerTransition>
        <nsDrawer:RadSideDrawer.drawerContent>
            <StackLayout>
                <myDrawer:MyDrawer selectedPage="Dive Sites"/>
            </StackLayout>
        </nsDrawer:RadSideDrawer.drawerContent>
        <nsDrawer:RadSideDrawer.mainContent>
            <TabView selectedIndexChanged="onSelectedIndexChanged">
                <TabView.items>
                    <TabViewItem title="{{ map }}">
                        <TabViewItem.view>
                            <mapTab:map-page/>
                        </TabViewItem.view>
                    </TabViewItem>
                    <TabViewItem title="{{ favorite }}">
                        <TabViewItem.view>
                            <favoriteTab:favorite-page/>
                        </TabViewItem.view>
                    </TabViewItem>
                    <TabViewItem title="{{ search }}">
                        <TabViewItem.view>
                            <searchTab:search-page/>
                        </TabViewItem.view>
                    </TabViewItem>
                </TabView.items>
            </TabView>
        </nsDrawer:RadSideDrawer.mainContent>
    </nsDrawer:RadSideDrawer>
</Page>

I’ve added an ActionItem into the ActionBar which can delete some entries in my favoriteTab. However, on my mapTab the ActionItem should offer me some other options instead of deleting (e.g. Reset zoom). Maybe there should also be some more ActionItems than in my other tabs.

How can i set up the content/options of the action items depending on the currently selected tab?

Thanks for your help :slight_smile: