Rename tab or field label in form rule

0

Hi,
You can create a form rule with mode: javascript.
I created a function in javascript for change a simple field, type of Single line of text.
The field isn't in a group or tab.
You can inspiration from function.

(function () {
var value = undefined;
var lineContext = uxContext.loggerContext;

value = (function (uxContext) {
if (uxContext.hasFormContextChanged()) return;

// Găsește referința câmpului țintă
const formFieldTag = window.webcon.businessRules.ensureAttributeReferenceIsValid({
fld: 'AttText2', // Identificăm câmpul după 'fld'
id: 3316, // ID-ul specific câmpului
type: 1,
toString: function () {
return window.webcon.businessRules.convertToText(
webcon.businessRules.checkIfNotEmpty(GetValue('AttText2'), false)
);
}
});

// Obține numele câmpului țintă
const targetFieldName = window.webcon.businessRules.convertToFieldName(formFieldTag);

// Găsește toate elementele cu clasa `attributeLabelDisplayName`
const possibleLabels = document.querySelectorAll('.attributeLabelDisplayName');

// Filtrare pentru a găsi elementul corect asociat cu targetFieldName
const correctLabel = Array.from(possibleLabels).find(label => {
// Caută părintele cu o relație directă cu targetFieldName
const parent = label.closest('.attributeLabelRequirednessWrapper'); // Sau alt părinte relevant
return parent && parent.textContent.includes('Culoare'); // Ajustează după conținutul text
});

// Modifică textul și stilurile doar dacă elementul corect este găsit
if (correctLabel) {
// Textul nou pentru label
const newLabel = 'Nume modificat'; // Textul pe care vrei să îl setezi
correctLabel.textContent = newLabel; // Modifică textul

// Stiluri pentru label
correctLabel.style.backgroundColor = 'red';
correctLabel.style.color = 'white';
correctLabel.style.padding = '5px';
correctLabel.style.borderRadius = '5px';

// Log pentru confirmare
console.log(`Textul și stilurile pentru label-ul câmpului ${targetFieldName} au fost modificate.`);
window.webcon.businessRules.logger.info(
typeof uxContext !== 'undefined' ? uxContext.loggerContext : undefined,
'SET LABEL NAME AND STYLE',
window.webcon.businessRules.logger.createObjectInfo(
window.webcon.objectInfo.FormObjectTypes.FormField,
targetFieldName
),
`New text: ${newLabel}, Background: red, Color: white`
);
} else {
console.warn(`Label-ul pentru câmpul ${targetFieldName} nu a fost găsit.`);
}

return undefined;
})(uxContext);

if (value !== undefined) return value;

uxContext.loggerContext = lineContext;
})();

Thanks,
Raluca

Hi Nik,

my first thought was "Why?" but ok. I agree that relying on HTML markup isn't a good practice and it will break at some point. This could be in a month, or two years.

Nevertheless, these questions often lead to new ideas and I think I had one which may cause less issues. Especially if you are using form rules to hide/show elements.

It would need some more testing, but it seems that we can achieve this with pure CSS. :)

1. Define an empty translation
2. HTML field with the CSS which defines the label /content for the tab.

WEBCON BPS 2023:
<style>
div[aria-controls="Tab_384"] span::before {
content: "Crazy tab name ";
}

</style>


WEBCON BPS 2025:
<style>
div[aria-controls="Tab_8029"] .tab__nav__text::before {
content: "Crazy tab name ";
}

</style>

We could also use a business rule to define the tab name. That's crazy. :)

Best regards,
Daniel

Hi!

Thanks a lot for the script, I will take a look into it.

Best regards, Nik

Hi Daniel!

Interesting idea, we will try that out.

Thanks a lot and best regards, Nik

Hi Nik,

whatever you choose to implement, you may think about adding something like this:
https://daniels-notes.de/posts/2025/future-proof-customizations

Best regards,
Daniel