Generic Card V2

Overview

This guide outlines the configuration options available for Generic Card V2 — the most actively maintained card type for displaying API responses on the HVOne case-management applications page. It supports custom layouts, multiple tables, video players, iframes, and more.

See Card Configurations for the overall card configuration flow.

Top-level configuration

{
  "moduleName": "Reverse Geo Coding",
  "cardType": "genericCardV2",
  "endpoint": "/v1/reverseGeoCoding",
  "parse": "no",
  "components": []
}

Mandatory parameters

Parameter	Description
moduleName	Display name for the module. If a module name is defined within the workflow, it takes precedence.
cardType	Specifies the card type. Must always be genericCardV2.
endpoint	Defines the API endpoint for this configuration (e.g., /v1/geoLocationValidation).
parse	Always set to no, used for internal parsing mechanisms.
components	An array defining the components to be displayed on the card.

Optional parameters

Parameter	Description
refreshSupportedS3URLs	Set to yes if media files within data.json require updated pre-signed S3 URLs.
maxCardHeight	Specifies the maximum card height before enabling scrolling.

Supported components

Section

A section is a container for grouping related content.

{
  "type": "section",
  "id": "digilocker_data_section",
  "children": []
}

Mandatory parameters

Parameter	Description
type	Must be section.
id	Unique identifier. Ensure all components have a unique ID — used internally for processing.
children	Contains nested components.

Optional parameters

Parameter	Description
styles	Custom CSS styling object.
checkChildrenExists	If true, renders only children with valid data.

Row

A row organises components in a horizontal layout.

{
  "type": "row",
  "id": "reverse_geocoding_details_row",
  "title": "Some title",
  "children": []
}

Mandatory parameters

Parameter	Description
type	Must be row.
id	Unique identifier.
title	Title displayed for the row.
children	Contains nested components.

Optional parameters

Parameter	Description
styles	Custom CSS styling object.
checkChildrenExists	If true, renders only children with valid data.

Column

A column is used for vertical layouts within a row.

{
  "type": "column",
  "id": "reverse_geocoding_details_column",
  "title": "Some title",
  "children": []
}

Mandatory parameters

Parameter	Description
type	Must be column.
id	Unique identifier.
title	Title displayed for the column.
children	Contains nested components.

Optional parameters

Parameter	Description
styles	Custom CSS styling object.
checkChildrenExists	If true, renders only children with valid data.

Table

A table component is used to display structured data.

{
  "type": "table",
  "id": "reverse_geocoding_inputs_table",
  "title": "Inputs",
  "useRequestData": false,
  "tableDataConfig": [
    {
      "label": "Complete Address",
      "path": "result.details.results[0].formatted_address",
      "persist": true
    }
  ]
}

Mandatory parameters

Parameter	Description
type	Must be table.
id	Unique identifier.
tableDataConfig	Defines row labels and corresponding data paths.
title	Table title.

Optional parameters

Parameter	Description
styles	Custom CSS styling object.
useRequestData	true to display request data; false for response data.
checkChildrenExists	If true, renders only children with valid data.

tableDataConfig parameters

Parameter	Description
label	Label displayed in the table.
path	JSON path to extract the value.
persist	Set to true if you want to display an empty row when no value exists at the path.

Media

A media component is used to display images or documents.

{
  "type": "media",
  "id": "get_esign_media",
  "label": "eSigned Document",
  "mediaPath": "result.data.s3Url",
  "persistMedia": true,
  "useRequestData": false
}

Mandatory parameters

Parameter	Description
type	Must be media.
id	Unique identifier.
mediaPath	Path to media content.
label	Display label.

Optional parameters

Parameter	Description
checkChildrenExists	If true, renders only children with valid data.
persistMedia	If true, persists media.
useRequestData	If true, uses request data.
styles	Custom CSS styling object.
useMediaFromBucket	Set to true to use media from a bucket that is not part of the API response. Useful when an API uploads media to the S3 bucket but does not return the URL in the response. Combine with bucketMediaKey.
bucketMediaKey	The key or filename for the media to be displayed. To get the filename, use the results API response.
hideLabel	Set to false to display the label. Default is true (original default behaviour was no labels).

Accordion

An accordion is used to collapse or expand sections.

{
  "type": "accordion",
  "id": "details_accordion",
  "title": "More Details",
  "children": []
}

Mandatory parameters

Parameter	Description
type	Must be accordion.
id	Unique identifier.
title	Title displayed on the accordion.
children	Nested components inside the accordion.

Optional parameters

Parameter	Description
styles	Custom CSS styling object for the entire accordion.
checkChildrenExists	If true, renders only children with valid data.
contentStyles	Custom styles applied only to the content inside the accordion.

Iframe

An iframe is used to embed external web applications in generic card v2.

{
  "type": "iframe",
  "id": "vkyc_iframe",
  "title": "VKYC Details",
  "targetUrl": "https://vcip-prod.hyperverge.co"
}

Mandatory parameters

Parameter	Description
type	Must be iframe.
id	Unique identifier.
targetUrl	The URL of the application to be embedded.

Optional parameters

Parameter	Description
styles	Custom CSS styling object for the entire iframe.

Notes

• Generic Card V2 appends requestId, appId, and transactionId to the URL as encoded URI components.
• Components cannot be directly embedded — the domain needs to be whitelisted on our end and the embedded application must allow being embedded as an iframe.

Video

A video component is used to embed and play videos.

{
  "type": "video",
  "id": "A unique identifier",
  "videoLabel": "Label to be displayed",
  "videoPath": "Path to the video"
}

Mandatory parameters

Parameter	Description
type	Must be video.
id	Unique identifier.
videoLabel	The label to be displayed for the video.
videoPath	The path in the JSON object.

Optional parameters

Parameter	Description
styles	Custom CSS styling object.
checkChildrenExists	If true, renders only children with valid data.
useRequestData	If true, uses request data.
useMediaFromBucket	Use media from bucket. See Media.
bucketMediaKey	Filename key for bucket media.
hideLabel	Set to false to display the label. Default is true.

FAQs

Q: How do I display data from the request body payload in a table? A: Set useRequestData to true and then in tableDataConfig use paths from the request body.

Q: How do I display images which are not part of the response body but were uploaded with the API call? A: Set useMediaFromBucket to true and set bucketMediaKey to the filename with which media is uploaded to the S3 bucket.