Open Admin Portal on specific tab
The Admin Portal opens on the Profile tab by default.
It is possible to open a different tab instead!
The following function opens the Admin Portal on Security tab for example ➜
const openPrivacyAndSecurityModule = () => { window.location.href = '#/admin-box/privacy'; AdminPortal.show(); };
We can add a button to call this function ➜
<button onClick={openPrivacyAndSecurityModule}>Open Privacy & Security</button>
Final result once the button is clicked in our app ➜
Hide fields from profile tab
The Email field is mandatory and will show always show (unless the profile tab is toggled off in the builder). The other fields can be hidden programmatically!
The following code snippet hides Name, Phone Number, Address, and Job Title ➜
const themeOptions = { adminPortal: { pages: { profile: { fieldsProperties: { name: { appearance: 'hidden' }, phoneNumber: { appearance: 'hidden' }, address: { appearance: 'hidden' }, jobTitle: { appearance: 'hidden' }, }, }, }, }, };
Only email will be displayed when we open the admin portal ➜
Change badge icon in Users tab (Material UI)
Frontegg base components rely on the great Material UI (as we believe that wheels shouldn't be re-invented).
Here is an example for changing the color and background for these badges
const themeOptions = { adminPortal: { components: { MuiChip: { styleOverrides: { label: { color: 'red', background: 'white' } } } } } };
And the result ➜
Full screen mode
The Admin Portal opens as a modal by default.const themeOptions = { adminPortal: { layout: { fullScreenMode: true } } };
Set visibility for each tab in the Admin Portal
You can control what tabs are visible \ hidden in the Frontegg Portalconst metadata = {
navigation: {
privacy: {
visibility: 'byPermissions',
permissions: ['my-great-permission-2'], // or [] if they don't want any permission
},
sso: {
visibility: "hidden"
},
roles: {
visibility: "byPermissions"
},
users: {
"visibility": "byPermissions"
},
audits: {
"visibility": "byPermissions"
},
groups: {
"visibility": "byPermissions"
},
account: {
visibility: "byPermissions"
},
profile: {
visibility: "byPermissions"
},
security: {
"visibility": "byPermissions"
},
webhooks: {
"visibility": "byPermissions"
},
apiTokens: {
visibility: "byPermissions"
},
provisioning: {
visibility: "byPermissions"
},
personalApiTokens: {
"visibility": "byPermissions"
}
}
}
<FronteggProvider
contextOptions={contextOptions}
hostedLoginBox={true}
authOptions={authOptions}
metadata={metadata}
>
Users tab ➜ Hide "Last Seen" and "Joined At" columns:
<FronteggProvider
contextOptions={contextOptions}
hostedLoginBox={true}
themeOptions={{
adminPortal: {
pages: {
users: {
fieldsProperties: {
tableColumns: {
lastSeen: {
appearance: 'hidden',
},
joinedAt: {
appearance: 'hidden',
}
}
}
}
}
}
}}
>
<App />
</FronteggProvider>