Case Variables Tab
This document describes the properties and expected behavior of the `CaseVariablesTab` component. The component is designed to display and customize the interface in a case management system.
CaseVariablesTabProps
The `CaseVariablesTabProps` type specifies the main properties used to render the case variables section. Below are the properties and their descriptions:
Property | Type | Default | Description |
rows | Array<Cell[][]> | Each row is a two-dimensional array of Cell objects. | |
titleLabel | string | Section name caseVarialbesTab | |
data | Object | Optional data to be displayed or used within the casevariable tab. The data in the cell is displayed based on the Cell field | |
titleIcon | Icon | Optional icon to display in the title bar or bookmark name. | |
hideTabWhen | boolean | false | Flag to conditionally hide CaseVariablesTab if set to `true`. |
userLang | string | en | Language mutation for the component (not mutation for individual cells). If props is not set, it takes the user's language mutation set in Tas. |
dateFormat | | 'dd.MM.yyyy' | 'dMyyyyy' | 'dd/mm/yyyy' | 'MM/dd/yyyy' | 'yyyy-MM-dd'; | Setting the date format for cell type='date'. Manually set format. If props is not set, the format is taken:
| |
isLoading | Boolean | Loading state display |
Cell
The `Cell` type defines the properties and behavior of individual cells in a table structure.
Property | Type | Default | Description |
field | string | A unique identifier for the cell. Based on the identifier, the data in the cell will be displayed from the CaseVariablesTab data props | |
type | "string" | "button" | "link " |"date" | string | Defines the cell type. Based on the cell type, the basic design is rendered. You can use props headerStyle valueStyle cellStyle to modify it. For the 'button' type, it is possible to set additional props buttonVariant buttonFullWidth buttonFn For type 'link' you need to set additional href props |
headerName | (cell, data) => string | Function to render the header title. Enter a custom value, a value based on a cell, or select a value from the passed CaseVariablesTabProps data . | |
value | (cell, data) => string | number | Cell value. Enter a custom value, use a value (cell) based on the field name and props data , or select from the data passed to CaseVariablesTabProps data . | |
size | { xs?: 1 | 2 | 3 | 4, sm?: 1 | 2 | 3 | 4, md?: 1 | 2 | 3 | 4, lg?: 1 | 2 | 3 | 4, x?: 1 | 2 | 3 | 4 } | {xs: 1} | Object specifying the responsive size of the cell in different breakpoints. xs=phone, sm=phone landscape, md=tablet, lg= desktop, xl=widescreen monitor. CaseVariablesTab is always divided into 4 columns, the number for each breakpoint tells how many columns the cell should be stretched across. I don't have to fill in all breakpoints. Mobilefirst approach -> if I set {xs:2} -> the cell will be across two columns for all breakpoints, if I set {xs: 2, lg: 4} the cell will be across 2 columns to the lg breakpoint, and across 4 columns from the lg breakpoint. |
tooltip | (cell, data) => string | Tooltip that appears when you hover over the question mark icon next to the header | |
headerStyle | (cell, data) => any | Custom styles for cell header (possibility to use all css styles) Ability to use cell or data data for conditional styling | |
valueStyle | (cell, data) => any | Custom styles for cell value (possibility to use all css styles) Ability to use cell or data data for conditional styling | |
cellStyle | (cell, data) => any | Custom styles for the entire cell (possibility to use all css styles) Ability to use cell or data data for conditional styling | |
buttonVariant | "outlined" | "contained" | text | contained | Button variant if the cell is of type 'button' |
buttonFullWidth | boolean | false | Specifies whether the button should fill the entire width of the cell if the cell is of type 'button' |
buttonFn | () => void | A callback function that is triggered when the button is clicked. If the cell is of type 'button' | |
href | string | Function returning the URL for a cell if it is of type 'link' |
Example definition
import React, {useState, useEffect, useRef} from 'react'
const CaseVariablesTab = Require.sysComps.CaseVariablesTab
const CaseOverview = () => {
const [caseVariablesData, setCaseVariablesData] = useState({});
const isArchived = useRef(false);
useEffect(() => {
const fetchCaseData = async () => {
try {
// Fetch process details
const payloadProcess = await Api.request.get(`/processes/${caseId}`);
const { archived } = payloadProcess;
isArchived.current = archived;
// Fetch variables based on archive status
const variablesEndpoint = archived
? `/processes/archived/${caseId}/variables?limit=1000`
: `/processes/${caseId}/variables?limit=1000`;
const [variablesPayload, systemVariablesData] = await Promise.all([
Api.request.get(variablesEndpoint),
getSystemVariables(payloadProcess),
]);
// Process case variables
const items = variablesPayload?.items || [];
const caseVariables = items.reduce((acc, item) => {
acc[item.ivar_name] = item;
return acc;
}, {});
// Merge and set variables data
setCaseVariablesData({ ...caseVariables, ...systemVariablesData });
} catch (error) {
console.error('Error fetching case data:', error);
}
};
fetchCaseData();
}, [caseId]); // Depend on caseId if it may change
<CaseVariablesTab
title: 'smlouva',
titleIcon: 'documents',
data: caseVariablesData,
rows:[
[
{
field: 'contractTitle',
type: 'link',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => value.ivar_value,
href: (value: any) => /contracts/ ,
size: { xs: 4, lg: 1, },
headerStyle: { color: 'green', },
cellStyle: { backgroundColor: 'orange', borderRadius: '8px', },
tooltip: 'This is a tooltip',
},
{
field: 'contractNumber',
type: 'link',
headerName: (value: any, data) => value.ivar_name_cs,
value: (value: any) => value.ivar_value,
href: (value: any) => /contracts/${value.ivar_value} ,
headerStyle: { color: 'red', },
size: { xs: 4, lg: 1, },
tooltip: "It is a long established fact that a reader will be
distracted by the readable content of a page when looking at its."
},
{ field: 'contractTitle',
type: 'button',
buttonVariant: 'contained',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => value.ivar_value,
buttonFullWidth: true,
size: { xs: 2, lg: 1, },
},
{ field: 'Report-Case',
type: 'button',
headerName: () => 'My button outlined',
buttonVariant: 'outlined',
size: { xs: 2, lg: 1, },
},
],
[
{
field: 'requestor',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => value.ivar_lov_value,
size: { xs: 2, lg: 1, },
},
{
field: 'costCenter',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => value.ivar_value,
size: { xs: 2, lg: 1, },
},
{
field: 'myHeaderName',
headerName: () => 'My Header Name',
value: () => 'My Value',
size: { xs: 2, lg: 1, },
},
],
[
{ field: 'supplier',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => value.ivar_value,
size: { xs: 2, lg: 1, },
},
{ field: 'otherSuppliers',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => value.ivar_value,
size: { xs: 2, lg: 1, },
},
{
field: 'supplierReferenceNumber',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => value.ivar_value,
size: { xs: 2, lg: 1, },
},
{
field: 'multipleSuppliers',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => value.ivar_value,
size: { xs: 2, lg: 1, },
},
],
[
{
field: 'contractSubType',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => {
const result = _.find(value.ivar_lov_cs, { value: value.ivar_value });
return result ? result.title : ''; },
size: { xs: 2, lg: 1, },
},
{
field: 'confidentiality',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => value.ivar_value,
size: { xs: 2, lg: 1, },
},
{
field: 'contractSubject',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => value.ivar_value,
size: { xs: 2, lg: 1, },
},
],
[
{
field: 'contractValidity',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => {
const result = _.find(value.ivar_lov_cs, { value: value.ivar_value });
return result ? result.title : ''; },
size: { xs: 2, lg: 1, },
},
{
field: 'contractValidityFrom',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => formatReadableDate(value.ivar_value, 'cs-CZ'),
size: { xs: 2, lg: 1, },
},
{
field: 'contractValidityTo',
headerName: (value: any) => value.ivar_name_cs,
value: (value: any) => formatReadableDate(value.ivar_value, 'cs-CZ'),
size: { xs: 2, lg: 1, },
},
{
field: 'sv_iproc_case_status',
headerName: (value: any) => value.ivar_name,
value: (value: any) => value.ivar_lov_cs[0].title,
valueStyle: { color: 'green', },
size: { xs: 2, lg: 1, },
},
],
],
/>
}
Data example
const data = {
contractTitle: {
ivar_name: 'contractTitle',
ivar_type: 'T',
ivar_filtered_list: null,
ivar_attribute: null,
ivar_value: 'IT support',
ivar_group: 'not implemented',
ivar_lov: [],
ivar_lov_value: null,
dlist_name: null,
ivar_multi: null,
ivar_dt_index: null,
ivar_col_index: null,
tvar_label: null,
tvar_tooltip: null,
tvar_id: 308,
tvar_name: 'contractTitle',
tvar_meta: null,
tvar_date_without_time: 'N',
ivar_name_cs: 'Název smlouvy',
ivar_name_en: 'Contract title',
tvar_name_cs: 'Název smlouvy',
tvar_name_en: 'Contract title',
tvar_tooltip_cs: null,
tvar_tooltip_en: null,
id: 84259,
meta: { href: '/processes/:iprocId/variables', },
},
contractNumber: {
ivar_name: 'contractNumber',
ivar_type: 'T',
ivar_filtered_list: null,
ivar_attribute: null,
ivar_value: 'TAS-CO-2024-0045',
ivar_group: 'not implemented',
ivar_lov: [],
ivar_lov_value: null,
dlist_name: null,
ivar_multi: null,
ivar_dt_index: null,
ivar_col_index: null,
tvar_label: null,
tvar_tooltip: 'Zde je vygenerováno unikátní číslo smlouvy.',
tvar_id: 236,
tvar_name: 'contractNumber',
tvar_meta: null,
tvar_date_without_time: 'N',
ivar_name_cs: 'Číslo smlouvy',
ivar_name_en: 'Contract number',
tvar_name_cs: 'Číslo smlouvy',
tvar_name_en: 'Contract number',
tvar_tooltip_cs: 'Zde je vygenerováno unikátní číslo smlouvy.',
tvar_tooltip_en: 'A unique contract number is displayed here.',
id: 84115,
meta: { href: '/processes/:iprocId/variables',},
},
..................
}
