Most package CSS not loading (TiNG)

[rafig]

Hi all,
I am using the latest version of Servoy and am creating a (TiNG) solution for a client based on the ‘cloudSampleSolution’ (on a MacBook Pro with M1 Pro chip)
In fact I have just imported that solution in to my (git) workspace, renamed it and then started creating my own forms etc.
As in the sample. I am making use of the ‘data grid’ to display table data (& then also have drill down detail forms)
I am trying to use the grouping in the table, BUT
when I run it in my browser (Safari Mac), the grouping expand/collapse ‘+’ & ‘-’ icons are missing (& sometimes a grouped set won’t expand, even if it has records in it).
When I inspect the page & look at the list of stylesheets, it only shows a few [ignore the last style & the style in red, that was a style I’d tried to attach to a new module, but it still doesn’t work even if I remove that]
[attachment=2]Screenshot of Safari (15-03-2023, 16-41-36).png[/attachment]
If I open up a fresh Servoy install with the ‘cloudSampleSolution’, it all works and if I inspect, it shows LOADS of stylesheets (as I would expect, with styles for each package etc.)
[attachment=1]Screenshot of Safari (15-03-2023, 17-00-09).png[/attachment]
[attachment=0]Screenshot of Safari (15-03-2023, 17-00-42).png[/attachment]

I have also tried renaming the cloudSampleSolution style files to the same name as my solution (in both normal & _ng2) versions, still no luck.
I also tried ‘Copy the Titanium NGClient Sources’ & did ‘Copy & Clean Build’, didn’t help.

Not sure what to do or what is causing so many key styles from loading

I hope someone might have an idea & can help solve this??

Thanks

Rafi

[rafig]

forgot to mention that there were warnings & errors in inspector as well, with possibly the most important being

[Error] Failed to load resource: the server responded with a status of 404 () (bootstrap.min.css.map, line 0)

[attachment=0]Screenshot of Safari (15-03-2023, 18-35-58).png[/attachment]

(I’m guessing the rest aren’t loading after that error…)

[mboegem]

Hi Rafi,

Developing Titanium myself on Mac M1, but no issues here.
Which is not a solution to your problem, but as prove it should work

[rafig]

mboegem:
Developing Titanium myself on Mac M1, but no issues here.
Which is not a solution to your problem, but as prove it should work

Hi Marc,
I know that it can & does work with my setup, as I have a ‘clean install’ with just the Servoy sample working with all stylesheets loading, but in my other install (which was clean, with Servoy sample installed), but where I have then started working on it myself & renamed the sample, it now doesn’t load all of them (probably starting with the bootstrap one that errors as above)
Thanks

[mboegem]

Did you check that all the packages are either upgraded (or downgraded) to the last one that matches the Servoy version you’re working in?

[rafig]

mboegem:
Did you check that all the packages are either upgraded (or downgraded) to the last one that matches the Servoy version you’re working in?

I did, thanks [still didn’t help]
(I actually downgraded some of them & then upgraded them again to make sure…)

[rafig]

Ok, I am getting more concerned here that this issue is leading to lots of other issues (like my other post :- )
https://forum.servoy.com/viewtopic.php?f=69&t=22918&p=124506#p124506
as now I am having an issue with the svySignature component that I just added to my solution. (a ‘cascade’ of issues, pun intended)
I am able to ‘draw/write’ in the pad that I put on a form, but the ‘onBegin’ & ‘onEnd’ events are not firing (I then imported the svySignature sample in to the clean version and it worked fine…)

I have just downloaded a fresh Servoy installer and will attempt to install & import an export of my solution to see if that fixes anything (& will report back)

(but having thought this, is it possible that these other packages aren’t working correctly because whatever is causing the stylesheets not to load is stopping other stuff??)

[rafig]

So, I just installed a fresh copy of Servoy, launched it, let it create the PG server etc.
[ TL;DR NOT WORKING!]
I then added a database for my solution (& svy_security)
I had exported my solution without the packages, so I then imported that & it offered to import the packages for it.
It did all this and then did a build (build code copied, but too long to stick in this post…)
However, it seemed to miss some packages (only discovered after running for first time)
[attachment=1]Screenshot of Finder (16-03-2023, 21-43-19).png[/attachment]
but it should have been
[attachment=0]Screenshot of Servoy Developer (16-03-2023, 21-46-40).png[/attachment]
so I imported the additional (missing) packages (which actually were all ‘services’, so maybe Servoy need to check why they might not have been picked up on solution import…??)

Anyway, it still didn’t work
Same issues as above and same ‘error’ about Bootstrap css min map file…

So, something, somewhere in my solution or the Servoy ‘build’ for TiNG client is going wrong, but I have no idea what or where.
I hope this might help someone (Johan/Sean??) to maybe work out what might have gone wrong

Please help me, as this is now really frustrating me & wasting a lot of my time

[swingman]

Hi Rafi,

Long shot: Are you able to switch off ‘servoy.ngclient.enableWebResourceOptimizer’ in your servoy-admin?
I had to switch this off to get one of my ng-client project to run.

[rafig]

swingman:
Long shot: Are you able to switch off ‘servoy.ngclient.enableWebResourceOptimizer’ in your servoy-admin?
I had to switch this off to get one of my ng-client project to run.

Hi Christian,
thanks for you suggestion, which I tried, but sadly it didn’t help.
I also then tried turning off the ‘setContentSecurityPolicyHeader’, but also no help.

However, I then turned off the TiNG Client launch in Dev. prefs. (quit), relaunched & then launched NG client and it works better!
The ‘+/-’ icons have appeared when grid is in grouping mode and the svySig events are now firing (although I’ve obviously made an error in my code to save the signatures back in to my image field

foundset.site_manager_sig = utils.base64ToBytes(elements.sig_site_manager.getDataUrl("image/png"));

which is throwing an

ERROR com.servoy.j2db.util.Debug - Illegal base64 character 3a (Form Context: mobilePlotQCR)

but I can play with that…)
However (I like/dislike that word), the grouping grids are throwing another error when I try to expand a grouped row

ERROR org.sablo.BrowserConsole - Error: ag-Grid: cannot get grid to draw rows when it is in the middle of drawing rows. Your code probably called a grid API method while the grid was in the render stage. To overcome this, put the API call into a timeout, eg instead of api.refreshView(), call setTimeout(function(){api.refreshView(),0}). To see what part of your code that caused the refresh check this stacktrace.
http://localhost:8183/aggrid/lib/ag-grid-enterprise.js:12742:66
Error: ag-Grid: cannot get grid to draw rows when it is in the middle of drawing rows. Your code probably called a grid API method while the grid was in the render stage. To overcome this, put the API call into a timeout, eg instead of api.refreshView(), call setTimeout(function(){api.refreshView(),0}). To see what part of your code that caused the refresh check this stacktrace.

This might also explain why when it was running in TiNG some rows would not expand (there would be a ‘flicker’, but nothing would expand, but another row in same grid/foundset would expand/display… (but no error like above was displayed in Servoy debug console).

So… it seems like most of my problems are due to TiNG, which is very frustrating as I was trying to have this new project as my first TiNG one.
And now that I have switched to NG, some of the things don’t look the same as they did in TiNG (but I will play with the size/positions etc. if needed to fix)

There was still an error in the Safari inspector
[attachment=0]Screenshot of Safari (17-03-2023, 12-47-33).png[/attachment]
which is to do with the svySig (& smart doc editor)…

I hope the above might now helps someone at Servoy to work out what might be going wrong???

Thanks

[paronne]

Hi Rafi,

Which version of Servoy are you using ? 2022.12 or the newest 2023.3 ?
There has been an upgrade in the Grid component which caused the style issues you mentioned, as the style of the grouping header, in the sample solution with the latest TiNG version. It needs to be fixed in our Theme for the 2023.3 final.
You can resolve the missing icons by commenting this bit of code in the configGrid function.

	// set up grid icons
	var icons = plugins.ngDataGrid.createIconConfig();
	icons.iconSortAscending = "fa fa-long-arrow-up";
	icons.iconSortDescending = "fa fa-long-arrow-down";
	icons.iconFilter = "fa fa-filter";

	//	icons.iconCheckboxChecked = "fa fa-check-square-o";
	//	icons.iconCheckboxUnchecked = "fa fa-square-o";
	//	icons.iconCheckboxIndeterminate = "fa fa-minus-square-o";

	plugins.ngDataGrid.iconConfig = icons;

.

Note, to use the latest style in TiNG make sure the custom_servoy_theme_properties_ng2.less is importing the latest ng2 theme:

// this file is for over writing the theme properties of the default servoy properties file.
@import 'servoy_theme.less?version=latest_ng2';

The svySignature indeed doesn’t fire the events onBegin/onEnd on TiNG. I have reported it in a case https://support.servoy.com/browse/SVYX-597
You will still be able to get the image as base64 with a different event; You can possibly introduce a “confirm” button to be clicked by the user.

I encourate you to create tickets in our support system when you encounter such issues.

Regards,
Paolo

[rafig]

For anyone following this saga,

1. Paolo suggestions above helped fixed my grid issue with icons
2. changing my grouped column from a UUID with a text value list to a related value of text field fixed issue of rows not displaying (& probably the ag-grid not ready stuff too)
3. I still have the error in inspector with the bootstrap map file & missing loads of stylesheets, but that doesn’t seem to be stopping things from working thankfully now
4. I came up with the correct code to load & save signature & as a workaround for TiNG bug of events not firing, have added a ‘button’ to do save (but would appreciate Servoy fixing this [& testing better before releasing…])
   Paolo has been very helpful via some direct contact, so kudos for that

[rafig]

Further to my ‘issues’ with the ‘missing’ stylesheets, it appears to be ‘user error’
The fresh copy of Servoy that I had installed did not have the settings set to launch TiNG client by default, so when I launched clean sample solution, it was using NG client and this showed all stylesheets!
It seems that TiNG does something funky with stylesheets & seems to combine them and that was correctly loaded.

Paolo now has a copy of my solution with the issues I had & is looking in to them

[mboegem]

Hi Rafi,

hahaha, I love settings

I ran into a similar issue lately where some developers re-installed Servoy Developer, but did not have the NG2 checkbos enabled after the reinstall.
Result: making changes to css which were not picked up by my install (with checkbox enabled), this really made things look funny at some point and It took me a while to understand why suddenly my install seemed to be broken (which wasn’t the case after all)

Anyway, first job after finding this, was to block or warn developers from launching the NG-client where they shouldn’t.
Came up with this bit of code which is called from the onSolutionOpen method:

function checkDeveloperUsingTiNGClient() {
	if(application.isInDeveloper() && !scopes.svySystem.isTINGClient()) {
		plugins.dialogs.showErrorDialog('NG Client Error', "You are NOT launching Titanium NGClient.

Please check your <b>Eclipse preferences</b> > tab: <b>Servoy</b> and re-launch");
		application.exit();
	}
}

Hope this helps.

Note: the svySystem scope is part of the Servoy util module which can be installed through SPM

[rafig]

mboegem:
Hope this helps.

Hi Marc,
that is great! Thanks!
Added to my solution so I can see when I am being dumb

[jcompagner]

some remarks:

if you see download errors for “.map” files, just ignore that that is purely debugging and Developer Tools that tries to do this.

servoy.ngclient.enableWebResourceOptimizer doesn’t do anything for TiNG (angular does that by default)

CSS/Javascript of all the components are fully pulled into angular in a few files (they are grouped by angular, including all the css)
(map files makes this in de developer tools map again to the original files so you can kind of see the real source in the developer tools of the browser)

[rafig]

jcompagner:
some remarks:
if you see download errors for “.map” files, just ignore that that is purely debugging and Developer Tools that tries to do this.
servoy.ngclient.enableWebResourceOptimizer doesn’t do anything for TiNG (angular does that by default)
CSS/Javascript of all the components are fully pulled into angular in a few files (they are grouped by angular, including all the css)
(map files makes this in de developer tools map again to the original files so you can kind of see the real source in the developer tools of the browser)

Thanks Johan