Posts

Showing posts from March, 2020

Serve UI5 SDK with Node Express

Image
Serve static UI5 SDK files with Node Express. Two response headers are useful for static files. They are cach-control and cors. const   express   =   require ( 'express' ); // Constants const   PORT   =   3000 ; const   HOST   =   '0.0.0.0' ; // App const   app   =   express (); app . use  ( '/sdk' ,  express . static  ( __dirname   +   "/sdk" , {      maxAge: '180d' ,      etag: false ,      setHeaders :  ( res ,  path ,  stat )  =>  {          res . header ( 'Access-Control-Allow-Origin' ,  '*' );     } })) app . listen ( PORT ,  HOST ); console . log ( `Running on http:// ${ HOST } : ${ PORT } ` );

this.getOwnerComponent().getComponentData() vs. this.getOwnerComponent().getAppComponent().getComponentData()

Just find difference between these two ways. If in a general UI5 app, this.getOwnerComponent().getComponentData() is the correct way to fecth startup parameters. But in a FE app, this.getOwnerComponent().getAppComponent().getComponentData() is the correct one.

Binding Text to Label from the Metadata in XML View

Image
In case you need a FE extension, and there are translatable texts in your extension. Instead of creating new i18n text elements, you can use translated text from backend oData service's metadata. The binding path is {/<entity set name>/<element name>/#@sap:label}

CAP - Importing From CSV File -NULL

Image
With CAP in local, after running CDS deploy, matched CSV or json files can be loaded into corresponding tables. If a table's last colum is nullable, but during file importing, empty char is inserted for this column. The reason is a bug in below code. At line 26, it provides undefined for those without values. But miss this logic for last colum at line 47. Just like line 26, adding '|| undefined' is able to fix this easily. The CAP version is 3.30.0.

How to Use Custom Tile in Fiori Launchpad Local Sandbox

Image
FLP local sandbox version provides 4 possible renderings for a tile. (/resources/sap/ushell/adapters/local/LaunchPageAdapter-dbg.js: _createTileInstance) Obviously, in order to display custom tile, the last option need to be considered. For this example, I displayed a simple generic tile from a standalone UI5 app. 1: Standalone UI5 app infos. Generic tile. Load data from backend service in controller. 2: An UI5 object will be called by the default switch. Create a folder (customTileContainer) and a js file (Container.js). 3: Configure custom tile information either in window["sap-ushell-config"] or standalone json file.     additionalInformation: the component ID of standalone UI5 app for the custom tile.     url: path to the standalone UI5 app     tileType: can be any one will match the default switch.     info: I use this field to pass component ID and startup parameters to Container.js 4: Path registra...

Display and Change Timezone in Linux

Image
Display current time zone: Change time zone: Current machine's time zone information is decided by config file /etc/localtime. In the folder of /usr/share/zoneinfo, there are many time zones available for using. Copy the content into /etc/localtime to change the time zone. Use below command to change the time zone to what you want.

Call Stack for Mock Strategy in CAP

Image
Keeping notes for a quick debug into CAP's mock strategy. Callback function in CAP's domain. The mock strategy also supports providing a password. Set it in package.json. Just try, doesn't make too much sense.

Disable Enterprise Search in Launchpad Sandbox

Image
If you have ever worked with Fiori Launched local sandbox version, you may find it always triggers two requests and most of the time are error requests. They are: It doesn't make any sense for my local dev environment thus I want to disable them. Disabling means I don't want FLP to trigger both requests. After a quick search, I found there is a SAP note talking about how to disable this in ABAP front end server by configuring target mapping with a dedicated parameter. 2885249 - How to disable Enterprise Search in Fiori Launchpad And obviously, local sanbox is unable to support this way. But it reminds me that I may use the same parameter in local FLP's configuration which insides global variable: I tried it and works perfectly.

Adding a New View to Existing List Report View (Multiple Tables)

Image
Context: I already have a Fiori Elememts list report app, and I want to add another view to the list report. This additional view is for another entity set from the same OData service. 1: Adding 'QuickVariantSelectionX' setting for list report section in manifest. Give expected entity set names and annotation path the corresponding selection variant. The annotation path attribute is mandatory. 2: Adding annotation 'SelectionVariant' for each entity set. The description of the tab is decide by the selection variant annotation. Only text property in this example. 3: With above 2 simple steps, I have two tabs on the list report page with data from different entity sets. 4: Adding object page for the new entity set. This can enable to navigate to the expected object page from the new tab. For the 2nd entity, configure required annotations like facet to enrich the object page.

Default changeset implementation allows only one operation

Image
My OData service is exposed via a Gateway project by referring CDS models. At the beginning, everything works as expected until one day I received this error message after some adjustments to the service. Per ST22 data, the code triggers the exception as below. The changes have been made was adding a DPC entity to the Gateway project, which means in the project, CDS models co-exist with DPC entity. Then I checked the same method of /IWBEP/IF_MGW_APPL_SRV_RUNTIME~CHANGESET_BEGIN in pure CDS derived service, as below. Obviously, SADL takes over this for pure CDS scenario. How to fix this: 1: If you are free to change your UI5 code, then it is easy to overcome this by adding parameter changeSetId during OData model calls. 2: Redefine method of /IWBEP/IF_MGW_APPL_SRV_RUNTIME~CHANGESET_BEGIN

Run Node Service Automatically and Background

Image
I found this amazing node tool when I realised that my node service in AWS was down when the SSH connection was broken due to network interruption. What I need is something that able to run my node service without an active SSH session. And even has the ability to start the service automatically when reboot the OS. The PM2 does a fantastic job for me. Simple tries as below. Install it: npm install pm2 -g Start it by pm2. Go to your app root folder: pm2 start index.js Ask pm2 to start your server when reboot pm2 save To display all running services managed by pm2: pm2 list To stop a service managed by pm2: 0 is the id you can get from pm list (1st column) pm2 stop 0 Check github for details. https://github.com/Unitech/pm2

The Use of Method createId of View

Think about when you want to display a pop-up dialog in your SAPUI5 application, normally your dialog is rendered via a fragment. And we can use function sap.ui.core.Fragment.load to load the fragment file. One of the parameters of this method is 'id. You can give any string to this parameter but make sure it is not being registered by other elements. When addressing UI5 elements on this dialog from the parent view, you have two options. The first one is getting the SAPUI5 ID from the inspector and call sap.ui.getCore().byId(). The second one is use this.getView().byId(). The difference is, for the second option, you don't need to get the ID from the inspector. Instead, you just provide the ID parameter with what you passed to the load method and what you define in your view fragment. The prerequisite of using the second option is passing a ID created by function createId() to function sap.ui.core.Fragment.load, like below: sap . ui . core . Fragment . load ({    ...