Documentation
Portal plugins allow many great ways to extend the interface. Here's a quick summary, scroll down for more information.
- Add new sections and links in the stack menu
- Add new sections in Global Settings
- Extend forms with new tabs
- Extend existing menus with new links
- Extend dashboards
- Run code logic inside a background script
Tabs - Add a new tab stack dashboard
To create a new tab in the PBX main screen, add a staticTabs in your manifest with a generalPbxTab context :
"staticTabs": [
{
"entityId": "my id",
"context": [
"generalPbxTab"
],
"name": "My label",
"contentUrl": "./content.html"
}
],
When the user clicks on the tab, the contentUrl will be loaded.
Tabs - Add a page within an existing menu
To create a new page the PBX menu, add a staticTabs in your manifest with a pbxMenu context :
"staticTabs": [
{
"entityId": "my id",
"context": [
"pbxMenu"
],
"name": "My label",
"parent": "common.layout.pbxMenu.userManagement",
"contentUrl": "./content.html"
}
],
The parent key can be one of common.layout.pbxMenu.* where * is : globalSettings, userManagement, callManagement, services, callCenter,reporting, soundsAndGreetings, settings.
When the user clicks on the tab, the contentUrl will be loaded.
Tabs - Add menu items
To create a new menu in the PBX section, add a staticTabs in your manifest with a pbxMenu context :
"staticTabs": [
{
"entityId": "custom-child",
"context": [
"pbxMenu"
],
"name": "New child",
"parent": "New menu",
"parentIcon": "AccountBalance",
"contentUrl": "http://example.com/stats-stack.html"
},
{
"entityId": "custom-child2",
"context": [
"pbxMenu"
],
"name": "New child 2",
"parent": "New menu",
"parentIcon": "AccountBalance",
"contentUrl": "http://example.com/stats-stack.html"
},
],
When the user clicks on the tab, the contentUrl will be loaded.
Tabs - Add new section in Global Settings
To create a new menu in the PBX section, add a staticTabs in your manifest with a globalSettings context :
"staticTabs": [
{
"entityId": "global-settings",
"context": [
"globalSettings"
],
"name": "Custom global",
"icon": "BrightnessHigh",
"contentUrl": "http://localhost:3002/portal/global.html"
}
],
When the user clicks on the tab, the contentUrl will be loaded.
Tabs - Extend an existing form
To create a new tab in the PBX main screen, add a staticTabs in your manifest with a pbx.* context :
"staticTabs": [
{
"entityId": "my id",
"context": [
"pbx.users"
],
"name": "My label",
"contentUrl": "./content.html"
}
],
The context key can be one of pbx.* where * is : users, lines, devices, ring-groups, voicemails, ...
When the user clicks on the tab, the contentUrl will be loaded.
Security - Administrator role
Sometimes you may want to prevent an administrator to modify a sensitive information from a plugin page. From context, you can retrieve the administrator organization type of the current user and then handle the right logic.
await app.initialize();
const context = app.getContext();
const accountType = context.extra.administrator.organization.resource;
switch(accountType) {
case: 'resellers':
return true;
case: 'customers':
case: 'locations':
default:
return false;
}
Background Script
You can add custom code when the user is not using a custom tab. It can be useful to handle custom events.
{
// ...
"backgroundScript": "./background.js"
}
Please refer to the SDK documentation to know how to inject custom code in the application.
The background script is always running, even when the user is logged out. Please make sure to remove all related background tasks when the onLogout listener event is fired.
Stack Menu - Supported Icons
To defined icon and parentIcon image, we support two types of values:
-
Path to a black
.svgicon (recommended) -
Using a supported Material UI icon
List of supported icons
AccessibilityAccountBalanceAccountBoxAccountCircleAddAddCircleOutlineAddIcCallOutlinedAndroidSharpAppsAppSettingsAltArrowBackArrowDownwardArrowDropDownArrowForwardArrowForwardIosArrowUpwardBlockBoltBrightnessHighBugReportBuildBusinessBusinessOutlinedCakeOutlinedCalendarMonthCallCallEndCallMergeCancelCancelOutlinedCheckCheckCircleCheckCircleOutlineCheckCircleOutlinedChevronLeftChevronRightClearCloseCloudCloudDownloadDashboardDateRangeDateRangeOutlinedDeleteDeleteOutlineDescriptionDesktopMacDesktopWindowsOutlinedDeviceHubDialerSipDialpadDirectionsCarDoneDoneAllDoneOutlinedDragHandleEditEmailEmailOutlinedEqualizerErrorErrorOutlineEventSeatExitToAppExpandLessExpandMoreExtensionFileCopyOutlinedFilterListFilterTiltShiftFlagFlashOnFolderSharedFormatListBulletedGetAppGroupGroupOutlinedHeadsetMicHelpHelpOutlineHistoryInfoInfoOutlinedInsertChartInsertDriveFileKeyKeyboardArrowLeftKeyboardArrowRightKeyboardReturnLaptopLaunchLibraryBooksLibraryMusicListLocationOnLocationOnOutlinedLockLockOutlinedMenuMonitorHeartMoreHorizMoreVertMusicNoteNavigateNextNoteOutlinedNotificationsNoneOpenInNewPeoplePermDataSettingPersonPersonOutlinedPhonePhoneForwardedPhoneOutlinedPieChartPlayArrowPlaylistAddPublicPublishQueryBuilderReceiptReceiptOutlinedRecordVoiceOverRedoRefreshRemoveRestoreRingVolumeRoomServiceScheduleScheduleOutlinedSearchSendSettingsSettingsApplicationsSettingsBackupRestoreSettingsPhoneShuffleSignalCellular4BarSmartphoneSmartphoneOutlinedSmsSpeakerStarStopStorageStoreMallDirectorySupervisorAccountSwapCallsSyncTimelineTocTodayTransformTrendingFlatTroubleshootTtyOutlinedTuneUpdateVerifiedUserViewListVisibilityVisibilityOffVoicemailVolumeDownVolumeMuteVolumeUpVpnKeyVpnLockWarningWebWebAsset