Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
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.


 

 

 

 
2 Comments