Dynamic Accordion Label (Rename)

If anyone has this need, here is one way to dynamically change the text (title) displayed on an accordion. In this example, the Accordion Title is modified on load to concatenate some custom text + the item ID.

JAVASCRIPT

fd.spRendered(function () {
  function setAccTitleToItemId() {
    var id = fd.itemId;
    var title = id ? ('Assignment Item ID: ' + id) : 'Assignment (unsaved item)';

    // Rename the FIRST accordion header text inside the control 'RenameACC'
    $(fd.container('RenameACC').$el)
      .find('.accordion-header__text')  // your confirmed class
      .eq(0)
      .text(title);
  }

  // 1) On form load
  setAccTitleToItemId();

  // 2) After first save (ID becomes available for new items)
  fd.spSaved(function () {
    setAccTitleToItemId();
  });
});

2 Likes

Marking as solution for those searching out there :slight_smile: