Got feedback or spotted a mistake?

Leave a comment at the end of this page or email contact@krishagni.com

Configure Fields in Visit Table on Participant Overview Page

Introduction

The default fields ('Event Label', 'Name', 'Date', and the two statistics bars) in the visits tab are populated from OpenSpecimen code and not the workflow. You can configure the table columns based on your requirements.

  1. The visit table view is configurable only at the CP level.

  2. The code has to be configured in workflow JSON in the new section "visitsTab".

  3. Only visit level fields can be configured in the table.

  4. Total width of the visit table is not configurable, however, you can assign specific width to individual fields for better optimization

You can add a "caption" to each field to change the headers in the table column. Set the size of each field by adding "width" for each field depending on the length of the value. From v11.x the statistic bars for Utlization and Collection can be hidden via JSON

Modify Visits Table

Default Visits Table

{ "name": "visitsTab", "data": { "hideUtilisationStats": true, // Hides utilisation stats in visit table (v11.x onwards) "hideCollectionStats": true, // Hides collection stats in visit table (v11.x onwards) "occurred": [ { "field" : "visit.eventLabel", "name" : "visit.eventLabel", "caption" : "Event Label", "type" : "text", "optional" : false, "width" : "150px" // Width associated with each field, adjust if fields overlap }, { "field": "visit.name", "baseField": "visit.name", "width": "150px" }, { "field": "visit.visitDate", "baseField": "visit.visitDate", "width": "100px" } ] } }

Please note that the event label/visit name field will be hyperlinked to the visit by default.

Modified Visits Table

{ "name": "visitsTab", "data": { "sortByDates": true, // Sorts visits by Visit Date "occurred": [ { "field": "visit.name", "baseField": "visit.name", "width": "150px" }, { "field": "visit.visitDate", "baseField": "visit.visitDate", "width": "100px" }, { "field": "visit.site", "baseField": "visit.site", "caption": "Site of collection", "width": "160px" }, { "field": "visit.clinicalStatus", "baseField": "visit.clinicalStatus", "width": "100px" }, { "field": "visit.clinicalDiagnoses", "baseField": "visit.clinicalDiagnoses", "width": "100px" } ] } }

 

Examples

1. Appending 2 fields in the Visits Table

2 fields can also be appended into a single field, as shown below:

Before:

image-20240408-073720.png

After:

{ "name" : "visitsTab", "view" : null, "ctrl" : null, "data" : { "sortByDates" : true, "occurred" : [ { "name" : "calcVisit.eventLabel", //Appends 2 fields 'Event Label' and custom field 'Timpoint' "caption" : "Event Label (Timepoint)", "type" : "text", "optional" : false, "displayExpr": "fns.concat(visit.eventLabel, '(',visit.extensionDetail.attrsMap.timepoint,')')", "width" : "150px" }, { "field" : "visit.name", "name" : "visit.name", "caption" : "Name", "width" : "150px" }, { "field" : "visit.visitDate", "baseField" : "visit.visitDate", "width" : "100px" }] } }

 

2. Visit Table space optimization

Using the codes shown above, the fields within the Visit table can be given proper spacing:

  1. Adjust column widths for Site, Clinical status

  2. Hide Collection Stats

  3. Hide Utilization Stats

Before

After


3. Sort Visits Table by Visit Date

With the help of "sortByDates: true" in visit tab JSON, it sorts the visits based on visit dates.

Got feedback or spotted a mistake?

Leave a comment at the end of this page or email contact@krishagni.com