SAPUI5 FIORI launchpad customIcon on BusyDialog is not working - mobile

I am tring to add animation to a busyDialog , i can see it well in my development environment but not on FIORI launchpad.
see attached code.
can anyone think why it's not working?
Thanks!
sap.ui.getCore().AppContext._oWaitDialog = new sap.m.BusyDialog({
// text: "Please wait...",
customIcon: "images/LogoLoader_WhiteCircle.gif",
customIconRotationSpeed:0
});
sap.ui.getCore().AppContext._oWaitDialog.open();

you have to include this folder in component.js file, component.js initializes all these folders when app run from Launchpad.return UIComponent.extend("com.yourapp.namspace.Component", {
metadata : {
manifest: "json", /* if you using manifest json file */
includes: ["css/style.css", "images/LogoLoader_WhiteCircle.gif"] /* all folders file that need to be accessed in app, css in case custom css*/
},

I would say you are trying to get UI5 source of an old or local source in index.html
Try
src="https://sapui5.hana.ondemand.com/1.50.6/resources/sap-ui-core.js"

Related

Static Files or Images (PNG) doesn't load using C# NET 6 with React.js

I'm using Visual Studio 2022 net 6.0 for create a react project.
I used the ASP.Net Core with React.JS template
Visual Studo 2022 Template
I'm following this tutorial for create a new react application:
https://youtu.be/uii_TmfCjiM
My problem is the part Minute 22:00 of the video.
Where he add a validation in react for add a static file (And PNG image) to be specific.
In the project folder, there is an folder images, and I want to add one of these to a react component.
The idea is to load the image dynamically, using a call to the SQL DB to create the full path
My only difference between my current work space and the video, is I don't have separate projects for the react app and Visual studio Web API.
I used instead the "ASP.Net Core with React.JS" template I mention before.
I follow the tutorial and I add this code to the program.cs file:
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(Path.Combine(builder.Environment.ContentRootPath, "Images")),
RequestPath = "/Images"
});
And even did a extra config as well and in the setupProxy.js file, I add the images path to the context:
const context = [
"/api/Participants",
"/api/Questions",
"/Images"
];
module.exports = function(app) {
const appProxy = createProxyMiddleware(context, {
target: target,
secure: false,
headers: {
Connection: 'Keep-Alive'
}
});
app.use(appProxy);
};
But I'm still having issues when I try to load the image, this is how it looks like:
Web Application
And in the network tab in the DevTools I have this as an Status:
Dev Tools network tab
Any ideas of what could be the problem.
Or what step I'm missing
Best Regards
All after make my search this is the solution I found.
Using the documentation for the http-proxy-middleware, I found in this link:
https://www.npmjs.com/package/http-proxy-middleware
I found the answer for configure the proxy correctly for allow static files.
the program.cs file in .net 6 was correct and these were necessary for allow access the image folder:
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new
PhysicalFileProvider(
Path.Combine(builder.Environment.ContentRootPath,
"Images")),
RequestPath = "/Images"
});
The lines I had to modify in the proxy was the context values.
Noted I had to add the wild card "**" for allow all strings in the context, because you cannot combine string and wildcards. At the end the setupProxy.js :
const context =["/api/Participants/**","/api/Questions/**","/images/**"];
module.exports = function(app) {
const appProxy = createProxyMiddleware(context,{
target: target,secure: false,headers: {
Connection: 'Keep-Alive'
}
});
app.use(appProxy);
};
As you can notice the wild card "*" for all the string path in the context array. Beside you can use this kind of wild card for allow an especific extension, like .png:
"/images/* *.png"

Is there a way to rename automatically generated routes JSON file in Next.js?

I have a problem, when I click to go to the /analytics page on my site, adblockers block the analytics.json file that's being requested by Next.js as they think it's an analytics tracker (it's not, it's a page listing analytics products).
Is there a way to rename the route files Next.js uses when navigating to server-side rendered pages on the client-side?
I want to either obfuscate the names so they're not machine readable, or have a way to rename them all.
Any help appreciated.
With thanks to #gaston-flores I've managed to get something working.
In my instance /analytics is a dynamic page for a category, so I moved my pages/[category]/index.tsx file to pages/[category]/category.tsx and added the following rewrite:
// next.config.js
module.exports = {
async rewrites() {
return [
{
source: "/:category",
destination: "/:category/category",
},
];
},
};
This now gets the category.json file rather than analytics.json, which passes the adblockers checks and renders as expected.
Note that due to having a dynamic file name in the pages/[category] directory (pages/[category]/[product].tsx), I had to move that to pages/[category]/product/[product].tsx as I was seeing the /analytics page redirected to /analytics/category for some reason without this tweak.

Cant open local html file with WebView on React Native canOpenURL: failed for URL

2020-01-29 20:32:22.470194+0300 Myapp[8905:2391245]
-canOpenURL: failed for URL: "file:///private/var/containers/Bundle/Application/146EA027-7A**/Myapp.app/assets/src/assets/policy.html" - error: "This app is not allowed to query for scheme file"
I am getting this error on xCode console output on real device. On simulator, everything works fine.
Here is my simple full code:
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
const PolicyHTML = require('../assets/policy.html');
export default class PolicyScreen extends React.Component {
render() {
return (
<WebView
source={PolicyHTML}
style={{flex: 1}}
/>
);
}
}
Couldn't find much solution about that online, what am i missing ?
The solution for me was just add originWhitelist={['*']} in the <WebView> component and then iOS would load HTML correctly.
I was having the same issue, i am using webview and wanted to load my local html file in that webview, which works perfectly fine in Android but was not in IOS device. After a lot of research i ended up with the following solution.
I have placed my html file in the following path:
MyReactNativeProjectFolder>app>views>monthly>trip.html
Where monthly is my custom folder that i created myself and has a local html file called trip.html.
And in the view, lets say MyView.js, where i want to call my html file i used the following syntax:
<WebView originWhitelist={['*']} source={require('./monthly/trip.html')} ref={( webView1 ) => this.webView1 = webView1} />
MyView.js is in the follwing path:
MyReactNativeProjectFolder>app>views>MyView.js
If you are not getting any error on simulator then this shall fix your problem, otherwise try changing the html file path as I have mentioned above, that is in the views folder, and try again.
I hope this may resolve the error Unable to open URL file:///private/var/containers/Bundle/Application/146EA027-7A/Myapp.app/assets/src/assets/policy.html
I don't know is this can be considered as proper solution but here how i solved it;
I am not sure but as my thinking Xcode is not allowing some codes on html files, so I thought about that found some websites on google which converts to html files to 'clean html file' and removes the unnecessary codes. After cleaning I replaced the new clean file with old one and it worked.
Hope it helps (Especially in Privacy Policy Files).

AngularJS application with different customizations

I got a "framework" created by us using AngularJS. It allows to build questionnaire system and it has many different parameters that control the behavior of framework.
Using this framework we've created 2 projects: projectA and projectB. The difference between these projects are the settings and assets (css, img, ...)
Both projects are stored on the same branch in git and only config file defines the project customization.
I can't think of the best way how these 2 projects can be easily deployed separately from the same code source using Gulp or something other.
Here are some ideas I got for the moment:
1. Have both settings files and images (e.g. logo_A.png and logo_B.png) in the code and choose appropriate during build using Gulp
2. Create folder customizations that will have 2 subfolders A and B with corresponding settings and assets
3. Create separate repository for each project installation scripts (not the code) and these scripts will do all the work
What is the best way in this case?
Finally, the easieast and most understandible solution was to create additional custom folder.
Assets
In addition to normal application files I got now custom folder with 2 subfolders: A and B each of them containing assets (css, img) that correspond only to concrete project.
In gulp I've used yargs module which allows to pass parameters. After reading project name from input I can looks inside custom folder to see if there are resources interesting for me (I've just added custom folder into the resources paths).
var customPath = './custom/' + app.name;
exports.paths = {
web: {
//Resources
styles: ['./app/**/*.css', './app/**/*.scss', customPath + '/**/*.css', customPath + '/**/*.scss'],
...
And the call to build task now looks like this: gulp build --name A.
Configuration
One more thing was done for configuration file of AngularJS that contains constants. I've used gulp-ng-config plugin which allows to build AngularJS configuration (constants) file on fly. In my flow, first I check if custom configuration file exists inside custom folder I use it, if no I'm using default one from application.
var getAppScripts = function() {
return $.eventStream.merge(
gulp.src(config.paths.web.scripts)
.pipe($.jshint())
.pipe($.jshint.reporter('jshint-stylish'))
//.pipe($.eslint())
.pipe($.eslint.format()),
getAppConfig())
.pipe($.angularFilesort());
};
var getAppConfig = function() {
var configFile = config.paths.web.custom + "/app.config.yaml";
if (fs.existsSync(configFile)) {
return gulp.src(configFile)
.pipe($.ngConfig(config.app.name, {
parser: 'yml',
createModule: false
}));
}
else {
return gulp.src(config.paths.web.config);
}
}

Umbraco 7 Custom Property Editor Error

I'm trying to get a basic custom property editor sorted out for an Umbraco 7.0.1 solution but it looks like I've missed something somewhere because Angular can't recognise the controller function being called. I need another pair of eyes over this.
I've pretty much copied and pasted the example provided on Umbraco's site to start with and was intending to flesh it out afterwards. Here's what I have so far:
package.manifest
{
//you can define multiple editors
propertyEditors: [
{
/*this must be a unique alias*/
alias: "AcuIT.Multidate",
/*the name*/
name: "Multidate Picker",
/*the html file we will load for the editor*/
editor: {
view: "~/App_Plugins/Multidate/multidate.html"
}
}
]
,
//array of files we want to inject into the application on app_start
javascript: [
'~/App_Plugins/Multidate/multidate.controller.js'
]
}
multidate.html
<div ng-controller="AcuIT.MultidateController">
<textarea ng-model="model.value"></textarea>
</div>
multidate.controller.js
angular.module("umbraco")
.controller("AcuIT.MultidateController",
function () {
alert("The controller has landed");
});
Finally, here is the error I'm seeing in the browser console:
Error: Argument 'AcuIT.MultidateController' is not a function, got
undefined
at Error ()
It's probably a name or a path I've missed somewhere but I can't spot it yet. Any pointers appreciated.
Restart app pool and refresh browser to include the files from the manifest

Resources