How can I customize Admin portal? – Frontegg

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.

Here is how you can open in full screen mode instead

const themeOptions = {
  adminPortal: {
    layout: {
      fullScreenMode: true
    }
  }
};

(These are the only 2 supported modes)

Set visibility for each tab in the Admin Portal

You can control what tabs are visible \ hidden in the Frontegg Portal

In this example:

1. We set a custom permission for the Privacy & Security tab, so only users that have a role with the 'my-great-permission-2' permission will be allowed to see this tab.

If you set it to [] then it will be visible for all users.

2. We hide the SSO tab for everyone by passing visibility: "hidden"

const 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"
    }
  }
}

Then you need to pass it to the app. If you’re on React then you add metadata to the FronteggProvider:

<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>