Serving Media Data - How to handle it with Fiori Elements App?

[sfdfklskldf]

The page https://cap.cloud.sap/docs/guides/media-data does describe how to define the service and the database for media.

But I miss a hint/link/documentation that describes how to use it on a Fiori Elements App.

I noticed the annotation

    HeaderInfo         : {
        Image : image,

But Image is marked as experimental. And ImageUrl should point to what?

Also how should be the way to edit the image in an Fiori Elements App that uses draft handling? Is this build in? Or is this completely missing? How to extend it in the right way?

[renejeglinsky]

Hi @sfdfklskldf ,

Thanks for opening this issue. From our Fiori UI guide we have links to samples that show the usage of annotations. For example the Sample Service Used in Tutorials for SAP Fiori Elements Floorplans for OData V4 is hopefully helpful. In addition I'm sure you know the UI5 Demokit incl. SAP Fiori Elements docs.

What would you expect in capire? Several links to specific topics in the UI5 Demokit (will never be a complete list) or just a global link to the UI5 Demokit?

[sfdfklskldf]

Hello, the question is. Is CAP able to handle pictures in combination with Fiori Elements app automatically. Classical example: You have a product app and plan to show a product picture. In CAP I would for example add following code in the product entity:

picture               : LargeBinary @Core.MediaType: pictureType;
pictureType        : String      @Core.IsMediaType;

As I see in the annotation for HeaderInfo there is the the parameter Image pointing to a stream (but this is declared as experimental). Common way would be ImageUrl but what would be the URL? picture is a LargeBinary and no URL.

So question is how to map this.

The idea of Fiori Elements is to not write lot of JavaScript code so I would try to avoid hacking around to get such an image editable.

But my current research is - this won't work out of the box. But maybe I am wrong, that is why I ask here.

[sfdfklskldf]

Buy the way the linked documents I noticed already but they can't answer my question.

[renejeglinsky]

Hi, I got another hint and this should be the documentation that fills the gap: https://ui5.sap.com/#/topic/b236d32d48b74304887b3dd5163548c1

Please let me know if this helps.

[sfdfklskldf]

Thanks I will look at it soon.

[sfdfklskldf]

With that I could get it running. Thanks. Anyhow a link from CAP to that page would reduce search time a lot.

[renejeglinsky]

That's great to hear! Including the link definitely the next step. Just need to check where this makes the most sense.

[sfdfklskldf]

As an example for others:

Schema definition:

entity Person : managed, cuid {
    firstname : String;
    lastname  : String;
    avatar               : LargeBinary @Core.MediaType: avatarType @Core.ContentDisposition.Filename: avatarFileName @Core.ContentDisposition.Type: 'inline';
    avatarFileName      : String;
    avatarType           : String      @Core.IsMediaType;    
};

Annotation for UI Header:

HeaderInfo         : {
        ImageUrl: avatar,

Interstingly this leads to an error in VisualStudio Code telling me: Path avatar leads to Edm.Stream. The path should lead to type Edm.String.CDS (annotations) Anyhow it works.

To make it editable I added it to a FieldGroup like this:

        {
            Value : avatar,
            Label : '{i18n>AVATAR}'
        }

The group is then used in a Facet.

[sfdfklskldf]

What I got not working to show the image in a Table line (LineItem).

[renejeglinsky]

Hi,

Does this sample help in that regard?

https://github.com/SAP-samples/fiori-elements-feature-showcase#adding-images-to-a-table

[sfdfklskldf]

I use this syntax:

    LineItem           : [
         {
                $Type : 'UI.DataField',
                Value : avatar,
                ![@UI.Importance] : #High,
         },

not sure what the $value in the example mean - syntax looks quite different there? But with this annotation it shows me a column for the image with the image name and if I click on it I could download the image but it is not directly shown.

[renejeglinsky]

The comment here seems related: https://github.com/SAP-samples/fiori-elements-feature-showcase/blob/main/app/featureShowcase/labels.cds#L27

[sfdfklskldf]

Thanks that is interesting. Then it looks like two similar annotations are required. Now I have:

    avatar    @Core.IsUrl     : true
              @UI.IsImageURL  : true
              @Core.MediaType : avatarType;

Looks like the Core.IsUrl was enough for the header. But the UI.IsImageUrl is required for the LineItem.

Not sure if this is obvious for everyone? :)

[renejeglinsky]

Overall the sample does have all the information that you'd have needed, right? I especially like how the maintainer connected the information all files using keywords/search terms:

[sfdfklskldf]

Somehow. But all example using a String type in database to store a real URL there. In my case it is a LargeBinary that has to be used as stream. And I miss example documentation exactly for that. For me it is working now but I bet others would have the same issues. It is also interesting that the IDE points an error for these annotations like:

Term 'Core.IsURL' cannot be applied to this element. It can be applied to 'Property, Term' of type 'Edm.String'CDS (annotations)
Term 'UI.IsImageURL' cannot be applied to this element. It can be applied to 'Property, Term' of type 'Edm.String'CDS (annotations)

So also the IDE does not know that this should work :)

[nocin]

That's great to hear! Including the link definitely the next step. Just need to check where this makes the most sense.

HI @renejeglinsky,

I had a similar problem and this link would've helped me a lot. Somehow I found it another way, but putting it in the CAP docs would have saved me quite some time as well!

BR, nico

[renejeglinsky]

Thank @nocin , I'll include that link. I'll keep this issue open, as I'm still not 100% convinced that this is good enough. I'll share the result here and ask for your feedback, ok?

[renejeglinsky]

I added the link under the intro of annotating media elements:

In the end it's more than that but we also don't get too specific on use cases in capire. So this hopefully suffices. WDYT?

[nocin]

This looks perfect!