Я наконец выяснил, в чем причина проблемы. Кажется, Theme Designer в SAP глючит, и некоторая часть кода темы не переносится в экспортируемый файл.
Когда я использую конструктор тем для настройки темы, она не только делала упомянутую ошибку, но и также некоторые другие странные поведения появляются в развернутых приложениях в панели запуска fiori, которые используют настроенную тему. Однако у нас нет таких ошибок во время разработки в WEB IDE.
Поэтому, поскольку мне нужно было только настроить следующие элементы:
- фоновое изображение
- lo go
- favicon
Я попытался использовать стандартную тему, такую как sap_fiori_3, и попытался обойти эти настройки.
Итак, для первых двух выпусков я использовал хак CSS:
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);
}
А для favicon я использовал решение об обещании. Обратите внимание, что в fiori launchpad каждый раз, когда вы переключаетесь между приложениями, fiori сбрасывает favicon, поэтому я использовал обещание JavaScript, чтобы установить его.
// 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']");
Он рекурсивно проверяет, когда favicon вводится, затем он устанавливает его href, и как только он будет удален, эта функция будет наблюдать следующую инъекцию!
Как я знаю, кто-то может сказать, почему не использовался sapui5 его оригинал решение для установки favicon, например:
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
});
Я должен сказать, что в моем случае это не сработало!