Worklight WL.TabBar does not display correct titles on iOS

Question

I downloaded the IncludeExternalPages project from the getting started site. In the main.js for iPhone I can see what the WL.TabBar should display:

function wlEnvInit(){
    wlCommonInit();

    WL.TabBar.init();

    WL.TabBar.addItem("WLtab1", function () {tabClicked(1); } ,"Home",{
        image: "tabButton:Favorites"
    });

    WL.TabBar.addItem("WLtab2", function () {tabClicked(2); } ,"Client",{
        image: "tabButton:Search"
    });

    WL.TabBar.addItem("WLtab3", function () {tabClicked(3); } ,"IBM",{
        image: "tabButton:More"
    });

    WL.TabBar.setVisible(true);
    WL.TabBar.setSelectedItem("WLtab1");

    tabClicked(1); 
}

However, when executing this code in a simulator the labels are Favorite, Search, and More instead of Home, Client, and IBM. I made no modifications to the project, just built it and ran on the iOS simulator. This was using WL6.2 with the 9/4 update (latest).

Any ideas why the titles are defaulting to iOS instead of what is specified in the code?

Answer 1

When using the "built-in" OS icons (Favorites, More, Search, ...) the tab item's title will default to that of the icon instead of the label in the code.

To change that, provide your own Favorites icon, for example, and then the "Home" label will be used.