SAPUI5 Smartable not showing the inital fields - sapui5

I am trying to build a simple smarttable, using a CDS with annotation, I expect the columns to be displayed automatically but no column or selection field are displayed automatically. When I try to create a report with fiori element it is working fine but not with my freestyle app and smarttable. What is missing ?
#AbapCatalog.sqlViewName: 'ZTEST_CDS_SHP'
#AbapCatalog.compiler.compareFilter: true
#AbapCatalog.preserveKey: true
#AccessControl.authorizationCheck: #CHECK
#EndUserText.label: 'Test Shipment view'
#VDM.viewType: #CONSUMPTION
#VDM.private:false
#Search.searchable: true
#UI.headerInfo: { typeName: 'Order', typeNamePlural: 'Orders' }
#OData.publish: true
define view ZTESTV_CDS_SHP as select from ZRDCV_CDS_SHIPMENT
association [0..1] to ZTESTV_CDS_DCHELP as _DCValueHelp on $projection.DcSite = _DCValueHelp.Werks
association [0..1] to makt as _ArticleValueHelp on $projection.Article = _ArticleValueHelp.matnr and _ArticleValueHelp.spras = $session.system_language
{
#Search.defaultSearchElement: true
#UI.selectionField: [ { position: 10 } ]
#UI.lineItem: [ { position: 10, importance: #HIGH } ]
key shipment as Shipment,
#UI.selectionField: [ { position: 20 } ]
#UI.lineItem: [ { position: 20, importance: #HIGH } ]
key exidv as Hu,
....
here is the XML view
<mvc:View
controllerName="ns.shipment1.controller.Worklist"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:semantic="sap.f.semantic"
xmlns:smartFilterBar="sap.ui.comp.smartfilterbar"
xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
xmlns:smartTable="sap.ui.comp.smarttable">
<semantic:SemanticPage
id="page"
headerPinnable="false"
toggleHeaderOnTitleClick="false">
<semantic:titleHeading>
<Title
text="{i18n>worklistTitle}"
level="H2"/>
</semantic:titleHeading>
<semantic:content>
<!-- use this to make the table occupy the available screen height -->
<VBox fitContainer="true">
<!-- FILTER BAR ******************************************** -->
<smartFilterBar:SmartFilterBar
id="smartFilterBar"
entitySet="ZTESTV_CDS_SHP"
persistencyKey="SmartFilter_Explored"
basicSearchFieldName="Shipment"
enableBasicSearch="true"
visible="true"
considerSelectionVariants="true"
showFilterConfiguration="true">
</smartFilterBar:SmartFilterBar>
<!-- SMART TABLE ******************************************** -->
<smartTable:SmartTable
id="ShipmentTable"
entitySet="ZTESTV_CDS_SHP"
smartFilterId="smartFilterBar"
tableType="Table"
useExportToExcel="true"
beforeExport="onBeforeExport"
useVariantManagement="true"
useTablePersonalisation="true"
header="Shipment Items"
showRowCount="true"
persistencyKey="SmartTableAnalytical_Explored"
enableAutoBinding="true"
class="sapUiResponsiveContentPadding"
editTogglable="false"
app:useSmartField="true"
app:useSmartToggle="true">
</smartTable:SmartTable>
</VBox>

Actually, I found the Annotation model in /IWFND/MAINT_SERVICE transaction, by selecting the service, then service implemetation button and annotation model button.
I have added the annotations property in settings with the reference to the array which contains the annotation model. Note that in my case, annotation model is ZTESTV_CDS_SHP_CDS_VAN, when it usually ends by ANNO_MDL.
{
"dataSources": {
"mainService": {
"uri": "/sap/opu/odata/sap/ZTESTV_CDS_SHP_CDS/",
"type": "OData",
"settings": {
"odataVersion": "2.0",
"annotations": [
"ZTESTV_CDS_SHP_CDS_ANNOTATION"
],
"localUri": "localService/metadata.xml"
}
},
"ZTESTV_CDS_SHP_CDS_ANNOTATION": {
"uri": "/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Annotations(TechnicalName='ZTESTV_CDS_SHP_CDS_VAN',Version='0001')/$value/",
"type": "ODataAnnotation"
}
}
}
Screenshot of the manifest:

Related

Stable ID for sap.tnt.NavigationListItem (id vs. key)

According to the Use Stable IDs article, it is recommended to use stable IDs for the UI5 elements. At the same time, I've reviewed multiple samples of sap.tnt.NavigationListItem implementation and I've paid attention that in case of sap.tnt.NavigationListItem no id is used but key, e.g.:
<tnt:NavigationListItem text="{name}" icon="{icon}" key="{controller}" select="onItemSelect" />
I've also tried to assign id to tnt:NavigationListItem and then access it from the oEvent-object via the standard oEvent.getProperty("%MY_ID%") approach but no success.
My questions:
When should I use id and when key for UI5-items in XML-templates?
Is it particular sap.tnt.NavigationListItem case that key is preferred over id or I just missed something important?
Based on your comments, I made a small example.
If your items are hard-coded definitely go for the key in the
XML definition.
If your items come over a model. You can do the same
as everywhere else. Use the data to trigger the right action.
Use the ID if you need to identify the UI element e.g. buttons in a test or if you add User Assistance Help.
sap.ui.controller("view1.initial", {
onInit: function(oEvent) {
this.getView().setModel(
new sap.ui.model.json.JSONModel({
items: [{
title : "1",
subItems: [
{ keyInData: "1", title : "1-a" },
{ keyInData: "2", title : "1-b" },
{ keyInData: "3", title : "1-c" },
{ keyInData: "4", title : "1-d" }
]
}],
}));
},
onItemSelect: function(oEvent) {
const item = oEvent.getParameter("item")
console.log("key over key binding: " + item.getKey() )
console.log("key over databinding: " + item.getBindingContext().getObject().keyInData )
}
});
sap.ui.xmlview("main", { viewContent: jQuery("#view1").html() } ).placeAt("uiArea");
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-libs="sap.m"></script>
<div id="uiArea"></div>
<script id="view1" type="ui5/xmlview">
<mvc:View controllerName="view1.initial" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:tnt="sap.tnt">
<tnt:NavigationList
id="navigationList"
width="320px"
selectedKey="subItem3" items="{/items}">
<tnt:NavigationListItem text="{title}" items="{ path:'subItems', templateShareable:false}" icon="sap-icon://employee" >
<tnt:NavigationListItem text="{title} - {keyInData}" key="{keyInData}" select="onItemSelect" />
</tnt:NavigationListItem>
</tnt:NavigationList>
</mvc:View>
</script>

SAPUI5 SmartChart with CDSView Annotations is not Displayed

I am pretty new to the SAP environment and couldn't find a suitable solution to the following problem in the community forum or using the samples/templates/API docs or SAP books, thus I am asking this question.
My Problem: I created a CDS-View with Annotations (for a table and a chart) and linked it using my service to an own SAPUI5 application. While the SmartTable is created without any problems, the SmartChart is giving me the following error:
TypeError: can't convert undefined to object RoleFitter.js
I looked up the error and it seems like something is not correct in the annotations file. However, I couldn't find an error and since it is auto-generated from the CDS-View Annotations I am a little confused (the SmartTable is working and I can add/change UserText Annotations without any problem).
Furthermore, when I use the created CDSView wit a standard SAP template (e.g. in cards in an Overview Page Template) it works just fine.
For any solutions or hints I am super thankful since this is bothering me a lot and I don't understand why the SmartTable is working but the chart isn't.
Thanks in advance!
CDSView:
#AbapCatalog.sqlViewName: 'ZYSS20MSGITEST3'
#AbapCatalog.compiler.compareFilter: true
#AccessControl.authorizationCheck: #NOT_REQUIRED
#EndUserText.label: 'Test view 3'
#UI: {headerInfo: {
typeName:'Test3',
title:{
type: #STANDARD,
label: 'Suche'
}
}
}
#UI.chart: [{
qualifier: 'OccupiedSeats',
chartType: #COLUMN,
dimensions: [ 'FlightCode' ],
measures: [ 'MaximumCapacity', 'EconomyOccupiedSeats', 'BusinessOccupiedSeats', 'FirstOccupiedSeats' ]
}]
define view ZY_SS20_MSGI_TEST3
as select from sflight
{
#UI.lineItem: [ { position: 10 } ]
key concat(carrid, connid) as FlightCode,
#UI.lineItem: [ { position: 30 } ]
seatsmax as MaximumCapacity,
#UI.lineItem: [ { position: 40 } ]
seatsocc as EconomyOccupiedSeats,
#UI.lineItem: [ { position: 50 } ]
seatsocc_b as BusinessOccupiedSeats,
#UI.lineItem: [ { position: 60 } ]
seatsocc_f as FirstOccupiedSeats
}
Dashboard.controller.js:
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("ZY_SS20_MSGI_TESTN.controller.Dashboard", {
onInit: function() {
this._oModel = new sap.ui.model.odata.ODataModel("/sap/opu/odata/sap/ZY_SS20_MSGPROGRESSSRV_SRV/", true);
this.getView().setModel(this._oModel);
}
});
Dashboard.view.xml:
<mvc:View controllerName="ZY_SS20_MSGI_TESTN.controller.Dashboard" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns:smartChart="sap.ui.comp.smartchart"
xmlns:data="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1" xmlns:smartFilterBar="sap.ui.comp.smartfilterbar" xmlns:smartTable="sap.ui.comp.smarttable"
displayBlock="true" xmlns="sap.m">
<App>
<pages>
<Page title="{i18n>title}">
<content>
<VBox fitContainer="true">
<smartFilterBar:SmartFilterBar
id="smartFilterBar" entitySet="ZY_SS20_MSGI_TEST3" />
<smartTable:SmartTable id="mySmartTable"
entitySet="ZY_SS20_MSGI_TEST3" smartFilterId="smartFilterBar"
tableType="Table" useExportToExcel="true"
useVariantManagement="false" useTablePersonalisation="false"
header="Throughput" showRowCount="true" enableAutoBinding="true"
initiallyVisibleFields="FlightCode,MaximumCapacity,EconomyOccupiedSeats,BusinessOccupiedSeats,FirstOccupiedSeats">
</smartTable:SmartTable>
<smartChart:SmartChart entitySet="ZY_SS20_MSGI_TEST3"
enableAutoBinding="true" id="mySmartChart" useVariantManagement="false"
useChartPersonalisation="false" header="Test"></smartChart:SmartChart>
</VBox>
</content>
</Page>
</pages>
</App>
</mvc:View>
The problem seems to be that you are providing a qualifier to the chart annotation but not specifying the same to the SmartChart control. Try adding this property to your SmartChart tag:
data:chartQualifier="OccupiedSeats"

SAPUI5 odata binding for deep structure to vbox items

JSON data:
{
"QuestionID": 1,
"Question": "Question One",
"Note": "Note: There are 2 correct answers to this question.",
"Type": "C",
"Answers": [
{
"Id": 1,
"Text": "Choice 1"
}, {
"Id": 2,
"Text": "Choice 2"
}, {
"Id": 3,
"Text": "Choice 3"
}, {
"Id": 4,
"Text": "Choice 4"
}
]
}
In my view I get the correct number of checkboxes for the answers but the "Text" does not show.
`<VBox id='checkBoxes' items="{Answers}">
<items>
<CheckBox text='{Text}' selected='{selected}' />
</items>
</VBox>`
Any assistance in how to bind the properties for the Answers will be appreciated.
In your VBox view code, ensure you have templateShareable:false. Then your nested binding will work like a charm.
Here's an example:
View
<CustomListItem>
<VBox class="sapUiSmallMargin">
<HBox justifyContent="SpaceBetween" class="sapUiTinyMarginBottom sapUiTinyMarginEnd">
<Title text="{noteAttach>CreatorName}" />
<Text text="{parts:[{path:'noteAttach>NotesType'},{path:'noteAttach>CreatedOn'}], formatter:'.formatter.formattedDate'}" />
</HBox>
<Text class="sapUiTinyMarginBottom" text="{noteAttach>NotesData}" />
<VBox items="{path:'noteAttach>Files', templateShareable:false}">
<HBox>
<core:Icon class="sapUiTinyMarginEnd" src="{path:'noteAttach>DocType', formatter:'.formatter.customFileIcon'}" />
<Link href="{parts:[{path:'noteAttach>ObjectId'},{path:'noteAttach>Viewname'},{path:'noteAttach>Title'}], formatter:'.formatter.fileDownloadHref'}" target="_blank" text="{path:'noteAttach>Title'}" />
</HBox>
</VBox>
</VBox>
</CustomListItem>
Controller (for those who also have to modify the OData they receive from backend, like I had to)
this.getOwnerComponent().getModel('noteAttach').read("/NotesandattachmentSet", {
filters: aFilters,
success: function(oData) {
/*
the reason why we create a new object property called Files and in it store an unnumbered Title is bc of the need to do binding with deep/nested structures
if we dont do this, we end up with up to 10 slots of white space for each entry. this is the only way to do this. all other methods mess up search, sort, and filter functionalities
*/
var aODataResults = oData.results;
var iODataResultsLength = aODataResults.length;
for (var j = 0; j < iODataResultsLength; j++) { //sift through each DataEntry in the model
var aObjectFiles = aODataResults[j].Files = []; //create 'Files' property in each object entry
for (var i = 1; i < 11; i++) { //in each DataEntry, find ppty Title1,Title2...up to Title10 & remove the ppties thatre empty. if not empty, create a downloadLink & icon for it
var sObjectFileTitle = aODataResults[j]["Title" + i];
if (sObjectFileTitle.length !== 0) aObjectFiles.push({
Title: sObjectFileTitle,
DocType: aODataResults[j]["DocType" + i],
ObjectId: aODataResults[j]["ObjectId"],
Viewname: aODataResults[j]["Viewname"],
});
}
}
that.getView().setModel(new JSONModel(aODataResults), "noteAttach");
that.getView().setBusy(false);
},
error: function(oError) {
that.parseErrorMessage(oError);
that.getView().setBusy(false);
}
How My Model Looks Like:
How She Looks:

Data binding issue with sap.m.SelectDialog

I'm using Sap.m.SelectDialog to display the value request(F4 help in abap).When i do it with JS view all is good,but when do it with XML view by creating the fragment, binding is not happening with the "items" aggregation.
please let me know what went wrong.
var mydata = { data : [
{
info: "SAP UI5",
name: "Sam",
},
{
info: "SAP UI5",
name: "Ram",
},
{
info: "SAP UI5",
name: "Prem",
}
]};
Js view logic:
var oDialog = new sap.m.SelectDialog({
title: "Select an item",
items: {
path:"/data",
template : new sap.m.StandardListItem({
title: "{name}"
})
}
})
oDialog.open();
}
XML fragment :
<SelectDialog xmlns="sap.m"
id ="id3"
title="Select a product">
<items id="ls3"
path="/data">
<StandardListItem title="{name}">
</StandardListItem>
</items>
.
Reslut of JS view
Result of Xml view
Try XML fragment this way:
<SelectDialog xmlns="sap.m"
id ="id3"
items="{/data}"
title="Select a product">
<items>
<StandardListItem title="{name}"/>
</items>
</SelectDialog>

Vizframe - Stacked column chart category axis

I'm trying to create stacked column chart as on the picture attached, but I would like to remove "Effort" text highlighted in yellow.
The chart should display (per day) how many hours people worked on the project.
Stacked column chart
I have and XML view:
<core:View controllerName="sap.ui.demo.myFiori.view.Main"
xmlns:core="sap.ui.core" xmlns:viz="sap.viz.ui5.controls"
xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:viz.data="sap.viz.ui5.data"
xmlns="sap.m">
<App>
<Page title="Reporting">
<viz:VizFrame xmlns:viz="sap.viz.ui5.controls" id="idVizFrame"
uiConfig="{applicationSet:'fiori'}" vizType="stacked_column" width="100%">
<viz:dataset>
<dataSet:FlattenedDataset xmlns:dataSet="sap.viz.ui5.data" data="{/Time}">
<dataSet:dimensions>
<dataSet:DimensionDefinition name="Date" value="{date}">
</dataSet:DimensionDefinition>
<dataSet:DimensionDefinition name="Name" value="{name}">
</dataSet:DimensionDefinition>
</dataSet:dimensions>
<dataSet:measures>
<dataSet:MeasureDefinition name="Effort" value="{real_effort}">
</dataSet:MeasureDefinition>
</dataSet:measures>
</dataSet:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<feed:FeedItem xmlns:feed="sap.viz.ui5.controls.common.feeds"
uid="valueAxis" type="Measure" values="Effort"/>
<feed:FeedItem xmlns:feed="sap.viz.ui5.controls.common.feeds"
uid="categoryAxis" type="Dimension" values="Date" />
<feed:FeedItem xmlns:feed="sap.viz.ui5.controls.common.feeds"
uid="color" type="Dimension" values="Name" />
</viz:feeds>
</viz:VizFrame>
</Page>
</App>
</core:View>
In the controller in the onInit function I tried to set vizProperties. But when I set hidSubLevels of label of categoryAxis to true, then dates disappear. I don't understand why "Effort" is displayed as category, because it is defined as measure, not category. Could someone please advise how to do such chart without category "Effort" (yellow-highlighted on the picture attached)?
var oVizFrame = this.getView().byId("idVizFrame");
oVizFrame.setVizProperties({
interaction: {
behaviorType: null
},
plotArea: {
dataLabel: {
visible: false
}
},
valueAxis: {
title: {
visible: true,
},
},
categoryAxis: {
title: {
visible: false,
text: 'Category text'
},
label: {
hideSubLevels: false
},
},
title: {
visible: true,
text: 'Project'
},
tooltip: {
visible: true,
}
});
Setting the visibility of the categoryAxis to false seems like the correct approach. I took your code and put it into a Plunker and it works there.
Can you please remove as many as other possible configurations and try it again. If that doesn't help, can you please update my Plunker and create a runnable version of your issue? Maybe it's also a UI5 version issue. You could also try out to upgrade to a newer version.
Here's my Plunker:
https://embed.plnkr.co/td2ANcu0F2lZVgd7dfTC/