{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":["CodeBlockCustom","CodeItem","Notification","LightboxImage"]},"type":"markdown"},"seo":{"title":"Styling options","siteUrl":"https://developers.frontegg.com/","llmstxt":{"title":"Frontegg Developer Documentation","description":"Authentication, authorization, and user management for Customer Identity, plus Agen for SaaS and Agen for Work. Guides, SDKs, and API references.","sections":[{"title":"Customer Identity (CIAM)","description":"Auth, SSO, SCIM, entitlements, and user management — guides, SDKs, and APIs.","includeFiles":["ciam/**/*.md"],"excludeFiles":[]},{"title":"Agen for SaaS","description":"Agentic access and authorization for SaaS products.","includeFiles":["agen-for-saas/**/*.md"],"excludeFiles":[]},{"title":"Agen for Work","description":"Agentic access and authorization for internal and workforce use.","includeFiles":["agen-for-work/**/*.md"],"excludeFiles":[]},{"title":"Platform","description":"Shared platform overview.","includeFiles":["platform/**/*.md"],"excludeFiles":[]}],"excludeFiles":["internal-docs/**","ciam/guides/env-settings/inject-client-ip.md","CLAUDE.md",".claude/**","**/images/**"],"hide":false}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling-options","__idx":0},"children":["Styling options"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The self-service portal consists of modules that you can offer your customers and users.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"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."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this guide for extra flexibility within the self-service portal. You can decide which modules you would like your users to view or edit."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"self-service-portal-as-a-full-page","__idx":1},"children":["self-service portal as a full page"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["self-service 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:"]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"const themeOptions: FronteggThemeOptions = {\n    adminPortal: {\n        layout: {\n            fullScreenMode: true\n        }\n    }\n}\n","lang":"js"},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/ciam/sdks/components/fronteggappoptions#themeoptions"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["themeOptions"]}]}," for more information."]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"customize-tabs-and-fields","__idx":2},"children":["Customize tabs and fields"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you haven't integrated the self-service portal into your application, please integrate it before. Read about how to add self-service portal into your application on the [Admin Portal Integration page.]"]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Notification","attributes":{"title":"Prerequisites","type":"attention"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["@frontegg/react@5.0.12",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"@frontegg/angular@5.7.1",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"@frontegg/vue@2.0.11",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"@frontegg/nextjs@6.7.5"]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This guide explains which modules can be customized and how to do it.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"In order to customize the appearance of the self-service portal modules, provide the _appearance option _to the admin box."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Choose one of the following options -"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Edit"]}," - your users will be able to make changes and edit",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["View only"]}," - your users will be able to view the settings you’ve updated in App settings but won’t be able to",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"overwrite or edit your decisions",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Hide"]}," - your users won’t be able to view and access the tab / field"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["These are the available customizations by module:"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"profile-module","__idx":3},"children":["Profile module"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["For the profile module, you can customize the following fields:"]}]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Name - hide"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Phone number - hide"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Address - hide"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Job title - hide"]}]},{"$$mdtype":"Tag","name":"Notification","attributes":{"title":"Note:","type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The interface is available by importing ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ProfileFieldsProperties"]}," from @frontegg/types."]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Before customization, this is how the profile module looks like:"," ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/admin-style-1.f0f33bc30a472a7d04ea1508f48b4cbe8b77dbc70eb2929c8cec7a35871554bc.7ed0131e.png","alt":"login-style-1"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use customization in order to hide field. This is how the code looks like:"," ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const themeOptions: FronteggThemeOptions = {\n    adminPortal: {\n        pages: {\n            profile: {\n                fieldsProperties: {\n                    name: {\n                        appearance: 'hidden'\n                    },\n                    phoneNumber: {\n                        appearance: 'hidden'\n                    },\n                    address: {\n                        appearance: 'hidden'\n                    },\n                    jobTitle: {\n                        appearance: 'hidden'\n                    },\n                },\n            },\n        },\n    },\n};\n","lang":"typescript"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["As you can see below, in this example we are hiding name, phone number, address and job title.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Note that email field can’t be hidden."]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/admin-style-2.c6e5f11d678d5c1e7ae05c922189c16c5fdb32ee90ad4b602a12dd5e094973c3.7ed0131e.png","alt":"login-style-1"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"privacy--security-module","__idx":4},"children":["Privacy & security module"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For the Privacy & Security module, you can hide the following fields:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Login sessions"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["MFA"]}]},{"$$mdtype":"Tag","name":"Notification","attributes":{"title":"Important","type":"attention"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you hide the MFA section you won’t allow your user to configure MFA for his own account",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"The interface is available by importing ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PrivacyFieldsProperties"]}," from @frontegg/types."]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Before customization, this is how the privacy and security module looks like:"]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/admin-style-3.d8ef748b6bec25a6ee09e6f01d6f96d979eb2bf9735b16a6900a27736ea755b5.7ed0131e.png","alt":"login-style-1"},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Now, let's customize its fields."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For example, if you want to hide the MFA field:"]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const themeOptions: FronteggThemeOptions = {\n    adminPortal: {\n        pages: {\n            privacy: {\n                fieldsProperties: {\n                    mfa: {\n                        appearance: 'hidden'\n                    },\n                },\n            },\n        },\n    },\n};\n","lang":"typescript"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The result:"]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/admin-style-4.bd8bc5170e58b0cae578ec72cbdd0c2c18e811cc48e346d90403318741d4a06a.7ed0131e.png","alt":"login-style-1"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"account-details-module","__idx":5},"children":["Account details module"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["For the account details module, you can customize the following fields:"]}]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Company name - can be hidden or set as view only"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Address - hide"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Website - hide"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Timezone - hide"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Currency - hide"]}]},{"$$mdtype":"Tag","name":"Notification","attributes":{"title":"Important","type":"attention"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["By setting company field as view only, your users won’t be able to overwrite the company name and change it."]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Notification","attributes":{"title":"Note:","type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The interface is available by importing ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["AccountFieldsProperties"]}," from @frontegg/types."]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"\nBefore customization, this is how the account details module looks like:\n",{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/admin-style-5.ffd322c5af5b6c80dcda74b72cba4c79cf461f68b2f116d17aa5ba445f4df98b.7ed0131e.png","alt":"login-style-1"},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Now, lets customize its fields:"]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const themeOptions: FronteggThemeOptions = {\n    adminPortal: {\n        pages: {\n            account: {\n                fieldsProperties: {\n                    companyName: {\n                        appearance: 'viewOnly',\n                    },\n                    address: {\n                        appearance: 'hidden',\n                    },\n                    website: {\n                        appearance: 'hidden',\n                    },\n                    timezone: {\n                        appearance: 'hidden',\n                    },\n                    currency: {\n                        appearance: 'hidden',\n                    },\n                },\n            },\n        },\n    },\n};\n","lang":"typescript"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Company name field is provided with “view only” mode, so the edit button will disappear.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"all of other fields are provided with hidden mode, so they are hidden also."]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/admin-style-6.73937768a2a593b4d640ae36b78292f73952ee0c59e9c25e12126b8e1a762a7d.7ed0131e.png","alt":"login-style-1"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"invite-users-modal","__idx":6},"children":["Invite users modal"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In the invite users module, you can customize the form sections and the form fields' appearance and settings."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["For the invite users module, you can customize the following sections and fields:"]}]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Invite users by email - enable | disable"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Full name - hide | edit + required | not required"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Phone number - hide | edit + required | not required"]}]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":2},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Invite a user via link -",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"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."]}]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/admin-style-7.ebe1e464b575ada0248513e4e379f0fdd0304ab01e4d04b625139908656262b3.7ed0131e.png","alt":"login-style-1"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Notification","attributes":{"title":"Note:","type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The interface is available by importing ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["InviteUserModalOptions"]}," from @frontegg/types."]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Before customization, this is how the invite user module looks like:"]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/admin-style-8.9d78f762123818ac71b734b128af940d8ffff5e0f15a8e745895c940985047bd.7ed0131e.png","alt":"login-style-1"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can hide the invite user by email section, following the code below"]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["App.tsx"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const themeOptions: FronteggThemeOptions = {\n    adminPortal: {\n        pages: {\n            users: {\n                inviteUserModal: {\n                    inviteByEmail: {\n                        enabled: false,\n                    }\n                }\n            }\n        },\n    },\n};\n","lang":"typescript"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The result:"]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/admin-style-9.ac933e028082a37fed7a26fd237dad74ed4b1cfb1b8b0ed48d79d40b45e616cc.7ed0131e.png","alt":"login-style-1"},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To enable the option to invite users in bulk, you will need to set the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["inviteBulk"]}," field to true:"]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["App.tsx"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const themeOptions: FronteggThemeOptions = {\n    adminPortal: {\n        pages: {\n            users: {\n                inviteUserModal: {\n                    inviteByEmail: {\n                        enabled: true,\n                        inviteBulk: {\n                            enabled: true\n                        }\n                    }\n                }\n            }\n        }\n    }\n};\n","lang":"typescript"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["It will look as below:"]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/admin-bulk.b2d6e6606530a2d2983dc9d13da0c844b14a89f13c957b1ca841ca6c1e82d0f1.7ed0131e.png","alt":"login-style-1"},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can hide the Full name field in the form:"]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["App.tsx"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const themeOptions: FronteggThemeOptions = {\n    adminPortal: {\n        pages: {\n            users: {\n                inviteUserModal: {\n                    inviteByEmail: {\n                        enable: false,\n                        fieldsProperties: {\n                            name: {\n                                appearance: 'hidden',\n                            }\n                        }\n                    }\n                }\n            }\n        }\n    }\n};\n","lang":"typescript"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This result:"]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/admin-style-10.43d8f0b747a98f654437beb045640eb12ab40fe3cf7a788052ba2358738348ad.7ed0131e.png","alt":"login-style-1"},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can change the Full name validation to be optional, so the user will be able to submit the form without filling out this field:"]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["App.tsx"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const themeOptions: FronteggThemeOptions = {\n    adminPortal: {\n        pages: {\n            users: {\n                inviteUserModal: {\n                    inviteByEmail: {\n                        enable: false,\n                        fieldsProperties: {\n                            name: {\n                                appearance: 'edit',\n                                settings: {\n                                    validation: {\n                                        required: false\n                                    }\n                                },\n                            }\n                        }\n                    }\n                }\n            }\n        },\n    }\n};\n","lang":"typescript"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"users-module","__idx":7},"children":["Users module"]},{"$$mdtype":"Tag","name":"Notification","attributes":{"title":"Prerequisites","type":"attention"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["@frontegg/react@6.0.39",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"@frontegg/nextjs@8.0.20",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"@frontegg/vue@3.0.29",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"@frontegg/angular@6.27.0\\"]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The below configuration provides the option to hide various columns under the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Users"]}," page in the self-service portal:"]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["App.tsx"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const themeOptions: FronteggThemeOptions = {\n    {\n        adminPortal: {\n            pages: {\n                users: {\n                    fieldsProperties: {\n                        tableColumns: {\n                            lastSeen: {\n                                appearance: 'hidden',\n                            },\n                            joinedAt: {\n                                appearance: 'hidden',\n                            }\n                        }\n                    }\n                }\n            }\n        }\n    }\n}\n","lang":"typescript"},"children":[]}]}]}]},"headings":[{"value":"Styling options","id":"styling-options","depth":2},{"value":"self-service portal as a full page","id":"self-service-portal-as-a-full-page","depth":3},{"value":"Customize tabs and fields","id":"customize-tabs-and-fields","depth":3},{"value":"Profile module","id":"profile-module","depth":3},{"value":"Privacy & security module","id":"privacy--security-module","depth":3},{"value":"Account details module","id":"account-details-module","depth":3},{"value":"Invite users modal","id":"invite-users-modal","depth":3},{"value":"Users module","id":"users-module","depth":3}],"frontmatter":{"excludeFromSearch":true,"seo":{"title":"Styling options"}},"lastModified":"2025-12-03T15:51:17.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/ciam/sdks/customizations/admin-box-old/styling","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}