Profile Settings

Use the feature to manage various settings of your profile.

Menu path:

• Web Channel: Click Profile Picture to navigate to profile settings page.
  Alternatively, Navigate Side Menu > Settings > Profile Settings. On the Settings screen, click to expand Profile Settings. By default, the app displays the Personal Details section.
• Mobile Native: Menu > Settings > Profile Settings.

As a part of Multi-Entity, the Service Requests dashboard captures the actions(add, edit, and delete) performed in profile settings. The SRMS requests are captured with respect to entity selection. For example, if the user has updated the primary phone number in Entity-1, the same request will not appear in Entity-2. In the same way, the actions performed are unique to the same entity.

UX Overview

You can add or modify any of the following details. Few features are not applicable for Mobile Native.

• Personal Details
• Phone Number
• Email ID
• Address
• Password
• Language
• e-Banking Access

Business Process Diagram - Manage Profile

Personal Details

Use the feature add or modify your personal details.

Under the Profile Settings section, click Profile.

The app displays the Personal Details section, with your name, date of birth, social security number (SSN), and profile picture. The app displays only the last four digits of your SSN and masks the other digits.

The Personal Details of the user vary as per the Entity selection. Each entity can have its name, date of birth, social security number (SSN), and profile picture. The profile details are displayed per the entity selection if the user switches to another entity.

Add Photo

Click Add Photo to add your profile picture. You can browse for a picture from your local system and upload it.

The photo of the user vary as per the Entity selection. Each entity can have unique profile picture. If user switches to other entity, the photo displayed as per the selected entity.

Edit or Delete Photo

If your profile picture is already existing and you want to modify the image, click Edit.

The uploaded profile picture is stored in the Temenos Digital database.

You can delete the uploaded profile picture by clicking Delete. The following pop-up is displayed.

Limitations

• The maximum size of the image to be uploaded is 2 MB.
• If you upload an image greater than the maximum size allowed, an error is displayed and you must re-upload the image.
• The image will be cropped as per the design (circular) to display.
• If an image is already uploaded and if you re-upload another image, the existing image will be replaced with the new image.
• This feature can be configured at the bank level to enable/disable the ability to upload the profile picture.
• If no image is uploaded, a default image is displayed.
• Recommended file formats to upload the image is .png and .jpg. If you upload an image other than the recommended file formats, the following error message is displayed. You must re-upload the image.

Phone Number

Use the feature to add a new phone number or modify the services linked to a saved phone number.

The phone number of the user varies as per the Entity selection. Each entity can have its own primary and secondary phone numbers. The phone numbers are displayed per the entity selection if the user switches to another entity.

Under the Profile Settings section, click Phone. The app displays the Phone Number section, with the details of your previously added phone numbers. The app indicates the phone number which you have selected as your primary phone number. The app may show more than one primary number. The app receives these details from Transact.

Limitations
You cannot add or edit or delete primary phone number.

Add a New Phone Number

Click Add New Phone Number. The app displays the Add phone Number screen.

You must specify the following details:

1. Type. Select the type of phone number, whether mobile, work phone, or home phone.
2. Phone Number. Type the phone with an extension, if any.
3. Select the option if you want to save the number as your primary phone number. If you had selected another phone number as primary, the app displays a message that choosing the new phone number as primary will replace the earlier selection.
4. Click the check box Mark for alert communication to select the phone number for receiving alerts.
5. Click Save. The app adds the new phone number and displays it on the Phone Number screen
   

   You can add up to three phone numbers. If you have already added three phone numbers, the Add New Phone Number button is disabled.
   

Edit a Phone Number

The app displays the Phone Number Detail screen, with various details that you had previously saved for the phone number.

Click Edit. The app displays the Edit Phone Number screen.
You can modify the details of all the fields: Extension code, Type, Phone Number.

In addition, you can choose to select the phone number as your primary phone number. If you had selected another phone number as primary, the app displays a message that choosing the new phone number as primary will replace the earlier selection. You can choose to mark the phone number for alert communication.

Click Save. The app updates the phone number details and displays it on the Phone Number screen.

Delete Phone Number

You can delete a selected phone number if you do not wish to have the phone number associated to your account. The primary phone number cannot be deleted.
In order to delete a primary number, make the other number as primary. This enables edit and delete action for the earlier primary number.

Click Delete to delete the phone number. A pop-up is displayed asking for a confirmation.

Email ID

Use the feature to add a new email ID. You can also modify the details of a saved email ID or delete an email ID.

Under the Profile Settings section, click E-Mail. The app displays the Email section, with the details of your previously added email IDs. The app indicates the email ID which you have selected as your primary email address. You can only select one email ID as primary.

The email ID of the user varies as per the Entity selection. Each entity can have its email ID. The email ID is displayed per the entity selection if the user switches to another entity.

Limitations

• You cannot add or edit or delete primary email.

Add a new Email ID

Click Add New Email. The app displays the Add New Email screen.

To add a new email ID, follow these steps:

1. Type the email address in the Email ID field.
2. Select the option if you want to choose the email ID as your primary email address. If you had selected another email ID as primary, the app displays a message that choosing the new email ID as primary will replace the earlier selection.
3. Click Add. The app adds the new email ID and displays it on the Email screen.

   You can add up to three email ids. If you have already added three email IDs, the Add email ID button is disabled.

Edit an Email ID

For the required email ID, click Edit. The app displays the Edit Email screen.

Modify the email address in the Email ID field.

Select the option if you want to choose the email ID as your primary email address. If you had selected another email ID as primary, the app displays a message that choosing the new email ID as primary will replace the earlier selection.

Click Save. The app updates the email ID details and displays it on the Email screen.

Delete an Email ID

For the required email ID, click Delete. The app displays a pop-up message asking if you want to delete the email ID. You cannot delete a primary email ID.

Click Yes. The app deletes the email ID and removes it from the Email screen.

Address

Use the feature to manage primary and secondary addresses.

Menu path: On the Profile Settings section, click Address. The application displays the Address section on the right pane with the details of the previously added Home and Work addresses with the following details.

• Home and Work address details.
• A note to denote the primary address.
• Contextual menu with quick actions - Edit and Delete. A user with appropriate permission only can edit or delete an address. While the Edit action is applicable for primary and secondary addresses, the Delete action is available only for secondary addresses.
• Add New Address: Click to add an address. The button is not displayed if a maximum of three addresses are already added.

The address of the user varies as per the Entity selection. Each entity can have its own primary and secondary address. The addresses are displayed per the entity selection if the user switches to another entity.

A user with appropriate permission can manage primary and secondary addresses. Note that a maximum of three addresses only can be added.

• Primary address
  • Add or edit the address.
  • Change the secondary address to primary address.
  • To access the features, a user must have the following permission defined in Spotlight:
    • Feature: Profile Settings
    • Action: Update Primary Address
• Secondary address
  • Add or edit the address.
  • Delete the address.
  • To access the features, a user must have the following permission defined in Spotlight:
    • Feature: Profile Settings
    • Action: View Profile settings, Update Profile settings

Add New Address

Use the feature to add an address. A user can add more than one address to the profile and select a primary or preferred address as default delivery address. A maximum of three addresses only can be added in the application. The application does not display the Add New Address button if the user has already added a maximum of three addresses.

To add an address, follow these steps:

1. Click Add New Address. The application displays the Add New Address screen.
2. Select the address Type from the list. The options are Work and Home. It is mandatory to select an address type.
3. Enter the details in Address Line 1. It is mandatory.
4. Enter the details in Address Line 2. It is optional.
5. Select the Country from the list. It is mandatory.
6. Select the corresponding State from the list. It is mandatory.
7. Enter the City. It is mandatory.
8. Enter the Zip Code of the city. It is mandatory.
9. Save as Primary Communication: Select the check box to choose the address as the primary or preferred address. If another address is already selected as primary, the application displays a message that choosing the new address as the preferred address will replace the previously added primary address. The check box is not displayed if the user does not have the Update Primary Address permission.
10. Supporting Documents: This section is displayed only for a primary address if the user wants to request change of primary address by uploading documents as address proof.
    
    1. From the Type of Proof list, select the supporting document such as Passport, Driver's license, Tax ID, National ID, and Utility Bill.
    2. Click Attach Documents.
    3. Select the document to attach.
    4. Do as required:
       1. Click Add More to attach multiple documents.
       2. Click X to remove an uploaded document.
          
    • Validations
      • Adding supporting documents is optional while adding a primary address.
      • A maximum of five attachments are allowed. If the user uploads more than 5 documents, the application displays an appropriate message - Exceeded Maximum No. of Files.
      • Only PDF and JPEG formats are supported. If the user uploads the document with file type other than PDF and JPEG, the application displays an appropriate message - Invalid File Type.
      • The individual file size cannot exceed 2 MB. If the user uploads the document with file size more than 2 MB, the application displays an appropriate message - File Exceeds Maximum Size.
    • The application stores the uploaded documents in the Document Microservice against the respective document ID.
11. Click Submit. 
    
12. Acknowledgment: The application displays an acknowledgment screen with Reference ID, address details, and supported documents only in case of primary address change. Click Done to close the acknowledgment screen and navigate back to the Address section. The application adds the new address and displays it in the Address section.
13. Post submitting the request, the application displays the address change request and the appropriate request status on the Service Requests dashboard. In case of primary address change, the request type is Update Primary Address and for non-primary address change, the request type is Update Address.

Edit an Address

Use the feature to edit a primary or a secondary address. A user with the required permission only can edit an address.

To edit an address, follow these steps:

1. On the quick actions of the contextual menu of an address, click Edit. The application displays the Edit Address screen with the current address.
2. Modify the details as required. All the fields are editable.
3. Save as Primary Communication: Select the check box to choose the address as the primary or preferred address if the address is not already selected. The check box is not displayed if the user does not have the Update Primary Address permission.
4. Click Submit. The application updates the address details and displays it in the Address section.

Delete an Address

Use the feature to delete a secondary address. A primary address cannot be deleted. A user with the required permission only can delete an address.

To delete an address, follow these steps:

1. On the quick actions of the contextual menu, click Delete. The delete option will not be available for a primary address,
2. The application displays the Edit Address screen.
3. The application displays a pop-up message to delete the address.
4. Click Yes. On confirmation, the application deletes the address details and removes it from the Address section.

Password

Use the feature to modify your digital banking password details.

Under Profile Settings, click Username and Password. The app displays the Username and Password screen.

The username and password does not vary as per the Entity selection. All the entities will have same username and password.

Edit Password

Click the Edit link placed beside the Password box. The app displays the Edit Password screen.

1. Enter the Existing Password.
The application does not auto-fill the password in the Existing Password box. At the code level, auto-complete field is set to restrict the auto-filling of the password. Suppose you had saved the password on the Browser when prompted the first time you signed into the application. In that case, the application will prompt for auto-filling the existing password while changing or editing the password. As a good practice, avoid saving the passwords on the Browser when prompted the first time you sign into the application.

2. Enter the New Password.
3. Enter the new password again in the Confirm Password box.
• Follow these validations while changing the password:
  • It must be between 8-24 characters.
  • You must not add any spaces.
  • You can use these special characters:  # $ % ( ) * @ + - _ [ ? ] / ^ ' ; = ,
  • It can be a combination of alpha-numeric (a-z, A-Z, 0-9) and special characters.
  • It must not be nine consecutive digits.
  • It must not be the same as the previous password.
• The password rules are displayed once you start typing the password in the respective box. The rules disappear once the entry matches with the defined password rules.
4. Click Continue. The app displays the Password Verification screen.
   

Language

Use the feature to select the required language. Under the Profile Settings section, click Language. The app displays the Language screen. By default, English is selected in the Select Language list.

All entity has same Language. If user updates language, then it is applicable to all entities.

Do the following to change the language:

• Click the Select Language list, the app displays the list of languages available.
• Select the required language, and click Save. The app displays a confirmation screen.
• Click Yes. The language is updated accordingly throughout the application.

When you change the language, the app also changes the Date format, Currency format, and Number format as per the geo-location of the selected language. You can also change the language from the login screen.

e-Banking Access

You can disable your online banking access from your responsive web or mobile applications. You can use this feature in case your password or ipin is compromised and you can quickly stop others from accessing your account and performing transactions.

To disable your e-banking access, follow these steps:

The user can disable e-banking access any available entity.

1. Navigate Settings > Profile Settings > e-banking access. The e-Banking access page appears with available entities for user.
   
2. Select the entities to disable.

   You can click the Terms and Conditions link to view the terms and conditions in disabling the e-banking access.

3. Click Disable e-Banking access. This button is enabled only after single check box is selected.
4. A pop-up appears asking for the confirmation on disabling e-banking access. Click Yes to confirm and No to abort the process.
   
5. Clicking on Yes will disable the e-banking access to the default selected entity. The following success message appears and the user have to set default entity manually.
   
6. To re-enable e-Banking access, you must contact your bank.

The user can perform the following scenario in disabling e-banking access.

Scenario	Result
Disable default entity	Default entity shows as inactive The user can sign in to the application but cannot access default entity. For subsequent sign in, the user should prompt with entity selection page with set as default option.
Disable current entity	The other entity shows as inactive The user sign in to the application as per default entity selection.
Disable both default + current entity	Default entity shows as inactive The user can sign in to the application but cannot access default entity. For subsequent sign in, the user should prompt with entity selection page with set as default option. The user can only access the available entities which are not disabled by user
Disable all available entities	The user log out of the application with a success message - You have disabled e-banking access successfully. For subsequent sign in to the application throws an error message - Sorry, your profile is blocked. Please contact the bank for more information.
Disable entities neither current or default.	The application gives a pop-up - Are you sure you want to disable the E-banking access for the below Entities? The user needs to provide the acknowledgment to disable the selected entities. The application now redirects to the E-banking page displaying status as Inactive to the recently selected entities.

Current Entity. The entity in which the user presently viewing in the application.

Default Entity. The preferred entity of the user when he sign in to the application.

Configuration in Spotlight

The following configurations can be made in Spotlight to re-enable your e-banking access.

• Banks can configure the terms and conditions for disabling online banking access.
• Notify the customer with an alert whenever the online banking profile of that particular customer is suspended.
• Log an event when the bank agent suspends the online banking profile from Spotlight.
• Activate or enable the online banking access from the Spotlight application upon consent from the customer.

Configuration

• The credential policies for updating password is managed within Spotlight application.
• All profile information updates are stored in the Spotlight DB.
• In Spotlight, the use should have the following feature action to view or update the Profile Settings. If the user is not configured for the following feature and actions, the profile setting will not be displayed in the banking application.
  1. Feature - Profile Setting
  2. Actions -
     • View Profile Settings
     • Update Profile Settings

Fabric Server Properties

Current Profile Settings functionality is via SRMS, as per the requirement, configuration name and configuration values should be as following:

APIs

For the complete list of APIs shipped as part of this feature, see Experience APIs documentation.

Service Name	URL
updateUserProfileImage	/services/data/v1/RBObjects/operations/DbxUser/updateUserProfileImage
deleteUserProfileImage	/services/data/v1/RBObjects/operations/DbxUser/deleteUserProfileImage
getUser ProfileImage	/services/data/v1/RBObjects/operations/DbxUser/getUserProfileImage
Application	/services/data/v1/RBObjects/objects/Application
getUserDetails	services/data/v1/RBObjects/objects/User

Extending Profile Pic Update

The extension scenario for Profile pic update is about modifying the maximum image size that can be uploaded. Currently, by default 2 MB is the maximum size a customer can upload their profile picture.  we can increase or decrease the size in the code based on our requirement.

In responsive web, the default image size is hardcoded in the code. A customer cannot upload an image more than 2 MB. In native, there is no limitation on the size. After uploading the image using image compression code the size will be reduced to 2MB.

Profile Management feature code is maintained in frmProfileManagementController.js java script file. selectedFileCallback method is called for uploading the image in the Profile management system.

For Profile pic update feature, the code level changes can be performed only at form controller level that is frmController.js. There are no changes at the Presentation Controller and Business Controller level.

Responsive Web

Scenario: When the customer clicks Add Photo button in the application, btnAddPhoto.onClick function calls selectedFileCallback method in frmProfileMangementController.js. In the existing scenario, the maximum size to upload the profile photo is defaulted to 2 MB. Customer can extend the functionality by modifying the default image size.

To change the default image size to upload the profile photo in the system. Follow these steps:

1. Create a new extension JS file in Modules and rename the file frmProfileMangementControllerExtension.
   
2. From the Project Explorer, go to Reference Architecture Extensions > ProfileModule > Config and update the path in module config.
   
3. To redefine the selectedFileCallback method in the extension file, in frmProfileManagementController.js search for selectedFileCallback method and paste the code in frmProfileMangementControllerExtension.js.

4. You can make the required validation changes in the selectedFileCallback method.

   Here the default image size 2 MB is extended to 4MB by modifying the code as below:

   if (image < = 2) is modified to if (image <=4)

   

   selectedFileCallback: function(events, files) {
               var scopeObj = this;
               if (files[0].file.type === "image/jpeg" || files[0].file.type === "image/png" || files[0].file.type === "image/jpg") {
                   var image = files[0].file.size / 1048576;
                   if (image <= 4) {
                       this.getBase64(files[0].file, function(base64String) {
                           var base64 = base64String.replace(/data:image\/(png|jpeg);base64\,/, "");
                           FormControllerUtility.showProgressBar(self.view);
                           kony.mvc.MDAApplication.getSharedInstance().getModuleManager().getModule("ProfileModule").presentationController.userImageUpdate(base64);
                       });
                   } else {
                       this.view.settings.flxImageError.setVisibility(true);
                       CommonUtilities.setText(this.view.settings.lblImageError, kony.i18n.getLocalizedString("i18n.profile.Imagesize"), CommonUtilities.getaccessibilityConfig());
                       this.view.forceLayout();
                   }
               } else {
                   this.view.settings.flxImageError.setVisibility(true);
                   CommonUtilities.setText(this.view.settings.lblImageError, kony.i18n.getLocalizedString("i18n.profile.notAValidImage"), CommonUtilities.getaccessibilityConfig());
                   this.view.forceLayout();
               }
           },
   

Mobile Native

For mobile native, we do not have any maximum size limit for uploading the image in the application. Customer can upload the image of any size. After uploading, using the image compression code the image will resized to maximum 2 MB.

Unlike responsive web, native has two options to upload the image.

• Take a pic
• Choose from gallery

Scenario: Profile Management feature code is maintained in frmProfilePersonalDetails.js java script file. When the customer clicks Add Photo link in the application, btnAddPhoto.onClick function calls onClickTakePicture (Take a pic) or onClickChooseFromGallery (choose from gallery) methods in frmProfilePersonalDetails.js depending on the user selection.  In the existing scenario, using the image compression code the uploaded image is resized to 2 MB. Customer can extend the functionality by modifying the image size in the compression code.

To extend the functionality, follow these steps:

1. Create a new extension file in Modules and rename the frmProfilePersonDetailsControllerExtension.js file.
   
2. From the Project Explorer, go to Reference Architecture Extensions > SettingsModule > Config and update the path in module config.

   

3. In the frmProfilePersonDetailsControllerExtension file override the form by defining the two methods based on the user action (To take a picture or Choose from gallery).

   Defining the Take picture method

   

   onClickTakePicture : function(){
        //#ifdef android
       var settingsMod = kony.mvc.MDAApplication.getSharedInstance().getModuleManager().getModule("SettingsModule");
       settingsMod.presentationController.commonFunctionForNavigation("frmProfilePersonalDetails");
        //#endif
        var rawBytes = this.view.cameraWidget.rawBytes;
        this.imageRawBytes = rawBytes;
        var imageObject=kony.image.createImage(rawBytes);
        imageObject.scale(0.5);
        var rawBytesAfterCompression=imageObject.getImageAsRawBytes();
        var base64Image=kony.convertToBase64(rawBytesAfterCompression);
        if(applicationManager.getDeviceUtilManager().isIPhone()) {
           	 imageObject.compress(0.5);
                rawBytesAfterCompression = imageObject.getImageAsRawBytes();
                base64Image = kony.convertToBase64(rawBytesAfterCompression);
        }
        else{
          while(base64Image && base64Image.length > 2000000){
                imageObject.compress(0.5);
                rawBytesAfterCompression = imageObject.getImageAsRawBytes();
                base64Image = kony.convertToBase64(rawBytesAfterCompression);
        	 }
        }
        if(base64Image){
          var settingsMode = kony.mvc.MDAApplication.getSharedInstance().getModuleManager().getModule("SettingsModule");
              settingsMode.presentationController.uploadProfilePicture(base64Image);
        }
      },
   

   Defining the choose from gallery method

   

   onClickChooseFromGallery : function(response){
        var scope = this;
        if(response){
          var queryContext = {
            mimetype: "image/*"
          };
          kony.phone.openMediaGallery(gallerySelectionCallback, queryContext);
        }
   

4. Make the required extension modifications similar to the responsive web.
5. Use the following code to compress the image size, after uploading the image.

   The following client code is used to compress the profile picture uploaded from the mobile.

   var rawBytesAfterCompression=imageObject.getImageAsRawBytes();
        var base64Image=kony.convertToBase64(rawBytesAfterCompression);
        while(base64Image && base64Image.length > 2000000){
                imageObject.compress(0.5);
                rawBytesAfterCompression = imageObject.getImageAsRawBytes();
                base64Image = kony.convertToBase64(rawBytesAfterCompression);
        } 
   

   Code changes to compress the image size for Take a pic

   

   Code changes for image compression when uploaded from the gallery

   

   Follow the same steps as in Responsive Web for changing the image size.