Display Style and SSO

The system provides a DynamicTheme object, allowing users to customize and extend the display style of the front-end interface without modifying the front-end code. Through DynamicTheme, users can:

• Upload and apply custom Logo, small Logo, Favicon, and login background images and other branding elements
• Inject additional CSS styles to override or extend the system's default styles
• Configure the enabling logic for Single Sign-On (SSO) functionality

This object contains the following fields related to interface display:

Field	Description
css	Used to define additional CSS style rules that will be applied when the page loads.
logo	Logo icon used for the login interface and when the left menu is expanded.
squareLogo	Small square logo icon used when the left menu is collapsed.
favicon	Website icon displayed on browser tabs for all pages.
backgroundImage	Background image used for the login interface.
ssoEnableLogic	A JavaScript code snippet used to determine whether to enable Single Sign-On (SSO) in the frontend.

After creating a DynamicTheme object, log in with a user that has developer permissions, select the record, and execute the Active DynamicTheme Action to make it effective.

Only one activated DynamicTheme object can be effective at a time. When a DynamicTheme becomes effective, the system automatically marks all other DynamicTheme objects as ineffective.

The system provides independent CSS selectors for each field in every form of each type of domain model. Therefore, users can customize the style of each field in the form through CSS customization. It's even possible to design visual effects that are completely different from the system default.

This flexibility allows users to personalize forms according to their brand image and design requirements, thereby enhancing the overall aesthetics and user experience of the interface.

Form CSS Selector Description

As shown in the table below, different form types in the system correspond to different CSS selectors.

Form Type	CSS Selector
Update	.edit-modal-wrap .edit-<domainName>-modal-wrap edit-modal edit-<domainName>-model
Read-only Details Page	Update form's CSS selector followed by .readonly-form
Create	.create-modal-wrap .create-<domainName>-modal-wrap .create-modal create-<domainName>-model
List	list-table-container ${tableModeState}-table-container list-<domainName>-<tableModeState>-table-container

• <domainName> is the name of the domain model, such as User, Role, Permission, etc.
• <tableModeState> is the state of the table, with options including:

export type TableMode = "detail" | "finder" | "detail-drawer" | "simple-list" | "card-list" | "table-list";

Field CSS Selector Description

The CSS selector bound to specific fields is ant-form-item form-field-type-<fieldType> form-item-<fieldName>.

The scope, from largest to smallest, applies to all fields in the entire form, fields of a certain type, and fields with a certain name.

• <fieldType> is the type of the field, with options as follows:

export type ColumnType = "id" | "string" | "text" | "integer" | "decimal" |
  "currency" | "percentage" | "datetime" | "date" | "boolean" | "tags" |
  "df_tags" | "df_multiple" | "df_single" | "df_radio" | "df_checkbox" |
  "object" | "code" | "httpMethod" | "roles" | "zz-client-action" | "document" |
  "array" | "int" | "cronExpression" | "staticField" | "updatedIds" |
  "stacktrace" | "password" | "series" | "lineChart" | "long" | "multiple" |
  "json" | "object_multiple" | "markdown" | "objectIds" | EnumTypes | "file" | "image" |
  "treeSelect" | "arrayDetail" | "ratings" | "tech_muyan_enterprisewiki_contract_Statistic" |
  "comments" | "groupedGrandChild" | "url" | "subTable";

• <fieldName> is the name of the field, such as name, description, email, etc.