## Styling options The self-service (admin) portal consists of modules that you can offer your customers and users. Each module contains features for SaaS businesses. For instance, the modules include features for Profile, Privacy & Security, Account Details, Audit Logs, API Tokens, and more. Use this guide for extra flexibility within the self-service (admin) portal. You can decide which modules you would like your users to view or edit. ### Self-service (admin) portal as a full page Self-service (admin) portal by default opens as a modal, however, it's possible to change that and open it in full page mode. See the example below: ```js const themeOptions: FronteggThemeOptions = { adminPortal: { layout: { fullScreenMode: true } } } ``` br ### Customize tabs and fields For example, on the ‘Profile’ module you can decide whether to let the user view or edit the following fields - name, phone number, address, job title. If you haven't integrated the self-service (admin) portal into your application, please integrate it before. br Prerequisites @frontegg/react@5.0.12 @frontegg/angular@5.7.1 @frontegg/vue@2.0.11 @frontegg/nextjs@6.7.5 br This guide explains which modules can be customized and how to do it. In order to customize the appearance of the self-service (admin) portal modules, provide the _appearance option _to the admin box. **Choose one of the following options -** **Edit** - your users will be able to make changes and edit **View only** - your users will be able to view the settings you’ve updated in App settings but won’t be able to overwrite or edit your decisions **Hide** - your users won’t be able to view and access the tab / field **These are the available customizations by module:** ### Profile module **For the profile module, you can customize the following fields:** 1. Name - hide 2. Phone number - hide 3. Address - hide 4. Job title - hide Note: The interface is available by importing `ProfileFieldsProperties` from @frontegg/types. br Before customization, this is how the profile module looks like: ![login-style-1](/assets/admin-style-1.f0f33bc30a472a7d04ea1508f48b4cbe8b77dbc70eb2929c8cec7a35871554bc.2f355c9f.png) br Use customization in order to hide fields. This is how the code looks like: ```typescript const themeOptions: FronteggThemeOptions = { adminPortal: { pages: { profile: { fieldsProperties: { name: { appearance: 'hidden', }, phoneNumber: { appearance: 'hidden', }, address: { appearance: 'hidden', }, jobTitle: { appearance: 'hidden', }, }, }, }, }, } ``` br As you can see below, in this example we are hiding name, phone number, address and job title. Note that email field can’t be hidden. ![login-style-1](/assets/admin-style-2.c6e5f11d678d5c1e7ae05c922189c16c5fdb32ee90ad4b602a12dd5e094973c3.2f355c9f.png) ### Privacy & security module For the Privacy & Security module, you can hide the following fields: 1. Login sessions 2. MFA Important If you hide the MFA section you won’t allow your user to configure MFA for his own account The interface is available by importing `PrivacyFieldsProperties` from @frontegg/types. br Before customization, this is how the privacy and security module looks like: ![login-style-1](/assets/admin-style-3.d8ef748b6bec25a6ee09e6f01d6f96d979eb2bf9735b16a6900a27736ea755b5.2f355c9f.png) Now, let's customize its fields. For example, if you want to hide the MFA field: ```typescript const themeOptions: FronteggThemeOptions = { adminPortal: { pages: { privacy: { fieldsProperties: { mfa: { appearance: 'hidden', }, }, }, }, }, } ``` br The result: ![login-style-1](/assets/admin-style-4.bd8bc5170e58b0cae578ec72cbdd0c2c18e811cc48e346d90403318741d4a06a.2f355c9f.png) ### Account details module **For the account details module, you can customize the following fields:** 1. Company name - can be hidden or set as view only 2. Address - hide 3. Website - hide 4. Timezone - hide 5. Currency - hide Important By setting company field as view only, your users won’t be able to overwrite the company name and change it. br Note: The interface is available by importing `AccountFieldsProperties` from @frontegg/types. br Before customization, this is how the account details module looks like: ![login-style-1](/assets/admin-style-5.ffd322c5af5b6c80dcda74b72cba4c79cf461f68b2f116d17aa5ba445f4df98b.2f355c9f.png) Now, lets customize its fields: br ```typescript const themeOptions: FronteggThemeOptions = { adminPortal: { pages: { account: { fieldsProperties: { companyName: { appearance: 'viewOnly', }, address: { appearance: 'hidden', }, website: { appearance: 'hidden', }, timezone: { appearance: 'hidden', }, currency: { appearance: 'hidden', }, }, }, }, }, } ``` br Company name field is provided with “view only” mode, so the edit button will disappear. all of other fields are provided with hidden mode, so they are hidden also. ![login-style-1](/assets/admin-style-6.73937768a2a593b4d640ae36b78292f73952ee0c59e9c25e12126b8e1a762a7d.2f355c9f.png) ### Users module br The below configuration provides the option to hide various columns under the `Users` page in the self-service (admin) portal: ```typescript const themeOptions: FronteggThemeOptions = { { adminPortal: { pages: { users: { fieldsProperties: { tableColumns: { lastSeen: { appearance: 'hidden', }, joinedAt: { appearance: 'hidden', } } } } } } } } ``` br Prerequisites The above requires these versions: @frontegg/react@6.0.39 @frontegg/nextjs@8.0.20 @frontegg/vue@3.0.29 @frontegg/angular@6.27.0 br You can control which search options and table columns appear in the Self-Service Portal using the snippet below. By default, users are searchable by email, but if your application relies on other identifiers, you can hide the email field—or any other field—to match your preferred search logic. Note that at least one column must remain visible; if none are selected, the self-service portal will automatically fall back to the default columns. br ```typescript users: { searchFilterOptions: { email: { visibility: 'always' }, fullName: { visibility: 'always' }, username: { visibility: 'always' }, phoneNumber: { visibility: 'always' }, }, fieldsProperties: { tableColumns: { fullName: { visibility: 'always', isChecked: true }, email: { visibility: 'always', isChecked: true }, username: { visibility: 'always', isChecked: false }, phoneNumber: { visibility: 'always', isChecked: false }, roles: { visibility: 'always', isChecked: true }, groups: { visibility: 'always', isChecked: false }, managedBy: { visibility: 'always', isChecked: false }, status: { visibility: 'always', isChecked: true }, lastSeen: { visibility: 'always', isChecked: false }, }, }, } ``` br Prerequisites The above requires these versions: @frontegg/react@7.12.12 @frontegg/nextjs@9.2.12 @frontegg/vue@4.10.8 @frontegg/angular@7.17.9 ### Invite users modal In the invite users module, you can customize the form sections and the form fields' appearance and settings. **For the invite users module, you can customize the following sections and fields:** 1. Invite users by email - enable | disable - Full name - hide | edit + required | not required - Phone number - hide | edit + required | not required 1. Invite a user via link - In order to show/hide this section, you can configure this option via the Frontegg builder in the self-service (admin) portal users page settings. ![login-style-1](/assets/admin-style-7.ebe1e464b575ada0248513e4e379f0fdd0304ab01e4d04b625139908656262b3.2f355c9f.png) br Note: The interface is available by importing `InviteUserModalOptions` from @frontegg/types. br Before customization, this is how the invite user module looks like: br ![login-style-1](/assets/admin-style-8.9d78f762123818ac71b734b128af940d8ffff5e0f15a8e745895c940985047bd.2f355c9f.png) br An updated design and functionalities as below is available from latest SDK versions, see details [here](/ciam/guides/admin-portal/workspace-modules#user-invitations): br ![login-style-1](/assets/admin-style-11.b1f9cd0639874f390b7ac74bf117bb803e22c32a893ac2b40018b825b4ca25c8.2f355c9f.png) br You can hide the invite user by email section, following the code below ```typescript const themeOptions: FronteggThemeOptions = { adminPortal: { pages: { users: { inviteUserModal: { inviteByEmail: { enabled: false, }, }, }, }, }, } ``` br The result: ![login-style-1](/assets/admin-style-9.57818f6e8d0a15c17a30bdf927170b294dd2648def862243de75246ed8b8d14d.2f355c9f.png) To enable the option to invite users in bulk, you will need to set the `inviteBulk` field to true: ```typescript const themeOptions: FronteggThemeOptions = { adminPortal: { pages: { users: { inviteUserModal: { inviteByEmail: { enabled: true, inviteBulk: { enabled: true, }, }, }, }, }, }, } ``` br It will look as below: br ![login-style-1](/assets/admin-bulk.b2d6e6606530a2d2983dc9d13da0c844b14a89f13c957b1ca841ca6c1e82d0f1.2f355c9f.png) You can hide the Full name field in the form: ```typescript const themeOptions: FronteggThemeOptions = { adminPortal: { pages: { users: { inviteUserModal: { inviteByEmail: { enable: false, fieldsProperties: { name: { appearance: 'hidden', }, }, }, }, }, }, }, } ``` br This result: ![login-style-1](/assets/admin-style-10.43d8f0b747a98f654437beb045640eb12ab40fe3cf7a788052ba2358738348ad.2f355c9f.png) You can change the `Full name` validation or `username` to be optional or required, so the user will be able to submit the form without filling out these field: br ```typescript const themeOptions: FronteggThemeOptions = { adminPortal: { pages: { users: { inviteUserModal: { inviteByEmail: { enable: false, fieldsProperties: { name: { appearance: 'edit', settings: { validation: { required: false, }, }, }, username: { appearance: 'edit', settings: { validation: { required: true, } } } } } } } } } } ``` br