Open New Tab on Demand in SideBar

When placing the SideBar in your application, you don;t need to create it with all tabs initially. You can add new tabs and load them only when required. Now, as a source you can have a JSON file or a database with all configurations set for each loaded tab into the side bar.

In this article, you will learn how to open a new tab on demand whenever the last tab with '+' icon is clicked. You will find sample code that shows creation of new tabs dynamically in JavaScript, Angular, React and Vue, in following sections below.

Sample Content Block
SideBar component is part of IntegralUI Web
a suite of native Web Components for Angular, React and Vue

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

As demo shows, there is only a tab with '+' icon in the side bar. Clicking this tab will show that loading is in the process following with creation of a new tab placed above. When new tab is added, it is automatically selected and expanded with opening animation.

How to Create Tab with '+' Icon in SideBar

Initially you need to have one tab in the side bar, the one that will act as 'add new tab' button. The best use of this tab is if it is placed at the end of tab list.

To create a tab that will act as a button that when clicked instead of opening the tab content panel will actually create and open a new tab in the side bar is fairly simple. You only need to set the icon for this tab to look like '+' sign or anything easily recognizable as 'add' button. Than just change the behavior of this tab when it is selected, by handling the beforeSelect event where you will prevent default behavior (that is opening of tab content panel).

You can use a key field or any other custom field in tab object to store information that the 'add new tab' is different from other tabs. In this case, the key field is set to 'NEW' value. Then you can use this key value to set a condition in the tab template (see below).

By creating a custom template for tabs in the sidebar you can also alter their behavior. In the case of 'add new tab' button, the tab will contain the '+' icon and when clicked will add a new tab to the side bar.

For other tabs, the default template is in use, returning null value from template function affects this.

How to Open a New Tab on Demand

Now, when this tab is clicked, a loading icon will appear showing that something is loading. You can modify this in your code. As an example, the loading takes only 1 second followed by creation of a new tab and resting the tab icon.

In above code, during loading process a new tab object is created. In real scenarios, you can load the tab settings from a remote data source like a JSON file or a database. In either case, once you have the new tab data, you can select and open the new tab in the side bar and end the loading animation.

To prevent selection of the tab with 'add new' button, you can handle the beforeSelect event and cancel the selection process by setting the cancel field of the event data to false.

Conclusion

When you don't know how many tabs the SideBar will have or you may need to add new tabs later when required, you can create a tab at the end of the tab list that when clicked will load new tabs on demand. IntegralUI SideBar component is fully customizable and allows you to modify the appearance and behavior of each tab separately. In this case, you can create the last tab to appear and behave as a 'add new tab' button and instead of showing its content when selected; it will load new tabs from a JSON file or a remote data source or create them in code on your side.

A sample code is available in JavaScript, Angular, React and Vue that shows how to open new tabs dynamically. The SideBar is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework