UI5 Web Components v2.22.0-rc.3: Fixes for Cards and Date Pickers You Can’t Ignore

Arjun Mehta breaks down what you need to know

In my 25 years building SAP apps—from massive Infosys implementations in 1999 to hybrid cloud integrations today—I’ve seen UI glitches derail global rollouts. If your Fiori apps use ui5-card or ui5-date-range-picker in multilingual setups, v2.22.0-rc.3 addresses real pain points. These aren’t minor tweaks; they fix clipping in tall-character languages like Chinese and kill off deprecated relative date handling. Busy devs: skim this to avoid prod surprises.

The Real Story

SAP UI5 Web Components just dropped v2.22.0-rc.3, a release candidate targeting two key components: ui5-card and ui5-date-range-picker. This isn’t hype—it’s surgical fixes backed by GitHub commits.

For ui5-card, the issue was subtitle clipping in languages with tall glyphs, like Chinese. Tall characters pushed content beyond bounds, mangling layouts in Fiori cards. Commit 1bfa9ee clipped, frustrating users. Post-fix, it flows naturally.

For ui5-date-range-picker, relative date handling (e.g., “last 7 days”) is gone—issue #13365. Commit 5694559 (card accessibility) and #13379 (picker edge cases) tie in, flagging broader rendering quirks. As a release candidate, expect iterations—I’ve chased RC stability in past UI5 upgrades.

What This Means for You

If you’re knee-deep in Fiori Elements or standalone UI5 apps, these changes hit differently based on your stack.

• Multilingual/global devs: Card fixes are a win for APAC deployments. No more custom CSS hacks for Chinese/Japanese. But test thoroughly—tall fonts can still interact oddly with custom themes.

• Date-heavy apps: Refactoring ui5-date-range-picker is non-trivial. If your app parses “today -1w” for reports, expect breakage. In one Wipro project, we used relatives for vendor payment ranges; switching to sap.ui.core.format.DateFormat saved us.

Potential pitfalls:

• RC instability: Don’t rush to prod. I’ve seen RCs introduce regressions in shadow DOM rendering.
• Backward compat: No polyfills for removed relatives—plan migrations.
• Integration with SAPUI5: Web Components play nice with UI5 libs, but verify in your Fiori launchpad.

Example refactor for date picker:

<!-- Before (broken in v2.22.0-rc.3) -->
<ui5-date-range-picker relative="last-7-days"></ui5-date-range-picker>

<!-- After: Use value prop with formatted dates -->
<ui5-date-range-picker 
  value="2026-04-24~2026-05-01"
  format-pattern="yyyy-MM-dd">
</ui5-date-range-picker>

<script>
  // JS helper for dynamic ranges
  function setLastWeek() {
    const today = new Date();
    const lastWeek = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
    const fmt = new Intl.DateTimeFormat('sv-SE').format; // ISO-like
    picker.value = `${fmt(lastWeek)}~${fmt(today)}`;
  }
</script>

This mirrors how I modernized legacy ABAP dynpros into reactive UI5 components—precise, no shortcuts.

Action Items

• Update selectively: Bump ui5-card to v2.22.0-rc.3 via npm/yarn. Pin to exact tag: npm i @ui5/webcomponents@2.22.0-rc.3.

• Test multilingual: Spin up a Fiori app with zh-Hans/zh-TW. Render ui5-card subtitles >20 chars. Verify no clipping via DevTools (inspect shadow root).

• Refactor dates: Audit ui5-date-range-picker for relative props. Replace with value/format-pattern. Unit test with Jest/Cypress:

  it('handles absolute dates post-refactor', () => {
    cy.get('ui5-date-range-picker').invoke('shadowRoot').find('[value]').should('have.value', '2026-04-24~2026-05-01');
  });
  

• Review issues: Read #13413, #13379, #13365. Comment if you hit edge cases—community input shapes finals.

• Staging gate: Run in non-prod Fiori launchpad. Monitor for 1-2 weeks before prod.

Community Perspective

GitHub buzz is pragmatic. Issue #13365 has 10+ thumbs-up from devs griping about relative deprecation—many shared Angular/UI5 hybrids breaking. #13413 highlights screen reader wins post-card fix, vital for WCAG compliance. No major red flags yet, but skeptics note RC timing clashes with S/4HANA waves. Valuable insight: Pair with UI5 1.120+ for full Fiori harmony.

Bottom Line

These fixes plug real gaps—card clipping killed usability in my global projects; date refactor forces cleaner code long-term. But it’s RC: Test ruthlessly, especially in hybrid setups. From 25 years debugging SAP UIs, I’d say update dev/staging now, prod after stable. Skip if your apps dodge these components. Technical excellence demands verification, not blind faith.

*Source: Original discussion/article---

References

• SAP Fiori Design Guidelines- SAP Community Hub

References

• SAP Community Hub
• SAP/ui5-webcomponents: v2.22.0-rc.3
• SAP Fiori Design Guidelines