DataInsights WebApp supports extending new menu tabs. Based on a series of interfaces provided, you can also expand the content in the data directory area on the left, the main work area on the right, and the toolbar icon in the upper right corner of the new menu tab.

The menu tab extension steps

Before the menu tabs extension, please read the Datainsights WebApp extension process. This section only introduces the extension steps of menu tabs.

Step 1: In the js files of menu tabs, instantiate iDataInsights.Plugins.MenuTabsExtension, the code is as follows:

const menuTab = [{

    id: "custom-tab-id",

    name: 'sample',

    icon: "supermapol-icons-link"

}, {

    id: "custom-tab-id2",

    name: 'my',

    icon: "supermapol-icons-link"

}]

const menuTabInstance = new iDataInsights.Plugins.MenuTabsExtension(menuTab);

  • id, The id of menu tab

  • name, The name of menu tab

  • icon, The font icon of the menu tab

Note: If the user's id uses one of iDataInsights.Plugins.menuTabsExtension.defaultMenuTabsId, the corresponding panel will be displayed in the system default mode. If you want to customize the content of each panel, do not use these three ids.

Step 2: Call initPane to initialize the panel.

const paneId = [{

    id: "custom-tab-id",

    catalogID: "custom-catalog-id11",

    containerID: "custom-container-id",

}, {

    id: "custom-tab-id2",//tabID

    catalogID: "custom-catalog-id22",

    containerID: "custom-container-id22",

}]

menuTabInstance.initPane(paneId)

  • id, the menu id when creating the instance (must be one of the ids passed in when creating the instance)
  • catalogID, the menu id corresponds to the ID of the left data catalog panel  displayed
  • containerID, the menu id corresponds to the ID of the main panel on the right displayed

Step 3: Create customized components.

function creatMyComponents() {

    let catalogDom = document.querySelector("#custom-catalog-id22");

    //Directory panel on the left-adding button

    let btnDom = createButton('custom-btn1', "Add data");

    btnDom.onclick = () => {

       comComponents.openAddDataWindow();

    }

    catalogDom.appendChild(btnDom);

}

// Add customized components to the specified container

menuTabInstance.createComponents(creatMyComponents);

  • creatMyComponents, The function for users to create customized components.

  • openAddDataWindow, The instance method of CommonComponents provided by DataInsights, is used to open a pop-up window for adding data.

Step 4: Call addCustomToolBarBtn to add buttons and icons in the customized toolbar.

const myToolBarBtn = [{

    id:"custom-my",

    text: 'my',

    func: function () { console.log('my') },

    hasText: true,

    icon: "supermapol-icons-link",

    otherClass:'',

}, {

    id:"custom-btn",

    text: 'sample',

    func: function () { console.log('sample') },

    hasText: true,

    icon: "supermapol-icons-link",

    otherClass:'',

}]

menuTabInstance.addCustomToolBarBtn("custom-tab-id2", myToolBarBtn);

  • "custom-tab-id2", menu tab id

  • myToolBarBtn.id: button id

  • myToolBarBtn.text: button name

  • myToolBarBtn.func: The function will be executed when clicking the button (click event)

  • myToolBarBtn.hasText: Whether the button icon should display the button name

  • myToolBarBtn.icon: Button font icon

  • myToolBarBtn.otherClass: other class names of the button

  • addCustomToolBarBtn: This interface defaults, the second parameter is passed into the button, and it needs to be displayed when the menu page is selected

Step 5: Call setDefaultToolBarBtnShow to set the displaying and hiding of toolbar icon buttons.

menuTabInstance.setDefaultToolBarBtnShow(customMenuTabId, [tooBarBtnId1, tooBarBtnId2, tooBarBtnId3,tooBarBtnId4]);

  • The first parameter: the id of the menu tab

  • The second parameter: the id array corresponding to the toolbar icon button to be displayed on the menu tab (this id array is the icon button id provided in DataInsights, see: defaultToolBarButtonId)

Note: If it is unnecessary to display the icon provided by DataInsights, you do not need to call this interface.

Step 6: Call setDefaultAddDataWindowTabs to set the menu page to be displayed in the add data window

menuTabInstance.setDefaultAddDataWindowTabs([menuTabID1, menuTabID2, menuTabID3]);

 

Reference: