Personalization of User Interface

Innovation Studio allows the modification of the look and feel of the interface. Such modifications include:

  • Customization of the login and the Digital Experience Portal (homepage).
  • Usage of a custom UI theme (colors and fonts)
  • Visual branding
  • Customization of dashboards.
HINT  
After the installation, the theme and branding are those of FintechOS.

Customization of the Login and Homepage

  1. Open Innovation Studio.
  2. From the main menu, click Admin > Settings.
  3. Upload your company logo, background image, and login background image. These modifications apply to the FintechOS Portal.

  4. Additionally, based on the background image to apply a color palette, click the checkbox Generate Portal Color Palette from background image true.

    Click Save and reload.

    Usage of a Custom UI Theme

  5. Click the section tab Custom Theme.
  6. Click Insert.
  7. Insert the name.
  8. Choose from the drop-down labeled Base Theme one of the three options: Flat/Material/Solid.
  9. Click the section tab Colors. Customize the 16 colors from the base theme previously selected by providing the desired color hexa values.
  10. In the Match the new state colors section, set the matching colors for different system notification messages.
  11. In the Generate the new palette colors section, select three colors of the 16 colors customized in the Add new colors section. Based on these three colors, a palette is generated to the new custom theme.
  12. Click the section tab Fonts.
  13. Select from the drop-down the font you wish to use. If a font is not there listed, insert it.

Editing Dashboards

  1. From the main menu, select Digital Experience > Digital Frontends > Dashboards. The Dashboards List page opens.
  2. Select one of the following dashboards that were configured for the solution:
    • FTOS_IB_BO_ClientReport
    • FTOS_IB_BO_Settings
    • FTOS_IB_BO_MainDashboard
    • FTOS_IB_FO_MainDashboard.

    Edit the existing widgets as explained here. Additionally, you can add or delete a security role from accessing the dashboard, add journeys and charts to it, and add a dashboard on a portal profile.

Portal Profiles

  1. From the main menu, select Digital Experience > Digital Frontends > Portal Profiles. The Portal Profiles List page opens.
  2. Select one of the following profiles that were configured for the solution:
    • FTOS_IB_BackOfficePortal
    • FTOS_IB_EndUserPortal

For each you can:

  • choose your company logo on the portal pages by adding a custom logo file
  • choose your background image and login background image by adding the desired image file(s)
  • check the Use Full Width Forms (the forms displayed in the portal to cover the full width of the screen)
  • add menu items on portal profile
  • add dashboards.

Creating a new style sheet for Online User Enrolment Request and Online User Migration

These two processes are B2C environment for un-autheticated users.

From the menu, click Advanced > Style Sheets. The Style Sheets List page appears.

At the top-right corner of the page, click the Insert icon. The Add Style Sheet page appears.

  • FTOS_IB_FO_CustomForm
  • FTOS_IB_CustomForm_FTOS_DFP_OTP
  • FTOS_IB_CustoCSS_BO
  • FTOS_IB_FO_DashboardWidgets
  • FTOS_IB_SignEngRule_AdminRules_Custom
  • FTOS_IB_BO_Reports
  • FTOS_IB_ChangePassword
  • CustomForm_FTOS_DFP_OTP
  • FTOS_IB_Payment
  • FTOS_IB_Search
  • FTOS_IB_FO_Payment
  • FTOS_IB_CustomComponents.

Add your own code CSS and add a suggestive name to it or modify the existing ones listed above.