Application Development Blog Posts
Learn and share on deeper, cross technology development topics such as integration and connectivity, automation, cloud extensibility, developing at scale, and security.
cancel
Showing results for 
Search instead for 
Did you mean: 
ramesh_punder
Explorer
We had the requirement to display the rating indicator to determine the Employee’s ratings based on their performance, skills and their availability. Here I am trying to display rating indicator by using product details, also displaying the Images of respected product by forming the URL Via OData.

Let’s begin with example,

Here RAP Model also involved to preview the Application but the agenda is that we have to display the ratings for each product

Database Table: zproduct_details, zfile.


@EndUserText.label : 'Product details'
@AbapCatalog.enhancement.category : #NOT_EXTENSIBLE
@AbapCatalog.tableCategory : #TRANSPARENT
@AbapCatalog.deliveryClass : #A
@AbapCatalog.dataMaintenance : #RESTRICTED
define table zproduct_details {
key client : abap.clnt not null;
key p_id : sysuuid_x16 not null;
p_name : abap.char(50);
p_cat : abap.char(30);
supplier : abap.char(10);
rating : abap.int1;
cuky_field : abap.cuky;
@Semantics.amount.currencyCode : 'zproduct_details.cuky_field'
price : abap.curr(10,2);
available_p : abap.int1;
}

 
@EndUserText.label : 'Media Details'
@AbapCatalog.enhancementCategory : #NOT_CLASSIFIED
@AbapCatalog.tableCategory : #TRANSPARENT
@AbapCatalog.deliveryClass : #A
@AbapCatalog.dataMaintenance : #DISPLAY
define table zfile {
key mandt : mandt not null;
@EndUserText.label : 'Filename'
key filename : abap.char(100) not null;
@EndUserText.label : 'Date'
sdate : abap.dats;
@EndUserText.label : 'Time'
stime : abap.tims;
@EndUserText.label : 'Extension'
mime_type : abap.char(20);
value : xstringval;
}

Define CDS root view entity by using product details table
@AbapCatalog.viewEnhancementCategory: [#NONE]
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Product details'
@Metadata.ignorePropagatedAnnotations: true
@ObjectModel.usageType:{
serviceQuality: #X,
sizeCategory: #S,
dataClass: #MIXED
}
@Metadata.allowExtensions: true
@Search.searchable: true
define root view entity zi_product_details
as select from zproduct_details
{
key p_id as PId,
@Search:{ defaultSearchElement: true,
fuzzinessThreshold: 0.9,
ranking: #MEDIUM}
p_name as PName,
@Search:{ defaultSearchElement: true,
fuzzinessThreshold: 0.9,
ranking: #MEDIUM}
p_cat as PCat,
supplier as Supplier,
rating as Rating,
cuky_field as CukyField,
@Semantics.amount.currencyCode: 'CukyField'
price as Price,
available_p as Available,
@Semantics.imageUrl: true
cast(concat( concat('https://<<System>>:<<PORT>>/sap/opu/odata/SAP/ZSTREAM_OPERATION_SRV/zfileSet
(Mandt=''500'',Filename=',''),concat('''',concat(p_name,''')/$value') ) )
as abap.char( 256 ) ) as P_Image_URL

Here, in above code i just formatted image URL by using concatenation, in current situation I have implemented OData streaming methods.

then define one metadata file adress annotation for perticular properties

Metadata Extension :
@Metadata.layer: #CORE
@UI: {
headerInfo: {
typeName: 'Product Details',
typeNamePlural: 'Products',
title: { value: 'PName'}}}
annotate view zi_product_details with
{
@UI.facet: [
{ id: 'Colleact',type: #COLLECTION,position: 10,purpose: #STANDARD,label: 'Product details' },
{ id: 'ID1',parentId: 'Colleact',type: #IDENTIFICATION_REFERENCE,position: 20,purpose: #STANDARD },
{ id: 'HeaderIno' ,type: #DATAPOINT_REFERENCE,purpose: #HEADER,targetQualifier: 'Rating' }]

@UI.hidden: true
PId;
@UI:{lineItem: [{ position: 10,label: ' ',cssDefault.width: '15rem'}],
identification: [{ position: 10,label: 'Product Image' }]}
P_Image_URL;
@UI:{lineItem: [{ position: 20,label: 'Product'}],
identification: [{ position: 20,label: 'Product' }]}
PName;
@UI:{lineItem: [{ position: 30,label: 'Category'}],
selectionField: [{ position: 20 }],
identification: [{ position: 30,label: 'Category' }]}
@EndUserText.label: 'Category'
PCat;
@UI:{lineItem: [{ position: 40,label: 'Supplier'}],
selectionField: [{ position: 30 }],
identification: [{ position: 40,label: 'Supplier' }]}
@EndUserText.label: 'Supplier'
Supplier;
@UI:{lineItem: [{ position: 50,label: 'Average Ratings', type: #AS_DATAPOINT}],
selectionField: [{ position: 40}],
identification: [{ position: 50,label: 'Ratings' ,type: #AS_DATAPOINT}]}
@UI.dataPoint:{ visualization: #RATING }
@UI.selectionField: [{qualifier: 'Rating1'}]
Rating;
@UI:{identification: [{ position: 60,label: 'Currency' }]}
CukyField;
@UI:{lineItem: [{ position: 60,label: 'Product Price' }],
identification:[{ position: 70,label: 'Product Price' }]}
Price;
@UI:{lineItem: [{ position: 70,label: 'Available Product' }]}
Available;
}

Make use of @UI datapoint.visualization annotation  to display the rating indicator.

Use datapoint reference inside facet by using that you are able to Display until it will display blank even if you are addressed @UI datapoint.visualization.

@UI.facet: [

{ id: 'HeaderIno' ,type: #DATAPOINT_REFERENCE,purpose: #HEADER,targetQualifier: 'Rating' }

]

@UI.lineitem.type : #AS_DATAPOINT is used to display in table table


@UI.identification.type : #AS_DATAPOINT is used to display in the object page



Formatting the Image URL :

Define a field to format the URL(Let’s say P_Image_URL) by using concatination.

here you have to provide system name and port number


With the help odata project, service have been create to retrive the image based on the product name


Implement your Stream Method to perform the operation

Create Stream:
method /IWBEP/IF_MGW_APPL_SRV_RUNTIME~CREATE_STREAM.

data : ls_file type ZCL_ZSTREAM_OPERATION_mPC_EXT=>ts_zfile." Data Provider Secondary Class

ls_file-filename = iv_slug.
ls_file-mandt = sy-mandt.
ls_file-sdate = sy-datum.
ls_file-stime = sy-uzeit.

ls_file-mime_type = is_media_resource-mime_type.
ls_file-value = is_media_resource-value.

INSERT INTO zfile VALUES ls_file.
IF sy-subrc = 0.
copy_data_to_ref(
EXPORTING
is_data = ls_file
CHANGING
cr_data = er_entity
).

ENDIF.
endmethod.

Get Stream:
METHOD /iwbep/if_mgw_appl_srv_runtime~get_stream.

DATA : ls_file TYPE zcl_zstream_operation_mpc_ext=>ts_zfile.

DATA : ls_stream TYPE ty_s_media_resource.

ASSIGN it_key_tab[ name = 'Filename' ] TO FIELD-SYMBOL(<lfs>).
IF <lfs> IS ASSIGNED.
SELECT SINGLE * FROM zfile INTO ls_file WHERE filename = <lfs>-value.
IF sy-subrc = 0.

ls_stream-mime_type = ls_file-mime_type.
ls_stream-value = ls_file-value.
copy_data_to_ref(
EXPORTING
is_data = ls_stream
CHANGING
cr_data = er_stream
).
ENDIF.
ENDIF.
ENDMETHOD.

Behavior Defination :
managed implementation in class zbp_i_product_details unique;
strict ( 2 );

define behavior for zi_product_details //alias <alias_name>
persistent table zproduct_details
lock master
authorization master ( instance )
//etag master <field_name>
{
create;
update;
delete;

field ( numbering : managed, readonly ) PId;
mapping for zproduct_details
{
PId = p_id;
PName = p_name;
PCat = p_cat;
Supplier = supplier;
Rating = rating;
CukyField = cuky_field;
Price = price;
Available = available_p;
}
}

Behavior Implementation:
CLASS lhc_zi_product_details DEFINITION INHERITING FROM cl_abap_behavior_handler.
PRIVATE SECTION.

METHODS get_instance_authorizations FOR INSTANCE AUTHORIZATION
IMPORTING keys REQUEST requested_authorizations FOR zi_product_details RESULT result.

ENDCLASS.

CLASS lhc_zi_product_details IMPLEMENTATION.

METHOD get_instance_authorizations.
ENDMETHOD.

ENDCLASS.



Define Service .


Create Service binding for the Service.

Once you saved your service Publish your local service by clicking Publish Button.


Select your Entity Set to preview the Application

It will display the expected outcomes by displaying Rating indicator.

 


List report object page


Conclusion : 

this requirement basically helps in displaying the ratings and image in the fiori application.

Hope I find it will we be helpful. If any queries please welcome on comment sections.

 

Note: All the images are shown in this blog are the snapshots that are taken from my PC.

 

Regards,

Ramesh Punder