Add a custom icon to tabpage

[Picard1de]

Hello ,
I am looking for a way to add a custom icon to a tabView Page using the code below. The icon is placed in the images folder (\HOME\WebApps\TestApp\images). Tried different path references but the icon is not shown at all. I want to replace / update the icons during runtime to show different icons depending on the app state.

const tab = Instance.Tab_0

tab.views[1].icon = "1784285228818blackpadlock1172416.png";

//tab.views[1].icon = "images/1784285228818blackpadlock1172416.png";
//tab.views[1].icon = "/images/1784285228818blackpadlock1172416.png";
//tab.views[1].icon = "./images/1784285228818blackpadlock1172416.png";

 console.log("first: ", tab.views[1]);
 console.log("second: ",tab.views[1].icon);
 await tab.render();

When executing the code the icon is not added to TabView “Tab 1”.

The icon property is updated according the console log

Is this supposed to work or not yet supported with AppStudio 1.3 ? Any help would be appriciated.

[yitong]

Hello,

In AppStudio V1.3, the icon of the Tab component is rendered as an <i> element in the HTML. Therefore, setting it using an image src will not work.

Here is a workaround:

1. Create the tab subpage without an icon.

2. In the Tab component’s onMounted event, locate the corresponding HTML element and modify it manually.

const tabbarContents = this.all(
  ".fp-components-tabcontainer-tabbar-content"
);

if (tabbarContents && tabbarContents.length > 1) {
  const iconElem = document.createElement("i");

  iconElem.className =
    "fp-components-tabcontainer-tabbar-icon";


// The name and path of your custom icon (relative to the controller project's file path)
  iconElem.style.backgroundImage =
    "url('./images/test.svg')";

  iconElem.style.backgroundRepeat = "no-repeat";
  iconElem.style.backgroundPosition = "center";
  iconElem.style.backgroundSize = "contain";
  iconElem.style.display = "inline-block";
  iconElem.style.width = "20px";
  iconElem.style.height = "20px";

//  The relative index (starting from 0) of the tab you need to set.
  tabbarContents[1].prepend(iconElem);
}

A future version of AppStudio will support custom icons.

[Picard1de]

Hello Yitong ,

Thanks for your response. Added the code to a user function and connected it to the onMounted event. This will work. The custom icon is shown in the tab when the App is started the first time. However when changing the tabview the icon is gone. I assume when the tab view changes, the tab container is re-rendered or recreated, so that old element is replaced by a new one.

Do have any suggestions on how to solve this ?

My custom function

const addCustomIcon = async () => {

    const tabbarContents = Instance.Tab_0.all(
        ".fp-components-tabcontainer-tabbar-content"
    );

    if (tabbarContents && tabbarContents.length > 1) {

        const  iconElem = document.createElement("i");
        
        iconElem.className =
              "fp-components-tabcontainer-tabbar-icon";

        // The name and path of your custom icon (relative to the controller project's file path)
        iconElem.style.backgroundImage =
            "url('./images/1784285228818blackpadlock1172416.png')";

        iconElem.style.backgroundRepeat = "no-repeat";
        iconElem.style.backgroundPosition = "center";
        iconElem.style.backgroundSize = "contain";
        iconElem.style.display = "inline-block";
        iconElem.style.width = "20px";
        iconElem.style.height = "20px";

        //  The relative index (starting from 0) of the tab you need to set.
        tabbarContents[0].prepend(iconElem);
    }
}
export default addCustomIcon;

BR

[yitong]

Aha, although I’m not sure which API you called to recreate or re-render the tab—I tried APIs such as addTab, activeViewIndex, and tabPosition—if you need it to be triggered immediately after the component has rendered, you’ll need to listen for the component’s lifecycle events.

In the API Documentation of AppStudio v1.3.0, the component lifecycle is introduced, and onMounted is only executed once during the component life.

Namespace: Lifecycle

If you need to control the custom icon entire render cycle of a component, you can inject during the component’s onCreated function:

this.on('after:render',async ()=>{
    await UserFunction.addCustomIcon();
})

[Picard1de]

Hi .

I had remove the icon element before adding it again with onCreated .Now it work fine

this.on("after:render",async () => {

  document.querySelector("i.fp-components-tabcontainer-tabbar-icon")?.remove();

  await UserFunction.addCustomIcon();

})

Thanks for your support