@topconsultnpm/sdkui-react 6.21.0-t1 → 6.21.0-t3

package/lib/components/editors/TMFormulaEditor.js

@@ -58,11 +58,15 @@ export const renderFormulaIcon = (iconType, tid, md) => {
         default: return _jsx(_Fragment, {});
     }
 };
+const FormulaTreeViewItem = ({ item }) => {
+    return (_jsxs(StyledDivHorizontal, { style: { display: 'flex', gap: '5px', alignItems: 'center' }, children: [renderFormulaIcon(item.icon, item.tid, item.md), _jsx("span", { style: { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }, children: item.text })] }));
+};
 const TMFormulaEditor = (props) => {
     const deviceType = useDeviceType();
     const [validationItems, setValidationItems] = useState([]);
     const { formData, setFormData, formDataOrig, exception, applyData } = useApplyForm(props.formMode, props.inputData, () => new FormulaDescriptor(), props.onApplied);
     const [isVertical, setIsVertical] = useState(deviceType === DeviceType.MOBILE);
+    const [selectedItem, setSelectedItem] = useState(null);
     // const [code, setCode] = useState(`function add(a, b) {\n  return a + b;\n}` );
     const textAreaRef = useRef(null);
     const { ref, width } = useResizeObserver();
@@ -130,37 +134,26 @@ const TMFormulaEditor = (props) => {
         }
     };
     const renderTreeViewItem = useCallback((item) => {
-        return (_jsxs(StyledDivHorizontal, { style: { display: 'flex', gap: '5px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }, children: [renderFormulaIcon(item.icon, item.tid, item.md), _jsx("p", { style: { verticalAlign: 'middle', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }, children: item.text })] }));
+        return _jsx(FormulaTreeViewItem, { item: item });
     }, []);
-    const translateDescInFormula = (text) => {
-        switch (text) {
-            case `TM_GetViewLink (${SDKUI_Localizator.FormulaEditor_Function_TM_GetViewLink_WithoutLogin})`:
-                return `[dbo].[TM_GetViewLink](NULL, NULL, NULL, 0, {@TID}, {@DID}, 1, NULL, 0)`;
-            case `TM_GetViewLink (${SDKUI_Localizator.FormulaEditor_Function_TM_GetViewLink_WithLogin})`:
-                return `[dbo].[TM_GetViewLink](NULL, 'ASKLOGIN', NULL, 0, {@TID}, {@DID}, 1, NULL, 0)`;
-            case `TM_GetViewLink (${SDKUI_Localizator.FormulaEditor_Function_TM_GetViewLink_WithDate})`:
-                return `[dbo].[TM_GetViewLink](NULL, NULL, NULL, 0, {@TID}, {@DID}, 1, CONVERT(VARCHAR, {@CreationTime}+30, 126), 0)`;
-                break;
-        }
-        return text;
-    };
     const handleTreeViewItemClick = (e) => {
         if (!e)
             return;
         if (e.itemData?.hasItems)
             return;
-        insertText(translateDescInFormula(e.itemData?.text));
+        setSelectedItem(e.itemData);
+        insertText(FormulaHelper.translateDescInFormula(e.itemData?.text));
     };
-    return (_jsx(TMApplyForm, { isModal: props.isModal, formMode: props.formMode, isModified: formData.expression !== formDataOrig.expression, exception: exception, validationItems: validationItems, title: SDKUI_Localizator.Formula, hasNavigation: false, showBack: props.showBack, height: '600px', width: '800px', onApply: () => applyData(), onClose: props.onClose, onUndo: () => {
+    return (_jsxs(TMApplyForm, { isModal: props.isModal, formMode: props.formMode, isModified: formData.expression !== formDataOrig.expression, exception: exception, validationItems: validationItems, title: SDKUI_Localizator.Formula, hasNavigation: false, showBack: props.showBack, height: '600px', width: '800px', onApply: () => applyData(), onClose: props.onClose, onUndo: () => {
             setFormData(formDataOrig);
             setValidationItems([]);
-        }, customToolbarElements: _jsx(TMButton, { caption: SDKUI_Localizator.EvaluateResult, onClick: () => { formulaValidator_BackEnd(); }, btnStyle: 'toolbar', icon: _jsx(IconNotification, {}) }), children: _jsx("div", { ref: ref, style: { width: '100%', height: '100%' }, children: _jsxs(TMSplitterLayout, { direction: isVertical ? 'vertical' : 'horizontal', showSeparator: true, separatorSize: 5, start: isVertical ? ['50%', '50%'] : ['35%', '65%'], min: ['0px', '0px'], children: [_jsx(TMCard, { scrollX: true, children: _jsx(TreeView, { id: "treeview", items: props.inputData?.items, width: '100%', height: '100%', scrollDirection: 'vertical', itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick }) }), _jsxs(TMLayoutContainer, { direction: 'vertical', children: [_jsx(TMLayoutItem, { children: _jsx(TMCard, { scrollX: true, children: _jsx("textarea", { ref: textAreaRef, spellCheck: false, value: formData?.expression ?? '', onChange: (e) => {
-                                            setFormData({ ...formData, expression: e.target.value });
-                                            if (e.target.value != formDataOrig?.expression)
-                                                insertValidationItem();
-                                            else
-                                                setValidationItems([]);
-                                        }, style: { border: 'none', resize: 'none', color: TMColors.text_normal, fontSize: FontSize.defaultFontSize, padding: '5px', width: '100%', height: 'calc(100% - 4px)' } }) }) }), _jsx(TMLayoutItem, { height: "max-content", children: _jsx(TMVilViewer, { vil: validationItems }) })] })] }) }) }));
+        }, customToolbarElements: _jsx(TMButton, { caption: SDKUI_Localizator.EvaluateResult, onClick: () => { formulaValidator_BackEnd(); }, btnStyle: 'toolbar', icon: _jsx(IconNotification, {}) }), children: [selectedItem?.description && (_jsx(TMLayoutItem, { height: "max-content", children: _jsxs("div", { style: { padding: '6px 10px', background: TMColors.default_background, borderTop: `1px solid ${TMColors.border_normal}`, fontSize: FontSize.defaultFontSize }, children: [_jsx("span", { style: { fontWeight: 'bold', color: TMColors.info, marginRight: '8px' }, children: selectedItem.syntax }), _jsx("span", { style: { color: TMColors.info }, children: selectedItem.description })] }) })), _jsx("div", { ref: ref, style: { width: '100%', height: '100%' }, children: _jsxs(TMSplitterLayout, { direction: isVertical ? 'vertical' : 'horizontal', showSeparator: true, separatorSize: 5, start: isVertical ? ['50%', '50%'] : ['35%', '65%'], min: ['0px', '0px'], children: [_jsx(TMCard, { scrollX: true, children: _jsx(TreeView, { id: "treeview", items: props.inputData?.items, width: '100%', height: '100%', scrollDirection: 'vertical', itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick }) }), _jsxs(TMLayoutContainer, { direction: 'vertical', children: [_jsx(TMLayoutItem, { children: _jsx(TMCard, { scrollX: true, children: _jsx("textarea", { ref: textAreaRef, spellCheck: false, value: formData?.expression ?? '', onChange: (e) => {
+                                                setFormData({ ...formData, expression: e.target.value });
+                                                if (e.target.value != formDataOrig?.expression)
+                                                    insertValidationItem();
+                                                else
+                                                    setValidationItems([]);
+                                            }, style: { border: 'none', resize: 'none', color: TMColors.text_normal, fontSize: FontSize.defaultFontSize, padding: '5px', width: '100%', height: 'calc(100% - 4px)' } }) }) }), _jsx(TMLayoutItem, { height: "max-content", children: _jsx(TMVilViewer, { vil: validationItems }) })] })] }) })] }));
 };
 export default TMFormulaEditor;
 export class FormulaHelper {
@@ -351,6 +344,8 @@ export class FormulaHelper {
                             tid: -1,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescInstruction_SS_CASE,
+                            syntax: "CASE...WHEN boolean_expression THEN result_expression ...ELSE else_result_expression...END"
                         }, {
                             id: '1_4_2',
                             text: 'IS NULL',
@@ -358,6 +353,8 @@ export class FormulaHelper {
                             tid: -1,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescInstruction_SS_ISNULL,
+                            syntax: "expression IS [ NOT ] NULL"
                         }];
                 break;
             case DBBrands.Oracle:
@@ -369,6 +366,8 @@ export class FormulaHelper {
                             tid: -1,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescInstruction_ORA_CASE,
+                            syntax: "CASE case_operand ...WHEN when_operand THEN statement...ELSE statement...END"
                         }, {
                             id: '1_4_2',
                             text: 'IS NULL',
@@ -376,6 +375,8 @@ export class FormulaHelper {
                             tid: -1,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescInstruction_ORA_IS_NULL,
+                            syntax: "expression IS [ NOT ] NULL"
                         }, {
                             id: '1_4_3',
                             text: 'GREATEST',
@@ -383,6 +384,8 @@ export class FormulaHelper {
                             tid: -1,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescInstruction_ORA_GREATEST,
+                            syntax: "GREATEST(expr [, expr ])"
                         }, {
                             id: '1_4_4',
                             text: 'LEAST',
@@ -390,6 +393,8 @@ export class FormulaHelper {
                             tid: -1,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescInstruction_ORA_LEAST,
+                            syntax: "LEAST(expr [, expr ])"
                         }];
                 break;
         }
@@ -437,24 +442,32 @@ export class FormulaHelper {
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescInstruction_SS_CONVERT,
+                            syntax: "CONVERT ( data_type [ ( length ) ] , expression [ , style ] )"
                         }, {
                             id: '3_1_2',
                             text: 'CONVERT(nvarchar)',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescInstruction_SS_CONVERTnvarchar,
+                            syntax: "CONVERT ( NVARCHAR [ ( length ) ] , expression [ , style ] )"
                         }, {
                             id: '3_1_3',
                             text: 'CONVERT(int)',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescInstruction_SS_CONVERTint,
+                            syntax: "CONVERT ( INT [ ( length ) ] , expression [ , style ] )"
                         }, {
                             id: '3_1_4',
                             text: 'ISNULL',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescInstruction_SS_ISNULL,
+                            syntax: "ISNULL ( expression , replacement_value )"
                         }];
                 break;
             case DBBrands.Oracle:
@@ -465,24 +478,32 @@ export class FormulaHelper {
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescInstruction_ORA_CAST,
+                            syntax: "CAST( { expr | MULTISET ( subquery ) } AS type_name )"
                         }, {
                             id: '3_1_2',
                             text: 'CAST(NVARCHAR2)',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescInstruction_ORA_CASTnvarchar2,
+                            syntax: "CAST ( expression | MULTISET ( subquery ) AS NVARCHAR2( length ) )"
                         }, {
                             id: '3_1_3',
                             text: 'CAST(NUMERIC)',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescInstruction_ORA_CASTnumeric,
+                            syntax: "CAST ( expression | MULTISET ( subquery ) AS NUMERIC( precision, scale ) )"
                         }, {
                             id: '3_1_4',
                             text: 'NVL',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescInstruction_ORA_NVL,
+                            syntax: "NVL ( expression , replacement_value )"
                         }];
                 break;
         }
@@ -499,72 +520,96 @@ export class FormulaHelper {
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_SS_LEN,
+                            syntax: "LEN ( string_expression )"
                         }, {
                             id: '3_2_2',
                             text: 'LEFT',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_SS_LEFT,
+                            syntax: "LEFT ( character_expression , integer_expression )"
                         }, {
                             id: '3_2_3',
                             text: 'LOWER',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_SS_LOWER,
+                            syntax: "LOWER ( string_expression )"
                         }, {
                             id: '3_2_4',
                             text: 'LTRIM',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_SS_LTRIM,
+                            syntax: "LTRIM ( string_expression )"
                         }, {
                             id: '3_2_5',
                             text: 'REPLACE',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_SS_REPLACE,
+                            syntax: "REPLACE ( string_expression , string_pattern , string_replacement )"
                         }, {
                             id: '3_2_6',
                             text: 'REPLICATE',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_SS_REPLICATE,
+                            syntax: "REPLICATE ( string_expression , integer_expression )"
                         }, {
                             id: '3_2_7',
                             text: 'RIGHT',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_SS_RIGHT,
+                            syntax: "RIGHT ( string_expression , integer_expression )"
                         }, {
                             id: '3_2_8',
                             text: 'RTRIM',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_SS_RTRIM,
+                            syntax: "RTRIM ( string_expression )"
                         }, {
                             id: '3_2_9',
                             text: 'SPACE',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_SS_SPACE,
+                            syntax: "SPACE ( integer_expression )"
                         }, {
                             id: '3_2_10',
                             text: 'STUFF',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_SS_STUFF,
+                            syntax: "STUFF ( character_expression , start , length , replaceWith_character_expression )"
                         }, {
                             id: '3_2_11',
                             text: 'SUBSTRING',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_SS_SUBSTRING,
+                            syntax: "SUBSTRING ( expression , start , length )"
                         }, {
                             id: '3_2_12',
                             text: 'UPPER',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_SS_UPPER,
+                            syntax: "UPPER ( string_expression )"
                         }];
                 break;
             case DBBrands.Oracle:
@@ -575,36 +620,48 @@ export class FormulaHelper {
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_ORA_LENGTH,
+                            syntax: "LENGTH ( string )"
                         }, {
                             id: '3_2_2',
                             text: 'LOWER',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_ORA_LOWER,
+                            syntax: "LOWER ( string )"
                         }, {
                             id: '3_2_3',
                             text: 'TRIM',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_ORA_TRIM,
+                            syntax: "TRIM ( [ trim_character FROM ] string )"
                         }, {
                             id: '3_2_4',
                             text: 'REPLACE',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_ORA_REPLACE,
+                            syntax: "REPLACE ( string, search_string, replacement_string )"
                         }, {
                             id: '3_2_5',
                             text: 'SUBSTR',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_ORA_SUBSTR,
+                            syntax: "SUBSTR ( string, start_position [, length ] )"
                         }, {
                             id: '3_2_6',
                             text: 'UPPER',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_ORA_UPPER,
+                            syntax: "UPPER ( string )"
                         }];
                 break;
         }
@@ -621,18 +678,24 @@ export class FormulaHelper {
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_SS_DATEDIFFyear,
+                            syntax: "DATEDIFF ( datepart , startdate , enddate )"
                         }, {
                             id: '3_3_2',
                             text: 'DATEDIFF ( day )',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_SS_DATEDIFFday,
+                            syntax: "DATEDIFF ( datepart , startdate , enddate )"
                         }, {
                             id: '3_3_3',
                             text: 'DATEADD',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_SS_DATEADD,
+                            syntax: "DATEADD ( datepart , number , date )"
                         }];
                 if (formulaTarget == FormulaTargets.DefaultValue || formulaTarget == FormulaTargets.BatchUpdate) {
                     items.push({
@@ -641,24 +704,32 @@ export class FormulaHelper {
                         icon: FormulaIconTypes.Function,
                         expanded: false,
                         hasItems: false,
+                        description: SDKUI_Localizator.FormulaEditor_DescFunction_SS_GETDATE,
+                        syntax: "GETDATE()"
                     }, {
                         id: '3_3_5',
                         text: 'DAY(GETDATE())',
                         icon: FormulaIconTypes.Function,
                         expanded: false,
                         hasItems: false,
+                        description: SDKUI_Localizator.FormulaEditor_DescFunction_SS_DAYGETDATE,
+                        syntax: "DAY(GETDATE())"
                     }, {
                         id: '3_3_6',
                         text: 'MONTH(GETDATE())',
                         icon: FormulaIconTypes.Function,
                         expanded: false,
                         hasItems: false,
+                        description: SDKUI_Localizator.FormulaEditor_DescFunction_SS_MONTHGETDATE,
+                        syntax: "MONTH(GETDATE())"
                     }, {
                         id: '3_3_7',
                         text: 'YEAR(GETDATE())',
                         icon: FormulaIconTypes.Function,
                         expanded: false,
                         hasItems: false,
+                        description: SDKUI_Localizator.FormulaEditor_DescFunction_SS_YEARGETDATE,
+                        syntax: "YEAR(GETDATE())"
                     });
                 }
                 break;
@@ -670,18 +741,24 @@ export class FormulaHelper {
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_ORA_TO_DATE,
+                            syntax: "TO_DATE( string, format )"
                         }, {
                             id: '3_3_2',
                             text: 'LAST_DAY',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_ORA_LAST_DAY,
+                            syntax: "LAST_DAY( date )"
                         }, {
                             id: '3_3_3',
                             text: 'ADD_MONTHS',
                             icon: FormulaIconTypes.Function,
                             expanded: false,
                             hasItems: false,
+                            description: SDKUI_Localizator.FormulaEditor_DescFunction_ORA_ADD_MONTHS,
+                            syntax: "ADD_MONTHS( date, n_months )"
                         }];
                 if (formulaTarget == FormulaTargets.DefaultValue || formulaTarget == FormulaTargets.BatchUpdate) {
                     items.push({
@@ -690,24 +767,32 @@ export class FormulaHelper {
                         icon: FormulaIconTypes.Function,
                         expanded: false,
                         hasItems: false,
+                        description: SDKUI_Localizator.FormulaEditor_DescFunction_ORA_SYSDATE,
+                        syntax: "SYSDATE"
                     }, {
                         id: '3_3_5',
                         text: 'TO_CHAR(SYSDATE, "DD")',
                         icon: FormulaIconTypes.Function,
                         expanded: false,
                         hasItems: false,
+                        description: SDKUI_Localizator.FormulaEditor_DescFunction_ORA_TOCHARDATETIME,
+                        syntax: "TO_CHAR(SYSDATE, 'DD')"
                     }, {
                         id: '3_3_6',
                         text: 'TO_CHAR(SYSDATE, "MM")',
                         icon: FormulaIconTypes.Function,
                         expanded: false,
                         hasItems: false,
+                        description: SDKUI_Localizator.FormulaEditor_DescFunction_ORA_TOCHARDATETIME,
+                        syntax: "TO_CHAR(SYSDATE, 'MM')"
                     }, {
                         id: '3_3_7',
                         text: 'TO_CHAR(SYSDATE, "YYYY")',
                         icon: FormulaIconTypes.Function,
                         expanded: false,
                         hasItems: false,
+                        description: SDKUI_Localizator.FormulaEditor_DescFunction_ORA_TOCHARDATETIME,
+                        syntax: "TO_CHAR(SYSDATE, 'YYYY')"
                     });
                 }
                 break;
@@ -721,19 +806,37 @@ export class FormulaHelper {
                 icon: FormulaIconTypes.Function,
                 expanded: false,
                 hasItems: false,
+                description: SDKUI_Localizator.FormulaEditor_DescFunction_TM_GetViewLink_WithoutLogin,
+                syntax: "TM_GetViewLink(Domain, UserName, Psw, CultureID, TID, DID, WithoutP7M, ExpDate, LastVer)"
             }, {
                 id: '3_4_2',
                 text: `TM_GetViewLink (${SDKUI_Localizator.FormulaEditor_Function_TM_GetViewLink_WithLogin})`,
                 icon: FormulaIconTypes.Function,
                 expanded: false,
                 hasItems: false,
+                description: SDKUI_Localizator.FormulaEditor_DescFunction_TM_GetViewLink_WithLogin,
+                syntax: "TM_GetViewLink(Domain, UserName, Psw, CultureID, TID, DID, WithoutP7M, ExpDate, LastVer)"
             }, {
                 id: '3_4_3',
                 text: `TM_GetViewLink (${SDKUI_Localizator.FormulaEditor_Function_TM_GetViewLink_WithDate})`,
                 icon: FormulaIconTypes.Function,
                 expanded: false,
                 hasItems: false,
+                description: SDKUI_Localizator.FormulaEditor_DescFunction_TM_GetViewLink_WithDate,
+                syntax: "TM_GetViewLink(Domain, UserName, Psw, CultureID, TID, DID, WithoutP7M, ExpDate, LastVer)"
             }];
         return items;
     }
 }
+FormulaHelper.translateDescInFormula = (text, returnType) => {
+    switch (text) {
+        case `TM_GetViewLink (${SDKUI_Localizator.FormulaEditor_Function_TM_GetViewLink_WithoutLogin})`:
+            return `[dbo].[TM_GetViewLink](NULL, NULL, NULL, 0, {@TID}, {@DID}, 1, NULL, 0)`;
+        case `TM_GetViewLink (${SDKUI_Localizator.FormulaEditor_Function_TM_GetViewLink_WithLogin})`:
+            return `[dbo].[TM_GetViewLink](NULL, 'ASKLOGIN', NULL, 0, {@TID}, {@DID}, 1, NULL, 0)`;
+        case `TM_GetViewLink (${SDKUI_Localizator.FormulaEditor_Function_TM_GetViewLink_WithDate})`:
+            return `[dbo].[TM_GetViewLink](NULL, NULL, NULL, 0, {@TID}, {@DID}, 1, CONVERT(VARCHAR, {@CreationTime}+30, 126), 0)`;
+            break;
+    }
+    return returnType ?? text;
+};

package/lib/components/editors/TMHtmlContentDisplay.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 interface IHtmlContentDisplay {
     markup: string;
     isSelected: boolean;
     searchText?: string;
 }
-declare const TMHtmlContentDisplay: (props: IHtmlContentDisplay) => import("react/jsx-runtime").JSX.Element;
+declare const TMHtmlContentDisplay: (props: IHtmlContentDisplay) => React.JSX.Element;
 export default TMHtmlContentDisplay;

package/lib/components/editors/TMHtmlEditor.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ValidationItem } from '@topconsultnpm/sdk-ts';
 export declare const sanitizeAndFormatComment: (raw?: string) => string;
 export interface ITMHtmlEditor {
@@ -34,5 +35,5 @@ export interface ITMHtmlEditor {
     /** If true, displays a character count below the editor */
     showCount?: boolean;
 }
-declare const TMHtmlEditor: (props: ITMHtmlEditor) => import("react/jsx-runtime").JSX.Element;
+declare const TMHtmlEditor: (props: ITMHtmlEditor) => React.JSX.Element;
 export default TMHtmlEditor;

package/lib/components/editors/TMMetadataEditor.js

@@ -79,12 +79,16 @@ const TMMetadataEditor = ({ isSelected = false, customLabel, isReadOnly, isLexPr
     if (value?.startsWith("{@QueryParam") || value == "{@UserName}" || value == "{@UserID}" || queryOperator == QueryOperators.Custom || isEditable)
         return _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'text', maxLength: isEditable ? undefined : maxLength, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
     if (md?.dataDomain == MetadataDataDomains.DynamicDataList)
-        return _jsx(TMDynDataListItemChooser, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', titleForm: md.nameLoc, readOnly: isReadOnlyResult, layoutMode: layoutMode, isModifiedWhen: isModifiedWhenInternal(), label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, md: md, tid: tid, openChooserBySingleClick: openChooserBySingleClick, queryParamsDynDataList: queryParamsDynDataList, onCascadeRefreshDynDataLists: onCascadeRefreshDynDataLists, onCascadeUpdateMIDs: onCascadeUpdateMIDs, elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, allowMultipleSelection: multipleSelectionIsenabled, values: value ? value.split(',').filter(v => v.trim() !== '') : [], showClearButton: !isReadOnlyResult, onValueChanged: (IDs) => {
+        return _jsx(TMDynDataListItemChooser, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', titleForm: md.nameLoc, readOnly: isReadOnlyResult, layoutMode: layoutMode, isModifiedWhen: isModifiedWhenInternal(), label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, md: md, tid: tid, openChooserBySingleClick: openChooserBySingleClick, queryParamsDynDataList: queryParamsDynDataList, onCascadeRefreshDynDataLists: onCascadeRefreshDynDataLists, onCascadeUpdateMIDs: onCascadeUpdateMIDs, elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, allowMultipleSelection: multipleSelectionIsenabled, values: multipleSelectionIsenabled ? (value ? value.split(',') : []) : (value ? [value] : []), showClearButton: !isReadOnlyResult, onValueChanged: (IDs) => {
                 const filteredIDs = IDs?.filter(id => id.trim() !== '');
                 if (!filteredIDs || filteredIDs.length <= 0)
                     onValueChanged?.(undefined);
-                else
+                else if (multipleSelectionIsenabled) {
                     onValueChanged?.(filteredIDs.join(","));
+                }
+                else {
+                    onValueChanged?.(filteredIDs[0]);
+                }
             }, updateIsModalOpen: updateIsModalOpen });
     if (md?.dataDomain == MetadataDataDomains.DataList)
         return _jsx(TMDataListItemChooser, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', titleForm: md.nameLoc, readOnly: isReadOnlyResult, isModifiedWhen: isModifiedWhenInternal(), label: (modulesWithLabelTop || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? icon : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, dataListId: md.dataListID, openChooserBySingleClick: openChooserBySingleClick, allowMultipleSelection: multipleSelectionIsenabled, values: value?.split(',').map((item) => !item.startsWith("'") ? item : item.slice(1, -1)) ?? [], showClearButton: !isReadOnlyResult, onValueChanged: (IDs) => {

package/lib/components/editors/TMMetadataValues.js

@@ -15,6 +15,8 @@ import { TMNothingToShow } from "../features/documents/TMDcmtPreview";
 import TMAccordion from "../base/TMAccordion";
 import TabPanel, { Item } from 'devextreme-react/tab-panel';
 import { TMExceptionBoxManager } from "../base/TMPopUp";
+// Costante per la minWidth degli elementi - garantisce coerenza tra layout orizzontale e verticale
+const ITEM_MIN_WIDTH = 200;
 export var ShowCheckBoxesMode;
 (function (ShowCheckBoxesMode) {
     ShowCheckBoxesMode[ShowCheckBoxesMode["Never"] = 0] = "Never";
@@ -47,8 +49,12 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
             let dynDLToBeRefreshed = dynDataListsToBeRefreshed.find(o => o.midStarter === mid);
             while (dynDLToBeRefreshed != undefined) {
                 const item = newValues.find(value => value.mid === dynDLToBeRefreshed?.mid);
-                if (item)
+                if (item) {
                     item.value = newValue;
+                    if (showCheckBoxes !== ShowCheckBoxesMode.Never) {
+                        item.isSelected = false;
+                    }
+                }
                 dynDLToBeRefreshed = dynDataListsToBeRefreshed.find(o => o.midStarter === item?.mid);
             }
         }
@@ -287,8 +293,12 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                             let newMetadata = structuredClone(metadataValues);
                             for (const item of midsToBeUpdated) {
                                 const mdItem = newMetadata.find(value => value.mid === item.mid);
-                                if (mdItem)
+                                if (mdItem) {
                                     mdItem.value = item.value;
+                                    if (showCheckBoxes !== ShowCheckBoxesMode.Never) {
+                                        mdItem.isSelected = !stringIsNullOrEmpty(item.value);
+                                    }
+                                }
                             }
                             onValueChanged?.(newMetadata);
                         }, updateIsModalOpen: updateIsModalOpen }), FormulaHelper.isFormula(item.value)
@@ -579,7 +589,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
             else if (layoutItem.type === LayoutItemTypes.LayoutGroup && layoutItem.lgd) {
                 const children = getChildren(layoutItem.layoutItemID);
                 const groupDescriptor = layoutItem.lgd;
-                const groupTitle = groupDescriptor.caption || `Group ${layoutItem.layoutItemID}`;
+                const groupTitle = (groupDescriptor.showCaption ? groupDescriptor.caption || `Group ${layoutItem.layoutItemID}` : '');
                 const groupIsNoBorder = groupDescriptor.borderStyle == undefined || groupDescriptor.borderStyle == LayoutGroupBorderStyles.NoBorder || groupDescriptor.borderStyle == LayoutGroupBorderStyles.None;
                 const isCollapsed = false; // LayoutGroupDescriptor doesn't have collapsed property
                 const isVertical = groupDescriptor.orientation === LayoutGroupOrientations.Vertical;
@@ -608,7 +618,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                 }
                 // Orizzontale con bordo, children e titolo
                 if (!groupIsNoBorder && isHorizontal && children.length > 0 && groupTitle.length > 0) {
-                    return (_jsxs("div", { style: borderedGroupStyle('row'), children: [groupTitleElement, renderChildren(layoutItem, nextDepth)] }, `group-horizontal-${layoutItem.layoutItemID}`));
+                    return (_jsxs("div", { style: { position: 'relative', border: '2px solid #CAD9EB', borderRadius: '3px', padding: '12px 6px 6px', margin: '10px' }, children: [groupTitleElement, _jsx("div", { style: { display: 'flex', flexDirection: 'row', flexWrap: 'nowrap', gap: '8px', overflowX: 'auto', overflowY: 'hidden', paddingBottom: '8px' }, children: children.map(child => (_jsx("div", { style: { flex: `1 1 ${ITEM_MIN_WIDTH}px`, minWidth: `${ITEM_MIN_WIDTH}px` }, children: renderLayoutItem(child, nextDepth, visited) }, child.layoutItemID))) })] }, `group-horizontal-${layoutItem.layoutItemID}`));
                 }
                 // Verticale senza bordo
                 if (groupIsNoBorder && isVertical) {
@@ -625,8 +635,14 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                 }
                 // Orizzontale
                 if (isHorizontal) {
-                    const renderHorizontalChildren = () => children.map(child => (_jsx("div", { style: { flex: '1 1 0', minWidth: 0 }, children: renderLayoutItem(child, nextDepth, visited) }, child.layoutItemID)));
-                    return (_jsx("div", { style: { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: '3px' }, children: groupDescriptor.borderStyle === LayoutGroupBorderStyles.GroupBox || groupDescriptor.borderStyle === LayoutGroupBorderStyles.Tabbed ? (_jsx(TMAccordion, { title: groupTitle, titleSize: "Small", children: renderChildren(layoutItem, nextDepth) })) : groupDescriptor.borderStyle === LayoutGroupBorderStyles.Group ? (_jsxs("div", { style: borderedGroupStyle('column'), children: [groupTitleElement, renderHorizontalChildren()] })) : (renderHorizontalChildren()) }, `group-horizontal-${layoutItem.layoutItemID}`));
+                    const renderHorizontalChildren = () => (_jsx("div", { style: { display: 'flex', flexDirection: 'row', flexWrap: 'nowrap', gap: '8px', overflowX: 'auto', overflowY: 'hidden', paddingBottom: '8px' }, children: children.map(child => (_jsx("div", { style: { flex: `1 1 ${ITEM_MIN_WIDTH}px`, minWidth: `${ITEM_MIN_WIDTH}px` }, children: renderLayoutItem(child, nextDepth, visited) }, child.layoutItemID))) }));
+                    if (groupDescriptor.borderStyle === LayoutGroupBorderStyles.GroupBox || groupDescriptor.borderStyle === LayoutGroupBorderStyles.Tabbed) {
+                        return (_jsx(TMAccordion, { title: groupTitle, titleSize: "Small", children: renderHorizontalChildren() }, `group-horizontal-${layoutItem.layoutItemID}`));
+                    }
+                    if (groupDescriptor.borderStyle === LayoutGroupBorderStyles.Group) {
+                        return (_jsxs("div", { style: { position: 'relative', border: '2px solid #CAD9EB', borderRadius: '3px', padding: '12px 6px 6px', margin: '10px' }, children: [groupTitleElement, renderHorizontalChildren()] }, `group-horizontal-${layoutItem.layoutItemID}`));
+                    }
+                    return (_jsx("div", { children: renderHorizontalChildren() }, `group-horizontal-${layoutItem.layoutItemID}`));
                 }
                 // Fallback: gruppo con accordion e indentazione
                 const indentationPx = depth > 0 ? depth * 10 : 0;
@@ -675,7 +691,8 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
         if (allSystem) {
             return metadataValues.map((item) => renderMetadataItem(item, true));
         }
-        if (isApprovalWorkflowView(currentDTD) && !isReadOnly) {
+        // Se siamo in ApprovalWorkflowView e non è in sola lettura, forziamo il layout del WorkItem anche se non è presente un layout specifico
+        if ((isApprovalWorkflowView(currentDTD) && !isReadOnly) && (!layout || !layout.items || layout.items.length === 0)) {
             return layoutWorkItem;
         }
         switch (currentDTD?.id) {
@@ -708,6 +725,7 @@ const StyledRow = styled.div `
     display: flex; 
     flex-direction: row; 
     width: 100%; 
+    min-width: ${ITEM_MIN_WIDTH}px;
     gap: 5px; 
 `;
 const StyledSeparator = styled.hr `