Not to set the resource model on index.html or Component.js, and not to use the sap.ui.getCore().setModel method.

Is there a way that the resource bundle can be loaded once and referred to from multiple views without re-instantiating?

Hi All,

I want to display Bullet chart with Primary and Additional Value as per below link:

https://experience.sap.com/fiori-design/ui-components/chart-types/bullet-chart/

Can anyone please share a small snippet especially showing Primary + Additional Value as per above link. I greatly need Additional value.

Regards.

Hi expert,

The error message given by standard constraints in Data Binding Type is not so intuitive. E.g. For email address: "Enter a value matching "/some regex pattern/"

Is there any way for us to overwrite those message?

Thanks much.

Cheers!

How to load/display View from another View on Click of button press. I have 2 View from the below View need to load/display another view:

sap.ui.jsview("test.ViewInfo", {

  /** Specifies the Controller belonging to this View.

  * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.

  * @memberOf test.ViewInfo

  */

  getControllerName : function() {

  return "test.ViewInfo";

  },

  /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

  * Since the Controller is given to this method, its event handlers can be attached right away.

  * @memberOf test.ViewInfo

  */

  createContent : function(oController) {

  var btn = new sap.m.Button({

         text:"test",

         press:function(evt){

        // Onclick of this button need to load/display another View

        }

        });

  return new sap.m.Page({

  title: "{products>name}",

  showNavButton: true,

  navButtonPress: function(){

  window.history.go(-1);

  },

  footer:new sap.m.Bar({

  contentLeft:[

              btn        

  ]

  }),

  content: [

  ]

  });

  }

});

Hi,

   I am trying to create the dialog view in my SAPUI5 screen. At the bottom of my screen i am having a filter button. if i click tha filter button it has to popup the dialog screen. As of now it displaying like a small popup above my fiter icon. 

For better view see the below screen.

1. This is what actually i want to show when i click the filter icon:

2.As of now i am getting like this:

How do i achieve this in my View.XML?

Please guide me on this.

Thank you,

JK

Topic

This project demonstrates how to develop an offline capable OpenUI5 application using the new ServiceWorker API which needs no native code.

Project Sources: https://github.com/pensoffsky/OpenUI5-ServiceWorker

You can try it out in current Chrome, Opera or Android browsers: https://pensoffsky.github.io/OpenUI5-ServiceWorker/index.html

(Open the link in your browser and let the app load. This puts all the needed files into the cache of the ServiceWorker. Then close your browser, go into airplane mode and reopen the URL. The app should start normally. If it does not work then maybe your browser is not supported yet. List of supported browsers)

Disclaimer

• this concept does unfortunately not work with "normal" UI5 resources because they use sync XMLHttpRequests which are not supported by the ServiceWorker API. The project uses modified UI5 resources created by matz3 that load async.
• only https is supported by ServiceWorker because of security reasons
• the ServiceWorker API is not yet supported in all browsers. You can check the availability here
• the delayed loading of the UI5 resources was adapted from this concept: Asynchronous load of SAPUI5

Features

• Graceful degradation
  • if the ServiceWorker API is not available in the browser than the feature is ignored and it works as a normal online application
• Start of app
  • the first time you open the application all needed resources are loaded from the server and cached in the browser. After this the next time you open the application it is served directly from the ServiceWorker cache. This means you can disconnect your internet connection and still open the app in the browser just by navigating to the URL.
• Querying of stock price
  • if you have an internet connection then the http request goes directly to the yahoo webservice. The result is then written to the ServiceWorker cache and displayed in the app. (the timestamp in the response changes)
  • if you are offline then the request is answered from the cache. The last successful cached request is returned.

Start of app ONLINE

Here you see that the request to yql (yahoo api) is live and 2.5KB in size. So the user gets live data when he clicks the "refresh stock price" button.

Start of app OFFLINE

The browser is set to Offline mode and the page is reloaded.

Here you see that the request to yql (yahoo api) is answered from the ServiceWorker cache after the initial request failed. So the user gets the stock price from the last time he used the application.

Files

• index.html
  • main entry file. Installs the ServiceWorker, loads OpenUI5 resources and instantiates the app.
• sw.js
  • contains the ServiceWorker definitions
  • the new Fetch API is used extensively
• dist/
  • location of the OpenUI5 resources

index.html

Depending on the availability of the ServiceWorker API  the ServiceWorker is registered. Only after the registration is over then the UI5 resources are loaded.

if ('serviceWorker' in navigator) {        navigator.serviceWorker.register('sw.js').then(function(registration) {            // Registration was successful            console.log('ServiceWorker registration successful with scope: ', registration.scope);            //now load the UI5 resources            fLoadUI5();        }).catch(function(err) {            // registration failed            console.log('ServiceWorker registration failed: ', err);            //now load the UI5 resources            fLoadUI5();        });    } else {        //if the browser does not support serviceworker then just load the app        fLoadUI5();    }

sw.js

First we define which files we want to cache for offline use

var urlsToCache = [    '/',    '/dist/resources/sap-ui-custom.js',    '/dist/resources/sap/m/library-preload.json',    '/dist/resources/sap/ui/core/themes/sap_hcb/library.css',    '/dist/resources/sap/m/themes/sap_hcb/library.css',    '/dist/resources/sap/ui/core/themes/base/fonts/SAP-icons.ttf',    '/dist/resources/sap/ui/thirdparty/unorm.js', //needed for safari    '/dist/resources/sap/ui/thirdparty/unormdata.js' //needed for safari
];

then we hook the install event of the ServiceWorker. This is used to add all the defined URLs to the cache.

self.addEventListener('install', function(event) {    // Perform install steps    event.waitUntil(        caches.open(CACHE_NAME)        .then(function(cache) {            console.log('Opened cache');            return cache.addAll(urlsToCache);        })    );
});

we also hook the fetch event. This event is triggered when the webApp is doing a http request. We check based on the URL what the app is requesting and what caching logic we want to use.

self.addEventListener('fetch', function(event) {    if(event.request.url.startsWith("https://query.yahooapis.com")){            ...        } else {        ...    }
});

For the yahoo API we first try to get the data via http request and only if this does not work we answer the request from the ServiceWorker cache. When the http request was successful we add it to the cache so that is is available for the next offline start of the application.

console.log('ServiceWorker: yahoo query: detected');        //for yahoo queries: online first             var fetchRequest = event.request.clone();        event.respondWith(fetch(fetchRequest).then(          function(response) {            // Check if we received a valid response            if(response && response.status === 200 ) {                console.log('ServiceWorker: yahoo query: fetch OK');                var responseToCache = response.clone();                //valid webrequest, clone and cache the result                caches.open(CACHE_NAME).then(function(cache) {                    console.log('ServiceWorker: yahoo query: added to cache');                    cache.put(event.request, responseToCache);                });                return response;            } else {                console.log('ServiceWorker: yahoo query: fetch FAILED');                //webrequest FAILED, try to answer from cache                caches.match(event.request).then(function(response) {                    //we dont care if the response was ok or NOT                    console.log('ServiceWorker: yahoo query: answered from cache' + response);                    return response;                });;            }          }      ).catch(function(error){          console.log('ServiceWorker: yahoo query: fetch EXCEPTION' + error.message);          //webrequest FAILED, try to answer from cache          return caches.match(event.request).then(function(response) {              //we dont care if the response was ok or NOT              console.log('ServiceWorker: yahoo query: answered from cache' + response);              return response;          });;      }));

The static resources we always try to get from the ServiceWorker cache and only if this does not work we do a live http request.

event.respondWith(            //check if the request can be answered from the offline cache            caches.match(event.request).then(function(response) {                if (response) {                    // Cache hit - return response from cache                    console.log('ServiceWorker: found:' + event.request.url);                    return response;                }                console.log('ServiceWorker: NOT FOUND:' + event.request.url);                return fetch(event.request);            })        );

Hello,

I try to assign a tooltip to the image but it takes default image tooltip ignoring mine. Here is my code:

<ObjectPageHeader id="idUAdetailPageHeader"

objectImageURI="sap-icon://employee"

objectTitle="{Anred} {Namev} {Name1}"

objectImageShape=""

objectImageAlt=""

tooltip="test"

objectSubtitle="{Susid}">

</ObjectPageHeader>

The tooltip shows "Employee" tooltip value. Please advise how can I assign customized tooltip.

Thanks,

Yan

How dynamically create UI element in front-end or back-end,  is there any suggestions or demo codes? 

A UI5 beginner , so please give me some details

1. oData structure:

2. Q1- Q8 should be displayed in a radio button group.

    if Q? has value , then add one radio button in the group.  otherwise do not display it.

   eg:  case 1--- show 2 radio buttons: FF & HH

           "Q1" : "",

            "Q2" : "",

            "Q3" : "",

            "Q4" : "",

            "Q5" : "",

            "Q6" : "FF",

            "Q7" : "",

            "Q8" : "HH"

          case 2  show 4 radio buttons : AA BB FF & HH

            "Q1" : "AA",

            "Q2" : "BB",

            "Q3" : "",

            "Q4" : "",

            "Q5" : "",

            "Q6" : "FF",

            "Q7" : "",

            "Q8" : "HH"

Hi All,

I was working on simple form layout (using JS View). where I have placed two labels and two input fields. when you look at the alignment, the label field is placed top and input field is bottom. I need to make both the alignment same. Plz help me on this.

I just started with the SAPUI5 and following the developer guide. All the example in them have the name space/resource root..

data-sap-ui-resourceroots='{
 "sap.ui.demo.wt": "./"
 }'

what If I want to skip it. I was able to do it until I got to the component(component.js) container which needs a name (The name space).

sap.ui.getCore().attachInit(function () {                    new sap.ui.core.ComponentContainer({                        name: "demo", ---> Can this be avoided..what is idea behind name space..if I leave it will try to create window.componentcontainer                        height: "100%"                    }).placeAt("content");                });

Hello,

I am using eclipse ADT to create SAPUI5 application. I have gone through various tutorials in achieving the code completion process when developing the application.

After following all the mentioned steps I am not able to fix the issue for code completion. Like in below screen shots, when I am trying to set the properties as setDisplayBlock(true) it works fine but with CTRL+SPACE doesn't bring that method but it gives the list of other public methods as follows:

I followed the steps as mentioned in below link: JavaScript Code Completion - SAPUI5: UI Development Toolkit for HTML5 - SAP Library

Please advice.

Thanks, SL

Hi Gurus,

I need a technical help to make the Value Help feature of Smart Field Control working: https://sapui5.hana.ondemand.com/#docs/guide/3361e270c62c46c9893eaefb2966d62e.html .

Implementation is done, but a small piece is missing in the backend,  what I could not identify, due lack of documentation. The annotations metadata is not returned by the backend system. So I need help to find the missing part in implementation of the valuelist annotation in SEGW for an entity property.

1. System environment

Service is implemented in ECC backend

and registered in GateWay HUB system, where the BSP application is deployed

We have SAPUI5 libraries version 1.28.8-10 installed.

I’ve applied latest OSS Notes in both systems regarding annotations, and regenerated runtime objects.

2. Implementation

It consists of two parts:

1. a.) base project: ZMD_VENDOR
2. b.) vocabulary project: ZMD_VENDOR_ANNO

SEGW Project is ZMD_VENDOR for which I would like to create valuelist annotations for property Anred (Title)

I defined entity AddressTitle entity and AddressTitles entityset to be used in valuelist annotation

Since the project ZMD_VENDOR is of type Service with SAP Annotations, I had to create a new project ZMD_VENDOR_ANNO with type Annotation Model for Referenced service, importing vocabulary (/IWBEP/VOC_COMMON/com.sap.vocabularies.Common.v1), and service reference to ZECC_MD_VENDOR.

I set Text annotations for AddressTitle

and valuelist annotation for property Anred (Title)

After generation and service registration, I can see that now the annotation service is properly assigned to the base service in 

/IWBEP/REG_VOCAN - Maintain Vocabulary Annotations

I added the following code part to the base service model provider class extension to register the annotation model using its technical model name ZMD_VENDOR_ANNO_MDL.

Metadata of the annotation service seems fine:

The annotation model seems referenced in base service metadata,but the problem is (why the smart field on the UI is not showing valuehelp/dropdownlist), that the annotation tags and properties are missing in metadata xml below, for which I created the annotations in annotation project:

Metadata: (collapsed)

Metadata: Request entity with entity property Anred(Title) (expanded)

AddressTitle entity, with property Title (expanded)

Reason is unknown for the missing annotations. Anyone any idea or example on this.

Thank you!

P.S.:

Smart controls and OData annotations v4 are great, can reduce UI implementation costs, and keep logic in the backend, However documentation not really available on this concept, and about the framework, Do you have one ? I've tried to investigate examples, but there is only an sflight test annotation service and class in the backend. but this is annotation within the same model. Now I need to do external annotations.

Hello all,

I've been reading around on the possible mechanisms to ensure read privacy on an OData service, atop HANA XS, and I have some queries/concerns that someone out there may be able to address.

My concern is that of querying security, and how, through use of the OData protocol, a large volume of data can potentially be read by any user of a public-facing OData service. Here is the scenario:

You're running a web app, say a shopping cart, using HANA XS OData. It works great. One of your tables exposed through OData, contains contact information for all your customers. A necessity, for a shopping cart app. To access this endpoint, you read from the model service entity /CustomerContacts(CustomerId). This gives you details for the customer. The application is secured, with Basic/Form auth.

I new customer comes along, and registers. Puts in their contact details, but they're pretty savvy, and interested in how websites work. So they have wireshark running too, and can clearly see the URL to which their new customer information was POSTed. So they think "why not pull up Postman , and perform a GET on that same URL?" They've noted that each request to the service contains headers for authentication, so they copy these to their Postman request, pop them into rest man, and run a GET on /CustomerContacts. Low and behold, their authenticated request returns a full listing of all customer contacts in the database. This is not hard to do.

My question/query is, while this can(may) be avoided through the use of dynamic analytic view privileges (filtering on username) or xsjs reads (with JS code performing the filtering), it seems these are unnecessarily complicated steps to enforce a fairly basic security requirement. I feel one way this can be avoided is with OData read exits. We have OData create/update/delete exits, but nothing for read... what gives? In effect, there isn't a native XS OData method for row-level data security.

Furthermore, if there's no simple way to do this, surely the premise of public-facing web apps on HANA is flawed. It's too easy to circumvent the authentication mechanisms.

And I am very happy to be corrected on this matter!

Cheers,

Hagen

Hi,

i need to place several MAKIT charts in a responsive grid display.

Something like this ==> SAPUI5 Explored

but with MAKIT charts within each list.

The problem is that the MAKIT charts dosen't show when I place it inside the list ( custom list or any other list ).

Any suggestions ?

Thanks,

Arie.

Hi,

I want to create a viz chart with 2 y-axes.Can anyone help

This is my code

<object:ObjectPageSection title ="Item"/>

  <content>

  <t:Table id ="itemTable" visibleRowCount = "1" firstVisibleRow = "1">

  <t:toolbar>

  <Toolbar>

  <Title text = "Supplier and Item" />

  <ToolbarSpacer/>

  <Button icon = "sap-icon://add" press = "Add" />

  </Toolbar>

  </t:toolbar>

  <t:Column autoResizable = "true">

  <Label text = "MM#"/>

  <t:template><c:TextField text = "{hello}"/></t:template>

  </t:Column>

  <t:Column autoResizable = "true">

  <Label text = "Description" />

  <t:template><Text text = "{Des}" /></t:template>

  </t:Column>

  <t:Column autoResizable = "true">

  <Label text = "Qty" />

  <t:template><Text text = "{hello}"/></t:template>

  </t:Column>

  <t:Column autoResizable = "true">

  <Label text = "Unit" />

  <t:template><Text text = "{Hello}"/></t:template>

  </t:Column>

  <t:Column autoResizable = "true">

  <Label text = "@ Price" />

  <t:template><Text text = "{price}"/></t:template>

  </t:Column>

  <t:Column autoResizable = "true">

  <Label text = "Net Amount" />

  <t:template><Text text = "{mobile}"/></t:template>

  </t:Column>

  </t:Table>

I'm a begginer ui5 developer.. Please Senior ui5 programmer help me How to make add row function.. I have no idea.

Hello,

I am working on offline sapui5 application. I want to implement the cache handling in sapui5. I want to cache views and controller and other files  before even they have loaded to browser.

I have reviewed these link.

Going offline with SAP UI5

Application Cache Buster - UI Development Toolkit for HTML5 (SAPUI5) - SAP Library

But didn't understand how exactly implement it.

Please be kind , help here.

Thankuuu...

Hi There,

I am doing local development. I have requirement to make offline sapui5 application. I am aware of websql and indexeddb . But cache is not working in my application. <html manifest="manifest.appcache"> when I am adding this line to my index.html it started showing error. Does sapui5 have any cache handling mechanism. I also want to cache view and controller in my view folder.

Thanks

Kewat Vinod.

Hi experts,

I would like to "turn off and on" busyIndicator centrally when the screen is frozen, i.e. when the user can't interact with the app.

What event do I need?

I tried setting busyIndicator values at onBeforeRendering & onAfterRendering of my xmlView but the problem is is that the busyIndicator get frozen as well.

Kind regards,

Filip