<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Demo</title>
<!-- In production, use a specific UI5 version -->
<script id="sap-ui-bootstrap"
src="https://sdk.openui5.org/resources/sap-ui-core.js"
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-resourceroots='{ "demo": "./" }'
data-sap-ui-xx-waitfortheme="init"
data-sap-ui-xx-componentpreload="off"
></script><!-- xx-componentpreload="off" only for previews to avoid 404 -->
</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",
"sap/ui/core/ComponentSupport",//https://github.com/SAP/ui5-tooling/issues/381
], function(UIComponent) {
"use strict";
return UIComponent.extend("demo.Component", {
metadata: {
interfaces: [
"sap.ui.core.IAsyncContentCreation",
],
manifest: "json",
},
});
});
{
"_version": "1.35.0",
"start_url": "index.html",
"sap.app": {
"id": "demo",
"type": "application",
"title": "App Title",
"description": "Sample Code",
"applicationVersion": {
"version": "1.0.0"
},
"dataSources": {}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"handleValidation": true,
"dependencies": {
"minUI5Version": "1.92.1",
"libs": {
"sap.ui.core": {},
"sap.m": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"resources": {
"css": []
},
"models": {
"": {
"type": "sap.ui.model.json.JSONModel"
}
},
"rootView": {
"viewName": "demo.view.App",
"id": "rootView",
"type": "XML",
"height": "100%"
}
}
}
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns:f="sap.f"
xmlns="sap.m"
xmlns:my="demo.control"
displayBlock="true"
>
<App id="rootApp" class="myApp" autoFocus="false">
<Page title="ColumnListItem With a Progress Bar at the Bottom">
<Table headerText="Via extended ColumnListItem">
<columns>
<Column vAlign="Middle">
<Text text="Col 1" />
</Column>
<Column vAlign="Middle">
<Text text="Col 2" />
</Column>
</columns>
<my:ColumnListProgressItem>
<Text text="123213" />
<Text text="456456" />
<my:progress>
<ProgressIndicator displayOnly="true" />
</my:progress>
</my:ColumnListProgressItem>
<my:ColumnListProgressItem>
<Text text="098089" />
<Text text="787878" />
<my:progress>
<ProgressIndicator displayOnly="true" />
</my:progress>
</my:ColumnListProgressItem>
</Table>
<Table headerText="Via popin">
<columns>
<Column vAlign="Middle">
<Text text="Col 1" />
</Column>
<Column vAlign="Middle">
<Text text="Col 2" />
</Column>
<Column id="progress"
vAlign="Bottom"
hAlign="Center"
popinDisplay="WithoutHeader"
demandPopin="true"
minScreenWidth="99999rem"><!-- Basically popin always -->
</Column>
</columns>
<ColumnListItem>
<Text text="123213" />
<Text text="456456" />
<ProgressIndicator displayOnly="true" />
</ColumnListItem>
<ColumnListItem>
<Text text="098089" />
<Text text="787878" />
<ProgressIndicator displayOnly="true" />
</ColumnListItem>
</Table>
</Page>
</App>
</mvc:View>
sap.ui.define([
"sap/m/ColumnListItem",
"./ColumnListProgressItemRenderer",
], function (ColumnListItem, ColumnListProgressItemRenderer) {
"use strict";
return ColumnListItem.extend("demo.control.ColumnListProgressItem", {
metadata: {
aggregations: {
"progress": {
type: "sap.m.ProgressIndicator",
multiple: false,
},
},
},
renderer: ColumnListProgressItemRenderer,
});
});
sap.ui.define([
"sap/m/ColumnListItemRenderer",
], function(ColumnListItemRenderer) {
"use strict";
/* MINIMAL SAMPLE */
const name = "demo.control.ColumnListProgressItemRenderer";
return ColumnListItemRenderer.extend(name, {
apiVersion: 2,
render: function (oRM, oControl) {
ColumnListItemRenderer.render.apply(this, arguments);
oRM.openStart("tr", oControl.getId() + "-extrarow")
.class("sapMListTblSubRow")
.openEnd()
.openStart("td", oControl.getId() + "-subcell")
.class("sapMListTblSubRowCell")
.attr("colspan", oControl.getTable().getColSpan())
.openEnd()
.renderControl(oControl.getAggregation("progress"))
.close("td")
.close("tr");
},
});
});