Homelab, Linux, JS & ABAP (~˘▾˘)~
 

[Fiori] BAS – Request is not a local Request

Recently I was continuing an enhancement project of a standard Fiori Application. The already existing enhancement project was created using WebIDE a few years ago. Now I needed to add some more functionality to the enhancement project using the Business Application Studio. To my surprise, the automatic migration of the WebIDE project to a BAS project was working without any issues. Nice! I could make my changes and everything was fine until I tried to deploy the application.

The abap_deploy_task aborted with the error “Request is not a local Request” (in German “Auftrag ist kein lokaler Auftrag“).

Somehow it did not deploy in my Workbench Transport Request and was expecting a Local Transport Request.

At first, I thought, this was a problem in the ui5-deploy.yaml configuration of my App, and therefore I was looking in the wrong direction. But after checking the package of the already deployed enhancement project in the backend, I finally found the reason. The Transport Layer of the Package containing the BSP application was not correct. It turned out, that the previous developer was not able to deploy from his WebIDE directly to the system, instead he deployed to another system, exported and then imported the transport request manually. Therefore, the “Original System” of all objects was incorrect and also the Transport Layer on the Package. After updating both (like described here), I was able to deploy the enhancement project successfully in my Workbench Transport Request.

[Fiori] Launchpad: Failed to load catalogs

Recently, I was confronted with the “Failed to load catalogs” error message when starting the Fiori Launchpad (/ui2/flp) and navigating to the App Finder.

The system was quite new and the Fiori Customizing was not completely done yet. When opening the Dev Tools, I saw a failed request to

/sap/opu/odata/ui2/page_builder_pers/PageSets('%2FUI2%2FFiori2LaunchpadHome')

Opening this failed request in a new tab results in an HTTP 404 from an Apache web service. So it looked like an Apache was set up as reverse proxy in front of the sap system. I tried to call the PageSets endpoint without providing the key %2FUI2%2FFiori2LaunchpadHome and got an HTTP 200. So in general, Apache was working, and the service endpoint page_builder_pers was responding. Next, I did the same service calls from the gateway client and both calls were working fine. So it looked like Apache was the problem when providing the PageSets key. After a quick search, I found this post on Stack Overflow:

https://stackoverflow.com/questions/37834925/apache-reverse-proxy-blocking-sap-fiori-launchpad-url

So the issue was some (in this case) incorrect decoding of ‘%2F’. After contacting the basis team and adding the proposed Apache configs, the request finally resolved successfully, and the Launchpad was displaying some apps.

[CAP] Display file content from external resource in Fiori Elements app via an Association

I was having a situation, where I needed to access file content via an association. This led to two problems, one in the backend and one in the frontend.

My data-model.cds looked like this.

entity MainEntity: cuid, managed {
    file            : Association to Files @mandatory  @assert.target;
}

entity Files : cuid, managed {
    content         : LargeBinary @stream  @Core.MediaType: mediaType  @Core.ContentDisposition.Filename: fileName  @Core.ContentDisposition.Type: 'inline'; 
    mediaType       : String      @Core.IsMediaType: true;
    fileName        : String      @mandatory;
    size            : Integer;
}

The file content is actually stored in an external system and is only read when the content is explicitly requested, with a call like this:

### Get file content
GET http://localhost:4004/odata/v4/admin/Files({{ID}})/content
Authorization: Basic user:password

For this kind of scenario, I have found the perfect sample code here: https://github.com/SAP-samples/cloud-cap-samples/blob/main/media/srv/media-service.js
But in my case, I needed to call the file content via an association like this:

### Get file content via association
GET http://localhost:4004/odata/v4/admin/MainEntity({{ID}})/file/content
Authorization: Basic user:password

This did not work, because in this case, we don’t get the required file ID in the Files handler in req.data.ID (find the reason here), which is needed to read the file from the external system. Therefore, I had to implement the following workaround (line 5-8), which checks from which entity we are coming and is fetching the requested file ID from the DB.

    srv.on('READ', Files, async (req, next) => {
        //if file content is requested, return only file as stream
        if (req.context.req.url.includes('content')) {

            // workaround: when File is requested via Association from MainEntity, as the ID is then not provided directly
            if (req.context.req.url.includes('MainEntity')) {
                req.data.ID = await SELECT.one.from(req.subject).columns('ID')
            }

            const file = await SELECT.from(Files, req.data.ID)
            if (!file) return next() // if file not found, just handover to default handler to get 404 response

            try {
                const stream = await getMyStreamFromExternalSystem(req)
                return [{ value: stream }]
            } catch (err) {
                req.error(`Could not read file content`)
            }

        } else return next() // else delegate to next/default handlers without file content
    })

This way, the file content can now be read directly via File and also via MainEntity following the association.

The next challenge was to display this file content in a Fiori Elements app. This works out of the box, if the file content is called directly from the Files entity, means not over an association. But if the file content is coming via an association, it seems like the Fiori Elements framework is creating an incorrect backend call. It tries to call the mediaType from the MainEntity instead of the Files entity, resulting in a failing odata call, which looks like this
/odata/v4/service/MainEntity(key)/mediaType
instead of
/odata/v4/service/MainEntity(key)/file/mediaType.
The only workaround I found was to overwrite the @Core.MediaType annotation coming from the Files entity by setting the mediaType to a hard value in the annotation.yaml of the Fiori Elements App.

annotate service.fileservice@(
    UI.FieldGroup #FileGroup      : {
        $Type: 'UI.FieldGroupType',
        Data : [
            {
                $Type: 'UI.DataField',
                label: 'Main ID',
                Value: ID,
            },
            {
                $Type: 'UI.DataField',
                label: 'File ID',
                Value: file.ID,
            },
            {
                $Type: 'UI.DataField',
                Value: file.content,
            },
            {
                $Type: 'UI.DataField',
                Value: file.mediaType,
            },
            {
                $Type: 'UI.DataField',
                Value: file.fileName,
            },
            {
                $Type: 'UI.DataField',
                Value: file.size,
            },
        ],
    },
    UI.Facets                     : [
        {
            $Type : 'UI.ReferenceFacet',
            ID    : 'GeneratedFacet2',
            Label : 'File Information',
            Target: '@UI.FieldGroup#FileGroup',
        },
    ],
);

// Workaround as currently display file content via an association in Fiori Elements is incorrectly trying to fetch the media type.
// Therefore add a fix value for the media type. Of course, this only works, if you only expect a specific file type.
annotate service.Files with {
  @Core.MediaType : 'application/pdf'
  content
};

In the Fiori Elements App it will now be displayed like this and by clicking on the Context, it will successfully load the file from the backend:

[SAPUI5] Model binding events

this.getView().bindElement({
				path: sObjectPath,
				events: {
					dataRequested: (oEvent) => {}, // Executed when a request to server is send
					dataReceived: (oEvent) => {},  // Executed when data from server is received
					change:(oEvent) => {},         // Executed everytime you do ElementBinding
				}
			})

The events for dataRequested and dataReceived are only fired, when data is requested or data is received from a backend. This is not the case, when the requested data is already available in the model from a previous backend call. In such situations, the change event comes in handy.

The same can also be done via XML:

binding="{
  path: '/myEntitySet',
  events: {
    dataRequested: 'onDataRequested',
    dataReceived: 'onDataReceived',
    change: 'onDataChange'
  }
}"

[Fiori Elements] Custom Column in a Table is not visible

I had a generated Fiori Elements App (done by using @sap/generator-fiori), containing a List, where I needed to add a custom column containing a Button. I found this well explained in the official documentation:

https://sapui5.hana.ondemand.com/#/topic/d525522c1bf54672ae4e02d66b38e60c

I followed the instructions exactly, but it didn’t work. When comparing my manifest.json again with the example, I noticed one minor difference. In my generated App, there was an extra items/ in front of the @com.sap.vocabularies.UI.v1.LineItem.

My generated App
The manifest.json sample

After removing items/ the custom column was suddenly visible. When I noticed the difference, I thought that would never be the reason. Luckily, I tested it after all. That really is a big problem with Fiori Elements. These are problems that can no longer be solved by debugging or similar.

Here some more helpful links, when challenging with a custom column:

https://github.com/SAP-samples/fiori-elements-feature-showcase/blob/main/README.md#add-custom-column-extensibility

https://ui5.sap.com/test-resources/sap/fe/core/fpmExplorer/index.html#/customElements/customColumnContent

[CAP] Fiori Elements – Add section with PDFViewer

I have a CAP Service that provides a PDF file that I needed to display in a Fiori Elements frontend using the sap.m.PDFViewer. The viewer should be placed in a section on the object page after navigating from the ListReport main page.

My CAP Service has the following annotations to provide the PDF.

  entity pdfFiles : cuid, managed {
    content            : LargeBinary @stream @Core.MediaType: mediaType @Core.ContentDisposition.Filename: fileName @Core.ContentDisposition.Type: 'inline';
    mediaType          : String      @Core.IsMediaType: true;
    fileName           : String      @mandatory;
  }

Add a custom section to your view following this example: https://sapui5.hana.ondemand.com/test-resources/sap/fe/core/fpmExplorer/index.html#/customElements/customSectionContent
Two steps are necessary.

1. Add a new section via the manifest. The template path should match your app namespace.

        "ObjectPage": {
          "type": "Component",
          "id": "ObjectPage",
          "name": "sap.fe.templates.ObjectPage",
          "viewLevel": 1,
          "options": {
            "settings": {
              "editableHeaderContent": false,
              "entitySet": "pdfFiles",
             "content": {
                "body": {
                  "sections" : {
                    "myCustomSection": {
                      "template": "sap.fe.core.fpmExplorer.customSectionContent.CustomSection",
                      "title": "{i18n>pdfSection}",
                      "position": {
                        "placement": "After",
                        "anchor": "StandardSection"
                      }
                    }
                  }
                }
              }
            }
          }
        }

2. Add the section content by defining a new fragment in the file CustomSection.fragment.xml

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:macro="sap.fe.macros">
	<ScrollContainer
		height="100%"
		width="100%"
		horizontal="true"
		vertical="true">
		<FlexBox direction="Column" renderType="Div" class="sapUiSmallMargin">
			<PDFViewer source="{content}" title="{fileName}" height="1200px">
				<layoutData>
					<FlexItemData growFactor="1" />
				</layoutData>
			</PDFViewer>
		</FlexBox>
	</ScrollContainer>
</core:FragmentDefinition>

On the ObjectPage you will now have a new section containing the PDFViewer.

[CAP] Fiori Elements – Display managed fields as value help

data-model.cds

using {
    managed
} from '@sap/cds/common';

entity managedEntity: managed {
    key ID    : UUID;
        field : String;
}

annotations.cds

using myService as service from '../../srv/myService';

annotate service.managedEntity with @(
    Capabilities.SearchRestrictions: {Searchable: false},
    UI.PresentationVariant         : {
        SortOrder     : [{
            Property  : createdAt,
            Descending: true
        }],
        Visualizations: ['@UI.LineItem']
    },
    UI.HeaderInfo                  : {
        TypeName      : '{i18n>myEntity}',
        TypeNamePlural: '{i18n>myEntities}',
    },
    UI.SelectionFields             : [
        createdAt,
        createdBy
    ],
    UI.LineItem                    : [
    ]
) {
    createdAt @UI.HiddenFilter : false;
    createdBy @UI.HiddenFilter : false;
};