DataInsights WebApp extend a new menu tab |
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.
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);
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)
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);
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);
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]);
Parameters: the id array of the menu page to be displayed, see: defaultAddDataWindowTabsId
Reference: