nuBuilder Forum

Posted: **Tue Jun 10, 2025 12:10 pm**

Hello,

Is it possible to have separate tab labels for add and edit form ?. I would like the user to know if he is editing an existing record or adding a new record

Thanks,
Nadir

Posted: **Tue Jun 10, 2025 1:06 pm**

Hi,

You can configure a Breadcrumb Title for any form by adding, for example: New|Existing
to the form’s Properties (see the documentation here)

If you’d like to apply custom styling and display that breadcrumb in every form, you can turn it into a “badge.”

To do this:

- Go to Setup → Header
- Declare a JavaScript function that generates and inserts your badge. For example:

Code: Select all

function setNewExistingBreadcrumbTitle() {

  const breadcrumbLength = $('.nuBreadcrumb').length;
  titleText = $('#nuBreadcrumb' + breadcrumbLength ).text();
  const isNew = nuIsNewRecord();
  const badge = document.createElement('span');

  badge.textContent = isNew ? 'New' : 'Existing';
  badge.setAttribute('style', [
    'display: inline-block',
    'margin-left: 0.5em',
    'padding: 0.2em 0.5em',
    'border-radius: 0.25em',
    'font-size: 0.75em',
    'font-weight: bold',
    'color: #fff',
    `background-color: ${isNew ? '#28a745' : '#007bff'}` 
  ].join('; '));

  const fullTitle = `${titleText} ${badge.outerHTML}`;
  $('#nuBreadcrumb' + breadcrumbLength ).html( fullTitle);
}

Then call it whenever a edit form is loaded:

Code: Select all

function nuLoadEditGlobal(formId, formCode) {
   setNewExistingBreadcrumbTitle();
}

Save your changes and log in again — the badge will now appear at the end of the breadcrumb.

You can tweak the code to match your application’s look and feel.

Example:

new_record.PNG

existing_record.PNG

Posted: **Thu Jun 12, 2025 10:05 am**

Well, I wanted the tab text to change depending on whether the form is in add mode or edit mode. I managed to do this by using following JavaScript custom code:

Code: Select all

if(!nuIsNewRecord())  {
  $("#nuTab0").html("Edit existing User ID");
}
else {
  $("#nuTab0").html("Create new User ID");
}

nuBuilder Forum

Separate tab labels for add/edit forms

Separate tab labels for add/edit forms

Re: Separate tab labels for add/edit forms

Re: Separate tab labels for add/edit forms