Create link feature within select field?

Scriptcase 9 General
#1

Hi,
I need to create a link next to a select field in order to make possible to user to fast insert the missing master data related to a select field. Once inserted the new master data row I want that user come back in the same field and choose from the select data the new one .
Scriptcase by default insert the Edit button close to field but in my case I got lot of fields in form and it’s too large to have this button on all select fields I have there.
My idea was to use “+” instead but the issue is the following one.
If I change the text (on Application language) of “Edit” then in all other parts of application I will have the issue of “+” instead of Edit .
I’m stuck here and I don’t know how to fix it

#3

On your form / control

In OnScriptInit copy and paste.

Under ‘const updates’ change the id’s to your field edit button id’s. ( as you have indicated you have mutliple field edit buttons)

if the field you are looking up is province_id then the id will be fldedt_province_id.
The solution allows you to change the icon and label per field edit button.

The JS only executes after the page is loaded, working nicely with SC events.

//------------------------------- UPDATE FIELD EDIT BUTTON-------------------------------
//Close php to inject JS
<?
<script>
document.addEventListener('DOMContentLoaded', () => {
  const updates = [
    { id: 'fldedt_province_id', label: 'Update',  icon: 'fa-sync',  title: 'Update record',  enable: true  },
    { id: 'fldedt_city_id',     label: 'Approve', icon: 'fa-check', title: 'Approve changes', enable: true  },
    { id: 'fldedt_region_id',   label: 'View',    icon: 'fa-eye',   title: 'View only',       enable: false },
  ];

  function updateButtonById(cfg) {
    const btn = document.getElementById(cfg.id);
    if (!btn) return;

    if (cfg.label) {
      const lbl = btn.querySelector('.btn-label') || btn.querySelector('span, .label, .scButtonText');
      if (lbl) lbl.textContent = cfg.label;
    }

    if (cfg.icon) {
      const icon = btn.querySelector('i, .fa, .fas, .far, .fal, .fab');
      if (icon) icon.className = `icon_fa fas ${cfg.icon}`.trim();
    }

    if (cfg.title) {
      btn.title = cfg.title;
      btn.setAttribute('aria-label', cfg.title);
    }

    if (typeof cfg.enable === 'boolean') {
      btn.classList.toggle('is-disabled', !cfg.enable);
      btn.setAttribute('aria-disabled', String(!cfg.enable));
      if (!cfg.enable) {
        btn.dataset._originalOnClick = btn.dataset._originalOnClick || btn.getAttribute('onclick') || '';
        btn.removeAttribute('onclick');
        btn.addEventListener('click', blockClick, { once: false });
        btn.style.pointerEvents = 'none';
        btn.style.opacity = '0.6';
        btn.tabIndex = -1;
      } else {
        if (btn.dataset._originalOnClick) {
          btn.setAttribute('onclick', btn.dataset._originalOnClick);
        }
        btn.removeEventListener('click', blockClick);
        btn.style.pointerEvents = '';
        btn.style.opacity = '';
        btn.removeAttribute('tabindex');
        btn.removeAttribute('aria-disabled');
      }
    }
  }

  function blockClick(e){ e.preventDefault(); e.stopImmediatePropagation(); }

  updates.forEach(updateButtonById);
});
</script>
<?php
// Open PHP again