<!DOCTYPE HTML>
<html style="height: 100%;">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo</title>
  <script id="sap-ui-bootstrap"
    src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_fiori_3"
    data-sap-ui-async="true"
    data-sap-ui-modules="sap/ui/core/ComponentSupport"
    data-sap-ui-compatversion="edge"
    data-sap-ui-resourceroots='{"demo": "./"}'
    data-sap-ui-xx-componentpreload="off"
    data-sap-ui-xx-waitfortheme="init"
  ></script>
</head>
<body id="content" class="sapUiBody">
  <div data-sap-ui-component
    data-id="rootComponentContainer"
    data-name="demo"
    data-height="100%"
    data-settings='{"id": "rootComponent"}'
  ></div>
</body>
</html>
sap.ui.define([
  "sap/ui/core/UIComponent"
], function(UIComponent) {
  "use strict";

  return UIComponent.extend("demo.Component", {
    metadata: {
      manifest: "json"
    },

    init: function() {
      UIComponent.prototype.init.apply(this, arguments);
      this.getRouter().initialize();
    },

  });
});
{
  "_version": "1.16.0",
  "start_url": "index.html",
  "sap.app": {
    "id": "demo",
    "type": "application",
    "title": "Demo",
    "description": "Sample Code",
    "applicationVersion": {
      "version": "1.0.0"
    },
    "dataSources": {
      "myDataSource": {
        "type": "JSON",
        "uri": "localData/demoData.json"
      }
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    },
    "supportedThemes": [
      "sap_belize_hcw",
      "sap_belize_hcb",
      "sap_belize",
      "sap_belize_plus",
      "sap_fiori_3",
      "sap_fiori_3_hcb",
      "sap_fiori_3_hcw",
      "sap_fiori_3_dark"
    ]
  },
  "sap.ui5": {
    "dependencies": {
      "minUI5Version": "1.66.0",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {}
      }
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "resources": {
      "js": [
        
      ],
      "css": [
        
      ]
    },
    "models": {
      "": {
        "dataSource": "myDataSource",
        "preload": true
      }
    },
    "rootView": {
      "viewName": "demo.view.App",
      "id": "rootView",
      "type": "XML",
      "async": true
    },
    "routing": {
      "routes": {
        "home": {
          "pattern": "",
          "target": "home",
          "titleTarget": "home"
        }
      },
      "targets": {
        "home": {
          "id": "homeView",
          "name": "Home",
          "transition": "fade",
          "viewLevel": 1
        },
        "notFound": {
          "id": "notFoundView",
          "name": "Home",
          "transition": "slide",
          "viewLevel": 98
        }
      },
      "config": {
        "async": true,
        "type": "View",
        "routerClass": "sap.m.routing.Router",
        "viewType": "XML",
        "path": "demo.view",
        "controlId": "rootApp",
        "controlAggregation": "pages",
        "transition": "slide",
        "bypassed": {
          "target": "notFound"
        },
        "homeRoute": "home"
      }
    }
  }
}
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
  displayBlock="true"
  height="100%"
>
  <App id="rootApp">
    <pages>
      <!-- will be added by Router -->
    </pages>
  </App>
</mvc:View>
<mvc:View controllerName="demo.controller.Home"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
>
  <Page id="homePage" title="Home" class="sapUiResponsiveContentPadding">
    <Table
      items="{
        path: '/myData',
        templateShareable: false
      }"
    >
      <columns>
        <Column id="columnA">
          <Text text="A"/>
        </Column>
        <Column id="columnB">
          <Text text="B"/>
        </Column>
        <Column id="columnFinal">
          <Text text="Result"/>
        </Column>
      </columns>
      <ColumnListItem>
        <Text text="{a}"/>
        <Text text="{b}"/>
        <ObjectStatus
          text="{
            parts: [
              'a',
              'b',
              '/ruleSet',
              {
                value: 'text'
              }
            ],
            formatter: '.createText'
          }"
          state="{
            parts: [
                'a',
                'b',
                '/ruleSet',
                {
                  value: 'state'
                }
              ],
              formatter: '.createText'
          }"
        />
      </ColumnListItem>
    </Table>
  </Page>
</mvc:View>
sap.ui.define([
  "sap/ui/core/mvc/Controller",
], function(Controller) {
  "use strict";

  return Controller.extend("demo.controller.Home", {
    onInit: function() {
      
    },
  
    createText: function(a, b, ruleSet, property) {
      const [i, j] = [...arguments].map(x => x ? x : "_");
      return ruleSet[i + j][property];
    },

  });
});
{
    "myData": [
        { "a": "", "b": "" },
        { "a": "Y", "b": "" },
        { "a": "N", "b": "" },
        { "a": "", "b": "Y" },
        { "a": "", "b": "N" },
        { "a": "Y", "b": "Y" },
        { "a": "N", "b": "N" },
        { "a": "N", "b": "Y" },
        { "a": "Y", "b": "N" }
    ],
    "ruleSet": {
        "__": { "text": "", "state": null },
        "Y_": { "text": "Keep", "state": null },
        "N_": { "text": "Remove", "state": null },
        "_Y": { "text": "Keep", "state": "Warning" },
        "_N": { "text": "Remove", "state": "Warning" },
        "YY": { "text": "Keep", "state": null },
        "NN": { "text": "Remove", "state": null },
        "NY": { "text": "Keep", "state": "Warning" },
        "YN": { "text": "Remove", "state": "Warning" }
    }
}