Vuong's Technical Blog

Hi, You can follow the full tutorial here: https://www.sap.com/developer/how-tos/2016/09/iot-tessel.html However, you may get some issue during following the tutorial (as I did), then come to this post to find the answer: Cannot use the Ambient module: attempt update but running forever Reason : Still not sure why this happening. But based on Tessel GitHub page, the reason may come from the old firmware of the Tessel board & the ambient module. Solution: this is a workaround for now. Instead of connecting the Ambient module to Port A of Tessel board. Connect it to PORT B of the board. Remember to change the JS code in the ambient.js also. The Tessel board & module should be set up like this 1. The 'iotmms' application has status "Starting" forever Reason: The application needs to bind with one database in Hana cloud. But it seems that the tutorial did not mention clearly about this prerequisite. Solution: Add a schema name "my...

Hi, First, you should go through the official Help document from SAP: (1)  https://help.sap.com/viewer/65de2977205c403bbc107264b8eccf4b/Cloud/en-US/e3d82674bd68448eb85198619aa99b6d.html#loioe3d82674bd68448eb85198619aa99b6d When I tried following this tutorial on 1 Jan 2018, it has updated the new UI in Cloud Foundry cockpit, so I wrote this post. There's no binding service that the help document (1) above mentioned. Instead, you need to navigate to Service, choose the  PostgreSQL service . The cockpit will route you to the page to manage PostgreSQL. Once there, navigate to Instance (the item on the left toolbar). The UI that I tried: Create New Instance , you be guided through some steps to create a new database instance. When finished, the wizard will ask you if you want to connect the instance to an application. Connect the instance to the demo application (hello-nodejs) that you have done in the sap document help (1). After finishing creating the data...

Hi there, Have you wondered why controller in sapui5 defined in different ways? You can have a look at the source blog here: http://www.planetofbits.com/sap-ui5/understanding-sap-ui-define/ The author has clearly explained the differences, and also provide an example for you to easily understand the concept. ---V---

Hi, Not all UI5 control is able to scroll when the screen is not wide/long enough. This will become seriously painful when the app is being used in small screen devices like phone or tablet. Like this: That's why you should know how to make all the UI5 scrollable, by using this control: Scroll Container After containing all the content inside the Scroll Container, the thing would work: Cheers! ---V---

Hi, ABAP Repository is the default repository of SAP system, until the time I wrote this post. Hence it would be essential that you know to import/deploy your application from LOCAL Web IDE. I want to emphasize the "Local" here because as you know, we usually use local Web IDE (personal version) for development since it much faster than the cloud version. (for some region that SAP/your company does not have cloud server). Here's how: 1/ Import application from ABAP repository 1. Setup Destination to your SAP system (which have ABAP repository).  Please use correct param like in the picture. Because some param is required to allow you to use that destination for importing & deploying application. 2. Import new project.  3. Choose the system.  3. Find your repository.  5. Finish 2/ Deploy application to ABAP repository 1. Setup Destination to your SAP system (which have ABAP repository).  The same is import ap...

Hi, This took me the whole afternoon to figure out. Problem: Before the error, i'm using local SAP Web IDE version 1.45 with user ABC. After trying with new local sap Web IDE version (1.53.1), I create the same user ABC with the same password & email (thanks to Chrome's autofill function). I logged in and got this error: Unhandled Error: failure during creation of required plugins -> ... I thought that the version 1.53.1 would have some problem. But it's not the reason. I tried with the older version on my computer, but the error persisted. I also tried to restart: Orion server, Chrome, my computer. But nothing worked. I took me the whole afternoon to research using google but no solution found. The reason came out when I tried with Firefox, it worked. Reason: So the reason I think come from the Chrome's cookings & password save mechanism. I'm not sure what is the exact reason, but I think because of the same user & password...

Hello, You can use the  operation mode  parameter for the v2.ODataModel. This parameter can be set at the model level  (see the constructor defaultOperationMode parameter) or at  binding level  (see the constructor operationMode parameter). Based on this parameter, the model fetches data differently: Server mode : data is fetched as needed (paging, sorting and filtering is done on the server side; each sorting, filtering or paging operation triggers a request). Client mode : the whole collection is requested initially. All sorting, filtering and paging operations are done on the client. Auto : a combination (based on other model settings). To read more about the operation mode, check out the corresponding documentation:  OperationMode . If you want to use this only on one list, then you should you the binding variant: <List items = "{path: '/Collection', parameters: {operationMode: 'Client'}}" > <StandardListItem title = ...

Hi, For now, local SAP Web IDE cannot be used to push code to ABAP repository. So we have to use Eclipse as a workaround. This post we will make a tutorial to do that. 1. Setup Eclipse environment: - Get Eclipse as described in this link . - If your company use firewall, you may have an error connecting to the Internet when "Install new software...". In that case, please use network proxy to access the internet ( should ask your IT department the proxy server information ): You can check whether the software gets installed or not by checking in Help/About : 2. Connect to ABAP repository using SAP GUI: Make sure that the connection is ready & on so that you can connect easily using Eclipse. - Open SAP GUI. - Check if your connection is working, if not; create a new connection to your server: Create new connection Input server information to connect to NOTE: in case your eclipse still cannot see the connection (eg. C46), you need to m...

Hi, Small Tips but no many knows: - Use this.getResouceBundle().getText(sKey, aParam) - Use BaseController (instead of creating a Util service). - Odata Model resetChanges() & submitChanges() ('TwoWay' binding required). Allow TAB to navigate within a table: Use property " keyboardMode " of ListBase . Set it to value " sap.m.ListKeyboardMode.Edit " and it would allow users to use TAB to move to the next cell in a table (the same behavior in MS Office table). API: https://sapui5.hana.ondemand.com/sdk/#/api/sap.m.ListBase/controlProperties https://sapui5.hana.ondemand.com/sdk/#/api/sap.m.ListKeyboardMode/overview References Advanced JS technique to shorten your code: Below hand-on with explanation will help you to shorten your frontend code a lot. Make the code more succinct, readable & easier to maintain. Functional Programming for your UI5 Apps Hands-On Worksheet Keep in mind the mindset: Think "everythin...

Hi, I've got painful days searching to get this error. Here's the problem: Problem I can not get any event in above table. When I press the button, it does not trigger the function in the controller. I don't know why... until today. UI design Reason The problem comes from my initiation of the fragment to be used as table items. Each fragment to have a controller, but my code make the fragment get the wrong controller, Instead of getting controller of that view, they misunderstood with the window object, because I initiate the fragment where the context of this is the window object: The code in the browser console It's good to init your controller's properties in the top to provide an overview of global properties. But be aware of this keyword, which is very dynamic in Javascript. Solution If you init fragment to use in the view, init it in the event onInit() of view is the best, which the controller already loaded into this  key word: ...

Hi, SAP Web IDE provide a "seem to be useful" function in the git pane: " Amend changes" . This function allows you to amend you current change to the latest  commit . It's quite useful if you make additional small changes after your last commit, which is in the same scope of the commit. However, that lead to a fatal error if you're working with a remote git repository (like Bitbucket, Github). It would create a conflict betweens commit, which will cause you lots of pain points. For example, you have 3 commits: A, B, C A: already pushed to the remote repository. B: you've just committed. (but not pushed yet) C: You've made small changes and " ammend changes"  to commit B, and changed the commit description. Then, you want to push all the changes (B & C) to the remote. Here's you will get the conflict. Because the commit B itself contains 2 commits with different description, the remote server cannot distinguis...

If table contains many data, you can not download all table data using Export object from SAP. You need to set the Size Limit of table to maximum: setSizeLimit ( iSizeLimit ) Cheers! ---V---

Hi there, Sometimes you may get a requirement for the table that I mentioned in the title:  Freeze table,  or fixed columns on the left, or allow right columns scrollable only. This can be achieved easily by sap.ui.table Control from the ui5 library. Try this control in Explored . More details API ---V---

Hello guys, You maybe sometime frustrated when getting ID of controls of the sapui5 framework, I got the same problem too, when I was starting to work with sapui5. The root cause that I found the most is forgetting declaring ID for the fragment. Because as sapui5 guideline mentioned, unlike View, Fragment's ID  is not generated automatically by the framework. You have to do it by yourself when you initiate the fragment. If you forgot to do this, you won't be able to get the fragment (or controls inside it) using sap.ui.Core.byId() later. Remember to use this line of code when initiate fragment: sap.ui.core.Fragment ( sFragmentId ,  sId ) But if you use other function, be aware of the order: sap.ui.xmlfragment ( sId,  sFragmentId ,  , oController ) Example: this.oDialog = sap.ui.xmlfragment( "createProcessDialog","com.HQ.app.test..fragment.CreateProcessDialog", this); More details can be found here: https://sapui5.hana.ondemand.com/sdk/#doc...

This file is a configuration file in sapui5 project, which should be KNOWN by every developer. On function I used (actually it take me lots of time to figure it our) is the 'path' attribute of neo-app, which is some kind of shortcut to destination: For example: This neo-app.json has defined that "/app_safety_app" is the shortcut for destination name "app_safety_app" (this one is defined in your HcP or 'destination' in local web IDE). With this definition, you can make HTTPRequest (or ajax call) to external service without worrying about violating cross-domain policy (discussion about it can be found here ). Hence, it your code, you don't need to write the full URL, just pick this short URL with the shortcut in the beginning: Cheer! ---V---

Hello guys, Continue to read if you're sapui5 developer, or you work closely with UI development. At the time I write this post, SAP UI5 and Odata does not support filter with case sensitivity. Odata provide some filter parameter that help you to filter with case-INSENSITIVe. However, you hardly modify the URI of ODATA service in your font end SAP UI5 code. Most of us use API provided from SAP , we only provide the parameter to API function, then let the API from SAPUI5 library handle the ODATA service URL. In short, I mean we cannot, or hardly, modifying the odata GET request as we want, but use the standard API instead. Return to the main topic, we need to write a function to filter the ODATA get request so that we get the returned data filtered as the way we want (filter with case-INSENSITIVE). For example: you type " test " in the search field, then you should get the results with all the entries containing "test", or "Test", or "TES...

Follow instruction in: https://www.sap.com/documents/2015/08/484b6d95-5b7c-0010-82c7-eda71af511fa.html# i'm wondering if because of Bosch's firewall has blocked the connection of local web IDE to the external ODATA service like Northwind. Will try when I back home. ---V---

I've lost the whole morning to figure out why all of my joined domain get disappeared in SAP HANA cloud platform. SAP appy  pretty well the new Fiori UX to their end user, but it is not done very well with the SAP HANA Cloud cockpit. It make me confused and don't know what is the reason for my problem. OK, here the story: I login my account to continue my working pending from yesterday, but I can't found my working folder with my team like yesterday, which should be like this: Instead, I got the default log in screen like this: At first, I think SAP HcP mis-understand with my trial account. (I have 2 account: partner account to dev app and trial account for my discovery). Hence, I tried to log in again many times. But not working. Then I delete all history & cookies of history, log in again but not work. I have to restart my computer, but nothing work... Having no clues, I read about user type of SAP HcP. Then and see this key word: Region Sudden...

Steps to clear:  (if the first step does not work, come to next steps in below order) - In Browser, pres CTRL + F5 to force load new data without cache. - Delete all Cache in broswer. - Delete cache in Front End server. Depend on type of server, you have different way to clear cache. It server is SAP ABAP, try below Tcode: /iwfnd/cache_cleanup Screen of   /iwfnd/cache_cleanup Pick the model of your project and the press Execute (F8) /IWBEP/CACHE_CLEANUP (to clear cache on all model) For more information, you can refer to:  https://blogs.sap.com/2010/06/14/how-to-clear-the-sap-portal-cache/ ---V---

This is just a temporary way i found: Enter Tcode Function Builder: Enter the program name "SE16N_INTERFACE" to pretend like you're developing a progam (in this case you're developing gateway for SE16N. Now you can edit the table. Good luck! ---V---