visibleIf, conditional visibility

Hide or show any field, section, or button based on the value of other fields. Express the condition once; the runtime evaluates it on every change.

The visibleIf rule hides a field, section, or button unless an expression evaluates to true. Use it to make forms feel responsive, only show the "Other (please specify)" text input when "Other" is chosen, only show shipping fields when the user opts not to use the billing address, only show approver fields to people in the Approvers group.

The shape

Every component has a visibleIf property that accepts an

expression string:

Inline in the designer property panel

{Department} == "Finance"

Combine conditions with AND / OR

{Department} == "Finance" and {Amount} > 10000

Reference the current user

{ApproverEmail} == [Me:Email]

The expression is parsed once at form load and re-evaluated whenever any field it references changes. There's no need to wire up listeners by hand.

When a hidden field's value is saved

A field hidden by visibleIf is removed from the DOM but its value is still saved by default. This matches user expectations on multi-step forms where the user may toggle a switch back and forth without losing earlier entries.

To clear the value when a field becomes hidden, pair visibleIf with a form-level handler:

Clear stale values when a field hides

f365.events.onChange('UseBillingAddress', (sameAsBilling) => {
  if (sameAsBilling) {
    f365.field('ShippingStreet').value = null;
    f365.field('ShippingCity').value = null;
    f365.field('ShippingPostcode').value = null;
  }
});

Limiting which form mode the rule applies to

By default a visibleIf rule applies to every mode the form opens in, New, Edit, and Display. The Rules panel underneath each rule builder lets you restrict the rule to a subset of those modes with three checkboxes labelled

New form, Edit form, and Display form. All three checked (the default) behaves exactly as before. Uncheck a mode to make the rule inert there, the component renders as if the rule weren't set.

Use it when a hide/show condition only makes sense on one mode. For example, showing an "Approval reason" field only on edit (the reason doesn't apply to the initial new-item creation, and on display it should always be visible if populated).

Under the hood the modes serialise as a CSV on

data-f365-visible-if-modes (e.g. "edit" or "new,edit"). The attribute is dropped when all three modes are selected, keeping the saved schema clean.

Other visibility sources

visibleIf is one of three sources that can hide a component. The runtime takes the AND of all three: if any of them say "hide", the component is hidden.

PropertyDescription
visibleIf
expression
Author-defined expression. Re-evaluated on change.
hidden
boolean
Static author flag, the Always hidden checkbox at the top of Rules, Visibility and state. Checked before everything else, so it wins over every rule in this table. A bound field still saves its value.
showForGroups / hideForGroups
string[] (group names)
Audience trimming, show only to members of the listed Entra/SP groups, or hide from them. See the audience reference.

Always hidden

Tick Always hidden (Rules tab, "Visibility and state") when a component should never appear, in any mode, on any device, whatever the other rules say. It is the first check the runtime makes, so it short circuits visibleIf,

showOnModes, showOnDevices and audience trimming.

A bound field ticked Always hidden still saves its value. The runtime renders a hidden input in its place, so SharePoint receives the Default on New, the result of

Calculated value when one is set, or the loaded value on Edit. That makes it the way to write a column the person filling in the form should never see:

Stamp the requestor's display name into Title

Always hidden:     ticked
Calculated value:  {RequestorName}.Title

Note the member access. In an expression a person field resolves to the whole persona object, so {RequestorName} on its own would write

[object Object]. .Title picks the display name. On interpolation surfaces (default values, display text, save rule templates) the equivalent is {RequestorName:Title}.

Layout containers and display blocks hold no value, so ticking Always hidden simply removes them, along with everything inside a hidden container. On the designer canvas a hidden component stays visible but dimmed, with an "Always hidden" badge, so you can still select it and untick the box.

Related articles