Home > Forum > Forms > Rename tab or field label in form rule

Rename tab or field label in form rule
0

Hi all!

I just wanted to know, if there is a more sophisticated way to rename a tab or a field label in a form rule.

We did some hacks in the past (e.g. renaming a tab in a register depending on some conditions), but since these changes are relying on HTML markup of a specific version, these scripts will definitely break in the next major version.

Is there a better way to rename a tab in a register card?

Unfortunately I didn't find a built-in function for that.

Thanks a lot in advance for your help.

Best regards, Nik

MVP

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

MVP

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:

div[aria-controls="Tab_384"] span::before {
content: "Crazy tab name ";
}




WEBCON BPS 2025:

div[aria-controls="Tab_8029"] .tab__nav__text::before {
content: "Crazy tab name ";
}



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

Best regards,
Daniel

In reply to: Raluca-Mirabela Lupu

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!

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

Best regards, Nik

Did you know that with WEBCON you can automate virtually any process? Even baking cookies 🍪
 
Speaking of cookies: we use the ones that are essential for our website to function properly, as well as additional ones that help us customize our content to your preferences. If you don’t mind cookies, click Accept. If you want to learn more, explore settings.
Settings