Document List

Overview

The Document List Component is a contractual component used to display and download the attachments (such as e-Statements) associated with a reference ID. The attachments are retrieved using the context data variable or the service response. Each row of the list in the Document List component contains many UI options. These options can be modified by assigning a row template dynamically. The Dynamic List component contains the following UI options by default.

• Document Name
• Document Extension
• Format Icon
• Download Icon
• Download Text
• Close Icon

All the UI features are customizable. A developer can configure these UI features to visible or invisible as per the requirement. Some of the ways in which the Document List Component can display the list are:

• The document name with the extension along with the format icon download icon. The user can click the download icon to download the file.
• The document name with extension with format icon, download icon, download text, and close icon. The user can download the file by clicking the download icon or text. When the user clicks the close icon, the row containing the attachment is removed from the list.
• The document name with extension with format icon and close icon. In this scenario, the user can download the file by clicking the document name's row. When the user clicks the close the icon, the row containing the document is removed from the list.
• The document name and the download icon. The user must click the download icon to download the file.
• The document name with the extension and format icon. In this scenario, the user can download the file by clicking on the row.

NOTE: The Document List Component is used inside the Mobile Banking application.

Document List Contracts

The Document List Component contains contracts for customizing the data and properties for the widgets. The Document List Component contains the following contracts for customization.

• Service Parameters
• Data Mapping
• Data Formatting
• Conditional Mapping Key
• Conditional Mapping
• Document List
• onError Event
• onFileDownload Event
• setContext Method

Service Parameters

The Service Parameters contract of the Document List Component helps to set the service details required to retrieve the attachments using the criteria provided by the service API (such as transaction ID). In the Document List Component, the Service Parameter contract uses the getAttachments Object to retrieve the data to be displayed in a tabular format.

Here is a sample of the JSON object provided in the Service Parameter of the Document List Component.

{
  "getAttachments": {
    "ServiceType": "",
    "Service": "",
    "Object": "",
    "Verb": "",
    "Criteria": {}
  }
}

The Service Parameter contract provides the following key-value pairs for customization.

Data Mapping

The Data Mapping contract of the Document List Component maps the widget IDs with the data to be displayed. The data is retrieved from Context variable, Service response, or i18n key. The Data Mapping property of Document List component supports the following Tokens.

• ${Collection.CustomerAdvice.fileNames}: Maps the value stored in collection object.
• ${CNTX.fileNames}: Maps the value from the Context variable.
• ${i18n{i18n.common.download}}: Maps the i18n text.

Here is a sample of the JSON object provided in the Data Mapping of the Document List Component.

{
   "segments": {
      "segDocumentList": {
         "segmentMasterData":"${CNTX.fileNames}",
         "segmentUI": {
            "imgIcon1": "${segmentMasterData.fileType}",
            "lblField1": "${segmentMasterData.fileName}",
            "lblField2": "${segmentMasterData.fileDate}",
            "lblCommaSeparator": ",",
            "lblField3": "${segmentMasterData.fileTime}",
            "imgIcon2": "clear.png",
            "lblIcon": "\ue93d",
            "lblField4": "${i18n{i18n.common.download}}"
         },
         "segmentActions": {
            "Download": ["lblIcon","lblField4"],
            "Clear": ["imgIcon2"]
         },
         "showFileExtension": {
            "lblField1": true
         },
         "backEndMappings": {
            "fileID": "${segmentMasterData.fileID}"
         },
         "maxAttachments": "5"
      }
   }
}

The Data Mapping contract is assigned a JSON object with the following key-value pairs.

Data Formatting

The Data Formatting property is used to provide a custom format for a specific requirement. The Document List Component does not contain any customization.

{}

Conditional Mapping Key

The Conditional Mapping Key is used to define mapping based on a criterion.

For example, if a label defined in the UI must display different data according to the type of account, a developer must set the Conditional Mapping Key property to the following value. The Document List Component does not contain any value for this key.

{}

Conditional Mapping

The Conditional Mapping property key is used to map a widget with a data from Collection Object or service response as per the Conditional Mapping key. The Document List Component does not contain any customization for this key.

{}

Document List

The Document List contract of the Document List Component is used to configure the properties of the widgets, rows of the segment, and any arithmetic operations if required.

The Document List contract of the Document List Component contains the following fields.

• Row Template Config
• Split Operation
• Download File On RowClick
• Dynamic Skin
• Dynamic Asset

Row Template Config

Assigns the dynamic template configurations to display the Attachments in a tabular format. If this field is empty, then the entire segment is not displayed. A developer can set the value for this contract in two formats.

• String Format: The dynamic row template ID is provided in a String format. For example: flxTempDocumentList2, where flxTempDocumentList2 is the row template ID.
• JSON Format: This format is used to support the inter-app access while using composite apps. In this format, the developer must provide both the Microapp Name and the template ID as a JSON object.

{
"templateID": "flxTempDocumentList2", 
"microAppName": "ResourcesMA"
}

Split Operation

The Split Operation field is used to determine the file name and extension from the service response received by the Document List component. The Service response that is received by the Document List Component contains the fileID and fileName.

Here is an example of a sample response containing the file details.

"fileNames": [
  {
  "fileID": "abFtlB2zDwVRoCqUATVuFTtiEz9lljnS",
  "fileName": "Attachment1.pdf"
  }
]

The fileName attribute in this response contains both the file name and the extension. The Split Operation field divides the fileName into two separate fields, Document Name and Document Extension. The Split Operation field also assigns the widget type to be displayed for a particular extension.

{
   "operation1": {
      "inputField": "${CNTX.fileNames.fileName}",
      "identifier": ".",
      "resultWidgetType": "Image",
      "resultField": "${CNTX.fileNames.fileType}"
   }
}

Download File On RowClick

This field is used to enable or disable the download of the file when the user clicks or taps anywhere on the row of the Segment.

false

Dynamic Skin

The Dynamic Skin property overrides the existing skin of the Document List component.

{
   "segDocumentList": {
      "lblField1": "lblGrey500FS30",
      "lblAttachmentType": {
         "PDF": "lblIconGrey300FS50"
      }
   },
   "fields": {
      "flxDocumentList": "flxGrey100"
   }
}

Dynamic Asset

This field is used to map the file type or widget type with a UNICODE value or an image source value based on the value of the resultWidgetType key in the Split Operation field.

{
   "FontIcon": {
      "pdf": "\ue95f"
   },
   "Image": {
      "pdf": "pdf.png",
      "word": "word.png",
      "xlsx": "excel.png",
      "doc": "docs.png"
   }
}

onError Event

The OnError event is invoked when an error occurs during the user journey. When the onError event is invoked, an error object is passed to the parent widget. This object contains the information about the error as well as where it had occurred.

var errordata = {
	"level": "ComponentViewController",
	"method": "render",
	"error": err
};
this.onError(errordata);

onFileDownload Event

When the user clicks a row containing the list of attachment, this event is used to pass the data of the selected row to the Form Controller.

var filedata = {
	"fileID": "abFtlB2zDwVRoCqUATVuFTtiEz9lljnS",
	"fileName": "Attachment1.pdf"
};
this.onFileDownload(filedata);

setContext Method

This method is invoked inside the parent component or form controller. Using this method, you can pass the context object containing the information required for the component.

this.view.DocumentList.setContext(contextData);

Context Object

The context object is a JSON object that is used as an input in the Document List Component containing the details of the transaction.

Out of the response provided, the following parameters are used in the component.

• fileNames
• fileID
• fileName

Here is a sample of the Context JSON Object used inside the component.

var context = {
	"fileNames": [{
			"fileID": "abFtlB2zDwVRoCqUATVuFTtiEz9lljnS",
			"fileName": "Attachment1.pdf"
		},
		{
			"fileID": "ZOTtS0xRVa0l8JXgTIsEt1vlH6DUcACY",
			"fileName": "Attachment2.xlsx"
		}
	]
};

Format for Dynamic Skinning

The Document List component provides two methods to assign skins to the segDocumentList parameter. These are

• Applying Skin Directly: Using this method, a direct static pre-defined skin is assigned to the widget as a key value pair.
  In the following example, the lblGrey400FS30 skin is applied to the lblFieldLabel Label inside the segDetails template.
  

   "segDetails": {
        "lblFieldLabel" : "lblGrey400FS30"
     },

• Applying Skin Based on a Condition: Using this method, the label is assigned a pre-defined skin based on certain conditions. For example, to apply different Font icons for different file extensions (such as PDF).
  In the following example, the lblAttachmentType Label applies the lblGrey300FS50 skin when a PDF files is displayed.
  

  "lblAttachmentType" : {
    "PDF" : "lblIconGrey300FS50"
  }
  

  The constants for each font icons (such as PDF) must be created in the componentUtility file. After creating the constants, a developer can map the constant with the skin name in the contract.