How is your experience with the OutSystems Community?
12
Views
1
Comments
[OutSystems UI] Wizard (interactive mode) next is not clickable
outsystems-ui
Reactive icon
Forge asset by OutSystems
Application Type
Reactive
Service Studio Version
11.55.92 (Build 65269)
Platform Version
11.44.0 (Build 48345)

Hi,

Since updating to latest OutsystemUI (Version 2.30.0), the 'Next' wizard items are not clickable. Only past items. We're using the updated items, not the deprecated items. They seem to be disabled. 

Advancing back and forward externally works fine just not onclick.

How can I fix this. OML Attached.

Cheers

Steve

WizardOml_O11.oml
2023-12-26 10-35-28
OutSystems Neo
Staff
AI Generated

Since Outsystems UI 2.30.0 the behavior of the Wizard pattern changed: items with status Next are rendered with tabindex = -1, which makes them non-focusable and effectively non-clickable from a keyboard/accessibility standpoint. This is a known issue in OutSystems UI and has already been reported and tracked internally under code ROU‑11767.Wizard Step Item with status Next has "tabindex = -1"

Because of that, your “Next” steps look disabled even though the click action is defined, and only “Past” steps can be interacted with.

How to work around it

Until the framework fix is released, you need to override the tabindex for the “Next” steps with a small JavaScript/CSS tweak.

A typical workaround:

  1. Add an Extended Class to your Wizard Items that should be clickable in “Next” status, e.g.

    • On the Wizard Item: ExtendedClass = "wizard-next-clickable"
  2. Use JavaScript to fix the tabindex after each render/refresh of the wizard:

    • Add a JS snippet (in a Script tag, or via a client action that runs after the wizard is refreshed) like:
    function enableNextWizardItems() {
      document.querySelectorAll(
        '.wizard-next-clickable[tabindex="-1"]'
      ).forEach(function (el) {
        el.setAttribute('tabindex', '0'); // or 1, or whatever makes sense in your flow
      });
    }
    
    // Call this on screen load and after Ajax refreshes that change wizard steps
    enableNextWizardItems();
    
  3. Make sure you call this function:

    • In OnReady / OnAfterRefresh of the screen, and
    • After any Ajax Refresh that changes the wizard step index.

This keeps your external navigation logic (where you manually set Entities.Step.Active, Entities.Step.Next, Entities.Step.Past) working as-is, but restores clickability for “Next” items.

Alternative: handle navigation only via buttons

If you don’t need users to click the wizard header at all, one simple option is:

  • Leave the “Next” step as “Next”/“Past” only for visual state,
  • Disable pointer events in CSS for those statuses, and
  • Drive navigation strictly via explicit Next/Back buttons that call your screen action, update the local WizardStepIndex and Ajax-refresh the wizard.Active Wizard Item does not highlight with colour

But if you do need clickable “Next” steps, the JavaScript workaround above is the practical solution until OutSystems UI fixes ROU‑11767.

This answer was AI-generated. Please read it carefully and use the forums for clarifications
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.