In Fiori we can easily generate Chart and Table representation with the help of Analytics Path Framework.

It is only necessary for application developer to prepare data source for the visualization, that is, the CDS view development. The left rendering work is done by APF.

In some of my previous blog I have already introduced the step how you can build a Fiori application with the help of Smart Template + CDS view within a couple of minutes. In this blog the CDS view is again leverage to render some fancy chart.

Step1 create necessary CDS view and automatically generate OData service

To make concept easily understood, I have created a simple ABAP database table:

/wp-content/uploads/2016/05/clipboard1_957972.png

It has only two entries which will be rendered as column chart by APF later.

Then I have created a cube view by pasting the following source code:


@EndUserText.label: 'Jerry cube view'
@Analytics.dataCategory: #CUBE
@VDM.viewType: #COMPOSITE
@AccessControl.authorizationCheck:#CHECK
@AbapCatalog.sqlViewName: 'zprdcube'
define view Z_C_Prod_Cube as select from zprd_query{
   key zprd_query.prod_id,
  zprd_query.prod_text,
  @DefaultAggregation: #MAX
  zprd_query.quantity
} 

And then create a query view ( annotation @Analytics.query: true ) and automatically publish it as OData service ( annotation @OData.publish: true)


@EndUserText.label: 'Jerry query verification'
@VDM.viewType: #CONSUMPTION
@Analytics.query: true
@AccessControl.authorizationCheck:#NOT_ALLOWED
@AbapCatalog.sqlViewName: 'zprdquery'
@OData.publish: true
define view Z_C_Product as select from Z_C_Prod_Cube {
  key Z_C_Prod_Cube.prod_id,
  Z_C_Prod_Cube.prod_text,
  @DefaultAggregation: #MAX
  Z_C_Prod_Cube.quantity
}   

Step2 Modelling in APF Modeler

Now go to APF configuration Modeler:

/wp-content/uploads/2016/05/clipboard2_957973.png


create a new application with Semantic Object with default value “FioriApplication”:

/wp-content/uploads/2016/05/clipboard3_957989.png

/wp-content/uploads/2016/05/clipboard4_957990.png

Create a new configuration:

/wp-content/uploads/2016/05/clipboard5_957991.png

For Smart Filter Bar, specify the OData service published by CDS view we just create:

/wp-content/uploads/2016/05/clipboard6_957992.png

Then create a new category, which will be used by end user as a entry point to use APF:


/wp-content/uploads/2016/05/clipboard7_957993.png

Select the created category and create a new step based on it:

/wp-content/uploads/2016/05/clipboard1_957972.png

Choose a meaningful name for the step, and specify properties which will be used to render the chart.

/wp-content/uploads/2016/05/clipboard2_957973.png

The last step is to create a Column chart as representation for the step just created.

/wp-content/uploads/2016/05/clipboard3_957989.png

And then create a table representation which acts as drill down display, that is, when I click a certain product in column chart, I would like to have its detail information displayed by this table chart. Once saved, click Execute button to load the created application.

/wp-content/uploads/2016/05/clipboard4_957990.png

Step3 analysis in APF

From launched application url we can find that the application is loaded based on the configuration we created in step 2.

click button “Add Analysis Step”

/wp-content/uploads/2016/05/clipboard5_957991.png


Choose created category:

/wp-content/uploads/2016/05/clipboard6_957992.png

and choose step:

/wp-content/uploads/2016/05/clipboard7_957993.png

then choose column presentation:

/wp-content/uploads/2016/05/clipboard8_958001.png

Then column chart is rendered based on the content in query view. Hover mouse on chart and detail information is displayed via tooltip.

/wp-content/uploads/2016/05/clipboard9_958002.png

Now click the chart part for Z02,

/wp-content/uploads/2016/05/clipboard10_958003.png

This time choose “Table Representation”:

/wp-content/uploads/2016/05/clipboard11_958004.png

then the detail information for Z02 is displayed in table style:

/wp-content/uploads/2016/05/clipboard12_958005.png

Other types of Chart

Line Chart:

/wp-content/uploads/2016/05/clipboard1_957972.png

Bar Chart:

/wp-content/uploads/2016/05/clipboard2_957973.png

Pie Chart:

/wp-content/uploads/2016/05/clipboard3_957989.png

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply