How to Conditionally Hide Side Panel Page Items Based on Record Data in Alpha / DataFabric

Community Best Practices & Tutorials
, ,
1

Hey Neutrinos community! :waving_hand:

Quick but super useful one today — if you’ve ever needed to hide a specific tab, section, or side panel page item based on a condition from the current record’s data, this is the pattern for you.

The same approach works for any label and any condition you can pull from alpha.local. :bullseye:

:compass: What This Does

  • Reads the current record’s data from alpha.local

  • Checks a field value against a condition

  • If the condition matches — finds a side panel page item by its visible label text and removes it from the DOM

STEP 1 — Read the Condition from alpha.local :gear:

alpha.local holds the current record’s data. Use .get() to access it:

const record = alpha.local.get();

Then check whatever field drives your condition:

if (record.YOUR_FIELD_NAME === YOUR_CONDITION_VALUE) {
  // hide the element
}

:pushpin: Replace YOUR_FIELD_NAME with whatever field exists in your record (e.g. type_id, status, role), and YOUR_CONDITION_VALUE with the value that should trigger the hide. You can also flip to !== to hide for everything except a certain value.

:light_bulb: Not sure what fields are available? Drop console.log(alpha.local.get()) in your custom code block and check the browser console while the record is open.

STEP 2 — Find the Side Panel Item by Its Label Text :magnifying_glass_tilted_left:

Instead of relying on fragile IDs or deep CSS selectors, scan all <span> elements and match by visible text — much more resilient to layout changes:

const spans = document.querySelectorAll('span');

spans.forEach(span => {
  if (span.textContent.trim() === 'YOUR SIDE PANEL ITEM LABEL') {
    // found it — now remove the container
  }
});

:pencil: Replace 'YOUR SIDE PANEL ITEM LABEL' with the exact visible text of the side panel page item you want to hide. This is case-sensitive — use .trim() to avoid whitespace issues.

STEP 3 — Remove the Container Element :wastebasket:

The <span> with the label is nested inside a larger container. Use .closest() to walk up to the right parent and remove the whole item:

let container = span.closest('div.YOUR_CONTAINER_CLASS');
if (container) {
  container.remove();
}

:light_bulb: .closest('selector') walks up the DOM tree and returns the first ancestor that matches — you don’t need to know exactly how many levels up the container is.

How to Find the Right Container Class :magnifying_glass_tilted_right:

  1. Right-click the side panel item you want to hide in your browser

  2. Click Inspect

  3. Look at the parent <div> wrapping the <span> — note its class name

  4. Use that class in .closest('div.YOUR_CLASS')

:warning: In Tailwind-based UIs (like Alpha), class names often contain : characters (e.g. hover:surface-hover). In CSS selectors, escape the : with a double backslash: div.hover\\:surface-hover

Full Pattern — Copy & Customise :scissors:

if (alpha.local.get().YOUR_FIELD_NAME === YOUR_VALUE) {

  const spans = document.querySelectorAll('span');

  spans.forEach(span => {
    if (span.textContent.trim() === 'YOUR SIDE PANEL ITEM LABEL') {

      let container = span.closest('div.YOUR_CONTAINER_CLASS');
      if (container) {
        container.remove();
      }

    }
  });

}

Swap out:

Placeholder Replace with
YOUR_FIELD_NAME Field from alpha.local.get() e.g. type_id, status, role
YOUR_VALUE Value that triggers the hide e.g. 1, "inactive", true
'YOUR SIDE PANEL ITEM LABEL' Exact visible label of the side panel item e.g. 'Related Records', 'History'
div.YOUR_CONTAINER_CLASS CSS class of the wrapper — inspect the DOM to find it

:white_check_mark: Quick Checklist

  • [ ] Verified field name using console.log(alpha.local.get())

  • [ ] Confirmed the value that should trigger the hide

  • [ ] Copied the exact label text of the side panel item

  • [ ] Inspected the DOM to confirm the container class

  • [ ] Tested with both matching and non-matching records

:speech_balloon: Common Gotchas

Element not being removed? → alpha.local.get() might not be populated yet if the code runs before the record loads. Wrap your logic in a short setTimeout(() => { ... }, 300).

Wrong container getting removed? → .closest() can match a higher ancestor than expected. Inspect the DOM carefully and use a more specific class, or use .parentElement to step up manually.

Works on load but reappears after navigation? → Alpha re-renders on route changes. Make sure this code runs on the correct lifecycle event (onLoad / afterRender) so it fires fresh on every render.

Label text not matching? → Check for hidden characters. Use console.log(JSON.stringify(span.textContent)) to reveal any invisible whitespace or special characters.

Short and sweet — but this pattern is endlessly reusable. Once you know how to combine alpha.local conditions with DOM text matching, you can show or hide almost any side panel page item dynamically without touching component config. :raising_hands:

Got a variation of this you’ve used? Drop it in the comments!

Happy building! :high_voltage:

— Posted in Community / Tips, Tricks & Custom Code

1 Like