SAP Fiori analytical apps are the new user experience (UX) for SAP Business Suite which allows real-time insights into your business by displaying KPIs, allowing you to make faster, better decisions.
We can perform complex aggregations and calculations on any business operations.
It helps to deliver performance in form of table and chart visuals in the Analytical List Pages.
Below is the example on how to create and extend an Analytical View & add a link to column of Analytical Table.
Analytical View:
@AbapCatalog.sqlViewName: 'ZCASES'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@AbapCatalog.preserveKey: true
@EndUserText.label: 'Case Analytics'
@OData.publish: true
@Analytics.query: true
@VDM.viewType: #CONSUMPTION
@UI.presentationVariant: [
// KPI to be implemented
{
qualifier: 'FilterCasesByLOB',
text: 'Filter: Cases by LOB',
visualizations: [{
type: #AS_CHART,
qualifier: 'FilterChartCasesByLOB'
}]
},
{
qualifier: 'FilterCasesBySalesOrg',
text: 'Filter: Cases by SalesOrg',
visualizations: [{
type: #AS_CHART,
qualifier: 'FilterChartCasesBySalesOrg'
}]
},
{
qualifier: 'FilterCasesByContractLang',
text: 'Filter: Cases by ContractLang',
visualizations: [{
type: #AS_CHART,
qualifier: 'FilterChartCasesByContractLang'
}]
},
{
qualifier: 'FilterCasesByCaseID',
text: 'Filter: Cases by CaseID',
visualizations: [{
type: #AS_CHART,
qualifier: 'FilterChartCasesByCaseID'
}]
},
{
qualifier: 'Default',
visualizations: [{type: #AS_CHART, qualifier: 'ChartDefault'}]
}
]
@UI.selectionVariant: [
{
qualifier: 'Default',
text: 'Default'
}
]
@UI.chart: [
{
qualifier: 'FilterChartCasesByLOB',
chartType: #LINE,
dimensions: [ 'LineOfBusiness' ],
measures: [ 'extky' ],
dimensionAttributes: [{
dimension: 'LineOfBusiness',
role: #CATEGORY
}],
measureAttributes: [{
measure: 'extky',
role: #AXIS_1
}]
},
{
qualifier: 'FilterChartCasesBySalesOrg',
chartType: #BAR,
dimensions: [ 'SaleOrg' ],
measures: [ 'extky' ],
dimensionAttributes: [{
dimension: 'SaleOrg',
role: #CATEGORY
}],
measureAttributes: [{
measure: 'extky',
role: #AXIS_1
}]
},
{
qualifier: 'FilterChartCasesByLang',
chartType: #DONUT,
dimensions: [ 'Language' ],
measures: [ 'extky' ],
dimensionAttributes: [{
dimension: 'Language',
role: #CATEGORY
}],
measureAttributes: [{
measure: 'extky',
role: #AXIS_1
}]
},
{
qualifier: 'FilterChartCasesByCaseID',
chartType: #DONUT,
dimensions: [ 'data_source' ],
measures: [ 'extky' ],
dimensionAttributes: [{
dimension: 'data_source',
role: #CATEGORY
}],
measureAttributes: [{
measure: 'extky',
role: #AXIS_1
}]
},
{
qualifier: 'ChartDefault',
chartType: #VERTICAL_BULLET,
dimensions: [ 'LineOfBusiness', 'SaleOrg' ],
measures: [ 'extky' ],
dimensionAttributes: [
{
dimension: 'LineOfBusiness',
role: #SERIES
},
{
dimension: 'SaleOrg',
role: #CATEGORY
}
],
measureAttributes: [{
measure: 'extky',
role: #AXIS_1
}]
}
]
define view ZCASE_ANYL_QUERY
as select distinct from ZCASE
{
@UI.selectionField.position: 40
@EndUserText.label: 'Case'
@UI.lineItem: [{position: 10}]
key ext_key,
@UI.selectionField.position: 10
@EndUserText.label: 'Line Of Business'
@ObjectModel.text.element: ['LineOfBusinessText']
@UI.lineItem.position: 40
@Search: {defaultSearchElement: true, ranking: #HIGH, fuzzinessThreshold: 0.8}
LineOfBusiness,
@UI.selectionField.position: 20
@EndUserText.label: 'Sales Organization'
@UI.lineItem.position: 20
@ObjectModel.text.element: ['SalesOrganizationName']
@Search: {defaultSearchElement: true, ranking: #HIGH, fuzzinessThreshold: 0.8}
SaleOrg,
@Semantics.text: true
@UI.hidden: true
@UI.selectionField.exclude: true
SalesOrganizationName as SalesOrganizationName,
@UI.selectionField.position: 30
@ObjectModel.text.element: ['LanguageDesc']
@UI.lineItem.position: 30
@Search: {defaultSearchElement: true, ranking: #HIGH, fuzzinessThreshold: 0.8}
Language,
@EndUserText.label: 'Language Description'
@Semantics.text: true
@UI.hidden: true
@UI.selectionField.exclude: true
LanguageName,
@Semantics.text: true
@UI.hidden: true
@UI.selectionField.exclude: true
LineOfBusinessText,
@EndUserText.label: 'CaseID'
@UI.selectionField.exclude: true
1 as extky
}@OData.publish: true will create the OData Service and we can maintain the same in tcode /IWFND/MAINT_SERVICE.
1. We can create the Analytical List page.
2. Fill the project name, title, namespace and description.1
3. We will select the OData service
4. We will give the OData Collection
- Qualifier: Default
- Table Type: Responsive
- Auto Hide: TRUE
Below is the Analytical App
Now we will extend the Analytical App adding link to column CaseId.
On click of CaseID link it should navigate.
We need to select webapp->New->Extension
Select the Analytical List Page Extension
There are three options we can use to extend the Analytical App
- Filter
- Action
- Column
We need two fragment one for Column and other for cell in the column and we will declare the same in manifest file
CaseID Fragment
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m">
<Column id="ExtensionWizard::ColumnBreakout">
<Text text="Case ID"/>
<customData>
<core:CustomData key="p13nData" value='\{"columnKey": "ext_key" , "leadingProperty":"ext_key"}'/>
</customData>
</Column>
</core:FragmentDefinition>CaseIDCells Fragment
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m">
<Link text="{ext_key}" press="onCaseIdPress" ></Link>
</core:FragmentDefinition>In controller we will implement the OnCaseIdPress Event
onCaseIdPress: function()
{
Code here
}In Annotation XML file we need to add annotation
<Annotations Target=”ZDCD_AIMLSTG_ANYL_QUERY_CDS.ZDCD_AIMLSTG_ANYL_QUERYType/ext_key”>
<Annotation Term=”Common.SemanticObject” Path=”ext_key”/>
</Annotations>
We can see the link below for the caseid.
