SAP Community - SAPUI5

Implement Page level security in custom UI5 application

2024-08-16T08:51:05.450000+02:00

Not able to Implement Page level security in custom UI5 application.

Our custom SAPUI5 application deployed in SAP BTP.

In our application there are 3 pages, we want to restrict the page access according to the user authorization. Roles are maintained in BTP security.

------------------------------------------------------------------------------------------------------------------------------------------------
Learn more about the SAP Support user and program here.

Failed to load component for container - ModuleError: failed to load

2024-08-19T14:57:00.275000+02:00

Hi all,

I'm experiencing an issue with loading a component in my SAPUI5 application. The error message I'm seeing is:

"Failed to load component for container - ModuleError: failed to load 'employeeapplication/SharedBlocks/PersonalDetails.js' from ./SharedBlocks/PersonalDetails.js: script load error"

My manifest.json file looks like this:

{

"_version": "1.59.0",

"sap.app": {

"id": "employeeapplication",

"type": "application",

"i18n": "i18n/i18n.properties",

"applicationVersion": {

"version": "0.0.1"

"title": "{{appTitle}}",

"description": "{{appDescription}}",

"resources": "resources.json",

"sourceTemplate": {

"id": "@sap/generator-fiori:basic",

"version": "1.14.1",

"toolsId": "9e31bfee-31bb-417f-bee7-4d3c1801703c"

"dataSources": {

"mainService": {

"uri": "/sap/opu/odata/sap/ZUI_C_PNL/",

"type": "OData",

"settings": {

"annotations": [],

"localUri": "localService/metadata.xml",

"odataVersion": "2.0"

}

"crossNavigation": {

"inbounds": {

"zpc_emp-display": {

"semanticObject": "zpc_emp",

"action": "display",

"title": "{{flpTitle}}",

"signature": {

"parameters": {},

"additionalParameters": "allowed"

}

"sap.ui": {

"technology": "UI5",

"icons": {

"icon": "",

"favIcon": "",

"phone": "",

"phone@2": "",

"tablet": "",

"tablet@2": ""

"deviceTypes": {

"desktop": true,

"tablet": true,

"phone": true

}

"sap.ui5": {

"flexEnabled": true,

"dependencies": {

"minUI5Version": "1.121.6",

"libs": {

"sap.m": {},

"sap.ui.core": {},

"sap.f": {},

"sap.suite.ui.generic.template": {},

"sap.ui.comp": {},

"sap.ui.generic.app": {},

"sap.ui.table": {},

"sap.ushell": {}

}

"contentDensities": {

"compact": true,

"cozy": true

"models": {

"i18n": {

"type": "sap.ui.model.resource.ResourceModel",

"settings": {

"bundleName": "employeeapplication.i18n.i18n"

}

"": {

"dataSource": "mainService",

"preload": true,

"settings": {}

}

"resources": {

"css": [

{

"uri": "css/style.css"

}

"js": [

{

"uri": "SharedBlocks/PersonalDetails.js"

}

]

"blocks": {

"uri": "SharedBlocks/",

"blocks": {

"PersonalDetails": {

"uri": "SharedBlocks/PersonalDetails.js"

}

"routing": {

"config": {

"routerClass": "sap.m.routing.Router",

"viewType": "XML",

"async": true,

"viewPath": "employeeapplication.view",

"controlAggregation": "pages",

"controlId": "app",

"clearControlAggregation": false

"routes": [

{

"name": "Home",

"pattern": "",

"target": [

"TargetEmployeeData"

]

{

"name": "detail",

"pattern": "product/{Empid}",

"target": [

"Targetpnl"

]

{

"name": "create_personal_details",

"pattern": "create",

"target": [

"Targetcreatepnl"

]

}

"targets": {

"TargetEmployeeData": {

"viewType": "XML",

"transition": "slide",

"clearControlAggregation": false,

"viewName": "EmployeeData"

"Targetpnl": {

"viewType": "XML",

"transition": "slide",

"clearControlAggregation": false,

"viewName": "pnl"

"Targetcreatepnl": {

"viewType": "XML",

"transition": "slide",

"clearControlAggregation": false,

"viewName": "createpnl"

}

"rootView": {

"viewName": "employeeapplication.view.App",

"type": "XML",

"async": true,

"id": "App"

}

"sap.cloud": {

"public": true,

"service": "employeeapplication"

}

And my PersonalDetails.js file looks like this:

sap.ui.define([
"sap/ui/core/UIComponent"
], function(UIComponent) {
"use strict";

return UIComponent.extend("employeeapplication.SharedBlocks.PersonalDetails", {
metadata: {
properties: {
// your properties here
}
},

init: function() {
// your initialization code here
}
});
});

error in console I am facing .

Adding a new field in v2 oDataModel binded to a sap.ui.table.Table / TreeTable in UI5 app.

2024-08-20T12:43:27.833000+02:00

Hi Everyone

I have an oData EntitySet "CUSTOMER_HIER_LIST" directly binded to sap.ui.table.TreeTable using v2 oDataModel and displays the treetable rows using treeAnnotationProperties binding. Now I want to initialize a new field called "IS_SELECTED" for each row. I have a sap.m.CheckBox in each row to which I will bind it. This field is not present in the CUSTOMER_HIERARCHY_LIST entity's metadata. I am not able to use Table.addSelectionRows() as I have a custom requirement for row selection.

In the 'dataReceived' event of the tree binding, if I try to do like below, then I see the error in the browser console as "Assertion failed: IS_SELECTED is not a valid property path" which is true because the field is not present in the entity set.

onCustomerListDataRecieved: function(oEvent){
  const oTreeTable = this.getView().byId("treeTableId"),
  aBindingContexts = oTreeTable.getBinding("rows").getContexts();
  aBindingContexts.forEach((oRowContext)=>{
     //This works because the field is present in entityset
     this.getModel("odataV2").setProperty("CUST_DESCR", "TEST CUSTOMER", oRowContext);
     //This does not work as the field is not present in entityset's metdata
     this.getModel("odataV2").setProperty("IS_SELECTED", false, oRowContext);
  });
}

I can change the value of an existing field, but then is it even possible to add a new field to v2 oDataModel as above?

Any suggestions and solutions will be greatly appreciated.

Thanks,

Naresh

First Option in RadioButtonGroup is undefined when selected

2024-08-20T22:47:09.219000+02:00

I have a RadioButtonGroup in my form that is bound to my OData model as follows:

<RadioButtonGroup id="OnsiteRemote" columns="4" enabled="true" selectedIndex="{/OnsiteRemote}">
  <RadioButton id="idRemote" text="Remote" class="sapUiSmallMarginEnd" />
  <RadioButton id="idOnsite" text="Onsite" class="sapUiSmallMarginEnd"/>
  <RadioButton id="idOnsitePreferred" text="Onsite Preferred" class="sapUiSmallMarginEnd"/>
  <RadioButton id="idCombination" text="Combination"/>
</RadioButtonGroup>

If I select the first option, "Remote", and submit the form the field is coming in as undefined. This does not happen if I pick any of the other 3 options and submit, OR if I pick one of the other options first and then go back and select "Remote".

How can I get it so when selecting Remote it comes through correctly the first time without having to select another option first?

SAPUI5 Framework files outdated

2024-08-22T07:02:41.232000+02:00

I have updated the UI5 framework from 1.96.12 to 1.96.32.

After transporting to the quality system, some files seem outdated, I think there is a cache issue.

For example, in the date fields, the placeholder is broken:

In the console, we can see that the text isn't found and it was triggered from the line 2592 of DateFormat-dbg.js

However, when I click on it, the file contains only 2424 lines! Therefore, the dbg file is not the same as the original file because some of them are not updated.

Does anyone know how to clear this type of cache, maybe regenerate that timestamp part from the path?

I have tried with the normal cache-clearing programs like /UI2/INVALIDATE_GLOBAL_CACHES, restarting the system, redoing the update manually (so this time without transport) but nothing worked. In the DEV system everything is ok.

Thanks in advance for your help!

SAPUI5 ODataListBinding.create duplicates entries

2024-08-22T16:54:22.879000+02:00

Hello everybody,

I am building an SAPUI5 application based on OData V2 build with SEGW.

I am facing a weird behavior: In a sap.m.Table my created entries are duplicated after submitting and refreshing.

The table is defined like this:

<Table
    id="KeyfToSourceTable"
    mode="{= ${keyfEdit>/editing} ? 'MultiSelect' : 'None' }"
    items="{
        path: '/MapKeyfSourceSet'
    }" >
    <headerToolbar>
        <OverflowToolbar>
        <Title text="Table" level="H3" />
        <ToolbarSpacer />
            <Button
                icon="sap-icon://add"
                press=".onDatasourceHelpRequested"
                visible="{keyfEdit>/editing}" />
            <Button
                icon="sap-icon://delete"
                press=".onDatasourceDeletePressed"
                visible="{keyfEdit>/editing}" />
        
        </OverflowToolbar>
    </headerToolbar>
    <columns>
        <Column>
            <Text text="Sourcestxt" />
        </Column>
        <Column>
            <Text text="Employeetext" />
        </Column>
        <Column>
            <Text text="SbTxtlg" />
        </Column>
    </columns>
    <items>
        <ColumnListItem vAlign="Middle">
            <cells>
                <ObjectIdentifier
                    title="{Sourcestxt}"/>
                <Text
                    text="{Employeetext}" />
                <Text
                    text="{SbTxtlg}" />
            </cells>
        </ColumnListItem>
    </items>
</Table>

It displays entities mapped to my main object. So I filter these at runtime (and sometimes I have to rebind the table):

var sourceSystemTable = this.byId("KeyfToSourceTable");
var keyfId = this.getView().getBindingContext().getProperty("Keyfid");
var filterArray = [new Filter("Keyfid", FilterOperator.EQ, keyfId)];
sourceSystemTable.bindItems({path:"/MapKeyfSourceSet", template: oldTemplate, filters: new Filter(filterArray, true)})

The User should be able to edit the main object and the mapping table and just save at the end. But the table should display the new entries, which are not persisted yet. Therefore I use the ODataListBinding.create function like it is discribed in the documentation:

this.byId("KeyfToSourceTable").getBinding("items").create(oEntry, {
    inactive : false,
    success: function(data) {
        alert("success createdMapping");
    },
    error: function(data) {
        alert("error createdMapping");
    }
});

It works as designed, new Entries are shown and not persisted until the user clicks "save" and submitChanges() is called.

But after a refresh() is called or the Binding of the table is changed, the new entries are duplicated. They are added at the top of the table again. I already looked at the BindingContexts of the items and the binding of the table, the bindings seem absolutly the same.

Even when I look at a differend main object and the filter doesn't seem to work for these duplicates. They also appear at the top of the table. But looking at the binding and also getting the filterted property, they shouldn't be there. These duplicates don't exists in the backend/data base tables. They also all are not transient, so I am not able to filter them by myself.

I assume these duplicates are just in the client model.

I appreciate any help,
Kind regards

Tobias

sortProperty and filterProperty not working, but column is visible in Columns tab in p13n dialog

2024-08-22T19:21:55.306000+02:00

I have the following code in my view.xml =>

<table:Column id="TimeBucketCol00" hAlign="End" minWidth="100">
                            <Label text="{i18n>invoiceDescription}" />
                            <table:customData>
                                <core:CustomData key="p13nData" value='\{"columnKey": "invoiceDescription", "leadingProperty":"invoiceDescription", "sortProperty": "invoiceDescription", "filterProperty": "invoiceDescription", "type":"string"}'/>
                            </table:customData>
                            <table:template>
                                <Text text="{invoiceDescription}" wrapping="false"/>
                            </table:template>
                        </table:Column>

The metadata =>

<Property Name="invoiceDescription" Type="Edm.String" MaxLength="255"/>

However once I open the p13n dialog, I don't find the column in my sort/filter tab

Once I remove it from my customData then the filter/sort appears, but then I want to have formatter on that column, which is why I used customData tag.

Is there a way to ->
1. Add formatter on my backend, which uses CDS annotations
2. Also, if i use customData on a column does it override whatever annotations are given for that column in the backend?
3. What changes should I do in my above code?

DatePicker Input Changing to Unix Epoch

2024-08-22T22:09:07.414000+02:00

I have a form with DatePicker fields which are bound to fields in my model.

<Label design="Bold" text="From Date" required="true"/>
<DatePicker id="FromDate" valueFormat="YYYY-MM-dd" displayFormat="MM-dd-YYYY" value="{/FromDate}"/>
<Label design="Bold" text="To Date" required="true"/>
<DatePicker id="ToDate" valueFormat="YYYY-MM-dd" displayFormat="MM-dd-YYYY" value="{/ToDate}"/>

When I submit the form, I can see that the object being sent back has the correct date that was entered:

However, when this data is received in the Create exit, these values are being converted to Unix Epoch "1970-01-01":

Is there some additional formatting I need to do before they get sent back to prevent this from happening?

data service license key

2024-08-23T11:38:00.285000+02:00

when i try to find a license key for data services function, but cannot find the correct product in the drop-list, which product i need to choose and to find the license key for data services, pls kindly advise, thanks a lot.

Filtering on smart table - Tree Table works only on Level 0

2024-08-24T06:00:49.560000+02:00

The requirement is to filter a smart table - tree table for 'code' and display the entire parent hierarchy of that node.
We use default personalisation on the smart table, but it works only on level 0.
This is the call being made
GET Category?$filter=level%20eq%200%20and%20(name%20eq%20%27Pulp%27)&$select=code%2cname%2cstatus%2cspend%2clevel%2cparent_code%2cdrillState&$skip=0&$top=110&$inlinecount=allpages

The filter level 0 is added by default and is only filtering level 0. How do I make it level agnostic and also get its parent node as well. Is there any customisation of the query that can be made?

Custom CSS for component based UI Integration Cards

2024-08-26T18:40:44.693000+02:00

Hello Experts,

I'm using UI integration card for my advanced workzone on BTP.

The UI integration card is component based.

It works but I can't add custom css.

In a freestyle UI5 app I'm adding css file, reference it in the manifest and it works.

I did it for the card project but on runtime I'm getting 404 for the style file.

Is it possible to add custom css for a component based UI integration card?

If yes, how?

Regards,

Omri

FIORI migration to SAPUI5 with BAS

2024-08-27T09:54:58.510000+02:00

FIORI migration to SAPUI5 with BAS

I am trying to migrate a fiori app to cloud foundry, specifically Purchase requisitions professional which is in this link https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/#/detail/Apps('F2229')/S14OP, but looking at the components it needs I realized that the application points to the components of another application which is this one (sap.ui.s2p.mm.lib.reuse.accounting) https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/#/detail/Apps('F1643')/S14OP and I was able to launch the application, however right now it asks me for other components that I do not see in the Fiori documentation and I do not know how to obtain them which are these (sap.ui.s2p.mm.lib.reuse.text and sap.ui.s2p.mm.lib.reuse.oci) could someone guide me on how to obtain them so I can download and map them correctly in my ui5.yaml so that the application works correctly?

I appreciate your support in advance

Adaptation Project Replace Odata In BAS?

2024-08-27T14:01:46.973000+02:00

Hello Everyone

yesterday, we changed the odata with the option "Replace Odata" but when i change in the adaptation project.

the application continue look for the firts entity of the standard odata.

the app is F3302, The entity is C_GRIRAccountReconciliation.

how must to do?

In the adaptation project there are two options, add or replace the odata, we chose the second option, however it seems that the main entity is always called or there is something missing in SAPUI5 Project.

thank you for your helping.

Would anyone know if it is possible to set a recruit date previous to saved recruit date

2024-08-27T17:48:21.390000+02:00

Assistance Needed: Connecting cloud PostgreSQL Instance with CAPM Application

2024-08-27T19:31:30.872000+02:00

Hi Experts,

We need some help and guidance as we are currently experiencing an issue connecting cloud PostgreSQL DB instance with our CAP application.

Background: We have successfully created a PostgreSQL instance through our CAPM application. During the deployment process, the instance was generated as expected. However, we are currently facing challenges in establishing a connection between this PostgreSQL instance and our CAPM application.

Current Issue: Despite following the standard connection procedures, we are unable to connect to the PostgreSQL instance from the CAPM application. This is hindering our ability to utilize the database effectively within our application environment.

To troubleshoot the issue, we have:

1. Verified the PostgreSQL instance status to ensure it is running.

2. Checked the connection parameters (hostname, port, database name, username, and password).

If you have any insights or suggestions on how to resolve this issue, we would greatly appreciate your assistance.

Thank you for your attention to this issue. We look forward to your guidance.

Best Regards,

Adarsh

Which website is the best to learn a SAPUI5 javascript language?

2024-08-28T00:42:00.103000+02:00

Which website is the best to learn a detailed SAPUI5 javascript language?

I already check this Step 1: Ready... - Documentation - Demo Kit - SAPUI5 SDK (ondemand.com) but I can't find a detailed documentation of javascript for SAPUI5 it only gives me a sample. syntax and result

The documentation im looking for is a documentation like ABAP / Java where it explains the purpose of every keyword/syntax

How to set Overflow Settings on the personalisation settings button that smart table provides

2024-08-28T10:51:07.307000+02:00

I have my smart table below with given custom buttons added ->

However, when the midColumnPage is populated by clicking a row the settings button goes into overflow. I can control other custom controls' overflow behaviour but not the settings button that smarttable gives by default. I don't need the Settings button to go into overflow.

I cannot highlight invoices to pay in billing SAP for me. This has always worked. What changed?

2024-08-28T22:05:31.331000+02:00

Hide Ability to Create New Job Req From Specific Template But Not From Position Org Chart

2024-08-30T15:58:48.269000+02:00

We would like to be able to remove the ability for a group to be able to create a specific kind of Job Req Template (Job Requisition - Pos Mgmt) from the Recruiting Module. We don't want to inactivate the Template entirely because we want them to be creating these kinds of Reqs from the Position Org Chart, but to only be creating them from the Position Org Chart. Is this possible?

Tree Table not getting refreshed from Javascript

2024-08-30T18:06:04.779000+02:00

Hi,

I have a Tree Table (sap.ui.table.TreeTable) where there's a column having Input field. Binding is correct and data is displayed perfectly. However, when I change a value in Input and then I have a button to refresh the data again.
DefaultBindingMode is TwoWay.

var oTreeTable = this.byId("treeTable");
oTreeTable.getBinding("rows").refresh(true);

For example if I changed a value from "1" to "2" and then I click refresh button then the above code will be executed and it should reset the changes which I made on screen. Which is the "2" should become "1". I'm not if this is correct approach. But the refresh is not happening. There's no error in console and the data is also fetched from backend but it is not updated in frontend.

Here's my app's screenshot, I have changed the second last row value from "1" to "2". Network logs are also attached

Any help is appreciated.