Skip to Content
Personal Insights
Author's profile photo Siddhartha Routh

Streams in RAP : Uploading PDF , Excel and Other Files in RAP Application

Uploading Large Object and media such as Excel or Image through your application is a common business requirement and the only way to do it through a RAP application was by extending the application and using UI5 tooling to upload the file.

With the latest SAP BTP ABAP 2208 release the RAP framework now supports OData streams. It is now possible to enable your RAP application to maintain and handle Large Objects(LOBs).This feature provides end users an option to upload external files of different file formats such as PDF, XLSX , binary file format and other types hence allowing media handling.

In this Blog we will explore how to upload and handle Large Object such as PDF or Binary files without the need to extend the RAP application in BAS.

Large objects are modeled by means of the following fields:

  • Attachment
  • Mimetype
  • Filename

The field Attachment contains the LOB itself in a RAWSTRING format and is technically bound to the field Mimetype and Filename using semantics annotation.

Mimetype represents the content type of the attachment uploaded and the values for the fields Mimetype and Filename are derived from the field Attachment by the RAP framework based on the maintained CDS annotations. No attachment can exist without its mimetype and vice versa.

For example, when a PDF is uploaded the Mimetype field will be derived and populated with ‘APPLICATION/PDF’.

PDF%20File%20Uploaded%20from%20RAP%20application

PDF File Uploaded from RAP application

 

To try this feature out I have built a simple RAP application to upload files directly using RAP Framework.

Database Table 

A Database table was built as per code snippet below.

The field attachment has a data type of RAWSTRING. In BTP ABAP environment you cannot use RAWSTRING domain directly so create a custom domain with data type as RAWSTRING and Length as ‘0’ . This is important as length being ‘0’ would indicate that the RAWSTRING has No length restriction and can accommodate file of larger size. ZMIMETYPE and ZFILENAME are both of type Character and length 128.

@EndUserText.label : 'Invoice Table'
@AbapCatalog.enhancement.category : #NOT_EXTENSIBLE
@AbapCatalog.tableCategory : #TRANSPARENT
@AbapCatalog.deliveryClass : #A
@AbapCatalog.dataMaintenance : #RESTRICTED
define table zinvoicetable {
  key client            : abap.clnt not null;
  key invoice           : ebeln not null;
  comments              : char30;
  attachment            : zattachment;
  mimetype              : zmimetype;
  filename              : zfilename;
  local_created_by      : abp_creation_user;
  local_created_at      : abp_creation_tstmpl;
  local_last_changed_by : abp_locinst_lastchange_user;
  local_last_changed_at : abp_locinst_lastchange_tstmpl;
  last_changed_at       : abp_lastchange_tstmpl;

}

 

Interface View 

CDS annotation @Semantics.largeObject technically binds the MimeType and Filename to the Attachment.

The annotation contentDispositionPreference can be used to define whether, depending on the browser settings, the file attachment is either displayed in the browser (setting #INLINE) or downloaded when selected (option #ATTACHMENT).

Annotation @Semantics.largeObject.acceptableMimeTypes can be used to restrict the Media types which can be uploaded. The validation and Error handling on upload of unsupported media type is handled by the RAP framework.

CDS annotation @Semantics.mimeType: true was used to define the field MimeType as such.

@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Invoice Table'
define root view entity ZI_INVOICETABLE
  as select from zinvoicetable
{
  key invoice               as Invoice,
      comments              as Comments,
      @Semantics.largeObject:
      { mimeType: 'MimeType',
      fileName: 'Filename',
      contentDispositionPreference: #INLINE }
      attachment            as Attachment,
      @Semantics.mimeType: true
      mimetype              as MimeType,
      filename              as Filename,
      @Semantics.user.createdBy: true
      local_created_by      as LocalCreatedBy,
      @Semantics.systemDateTime.createdAt: true
      local_created_at      as LocalCreatedAt,
      @Semantics.user.lastChangedBy: true
      local_last_changed_by as LocalLastChangedBy,
      //local ETag field --> OData ETag
      @Semantics.systemDateTime.localInstanceLastChangedAt: true
      local_last_changed_at as LocalLastChangedAt,

      //total ETag field
      @Semantics.systemDateTime.lastChangedAt: true
      last_changed_at       as LastChangedAt
}

 

Consumption View 

@EndUserText.label: 'Invvoice Table'
@AccessControl.authorizationCheck: #NOT_REQUIRED
@Metadata.allowExtensions: true
define root view entity ZC_INVOICE_TABLE
  provider contract transactional_query
  as projection on ZI_INVOICETABLE
{
  key Invoice,
      Comments,
      Attachment,
      MimeType,
      Filename,
      LocalLastChangedAt
}

 

Metadata Extension

From an UI perspective the User only needs to interact with the Attachment and hence Mimetype and Filename is hidden.

@Metadata.layer: #CORE
@UI: { headerInfo: {
typeName: 'Invoice',
typeNamePlural: 'Invoices',
title: { type: #STANDARD, value: 'Invoice' },
         description: { type: #STANDARD, value: 'Invoice' } },
         presentationVariant: [{
         sortOrder: [{ by: 'Invoice', direction: #ASC }],
         visualizations: [{type: #AS_LINEITEM}] }] }
annotate entity ZC_INVOICE_TABLE with
{
  @UI.facet: [    {
                label: 'General Information',
                id: 'GeneralInfo',
                type: #COLLECTION,
                position: 10
                },
                     { id:            'Invoicedet',
                    purpose:       #STANDARD,
                    type:          #IDENTIFICATION_REFERENCE,
                    label:         'Invoice Details',
                    parentId: 'GeneralInfo',
                    position:      10 },
                  {
                      id: 'Upload',
                      purpose: #STANDARD,
                      type: #FIELDGROUP_REFERENCE,
                      parentId: 'GeneralInfo',
                      label: 'Upload Invoice',
                      position: 20,
                      targetQualifier: 'Upload'
                  } ]

  @UI: { lineItem:       [ { position: 10, importance: #HIGH , label: 'Invoice Number'} ] ,
          identification: [ { position: 10 , label: 'Invoice Number' } ] }
  Invoice;
  @UI: { lineItem:       [ { position: 20, importance: #HIGH , label: 'Comments'} ] ,
           identification: [ { position: 20 , label: 'Comments' } ] }
  Comments;
  @UI:
  { fieldGroup:     [ { position: 50, qualifier: 'Upload' , label: 'Attachment'} ]}
  Attachment;

  @UI.hidden: true
  MimeType;

  @UI.hidden: true
  Filename;

}

 

I have created a managed Behavior definition with Draft and Created a Service definition and Service binding to expose this as a V4 UI .

managed implementation in class zbp_i_invoicetable unique;
strict ( 2 );
with draft;

define behavior for ZI_INVOICETABLE alias Invoice
persistent table ZINVOICETABLE
draft table zinvoicetdraft
lock master
total etag LocalLastChangedAt
authorization master ( instance )
etag master LastChangedAt
{

 // administrative fields: read only
  field ( readonly ) LastChangedAt, LocalLastChangedBy, LocalLastChangedAt , LocalCreatedBy ,
                      LocalCreatedAt;

  create;
  update;
  delete;

  draft action Edit ;
  draft action Activate;
  draft action Discard;
  draft action Resume;

  draft determine action Prepare ;
}

 

Once the OData is published through service binding , we can preview the application.

List%20Page

List Page

 

You can click on create to Create a new Instance.

Object%20page%20With%20Upload%20Option

Object page With Upload Option

 

On “Upload File” the File Open Dialog comes up to select the file from Presentation Server .

File%20Selection%20Dialog

File Selection Dialog

 

Once the File is uploaded the Hyperlink can be used to access the file and based on annotation  contentDispositionPreference the file would either open in a new window or downloaded when selected.

 

After%20File%20Upload

After File Upload

 

Once the Instance is saved we can see the new file encoded in RAWSTRING format along with its Mimetype and Name saved in the database.

Database%20table%20after%20Upload

Database table after Upload

 

In Conclusion, with the Support of OData streams , we can now handle LOBs directly using RAP framework, this really caters to a lot of missing features for which  extensions were needed before. The above application is a very simple example of how this feature can be used.

I am looking forward to explore this more and see how this can be integrated with other solutions such as Content Server and Adobe form.

Please let me know what you think of the this new feature and your feedback is appreciated.

Please refer to the below link for more details.

https://help.sap.com/docs/BTP/923180ddb98240829d935862025004d6/10a3eb645b83413cbbebe4fc1d879a62.html

Assigned Tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Saumya Das
      Saumya Das

      Great blog post, got to learn something new. Indeed, a very useful feature introduced by SAP considering this to be a very common requirement for business.

      Author's profile photo Ramjee Korada
      Ramjee Korada

      Thanks Siddarth for sharing.

      It looks there are many limitations. Better SAP could document them so that we can plan accordingly.

      I mentioned few in the blog post . If you notice further issue, please let me know.

       

      Best wishes,

      Ramjee Korada

      Author's profile photo Siddhartha Routh
      Siddhartha Routh
      Blog Post Author

      Hi Ramjee,

      Thank you for taking time going through my blog .

      I went through your comment in Florian's blog about the limitations and did some small POC's to replicate the same in my system, below are my observations. I am discussing them in this blog as this is more specific to the RAP Stream.

      1. Uploading of attachment is possible only in object page of the entity but not possible in table view.

      I think the Document can be uploaded both from object page as well as from table view and there is no such restriction to limit the upload from Object page only. I do understand that your expectation was on "Create" instead of routing you to the object page it would open the File Selection Dialog. I don't think that will ever be the case as "Create" is a standard action and will always create the instance associated to it. Once the instance is created the File can be uploaded from both the object page and Table view.

      In that regard I do understand that the behavior is a bit different from how we do it in the traditional UI5 world and the UX experience might not be that great .

      PFB screenshot where I am uploading/Updating the document from table view itself, but i had to create the instance first using "Create" Action.

      Upload%20From%20table%20View

      Upload From table View

      File%20open%20Dialog

      File open Dialog

      After Upload

       

      2. Also, only one attachment can be there in a single entity. Else, App will run into error.

      I don't think this is particularly correct . You can have multiple attachments within one entity and there is no such restriction as to allow only one attachment. The only thing we have to keep in mind is the Attachment, MimeType and Filename fields are unique for different attachments.

      As I mentioned in my blog Attachment and MimeType are technically related and hence you need to have separate Mimetype and Filename field for each attachment .

      PFB Screenshot where we can see two attachment within a single entity, I have just extended my table and views to have fields to accommodate the additional attachment .

      Multiple%20Attachment%20within%20single%20Entity

      Multiple Attachment within single Entity

       

      Author's profile photo Ramjee Korada
      Ramjee Korada

      Hi Siddartha,

      Thanks to you too for taking time.

      Appreciate your comments. I hope you have tried in OData v4 but I was trying in OData v2 version.

      #1. However I do understand your explanation on "Create' standard action that creates instance but not attachment. However those attachments were not visible in the table in OData v2 to update/replace. But visible in OData V4.

      #2. In OData v2, metadata itself was dumping with reason that it has multiple attachments in an entity. it worked in v4 same as your attempt.

      Can I request you try both the points in OData V2 and give me feedback ?

      Did you get a chance to look at point #3 ( Non-Draft ) as well ?

      Best wishes,

      Ramjee Korada

       

      Author's profile photo Siddhartha Routh
      Siddhartha Routh
      Blog Post Author

      I still need to check point 3 , I am currently facing some issue while publishing a V2 OData in my BTP ABAP environment. I am guessing its related to the recent release and need to check with my colleagues here.
      I will provide an update here Once I am able to do that.

      Author's profile photo Ramjee Korada
      Ramjee Korada

      Yes. Issue seems related to recent release .

       

      We have a workaround here . You can expose the projection behavior in any existing service definition whose binding is implemented as OData V2 already.

       

      Then refresh the service binding and navigate to the newly generated node or entity to preview Fiori app

      Author's profile photo Seshu Yaramala
      Seshu Yaramala

      Hello Siddarth, thanks for the blog. I tried this example on an S4 Hana 2021 on-premise system but didn't work. Does it only work cloud?

      Author's profile photo Shailesh Yadav
      Shailesh Yadav

      Dear Siddhartha Routh ,

       

      Thank you for the blog.

      We tried the exact same steps, but in the end we did not get the Create, Delete and Upload attachment button in our UI.

      What could be the reason for this?

      Thank You in advance.

      BR,
      Shailesh Yadav