1 of 2

Customization

Customizing UIKit v4 with config file

In Amity UIKit 4.0, customization is a pivotal aspect, allowing for extensive personalization across UI elements, components, and pages. Understanding the hierarchy and role of each of these entities is crucial for effectively utilizing the UIKit's capabilities.

Understanding Elements, Components, and Pages

UI Elements:

Definition: The fundamental building blocks of the user interface.
Characteristics: Atomic views constitute the most basic UI elements, offering essential interactivity and visual elements but often requiring additional structure to fulfill complete business use cases.
Example: A button or an individual text field.

Components:

Definition: Combinations of UI elements that serve a specific function.
Types: Divided into Presentational and Controller components.
- Presentational Components: Direct renderers, providing straightforward rendering capabilities. They offer high flexibility and are foundational for Controller components.
- Controller Components: Handle complex logic and are pivotal in supporting various business use cases. For example, FeedList or PostView components.
Customization: Both types of components offer diverse customization opportunities, from visual appearance to functional behavior.

Customization Options

Feature Settings:

Scope: Global level.
Purpose: Configure business-specific settings.
Example: Allow or restrict certain types of posts or messages.

Theme Settings:

Scope: Global level.
Purpose: Define the visual appearance of UI elements uniformly.
Example: Set primary and secondary colors, font family.

Element Customization:

Scope: Local level, per element.
Purpose: Configure individual UI elements according to specific requirements.
Limitation: Does not include customization of internal views of an element.

Internal View Customization:

Scope: Local level, specific to Controller components.
Purpose: Customize internal views within Controller components.
Example: Altering cells within ConversationList or modifying views in PostView.

Event-Driven API: Allows for maximum adaptability in crafting user journeys, particularly suited for simpler UI scenarios like standalone views.
UIKit Managed Navigation: For more complex UI scenarios, such as pages, the framework autonomously manages flow, navigation, and transitions, leveraging common business logic assumptions.

Customization Basics

Configuration file

Our UIKit v4 supports customization in a single place by modifying a config.json file in related UIKit repository. This configuration file includes all necessary data to customize the appearance of each pages, components and elements that we allow to do customization.

Global Theme

Currently we only supports light_theme, you can modify primary_color or secondary_color for app theme.

Configuration ID of Page, Component and Element

We supports three different levels - Page, Component and Element. The format is like page_id/component_id/element_id.

Page ID - We use post suffix and placed at first, it will looks like camera_page/*/*

Component ID - We use component suffix and placed at middle, it will looks like */comment_component/*

Element ID - We use no suffix and placed at last, it will looks like */*/close_button

Customizing Page

You can override Global Theme for a specific page with desired value like below

Allowed Page IDs

These are the available Page IDs

Customizing Component

You can also override Global Theme for a specific component with desired value like below

Allowed Component IDs

These are the available Component IDs

Customizing Element

You can specify background_color for an element, and icon if that element has image icon.

Allowed Component IDs

These are the available Component IDs

Excluding page, component or element

You can exclude UI elements by specifying its config id in excludes in configuration file.

Example: Excluding aspect ratio button from Story Draft page

Customization

Customizing UIKit v4 with config file

Understanding Elements, Components, and Pages

UI Elements:

Definition: The fundamental building blocks of the user interface.
Characteristics: Atomic views constitute the most basic UI elements, offering essential interactivity and visual elements but often requiring additional structure to fulfill complete business use cases.
Example: A button or an individual text field.

Components:

Definition: Combinations of UI elements that serve a specific function.
Types: Divided into Presentational and Controller components.
- Presentational Components: Direct renderers, providing straightforward rendering capabilities. They offer high flexibility and are foundational for Controller components.
- Controller Components: Handle complex logic and are pivotal in supporting various business use cases. For example, FeedList or PostView components.
Customization: Both types of components offer diverse customization opportunities, from visual appearance to functional behavior.

Customization Options

Feature Settings:

Scope: Global level.
Purpose: Configure business-specific settings.
Example: Allow or restrict certain types of posts or messages.

Theme Settings:

Scope: Global level.
Purpose: Define the visual appearance of UI elements uniformly.
Example: Set primary and secondary colors, font family.

Element Customization:

Scope: Local level, per element.
Purpose: Configure individual UI elements according to specific requirements.
Limitation: Does not include customization of internal views of an element.

Internal View Customization:

Scope: Local level, specific to Controller components.
Purpose: Customize internal views within Controller components.
Example: Altering cells within ConversationList or modifying views in PostView.

Event-Driven API: Allows for maximum adaptability in crafting user journeys, particularly suited for simpler UI scenarios like standalone views.
UIKit Managed Navigation: For more complex UI scenarios, such as pages, the framework autonomously manages flow, navigation, and transitions, leveraging common business logic assumptions.

Customization Basics

Configuration file

Global Theme

Currently we only supports light_theme, you can modify primary_color or secondary_color for app theme.

"global_theme": {
  "light_theme": {
    "primary_color": "#FFFFFF",
    "secondary_color": "#AB1234"
  }
}

Configuration ID of Page, Component and Element

We supports three different levels - Page, Component and Element. The format is like page_id/component_id/element_id.

Page ID - We use post suffix and placed at first, it will looks like camera_page/*/*

Component ID - We use component suffix and placed at middle, it will looks like */comment_component/*

Element ID - We use no suffix and placed at last, it will looks like */*/close_button

Customizing Page

You can override Global Theme for a specific page with desired value like below

"camera_page/*/*": {
  "page_theme": {
    "light_theme": {
      "primary_color": "#000000",
      "secondary_color": "#123456"
    }
  }
}

Allowed Page IDs

These are the available Page IDs

"select_target_page/*/*"
"camera_page/*/*"
"creat_story_page/*/*"
"story_page/*/*"

Customizing Component

You can also override Global Theme for a specific component with desired value like below

"*/edit_comment_component/*": {
  "component_theme": {
    "light_theme": {
      "primary_color": "#1D1234",
      "secondary_color": "#AB1234"
    }
  }
}

Allowed Component IDs

These are the available Component IDs

"*/edit_comment_component/*"
"*/comment_tray_component/*"
"*/story_tab_component/*"

Customizing Element

You can specify background_color for an element, and icon if that element has image icon.

"create_story_page/*/aspect_ratio_button": {
    "aspect_ratio_icon": "aspect_ratio.png",
    "background_color": "#80000000"
}

Allowed Component IDs

These are the available Component IDs

"select_target_page/*/back_button"
"camera_page/*/close_button"
"create_story_page/*/back_button"
"create_story_page/*/aspect_ratio_button"
"create_story_page/*/story_hyperlink_button"
"create_story_page/*/hyper_link"
"create_story_page/*/share_story_button"
"story_page/*/progress_bar"
"story_page/*/overflow_menu"
"story_page/*/close_button"
"story_page/*/story_impression_button"
"story_page/*/story_comment_button"
"story_page/*/story_reaction_button"
"story_page/*/create_new_story_button"
"story_page/*/speaker_button"
"*/edit_comment_component/cancel_button"
"*/edit_comment_component/save_button"
"*/hyper_link_config_component/*"
"*/hyper_link_config_component/done_button"
"*/hyper_link_config_component/cancel_button"
"*/story_tab_component/story_ring"
"*/story_tab_component/create_new_story_button"
"*/*/close_button"

Excluding page, component or element

You can exclude UI elements by specifying its config id in excludes in configuration file.

Example: Excluding aspect ratio button from Story Draft page

"excludes": [
    "create_story_page/*/aspect_ratio_button"
]

{
  "global_theme": {
    "light_theme": {
      "primary_color": "#FFFFFF",
      "secondary_color": "#AB1234"
    }
  },
  "excludes": [
  ],
  "customizations": {
    "select_target_page/*/*": {
      "page_theme": {
        "light_theme": {
          "primary_color": "#1D1234",
          "secondary_color": "#AB1234"
        }
      },
      "title": "Share to"
    },
    "select_target_page/*/back_button": {
      "back_icon": "back.png"
    },
    "camera_page/*/*": {
      "resolution": "720p",
      "page_theme": {
        "light_theme": {
          "primary_color": "#000000",
          "secondary_color": "#AB1234"
        }
      }
    },
    "camera_page/*/close_button": {
      "close_icon": "close.png",
      "background_color": "#80000000"
    },
    "create_story_page/*/*": {},
    "create_story_page/*/back_button": {
      "back_icon": "back.png",
      "background_color": "#80000000"
    },
    "create_story_page/*/aspect_ratio_button": {
      "aspect_ratio_icon": "aspect_ratio.png",
      "background_color": "#80000000"
    },
    "create_story_page/*/story_hyperlink_button": {
      "hyperlink_button_icon": "hyperlink_button.png",
      "background_color": "#80000000"
    },
    "create_story_page/*/hyper_link": {
      "hyper_link_icon": "hyper_link.png",
      "background_color": "#80000000"
    },
    "create_story_page/*/share_story_button": {
      "share_icon": "share_story_button.png",
      "background_color": "#FFFFFF",
      "hide_avatar": false
    },
    "story_page/*/*": {},
    "story_page/*/progress_bar": {
      "progress_color": "#FFFFFF",
      "background_color": "#50FFFFFF"
    },
    "story_page/*/overflow_menu": {
      "overflow_menu_icon": "threeDot.png"
    },
    "story_page/*/close_button": {
      "close_icon": "close.png"
    },
    "story_page/*/story_impression_button": {
      "impression_icon": "impressionIcon.png"
    },
    "story_page/*/story_comment_button": {
      "comment_icon": "comment.png",
      "background_color": "#1234DD"
    },
    "story_page/*/story_reaction_button": {
      "reaction_icon": "like.png",
      "background_color": "#1243EE"
    },
    "story_page/*/create_new_story_button": {
      "create_new_story_icon": "plus.png",
      "background_color": "#1243EE"
    },
    "story_page/*/speaker_button": {
      "mute_icon": "mute.png",
      "unmute_icon": "unmute.png",
      "background_color": "#1243EE"
    },
    "*/edit_comment_component/*": {
      "component_theme": {
        "light_theme": {
          "primary_color": "#1D1234",
          "secondary_color": "#AB1234"
        }
      }
    },
    "*/edit_comment_component/cancel_button": {
      "cancel_icon": "",
      "cancel_button_text": "cancel",
      "background_color": "#1243EE"
    },
    "*/edit_comment_component/save_button": {
      "save_icon": "",
      "save_button_text": "Save",
      "background_color": "#1243EE"
    },
    "*/hyper_link_config_component/*": {
      "component_theme": {
        "light_theme": {
          "primary_color": "#1D1234",
          "secondary_color": "#AB1234"
        }
      }
    },
    "*/hyper_link_config_component/done_button": {
      "done_icon": "",
      "done_button_text": "Done",
      "background_color": "#1243EE"
    },
    "*/hyper_link_config_component/cancel_button": {
      "cancel_icon": "",
      "cancel_button_text": "Cancel"
    },
    "*/comment_tray_component/*": {
      "component_theme": {
        "light_theme": {
          "primary_color": "#1D1234",
          "secondary_color": "#AB1234"
        }
      }
    },
    "*/story_tab_component/*": {
    },
    "*/story_tab_component/story_ring": {
      "progress_color": [
        "#339AF9",
        "#78FA58"
      ],
      "background_color": [
        "#EBECEF"
      ]
    },
    "*/story_tab_component/create_new_story_button": {
      "create_new_story_icon": "plus.png",
      "background_color": "#1243EE"
    },
    "*/*/close_button": {
      "close_icon": "close.png"
    }
  }
}

Customization

Understanding Elements, Components, and Pages

UI Elements:

Components:

Pages:

Customization Options

Feature Settings:

Theme Settings:

Element Customization:

Internal View Customization:

Event-Driven API and Navigation Management

Customization Basics

Configuration file

Global Theme

Configuration ID of Page, Component and Element

Customizing Page

Allowed Page IDs

Customizing Component

Allowed Component IDs

Customizing Element

Allowed Component IDs

Excluding page, component or element

Customization

Understanding Elements, Components, and Pages

UI Elements:

Components:

Pages:

Customization Options

Feature Settings:

Theme Settings:

Element Customization:

Internal View Customization:

Event-Driven API and Navigation Management

Customization Basics

Configuration file

Global Theme

Configuration ID of Page, Component and Element

Customizing Page

Allowed Page IDs

Customizing Component

Allowed Component IDs

Customizing Element

Allowed Component IDs

Excluding page, component or element