These are the main files you will make changes to:
File (in institutions/mxmobile/ ) |
Purpose |
---|---|
assets/mxmobile/<hd or sd> |
You can override an image by placing it in the sd or hd folder. To see all the default images available, view client/default/assets . |
config/themes/theme_light.json |
Your theme file is where you change many your app’s visuals, such as colors, fonts, buttons, native styles, components, and more. While you can create new themes, this one is the default. |
config/internal_configs.json |
Some screens (views) and features (collections of associated views) have internal configurations you can change that are specific to that view or feature. This is where you will override those default values. You will need to copy any internal configurations you want to make from client/default/config/internal_configs.json . |
config/configuration.yaml |
Some configurations affect multiple views or features. This is where you make those more global configurations and override those default values. You will need to copy any specific configurations you want to change from client/default/config/configuration.yaml . |
config/overrides.yaml |
Where you go to override some configurations and images. |
config/scaffold.json |
This is where you can switch out routes within the app to create your own custom build for views and components, instead of using our default ones. |
strings/master/en-US.json |
Where you can override the UI text in a key-value pair format. You can find all the keys and their values in client/default/strings/master/en-US.json . |
These are some additional files you can make changes to:
File (in institutions/mxmobile/ ) |
Purpose |
---|---|
assets/dashboard.json |
The dashboard view is filled with cards that give users previews of different features. This file allows you to customize the arrangement of those cards. |
assets/mxmobile/strings/accessibility_formatters.json |
Ensures some special text (phone numbers, acronyms, account numbers) is read out loud by the voice-over correctly. You will need to copy this file from client/default/assets/strings/accessibility_formatters.json . |
config/faqs.json |
Lists out the names of the keys in en-US.json to be displayed for the header, questions, and answers. You will need to copy this file from client/default/config/faqs.json . |
assets/mxmobile/password_constraints.json |
Where you can define the limitations for login passwords. You will need to copy this file from client/default/assets/password_constraints.json . |
assets/mxmobile/holidays.json |
Defines the bank holidays to exclude from the date selector in money movement features (Transfers, ACH Transfers, Cash Advance, and more). You will need to copy this file from client/default/assets/holidays.json . |
config/credit_reports_score_values.json |
Where you define a user’s credit score. If enabled, it will show their credit score out of 400 and indicate its quality (ex. “good”). You will need to copy this file from client/default/config/credit_reports_score_values.json . |
strings/translated |
Where you can translate the text appearing on your app’s UI, depending on the user’s device locale. You will need to copy these files from client/default/strings/translated . |
config/hyperion/ |
The files within this folder relate to the Hyperion System. This is a system used for search, as shown when using the search-bar on the dashboard view. You will need to copy these files from client/default/config/hyperion . |
Type | Default Use |
---|---|
BUTTON_DESTRUCTIVE |
For actions that could have destructive effects on the user’s data (delete, remove, etc.) |
BUTTON_PRIMARY |
For the principal call to action on the page. Primary buttons should only appear once per screen (not including the application header or in a modal dialog). |
BUTTON_INVERSE |
Available if needed to be the reverse style of a primary |
BUTTON_NEUTRAL |
For less prominent actions. Neutral buttons can be used in isolation or paired with a primary button when there are multiple calls to action. |
BUTTON_TRANSPARENT |
For less pronounced actions; often used alongside a primary button. |
BUTTON_LINK |
Similar to the transparent button links are used for less pronounced actions but take up less space. Use when space is tight and the action does not require a lot of attention. |
BUTTON_WARNING |
Not used by default. |
BUTTON_OUTLINE |
Not used by default. |
BUTTON_FILTER |
Use when space is limited. |
BUTTON_FILTER_ACTIVE |
Used to style an applied filter. |
Type | Default Use | Notes |
---|---|---|
UNKNOWN_COLOR |
Placeholder for a theme element to not get displayed or styled. | |
PRIMARY_100 |
Date picker selector for in-between multiple days and the login history bottom sheet. | |
PRIMARY_200 |
Not used by default. | Recommended hue to use for dark-mode themes. |
PRIMARY_300 |
Main call to actions, including primary buttons and text links. | |
PRIMARY_400 |
Not used by default. | Available for higher contrast. |
PRIMARY_500 |
Passcode key letter options. | Recommended darkest version of primary. |
WHITE |
Card background. | |
NEUTRAL_100 |
Off-white backgrounds, alternate card background, credit report history chart (hardcoded), date picker style off month background, toggle off style, and disabled state. | |
NEUTRAL_200 |
Disabled button backgrounds, unselected color on select list rows, search bar. | Most icon background colors default to this. For example, the bottom sheet close icon. |
NEUTRAL_300 |
Separator styles, row dividers, cross account history view background color. | |
NEUTRAL_400 |
Secondary disabled background, page indicators, pagination, neutral button and toggle borders, checkbox inactive and disabled. | |
NEUTRAL_500 |
Disabled text, inactive text, disabled icon. | |
NEUTRAL_600 |
Secondary text and input stroke, device list row, placeholder text in search bar, budget details, hyperion scrim, transaction filter utility row icon backgrounds. | |
NEUTRAL_700 |
Search bar, navigation row styles, device row styles, common shadow styles, common background color and editable, or sub text, slide to submit button, document viewer bottom sheet, account history view graphs, budget detail view graph, hyperion microphone icon, dashboard spending card income graph, spending view trends, settings text size view. | Contains many hard-coded values and affects many visuals within the app. |
NEUTRAL_800 |
Alternative text style (often seen in right options of utility rows), default active checkbox styles, scrims and overlays. | |
NEUTRAL_900 |
Main color style used for text. | |
SUCCESS_100 |
Not used by default. | |
SUCCESS_200 |
Sync bar background, hyperion onboarding panel, onboarding page, card enabled styles, networth graph line. | |
SUCCESS_300 |
Main green color used to communicate success (for example, a deposited transaction), success check marks. | |
SUCCESS_400 |
Not used by default. | |
SUCCESS_500 |
Not used by default. | |
WARNING_100 |
Not used by default. | |
WARNING_200 |
Warning sync bar background, flagged transactions (circle outline), password validation when it’s good, member list row error icon, remote deposit capture row, some message box styles, account edit alert row. | |
WARNING_300 |
Managed card pending state style, remote deposit failure, default warning button style, warning message box. | |
WARNING_400 |
Password validation when it’s fair. | |
WARNING_500 |
Not used by default. | |
ERROR_100 |
Not used by default. | |
ERROR_200 |
Not used by default. | |
ERROR_300 |
Main error message color, error sync background, error icons, card detail locked card state style, connection status error, error checkbox, urgent notification, input box border error. | |
ERROR_400 |
Not used by default. | |
ERROR_500 |
Not used by default. | |
CHART_1 |
Used to theme first data element on account history & merchant history charts (spending). | |
CHART_2 |
Used to theme second data element on account history chart (income or deposits). | |
CHART_3 |
Not used by default. | |
CHART_4 |
Not used by default. | |
CHART_5 |
Not used by default. | |
CHART_6 |
Not used by default. | |
CHART_7 |
Not used by default. | |
CHART_MONO_1 |
Not used by default. | |
CHART_MONO_2 |
Not used by default. | |
CHART_MONO_3 |
Not used by default. | |
CHART_MONO_4 |
Not used by default. | |
CHART_MONO_5 |
Not used by default. | |
CHART_MONO_6 |
Not used by default. | |
BUDGET_GREEN |
Bubble budgets. | Not recommended to change. |
BUDGET_YELLOW |
Bubble budgets. | Not recommended to change. |
BUDGET_RED |
Bubble budgets. | Not recommended to change. |
BUDGET_ARC_GREEN |
Bubble budgets. | Not recommended to change. |
BUDGET_ARC_YELLOW |
Bubble budgets. | Not recommended to change. |
BUDGET_ARC_RED |
Bubble budgets. | Not recommended to change. |
FICO_SCORE_POOR |
Not recommended to change. | |
FICO_SCORE_FAIR |
Not recommended to change. | |
FICO_SCORE_GOOD |
Not recommended to change. | |
FICO_SCORE_VERY_GOOD |
Not recommended to change. | |
FICO_SCORE_EXCEPTIONAL |
Not recommended to change. | |
ACCENT COLORS | There are 15 accent color types (for example, ACCENT_COLOR_1_100 ) that are not used by default. |
These types are open types to define additional colors. |
Type | Default Use | Notes |
---|---|---|
H1 |
Views with a card header to title the page. | |
H2 |
Main headline style. | |
H3 |
Sub section titles. | Typically seen on the dashboard cards |
PARAGRAPH |
Large wrapping text. | |
BODY |
The default size and style for all body copy. | |
BODY_BOLD |
The default emphasized font. | Typically used in buttons. |
PARAGRAPH_SMALL |
Small wrapping text. | |
SMALL |
Contextual text. | Often paired with BODY_BOLD or H3 . |
SMALL_BOLD |
Smaller emphasized font style. | |
X_SMALL |
Labels and contextual text when space is limited. | |
X_SMALL_BOLD |
Emphasized font style available for labels and other areas if space is limited. | |
TINY |
Non-essential labels where space is very limited. | |
TINY_BOLD |
Emphasized type in its smallest style. Used in the active state of a tab menu item, notification and alert badge type. | |
TINY_MONO_BOLD |
Transaction feed data row on transaction details. | |
ACCENT FONTS | Available to use for more than one kind of typeface, font, or style other than what has been defined in the defaults. | |
ZERO |
Available to set a style without it rendering on the front-end. |
Type | Description |
---|---|
BAR_GRAPH |
Not recommended to change. |
DARK_SCRIM |
Darkest overlay style, set to 225 by default, approx 75% opacity. |
MEDIUM_SCRIM |
50% opacity overlay typically used in combination with a modal or other area needing emphasis and depth. |
LIGHT_SCRIM |
Lightest overlay style to draw attention with depth. |
BUDGET_ARC_BACKGROUND |
Used only in bubble budgets to indicate usage status. Not recommended to change. |
HEADER |
Used in the navigation bar over top of the background image on secondary pages so that page titles are more legible. |
DISABLED_OPACITY |
Sets the default opacity for components in their disabled states. For instance, if a utility row is disabled, the entire component gets styled to be 150 opacity by default. |
HEAVY_CLICK_INDICATOR |
Not recommended to change. |
LIGHT_CLICK_INDICATOR |
Not recommended to change. |
HELP_POPUP_SCRIM |
Not recommended to change. |
FULL |
Fully opaque. |
CLEAR |
Fully transparent. |
Type | Default Use | Notes |
---|---|---|
STANDARD |
The standard text color. | |
PRIMARY |
Links, labels, and bolded text. | Usually a shade of the primary brand color. |
SECONDARY |
Subtitles. | |
HIGHLIGHT |
Text that’s displayed on a dark background. | Should be bright or white. |
DESTRUCTIVE |
Errors or destructive actions. | |
SUCCESS |
Successful actions. | |
DISABLE |
Disabled text. | |
GAINS |
Positive-type dollar amounts (could render as green). | |
LIABILITIES |
Negative-type dollar amounts (could render as red) based on context. | |
ACCENT |
Open space to define an additional text color. |
Helps the user access their account data and the details of their accounts.
This view takes in a Routing::GUID
which represents the guid of the account to display details for.
internal_configs.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
"account_detail_view": {
"show_electronic_documents": false,
"show_graph": true,
"show_transfer_button": true,
"show_remote_deposit_button": true,
"show_make_a_payment_button": false,
"show_statements": false,
"show_stop_checks": false,
"sliding_offset_height": 32,
"show_navbar_title": false,
"show_close_home_accounts": false,
"show_interest_percent": false,
"show_past_due_notification": false,
"show_advance_buttons": false,
"show_alert_management": false,
"show_card_controls": false
}
Name | Resolution | File |
---|---|---|
Refresh |
|
|
internal_configs.json
1
2
3
"account_detail_list": {
"graph_key_layout_is_horizontal": true
}
This view takes in a InstitutionListData
via a Routing::INSTITUTION_MODEL
.
The login screen has three sections and supports internal configurations for each:
internal_configs.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
"credential_login_view": {
"enable_multiple_login": false,
"logo_left_align": false,
"multiple_login_can_delete": true,
"multiple_login_can_set_preferred": true,
"multiple_login_maximum": 0,
"multiple_login_preferred_is_exclusive": true,
"show_biometric_login_confirmation": false,
"show_biometric_login_reminder": false,
"mask_username": true
},
"help_view": {
...,
"help_order_login_list": {
"type": "help_type",
"values": [
"FAQS",
"PRIVACY_STATEMENT",
"TERMS_AND_CONDITIONS",
"CLIENT_WEBSITE",
"SUPPORT_REQUEST",
"ROUTING_NUMBER"
]
},
"has_login_specific_order": true
},
"link_panel_view": {
...,
"panel_order_list": {
"type": "panel_type",
"values": [
"RESET_PASSWORD",
"FORGOT_USERNAME",
"NEED_LOGIN",
"PASSWORD_UNLOCK",
"BRANCH_LOCATOR",
"CALL_INSTITUTION",
"CLIENT_WEBSITE",
"MAKE_APPOINTMENT",
"HELP_AND_LEGAL"
]
}
}
institution_name
from institutions/mxmobile/config/overrides.yaml
)Name | Resolution | File |
---|---|---|
Top Logo |
|
|
The landing page after login/authentication is complete.
This view has a custom configuration system for enabling and disabling cards.
internal_configs.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
"dashboard_view": {
"has_sticky_header": true,
"show_extra_card_icons": false,
"mobo_type_enum": [
"TRANSFERS",
"DEPOSITS",
"PAYMENTS",
"ZELLE",
"OPEN_ACCOUNT",
"CREDIT_SCORE",
"DIGITAL_CURRENCY"
],
"mobo_order_list": {
"type": "mobo_type",
"values": [
"TRANSFERS",
"DEPOSITS",
"PAYMENTS"
]
}
},
"dashboard_tile_card_view": {
"show_card_header": false
},
"dashboard_accounts_card_view": {
"num_accounts": 3
},
"dashboard_list_card_view": {
"show_make_appointment": false,
"show_plugin_messenger": false,
"show_plugin_chat_button": false
}
Name | Resolution | File |
---|---|---|
Top Logo |
|
|
Credit Report Card FICO Logo |
|
|
Account’s Card External Aggregation Financial Institution Logos |
|
|
Internal Configs File
1
2
3
4
5
6
7
"remote_deposit": {
"show_bottom_navigation_menu": false,
"has_accessible_remote_deposit_capture": true,
"checkmate_sharpness_confidence": 0.9,
"checkmate_side_confidence_blurry": 0.9,
"checkmate_side_confidence_front_back": 0.8
}
The second tab containing the history of all the deposits that have been captured to date.
There are two supported styles for this:
You can only support one of these in app at a time. This is controlled by scaffolding.
This will apply regardless of which presenter you use.
Internal Configurations File
1
2
3
"remote_deposit_history_view": {
"show_account_name_and_number_remote_deposit_history": false
}
The default option (if no scaffolding changes are made) which uses a custom list based on remote deposit data. This shows the status of all remote deposits.
To use this view, you’ll need to update scaffolding to point to this presenter:
institutions/mxmobile/config/scaffold.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"app": {
"features": [
{
"name": "remote_deposit",
"actions": [
{
"name": "landing",
"presenters": [
{
"name": "history_presenter",
"class_name": "Screens::V5::RemoteDepositHistoryPresenter"
}
]
}
]
}
]
}
}
This updates the remote_deposit
feature’s landing
action’s second presenter, named history_presenter
with Screens::V5::RemoteDepositHistoryPresenter
instead of the default Screens::V5::RemoteDepositTransactionHistoryPresenter
.
If there have been no deposits to date, this history view will display a zero state.
The second option for the remote deposit history uses a transactions based list.
Refer to the transaction list component to find more information.
If there have been no credit transactions to date, this history view will display a zero state.
Name | Resolution | File |
---|---|---|
Chart Triangle |
|
|
Spotlight Toggle |
|
|
Used in the Camera View.
Used in the Form View.
Name | Asset Type | Resolution | File |
---|---|---|---|
NCUA Logo | Image |
|
|
Used in the Camera View.
Name | Asset Type | Resolution | File |
---|---|---|---|
Check Front | Image |
|
|
Check Back | Image |
|
|
Shows a user’s past transactions, their transaction details, and has a filter system used for searching.
The Transaction GUID for this transaction is passed in by a MX::Routing::GUID
.
The Enabled state of the merchant history is passed in by a MX::Routing::ADD_RESOURCE
.
internal_configs.json
1
2
3
4
5
6
7
"transaction_detail_view": {
"sliding_offset_height": 32,
"show_plugin_chat_button": false,
"show_navbar_title": false,
"show_feed_date": true,
"show_transaction_dispute": false
}
internal_configs.json
1
2
3
"transaction_list_view": {
"list_header_style": "SMALL"
}
The basic internal transfers feature, where users can move money between internal accounts.
Contains the transaction list component component.
Internal Configs File
1
2
3
4
5
6
7
8
9
10
11
12
"transfers": {
"enable_amount_options": false,
"allow_transfers_on_weekends": false,
"show_status_in_history_view": false,
"transfers_amount_character_max": 11,
"allow_transfers_on_holidays": false,
"show_edit_confirmation_modals": false,
"future_dated_transfer_month_limit": 0,
"has_cash_advance_fees": false,
"cash_advance_fee_percentage": 0,
"has_memo": false
}
The landing view for the basic transfers system, which can be navigated to through the menu, mobo card on the dashboard, or through a bottom navigation menu in some cases.
This view contains multiple sections that all live within the same view:
internal_configs.json
1
2
3
4
5
6
7
8
"transfer_landing_view": {
"transfers_amount_use_edit_attribute_bottom_sheet": true,
"show_plugin_chat_button": false
},
"transfer_create_view": {
"enable_amount_options": true,
"show_options_before_account_selection": true
}
This view takes in:
::Mdx::Transfers::Transfer
as a Routing::MODEL
which represents the transfer that will be displayed.ITransferDetailsView::State
as a Routing::STATE
which represents the state of the view.::Mdx::Transfers::TransferType
as a Routing::TRANSFER_TYPE
which represents the type of transfer being displayed.Internal Configurations File
1
2
3
4
5
6
7
8
9
10
11
"transfer_details_view": {
"can_edit_amount": true,
"can_edit_source_account": true,
"can_edit_destination_account": true,
"can_edit_memo": true,
"can_edit_post_on": true,
"show_edit_cancel": true,
"show_save_button": true,
"show_created_on_row": true,
"show_updated_on_row": true
}
internal_configs.json
1
2
3
"transfer_success_view": {
"show_account_balances": false
}