Position the dialog at the center of the screen in Fiori

user_2094548 0
Viewed 1309

I have a SAPUI5 Fiori application.

I use theme sap_fiori_3 as the base theme.

I customized this theme and only attached a background image to the theme.

The interesting part is when I activate this customized theme (that only has an extra background image in comparison to original sap_fiori_3 theme), the dialog are not centered in my app anymore. The dialog are made with sap.m.dialog class.

I wrote a small snippet of code to center the dialog like following:

onAfterDialogOpen: function(oEvent){
        var oDialog = oEvent.getSource(),
            $Dialog = oDialog.$(),
            oPosition = $Dialog.position(),
            iTop = oPosition.top,
            iLeft = oPosition.left,
            iDialogWidth = $Dialog.width(),
            iDialogHeight = $Dialog.height(),
            iScreenWidth = sap.ui.Device.resize.width,
            iScreenHight = sap.ui.Device.resize.height,
            iNewTop = Math.floor((iScreenHight-iDialogHeight)/2),
            iNewLeft = Math.floor((iScreenWidth-iDialogWidth)/2);
        if(Math.abs(iNewLeft-iLeft) > 10 & Math.abs(iNewTop-iTop) > 10){    
            $Dialog.offset({top: iNewTop, left: iNewLeft});
        }
    },

But it is not a good solution. Why? Because it makes a motion on my screen like following:

enter image description here

Now the question is, how can I center the dialog without Java Script and by settings or some other tricks that when the dialog is opened, it be already centered.

Please note that using onBeforeOpen event is not possible as I need the size and position of the dialog!

sapui5 sap-fiori
1 Answers

I finally found out what is the source of the problem. It seems the Theme Designer of SAP is buggy and some part of the theme code does not transfer to the exported file.

When I use the theme designer to customize the theme it not only made the mentioned error, but also some other strange behavior appear in the deployed applications in the fiori launchpad which use the customized theme. However, we don't have those errors in the development time in the WEB IDE.

Therefore as I only needed to customize the following items:

  1. background image
  2. logo
  3. favicon

I tried to use the standard theme like sap_fiori_3 and work around for setting these properties.

So for the first 2 issues I used the CSS hack:

div.sapUShellFullHeight {
    background-image: url(../images/myBackgroundImage.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
}

a#shell-header-logo > img#shell-header-icon {
    content:url(../images/logo.svg);
}

And for the favicon I used the promise solution. Please notice in the fiori launchpad each time that you switch between the applications fiori will reset the favicon, so I used the JavaScript promise to set it.

// Set the favicon dynamically to get read of blinking 
function waitForElementAppear(selector) {
  return new Promise(function(resolve, reject) {
    var element = document.querySelector(selector);
    if(element) {
      resolve(element);
      return;
    }
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        var nodes = Array.from(mutation.addedNodes);
        for(var node of nodes) {
          if(node.matches && node.matches(selector)) {
            observer.disconnect();
            resolve(node);
            return;
          }
        };
      });
    });
    observer.observe(document.documentElement, { childList: true, subtree: true });
  });
}
//
function waitForElementRemoved(selector) {
  return new Promise((resolve) => {
    var element = document.querySelector(selector);
      if(!element) {
          resolve();
          return;
      }
      var observer = new MutationObserver((mutations, observer) => {
        for (const mutation of mutations) {
          for (const removedNode of mutation.removedNodes) {
            if (removedNode === element) {
              observer.disconnect();
              resolve();
            }
          }
        }
      });
      observer.observe(element.parentElement, { childList: true });
    });
}
//  
function changeFavIcon(selector) {
        waitForElementAppear(selector).then(function(element) {
        element.setAttribute("href", "icon/favicon.ico");
        waitForElementRemoved(selector).then(function() {
            changeFavIcon(selector);
        });
    });
};
changeFavIcon("link[rel='shortcut icon']");

It recursively checks when the favicon is injected then it will set its href and as soon as it is removed, this function will observe the next injection!

As I know somebody may says why not used sapui5 its original solution for setting the favicon, like this:

jQuery.sap.setIcons({
            'phone': '/images/cimt-logo.png',
            'phone@2': '/images/cimt-logo.png',
            'tablet': '/images/cimt-logo.png',
            'tablet@2': '/images/cimt-logo.png',
            'favicon': '/icon/favicon.ico',
            'precomposed': true
        });

I must say it was not working in my case!

user_20945480
Related