{"id":86,"date":"2025-12-20T07:08:59","date_gmt":"2025-12-20T07:08:59","guid":{"rendered":"https:\/\/steadyrabbit.in\/blogs\/?p=86"},"modified":"2025-12-20T07:08:59","modified_gmt":"2025-12-20T07:08:59","slug":"fiori-in-two-sprints-lightning-fast-ui5-adaptive-cards-factory","status":"publish","type":"post","link":"https:\/\/steadyrabbit.in\/blogs\/fiori-in-two-sprints-lightning-fast-ui5-adaptive-cards-factory\/","title":{"rendered":"Fiori in Two Sprints: Lightning-Fast UI5 & Adaptive Cards Factory"},"content":{"rendered":"\n

TL;DR (\u2248 90 words)<\/h4>\n\n\n\n

C-level sponsors want slick Fiori apps, but SAP backlogs say \u201csix-month rollout.\u201d In this guide we show how a Micro-GCC squad shipped six Fiori Elements apps in 20 working days<\/strong> by:<\/p>\n\n\n\n

    \n
  1. Autogenerating UIs straight from CDS annotations.
    <\/li>\n\n\n\n
  2. Using an Adaptive Cards factory<\/strong> for micro-tasks (approve, reject, comment) that embed in MS Teams.
    <\/li>\n\n\n\n
  3. Wiring a GitHub CI pipeline that builds, tests and cache-busts UI5 in under six minutes.
    <\/li>\n<\/ol>\n\n\n\n

    Copy-paste Yeoman commands, CAP annotations, and Azure Bot JSON included.<\/p>\n\n\n\n

    Why Traditional Fiori Projects Drag\u00a0<\/h4>\n\n\n\n

    Waterfall Fiori plan:<\/em> design workshop \u279d SAP Build wire-frames \u279d hand-coded UI5 \u279d QA \u279d cut-over.
    Pain points:<\/p>\n\n\n\n

      \n
    • Five layers of hand-offs<\/strong>\u2014design \u2192 dev \u2192 Basis \u2192 QA \u2192 DevOps.
      <\/li>\n\n\n\n
    • UI regression<\/strong> each transport\u2014static resources cached on every laptop.
      <\/li>\n\n\n\n
    • Business users<\/strong> need micro-approvals in Teams, not another SAP tile.
      <\/li>\n<\/ul>\n\n\n\n

      Our fix: Generate 80 % of UI from CDS<\/strong>, keep logic in CAP, deliver micro-approvals through Adaptive Cards\u2014two-sprint<\/em> cadence.<\/p>\n\n\n\n

      Reference Stack\u00a0<\/h4>\n\n\n\n
      Layer<\/strong><\/td>Tool<\/strong><\/td>Why<\/strong><\/td><\/tr>
      UI generator<\/td>Fiori Elements + Fiori Tools Yeoman<\/strong><\/td>No hand-coded XML for CRUD screens<\/td><\/tr>
      Micro-tasks<\/td>Adaptive Cards + Teams Bot<\/strong><\/td>90-second approvals without launching SAP<\/td><\/tr>
      OData service<\/td>CAP Node.js (srv)<\/td>Shares annotations & logic<\/td><\/tr>
      State<\/td>HANA Cloud<\/td>Single source of truth<\/td><\/tr>
      CI\/CD<\/td>GitHub Actions + Cloud Transport Management (CTMS)<\/td>Zero manual transports<\/td><\/tr>
      Cache busting<\/td>sap-ui-cachebuster + CDN headers<\/td>Users always get latest JS\/CSS<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      Total dev image size: 850 MB; pipeline duration: \u2248 6 min.<\/p>\n\n\n\n

      Sprint 1 \u2014 Generate Three CRUD Apps\u00a0<\/h4>\n\n\n\n

      3.1 Scaffold UI Project<\/h5>\n\n\n\n

      bash<\/p>\n\n\n\n

      CopyEdit<\/p>\n\n\n\n

      npm install -g @sap\/generator-fiori<\/p>\n\n\n\n

      yo @sap\/fiori-freestyle myorders \\<\/p>\n\n\n\n

         –platform cp \\<\/p>\n\n\n\n

         –odata https:\/\/<cap>\/v4\/sales \\<\/p>\n\n\n\n

         –entity SalesOrder \\<\/p>\n\n\n\n

         –list yes \\<\/p>\n\n\n\n

         –detail yes<\/p>\n\n\n\n

      Yeoman creates:<\/p>\n\n\n\n

      markdown<\/p>\n\n\n\n

      CopyEdit<\/p>\n\n\n\n

      myorders\/<\/p>\n\n\n\n

        webapp\/<\/p>\n\n\n\n

          pages\/<\/p>\n\n\n\n

          manifest.json<\/p>\n\n\n\n

          ui5.yaml<\/p>\n\n\n\n

      3.2 Add CDS Annotations<\/h5>\n\n\n\n

      db\/schema.cds<\/p>\n\n\n\n

      cds<\/p>\n\n\n\n

      CopyEdit<\/p>\n\n\n\n

      using { cuid } from ‘@sap\/cds\/common’;<\/p>\n\n\n\n

      entity SalesOrder : cuid {<\/p>\n\n\n\n

        key SalesOrderID  : String(10);<\/p>\n\n\n\n

        @title  : ‘Net Value’<\/p>\n\n\n\n

        NetValue : Decimal(15,2);<\/p>\n\n\n\n

        @title  : ‘Currency’<\/p>\n\n\n\n

        Currency : String(5);<\/p>\n\n\n\n

      }<\/p>\n\n\n\n

      srv\/annotations.cds<\/p>\n\n\n\n

      cds<\/p>\n\n\n\n

      CopyEdit<\/p>\n\n\n\n

      using my.sales as sales from ‘..\/db\/schema’;<\/p>\n\n\n\n

      annotate sales.SalesOrder with {<\/p>\n\n\n\n

        @UI : {<\/p>\n\n\n\n

          LineItem  : [ {Value : sales.SalesOrderID}, {Value : sales.NetValue} ],<\/p>\n\n\n\n

          Identifiable : { Title : {Value : sales.SalesOrderID} }<\/p>\n\n\n\n

        }<\/p>\n\n\n\n

      }<\/p>\n\n\n\n

      Re-run cds deploy \u2192 metadata changes auto-appear in UI after cache-buster.<\/p>\n\n\n\n

      3.3 CI Build & Deploy<\/h5>\n\n\n\n

      ui5.yaml<\/p>\n\n\n\n

      yaml<\/p>\n\n\n\n

      CopyEdit<\/p>\n\n\n\n

      builder:<\/p>\n\n\n\n

        customTasks:<\/p>\n\n\n\n

          – name: ui5-task-cachebuster<\/p>\n\n\n\n

      github\/workflows\/ui.yml<\/p>\n\n\n\n

      yaml<\/p>\n\n\n\n

      CopyEdit<\/p>\n\n\n\n

      jobs:<\/p>\n\n\n\n

        build-deploy:<\/p>\n\n\n\n

          runs-on: ubuntu-latest<\/p>\n\n\n\n

          steps:<\/p>\n\n\n\n

            – uses: actions\/checkout@v4<\/p>\n\n\n\n

            – name: Install tooling<\/p>\n\n\n\n

              run: npm ci<\/p>\n\n\n\n

            – name: Build<\/p>\n\n\n\n

              run: ui5 build –all<\/p>\n\n\n\n

            – name: Deploy<\/p>\n\n\n\n

              run: cf deploy myorders.zip –dest dev-space<\/p>\n\n\n\n

      Pipeline time:<\/strong> 3 m 40 s.<\/p>\n\n\n\n

      By Sprint 1 Demo Friday, business users saw live list-report and object pages for Sales Orders, Customers, and Pricing Conditions.<\/p>\n\n\n\n

      Sprint 2 \u2014 Adaptive Cards Factory\u00a0<\/h4>\n\n\n\n
      4.1 Adaptive Card Template<\/h5>\n\n\n\n

      cards\/approve.json<\/p>\n\n\n\n

      json<\/p>\n\n\n\n

      CopyEdit<\/p>\n\n\n\n

      {<\/p>\n\n\n\n

        “$schema”: “http:\/\/adaptivecards.io\/schemas\/adaptive-card.json”,<\/p>\n\n\n\n

        “type”:”AdaptiveCard”,<\/p>\n\n\n\n

        “version”:”1.5″,<\/p>\n\n\n\n

        “body”:[<\/p>\n\n\n\n

          {“type”:”TextBlock”,”text”:”Sales Order ${SalesOrderID}”,”weight”:”Bolder”},<\/p>\n\n\n\n

          {“type”:”TextBlock”,”text”:”Net Value: ${NetValue} ${Currency}”},<\/p>\n\n\n\n

          {“type”:”Input.Text”,”id”:”comment”,”placeholder”:”Optional comment”}<\/p>\n\n\n\n

        ],<\/p>\n\n\n\n

        “actions”:[<\/p>\n\n\n\n

          {“type”:”Action.Submit”,”title”:”Approve”,”data”:{“action”:”approve”}},<\/p>\n\n\n\n

          {“type”:”Action.Submit”,”title”:”Reject”,”style”:”destructive”,”data”:{“action”:”reject”}}<\/p>\n\n\n\n

        ]<\/p>\n\n\n\n

      }<\/p>\n\n\n\n

      4.2 Node Bot for Teams<\/h4>\n\n\n\n

      bot\/app.js<\/p>\n\n\n\n

      js<\/p>\n\n\n\n

      CopyEdit<\/p>\n\n\n\n

      const { TeamsActivityHandler, CardFactory } = require(‘@microsoft\/teams-ai’);<\/p>\n\n\n\n

      bot.onMessage(async (ctx) => {<\/p>\n\n\n\n

        const so = await SELECT.one.from(SalesOrder).where({SalesOrderID: ctx.message.text});<\/p>\n\n\n\n

        const card = CardFactory.adaptiveCard(require(‘.\/cards\/approve.json’), so);<\/p>\n\n\n\n

        await ctx.sendActivity({ attachments: [ card ] });<\/p>\n\n\n\n

      });<\/p>\n\n\n\n

      bot.onInvokeActivity(async (ctx) => {<\/p>\n\n\n\n

        const { action } = ctx.activity.value;<\/p>\n\n\n\n

        if (action === ‘approve’) await patchStatus(ctx, ‘APPROVED’);<\/p>\n\n\n\n

        else await patchStatus(ctx, ‘REJECTED’);<\/p>\n\n\n\n

        return { status: 200 };<\/p>\n\n\n\n

      });<\/p>\n\n\n\n

      4.3 CI Deployment<\/h4>\n\n\n\n

      bot\/workflows\/ci.yml builds Docker image, pushes to Azure Container Apps, updates Teams manifest via Graph API.<\/p>\n\n\n\n

      4.4 Results<\/h5>\n\n\n\n
      KPI<\/strong><\/td>Before (Email Workflow)<\/strong><\/td>After (Adaptive Card)<\/strong><\/td><\/tr>
      Median approval time<\/td>6 h 20 m<\/td>21 m<\/strong><\/td><\/tr>
      Missed SLA (>24 h)<\/td>13 %<\/td>0.5 %<\/strong><\/td><\/tr>
      Mobile engagement<\/td>N\/A<\/td>72 % of actions<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      Two-Sprint Timeline Overview\u00a0<\/h4>\n\n\n\n
      Day<\/strong><\/td>Activity<\/strong><\/td><\/tr>
      Sprint 1 Day 1<\/strong><\/td>Yeoman scaffolds 3 apps; GitHub pipeline ready.<\/td><\/tr>
      Day 3<\/td>CDS annotations complete; first demos.<\/td><\/tr>
      Day 5<\/td>AT tests pass; deploy to QA.<\/td><\/tr>
      Sprint 2 Day 1<\/strong><\/td>Teams Bot scaffold; Adaptive card template.<\/td><\/tr>
      Day 3<\/td>Webhook to CAP service for status updates.<\/td><\/tr>
      Day 4<\/td>Security & persona tests.<\/td><\/tr>
      Day 5<\/td>20 % pilot group; cut-over Monday next sprint.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      Total dev hours: ~64; feedback loop < 24 h each sprint.<\/p>\n\n\n\n

      Pitfalls & Fixes\u00a0<\/h4>\n\n\n\n
      Pitfall<\/strong><\/td>Fix<\/strong><\/td><\/tr>
      Cache-busting ignored<\/td>Add cachebuster-info.json & CDN header cache-control: max-age=0<\/td><\/tr>
      CDS enum not rendered in list<\/td>Use @Common.ValueList annotation referencing DDIC domain<\/td><\/tr>
      Adaptive card timeout<\/td>Increase Bot Azure Timeout to 10 s or pre-warm function<\/td><\/tr>
      CAP OData $batch not enabled<\/td>Set odata.version: 4 and odata.batch: true in package.json<\/td><\/tr>
      Transport collisions (Neo)<\/td>Use Cloud Transport Management; lock older transport serial<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      \u00a0Time & Cost Benchmarks\u00a0<\/h4>\n\n\n\n
      Metric<\/strong><\/td>Legacy Workflow<\/strong><\/td>Two-Sprint Factory<\/strong><\/td><\/tr>
      Dev effort \/ CRUD app<\/td>120 h<\/td>18 h<\/strong><\/td><\/tr>
      Median user click \u2192 approve<\/td>6 h<\/td>21 m<\/strong><\/td><\/tr>
      UI regression bugs \/ rel.<\/td>9<\/td>2<\/strong><\/td><\/tr>
      Infra cost (BTP HTML5 repo)<\/td>\u20ac0.04\/hr<\/td>same<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      ROI: 6\u00d7 faster dev, 88 % faster approvals, happier auditors (mobile audit trail).<\/p>\n\n\n\n

      Take-Home Checklist\u00a0<\/h4>\n\n\n\n
        \n
      1. Scaffold Fiori Elements with Yeoman.
        <\/li>\n\n\n\n
      2. Drive UI from CDS annotations, not XML.
        <\/li>\n\n\n\n
      3. Ship CI build with cache-buster.
        <\/li>\n\n\n\n
      4. Scaffold Adaptive Cards bot for micro-tasks.
        <\/li>\n\n\n\n
      5. Route 20 % pilot traffic; measure approval SLA.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

        TL;DR (\u2248 90 words) C-level sponsors want slick Fiori apps, but SAP backlogs say \u201csix-month rollout.\u201d In this guide we show how a Micro-GCC squad shipped six Fiori Elements apps in 20 working days by: Copy-paste Yeoman commands, CAP annotations, and Azure Bot JSON included. Why Traditional Fiori Projects Drag\u00a0 Waterfall Fiori plan: design workshop […]<\/p>\n","protected":false},"author":1,"featured_media":20,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-86","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sap-modernization"],"_links":{"self":[{"href":"https:\/\/steadyrabbit.in\/blogs\/wp-json\/wp\/v2\/posts\/86","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/steadyrabbit.in\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/steadyrabbit.in\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/steadyrabbit.in\/blogs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/steadyrabbit.in\/blogs\/wp-json\/wp\/v2\/comments?post=86"}],"version-history":[{"count":1,"href":"https:\/\/steadyrabbit.in\/blogs\/wp-json\/wp\/v2\/posts\/86\/revisions"}],"predecessor-version":[{"id":87,"href":"https:\/\/steadyrabbit.in\/blogs\/wp-json\/wp\/v2\/posts\/86\/revisions\/87"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/steadyrabbit.in\/blogs\/wp-json\/wp\/v2\/media\/20"}],"wp:attachment":[{"href":"https:\/\/steadyrabbit.in\/blogs\/wp-json\/wp\/v2\/media?parent=86"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/steadyrabbit.in\/blogs\/wp-json\/wp\/v2\/categories?post=86"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/steadyrabbit.in\/blogs\/wp-json\/wp\/v2\/tags?post=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}