# **Midas Components - v24.1**

## **Introduction**

> **Midas Components -- 13**
>>Comprise of standard UI Components that are utilized in the preparation of the UI layer.

>**Midas Reusable Objects -- 12**
>>They are a set of customized components which have been prepared with a combination of different controls to cater to a business requirement.

## **Index**

**1 - Midas Components -- 13**

1. Dropdown
2. Multi Select Dropdown
3. Date Picker
4. Date Range Picker
5. Time Picker
6. Radio Button
7. Text Box
8. Text Area
9. Checkbox
10. Read-only Text
11. Image Upload
12. File Upload
13. Open Modal

**2 - Midas Reusable Objects -- 12**

1. Contact Account
2. Customer Account
3. Amount
4. Phone number
5. Email
6. Period picker
7. Number Field
8. FX Rate
9. Form
10. Filter with Advanced Search
11. Grid
12. Details Page

---

## **MC 1 | Dropdown**



**Purpose**

>Presents a list of options for users to select a single choice from.

**Design Tips**

>- Allows the user to filter data by typing in characters.
>- For Mandatory fields, if there’s only one value in the list, the value gets defaulted

**Key Attributes**

>- Type-ahead search functionality.

---

## **MC 2 | Multi Select Dropdown**




**Purpose**

>Multi Select Dropdown offers the user to select multiple items from the list of options.

**Design Tips**

>- Allows filtering of data using type-ahead search.
>- Allows selection and deselection of multiple values.
>- For Mandatory fields, if there’s only one value in the list, the value gets defaulted.

**Key Attributes**

>- Type-ahead search functionality
>- Displays all selected values.

---

## **MC 3 | Date Picker**


**Purpose**

>Date Picker enables the user to pick a date.

**Design Tips**

>- Allows a single date selection.
>- Allows the user to type in the date or select from a calendar.
>- Selection of a set of dates can be disabled as part of configuration.

**Key Attributes**

>- Calendar allows navigation on basis of years and months.

---

## **MC 4 | Date Range Picker**


**Purpose**

>Date Range Picker allows the selection of a range of dates.

**Design Tips**

>- Allows selection of a range of dates from a calendar.

>- Selection of a set of dates can be disabled as part of configuration.

**Key Attributes**

>- Calendar allows navigation on basis of years and months.

---

## **MC 5 | Time Picker**


**Purpose**

>Time Picker is a set of components that allows the user pick a time.

**Design Tips**

>- Allows the user to type in the time.
>- Allows configuration of time format of the input value.

**Key Attributes**

>- System displays a radio button for selection of AM/PM as per time format configuration.

---

## **MC 6 | Radio Button**




**Purpose**

>Radio Button is a set of options, only one of which can be selected at any time.

**Design Tips**

>- Allows the user to select a single option.
>- Values can be defaulted upon loading the component.
>- Selection of value's can be disabled as per configuration.

**Key Attributes**

>- Three styles of radio buttons are available for configuration (i.e. Standard Layout, Button Layout and Button Layout with space).

---

## **MC 7 | Text Box**


**Purpose**

>Text Box enables the user to input a short string of text or/and numbers.

**Design Tips**

>- Allows the user to enter up to a configurable limit of characters.
>- Allows a placeholder text to be displayed until the user has entered any character.

**Key Attributes**

>- Component allows input of a configurable set of characters.

---

## **MC 8 | Text Area**


**Purpose**

>Text Area enables the user to input a string of text or/and numbers longer than a Text Box.

**Design Tips**

>- Allows the user to enter up to a configurable limit of characters.
>- Allows a placeholder text to be displayed until the user has entered any character.

**Key Attributes**

>- Displays the count of remaining characters the user can input.

---

## **MC 9 | Checkbox**



**Purpose**

>Check Box is a set of options within which multiple options can be selected by the user.

**Design Tips**

>- Allows the user to select multiple options.
>- Values can be defaulted upon loading the component.
>- Selection of value/s can be disabled as per configuration .

**Key Attributes**

>- Displays a set of options to the user to select one or multiple values from.

---

## **MC 10 | Read-only Text**


**Purpose**

>Read only fields show user an information that can not be edited .

**Design Tips**

>- Displays a set of characters to the user.
>- Does not allow the user to edit displayed characters.

**Key Attributes**

>- Displays informational content which cannot be edited.

---

## **MC 11 | Image Upload**



**Purpose**

>Image Upload allows the user to upload and crop the image..

**Design Tips**

>- Allows the user to upload an image.
>- Allows configuration of aspect ratio for the image.

**Key Attributes**

>- Previews the image uploaded and allows cropping of image.

---

## **MC 12 | File Upload**



**Purpose**

>File Upload allows the user to browse the local system and upload a file.

**Design Tips**

>- Allows the user to upload a a file.
>- Allows configuration of size and format of the file.

**Key Attributes**

>- Allows file upload only from the local system.

---

## **MC 13 | Open Modal**



**Purpose**

>Open Modal is a pop up window which displays or captures a set of information to the user.

**Design Tips**

>- Displays a window with additional details.
>- Allows configuration of details to be displayed/captured.

**Key Attributes**

>- Window is displayed as a popup.

---

## **MRO 1 | Contact Account**




**Purpose**

> Contact Account is a set of components dedicated towards capturing and displaying information relating to Contact Accounts.

**Design Tips**

>- Allows the user to select a Contact Account from the list of registered contacts.
>- Allows the user to deselect and reselect after selection of a Contact Account.

**Key Attributes**

>- Dropdown allows type-ahead search.

---

## **MRO 2 | Customer Account**




**Purpose**

> Customer Account captures and displays information relating to Customer Accounts.

**Design Tips**

>- Allows the user to select a Customer Account.
>- Allows the user to deselect and reselect after selection of a Customer Account.

**Key Attributes**

>- Dropdown allows type-ahead search.

---

## **MRO 3 | Amount**


**Purpose**

> Amount is the component used for capturing Amount of the transaction..

**Design Tips**

>- Allows the user to enter amount of the transaction.
>- Allows configuration of number of decimal values to be accepted as input.

**Key Attributes**

>- Entered value will be right aligned.
>

---

## **MRO 4| Phone number**




**Purpose**

> Phone Number is custom component created with the intention of capturing phone number details.

**Design Tips**

>- Allows the user to enter the Phone Number.
>- Allows the user to capture multiple Phone Numbers..

**Key Attributes**

>- Standard validations of a Phone Number are performed on tab out of the field.

---

## **MRO 5 | Email**




**Purpose**

> Email field captures and displays the email information.

**Design Tips**

>- Allows the user to capture Email ID.
>- Allows the user to capture multiple Email ID's.

**Key Attributes**

>- Standard validations of an Email ID are performed while user enters details.

---

## **MRO 6 | Period Picker**




**Purpose**

> Period Picker allows the user to select a start and end date on the date picker to define the period.

**Design Tips**

>- Allows user to select a value from a pre-configured list of time periods.
>- Allows configuring various time periods to be displayed to the user.

**Key Attributes**

>- List contains "Custom" option for user to select the desired time period not covered under the list.

---

## **MRO 7 | Number Field**



**Purpose**

> Number field comprises of a textbox which only allows numeric inputs.

**Design Tips**

>- Allows the user to capture numeric values for respective fields.
>- Allows input of only numeric values.

**Key Attributes**

>- Component comprises of a textbox which only accepts numeric inputs.

---

## **MRO 8 | FX Rate**


**Purpose**

>FX rate displays the FX Rate used for cross-currency transaction.

**Design Tips**

>- Displays the FX Rate used for transaction.
>- Displays values with 6 decimal points.

**Key Attributes**

>- Configuration of decimal points is disabled.

---

## **MRO 9 | Form**


---


---


**Purpose**

>Form enables the user to capture details of a transaction or record.

**Design Tips**

>- Allows the user to capture details of a transaction or record.
>- Allows addition of multiple transactions or records.

**Key Attributes**

>- Can be configured in 3 styles
>>- Column Layout
>>- Column
>>- Column Layout.

>- Can be configured using some or all of the components stated in the previous slides.

>- Allows configuration of collapsable sections.

---

## **MRO 10 | Filter with Advanced Search**


**Purpose**

> Advanced Search allows user to filter data using customizable parameters.

**Design Tips**

>- Allows the user to filter data.
>- Values can be defaulted for filters as per configuration.
>- Allows the user to select the parameter on which they would like to filter data.

---

## **MRO 11 | Grid**



**Purpose**

> Grid displays desired data to the user in a tabular format.

**Design Tips**

>- Displays data to the user in a tabular format.
>- Allows the user to perform various actions on individual and multiple records.
>- Allows the user to configure the order and name of the columns to be displayed.

**Key Attributes**

>- Allows resizing of columns.
>-Columns can be frozen either to the left or the right as per configuration.
>- Values within each cell can be set to clip or wrap as per column configuration.

---

## **MRO 12 | Details Page**


---

**Purpose**

> Details Page displays all the details captured by the user for a specific transaction or record.

**Design Tips**

>- Displays the details of the selected transaction or record.
>- Allows user to perform actions based on their entitlements.

**Key Attributes**

>- All details will be displayed as Read-only Text.
>- Details are displayed in collapsable sections.
>- Allows the user to view transaction history.