clientAPI.binding for Android and iOS devices - problems with media files

[SolGarciaLinfozzi]

Hi experts!

I hope you're doing well. I'm currently working on a scenario where users can upload "news" that includes data such as text, title, etc., along with an image. I'm facing a couple of issues and would greatly appreciate any guidance or help.

To give you some context on how I'm handling the news upload:

1.I created a News entity (NOTICIA) that is created using an ODataService.CreateEntity action.

{ "_Type": "Action.Type.ODataService.CreateEntity", "ActionResult": { "_Name": "CrearNoticiaOData" }, "OnFailure": { "Name": "/BTP6S/Actions/GenericMessageBox.action", "Properties": { "Message": "#ActionResults:CrearNoticiaOData/error" } }, "OnSuccess": { "Name": "/BTP6S/Actions/Generic/GenericToastMessage.action", "Properties": { "OnSuccess": "/BTP6S/Actions/ClosePage.action", "Message": "¡Creaste una nueva noticia! Los cambios se verán reflejados al sincronizar." } }, "Target": { "Service": "/BTP6S/Services/xxxxxxxxxx.service", "EntitySet": "NOTICIA" }, "Properties": { "TITULO": "#Control:FormCell_Titulo/#Value", "CUERPO": "#Control:FormCell_Cuerpo/#Value", "AREA_ID": "#Page:Noticias_Crear/#Control:FormCell_AreaId/#SelectedValue", "AUTOR_ID": "#Control:FormCell_AutorId/#SelectedValue" } }

2.After creating the news, I created another entity called NewsMedia (NOTICIAMEDIA), which is uploaded using an ODataService.UploadStream action.

{ "_Type": "Action.Type.ODataService.UploadStream", "ActionResult": { "_Name": "NoticiaMedia_Upload" }, "OnFailure": "/BTP6S/Actions/Noticias/Error.action", "OnSuccess": "/BTP6S/Actions/ClosePage.action", "Target": { "Service": "/BTP6S/Services/xxxxxxxxxxxx.service", "EntitySet": "NOTICIAMEDIA", "QueryOptions": "$filter=NOTICIA_ID eq {NOTICIA/ID}" }, "Properties": { "CONTENIDO": "#Control:FCAttach/#Value" } }

3.Finally, I link the NewsMedia (NOTICIAMEDIA) entity to the respective news (NOTICIA) item using an ODataService.UpdateEntity action.

{ "_Type": "Action.Type.ODataService.UpdateEntity", "ActionResult": { "_Name": "OData_EnlazarNoticiaMedia_Noticia" }, "OnFailure": "/BTP6S/Actions/Error_EnlazarNoticiaMedia.action", "OnSuccess": "/BTP6S/Actions/Noticias/Message_EnlazarNoticiaMedia.action", "Target": { "Service": "/BTP6S/Services/xxxxxxxxxxxxx.service", "EntitySet": "NOTICIA", "QueryOptions": "$filter=ID eq {{#Control:FormCell_NoticiaId/#Value}}" }, "Properties": { "NOTICIAMEDIA_ID": "#Control:FormCell_NoticiaMediaId/#Value" } } 

My Issues:
1. Separate ABMs for Uploading News and Images: I haven't been able to find a solution to allow users to create news and upload an image at the same time using the same ABM. As of now, they must upload the news and the image separately in two different ABMs. Any clarification or advice on how I could combine this process would be highly appreciated.

2. Image Display Issue on Android: When users try to view the news and image on their devices, the image appears fine on iOS devices, but it doesn't show up on Android devices. I'm using an Image control, and for the image field, I call the following rule:

On Android devices, it seems like clientAPI.binding does not include the property CONTENIDO@odata.mediaReadLink, whereas this property is present for iOS users. To make this clearer, I'll attach screenshots of how clientAPI.binding prints on both operating systems.|

For Android devices:

For iOS devices:

Has anyone encountered this behavior or know of any workarounds?

For additional context, I'm attaching the metadata of my CAP service.

Any guidance, help, or advice would be greatly appreciated!

Additional code:

Page:
{ "Controls": [ { "FilterFeedbackBar": { "ShowAllFilters": false, "_Type": "Control.Type.FilterFeedbackBar" }, "_Type": "Control.Type.SectionedTable", "_Name": "SectionedTable0", "Sections": [ { "EmptySection": { "FooterVisible": false }, "Separators": { "TopSectionSeparator": false, "BottomSectionSeparator": false, "HeaderSeparator": true, "FooterSeparator": true, "ControlSeparator": true }, "_Type": "Section.Type.Image", "_Name": "SectionImage0", "Header": { "_Type": "SectionCommon.Type.Header", "_Name": "SectionCommonTypeHeader0", "AccessoryType": "None", "UseTopPadding": true, "Caption": "{NOTICIA/TITULO}" }, "Visible": true, "Image": "/BTP6S/Rules/VerContenidoImagen.js", "Alignment": "Center", "ContentMode": "ScaleAspectFit" }, { "Separators": { "TopSectionSeparator": false, "BottomSectionSeparator": true, "HeaderSeparator": true, "FooterSeparator": true, "ControlSeparator": true }, "KeyAndValues": [ { "Value": "/BTP6S/Rules/FormatoFecha.js", "_Name": "KeyValue2", "KeyName": "Fecha de publicación", "Visible": true } ], "MaxItemCount": 1, "_Type": "Section.Type.KeyValue", "_Name": "SectionKeyValue2", "Visible": true, "EmptySection": { "FooterVisible": false }, "Layout": { "NumberOfColumns": 2 } }, { "Separators": { "TopSectionSeparator": false, "BottomSectionSeparator": true, "HeaderSeparator": true, "FooterSeparator": true, "ControlSeparator": true }, "KeyAndValues": [ { "Value": "{CUERPO}", "_Name": "KeyValue1", "KeyName": "Desarrollo", "Visible": true } ], "MaxItemCount": 1, "_Type": "Section.Type.KeyValue", "_Name": "SectionKeyValue1", "Visible": true, "EmptySection": { "FooterVisible": false }, "Layout": { "NumberOfColumns": 2 } }, { "Separators": { "TopSectionSeparator": false, "BottomSectionSeparator": true, "HeaderSeparator": true, "FooterSeparator": true, "ControlSeparator": true }, "KeyAndValues": [ { "Value": "/BTP6S/Rules/VerContenidoImagen.js", "_Name": "KeyValue4", "KeyName": "URL Image", "Visible": true } ], "MaxItemCount": 1, "_Type": "Section.Type.KeyValue", "_Name": "SectionKeyValue4", "Visible": true, "EmptySection": { "FooterVisible": false }, "Layout": { "NumberOfColumns": 2 } }, { "Separators": { "TopSectionSeparator": false, "BottomSectionSeparator": true, "HeaderSeparator": true, "FooterSeparator": true, "ControlSeparator": true }, "KeyAndValues": [ { "Value": "/BTP6S/Rules/ShowBinding.js", "_Name": "KeyValue3", "KeyName": "Binding datos", "Visible": true } ], "MaxItemCount": 1, "_Type": "Section.Type.KeyValue", "_Name": "SectionKeyValue3", "Visible": true, "EmptySection": { "FooterVisible": false }, "Layout": { "NumberOfColumns": 2 } }, { "Separators": { "TopSectionSeparator": false, "BottomSectionSeparator": true, "HeaderSeparator": true, "FooterSeparator": true, "ControlSeparator": true }, "Layout": { "LayoutType": "Vertical", "HorizontalAlignment": "Leading" }, "_Type": "Section.Type.ButtonTable", "_Name": "SectionButtonTable0", "Visible": true, "EmptySection": { "FooterVisible": false }, "Buttons": [ { "Styles": { "Button": "MainButton" }, "_Type": "ButtonTable.Type.Button", "_Name": "ButtonTableTypeButton0", "Title": "Me gusta", "Alignment": "Center", "ButtonType": "Text", "Semantic": "Tint", "Image": "sap-icon://heart-2", "ImagePosition": "Leading", "FullWidth": true, "Visible": "/BTP6S/Rules/TieneLike.js", "Enabled": true, "OnPress": "/BTP6S/Rules/HandleNoticia_Like.js" }, { "Styles": { "Button": "MainButton" }, "_Type": "ButtonTable.Type.Button", "_Name": "ButtonTableTypeButton1", "Title": "No me gusta", "Alignment": "Center", "ButtonType": "Text", "Semantic": "Tint", "Image": "sap-icon://heart", "ImagePosition": "Leading", "FullWidth": true, "Visible": "/BTP6S/Rules/NoTieneLike.js", "Enabled": true, "OnPress": "/BTP6S/Rules/HandleNoticia_Like.js" } ] } ] } ], "DesignTimeTarget": { "Service": "/BTP6S/Services/xxxxxxxxxxxxxxx.service", "EntitySet": "NOTICIAPERSONALIKE", "QueryOptions": "$expand=NOTICIA" }, "_Type": "Page", "_Name": "Noticias_Detail", "Caption": "Noticia", "PrefersLargeCaption": true, "ActionBar": { "Items": [ { "_Name": "ActionBarItem0", "Caption": "Editar noticia", "SystemItem": "Edit", "Position": "Right", "IsIconCircular": false, "Visible": true, "OnPress": "/BTP6S/Actions/Noticias/NavTo_NoticiasUpdate.action" } ], "_Name": "ActionBar1" } } 

[bill_froelich]

I am not sure what ABM stands for but you will need multiple actions.

1. To create the NOTICIA and Media you will need three actions.  The first two set the properties of the two Entities and create the link and the third stores the actual media
   1. CreateEntity targeting NOTICIA
   2. CreateRelatedEntity targeting NOTICIAMEDIA with a ParentLink pointing to the NOTICIA just created
   3. UploadStream to store the actual stream in the new NOTICIAMEDIA just created
2. For Image display I recommend using a direct binding syntax to the odata stream property.  In your example you are using the syntax for a Media entity instead of a stream property.  The syntax should be like this (example from SampleServiceV4).

"Image": "/SCN_00036/Services/SampleServiceV4.service/{@odata.readLink}/Picture"

This assumes that the readLink is pointing to the specific NOTICIAMEDIA you want to display.