Separate tab labels for add/edit forms Topic is solved

[nadir]

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

[kev1n]

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

[nadir]

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");
}