Prefix, suffix and inline buttons

An input group is a field wearing adornments: short text joined to one or both edges of the control, and any number of buttons after it. Use it for units and formats ($ before a price, % or kg after a number, https:// before a URL) and for actions that belong to one field rather than to the whole form ("Look up", "Clear", "Help").

Everything here is set on the field itself, on the Field tab of the property pane, under "Prefix, suffix and buttons". There is no separate component to drag.

Which fields support it

Fourteen field types: Text, Textarea, Email, Phone, URL, Number, Currency, Date, Date and time, Time, Lookup, the Lookup control, Person and the Person control.

The group works by joining bordered boxes to the edges of a single bordered control. A radio group, a checkbox grid, a signature canvas, a likert matrix, a linked list and a file dropzone are not shaped like that, so they do not offer the setting at all rather than drawing something broken. Managed metadata and the multi-select Choice dropdown are not offered either, for the same reason applied a little more finely: the Choice control is one bordered box only in its dropdown mode, not as a checkbox grid.

On a Textarea the adornments sit at the top, at normal input height, and the box grows past them. A multi-select Lookup or Person field behaves the same way, because its chip row grows downward as the user picks more items.

Properties

Each button

When the field is locked

Three cases, and they behave differently:

• An "Enable if" rule is currently false. The field greys but stays put, and so do its buttons: they render, disabled. Tick Stays clickable when the field is greyed out on any button that only reads.
• The field is read-only for a harder reason (a display form, a locked or calculated column, "Display only", read-only on edit). The field renders as a value rather than a control, so the buttons are not drawn at all. There is no setting that brings them back, which matches how the image upload and linked-list add-row buttons already behave.
• Prefix and suffix survive both. They render as plain text beside the value, so $ 1250 AUD stays readable on a display form. That is the point of a unit: it matters most where there is no input box to infer it from.

Worked examples

A price field. Currency field, prefix $, suffix AUD. The user types 1250, sees $ 1250 AUD, and SharePoint stores 1250.

A percentage. Number field, suffix %.

A budget-relative amount. Number field, suffix of {Budget}. As soon as the Budget field on the same form has a value, the suffix reads "of 40000". This is ordinary placeholder behaviour, documented in placeholders.

A site URL. URL field, prefix https://, suffix .sharepoint.com.

A reference with a lookup. Text field plus one button labelled "Look up", action Run JavaScript.

JavaScript recipes

// actionJs on a button beside the Total field.
const qty = Number(f365.field('Quantity').value) || 0;
const unit = Number(f365.field('UnitPrice').value) || 0;
f365.field('Total').value = qty * unit;
f365.ui.showToast('Total recalculated', 'success');

// actionJs on a "Clear" button. Set "Confirm first" in the property pane instead
// if you only need a plain yes/no question.
f365.field('Notes').clear();
f365.field('Notes').focus();

// actionJs. Top-level await is supported, so no promise chaining needed.
const abn = String(f365.field('ABN').value || '').replace(/\s/g, '');
if (!abn) {
  await f365.ui.showAlert('Enter an ABN first.');
} else {
  const res = await f365.http.get(
    `/_api/web/lists/getbytitle('Suppliers')/items?$filter=ABN eq '${abn}'`
  );
  const hit = res?.value?.[0];
  if (hit) {
    f365.field('SupplierName').value = hit.Title;
  } else {
    f365.ui.showToast('No supplier found for that ABN', 'info');
  }
}

// actionJs on a "Check" button beside a reference number.
const ref = String(f365.field('JobRef').value || '').trim();
if (!/^JOB-\d{5}$/.test(ref)) {
  await f365.ui.showAlert('Job references look like JOB-01234.');
  f365.field('JobRef').focus();
} else {
  f365.ui.showToast('Looks right', 'success');
}

Styling

The group renders as .f365-input-group, holding .f365-input-group-prefix, .f365-input-group-control, .f365-input-group-suffix and one .f365-input-group-btn per button. Two theme tokens control the adornment colours, so a tenant skin can restyle them without custom CSS:

Related