I have a module that imports a crypto (crypto-js) library at the module level (3 dot menu > Scripts and style > Add new). When testing the module alone it works perfectly fine. When I include this module into an app it no longer works.
It doesn't reference any external info and all the data within the module is accessible. I know it has to do with the library because I'm using the crypto library to hash values and I can display the values I'm hashing just fine, but once I wrap it in the hash function it no longer work in the app (again, it works in the module though).
Is there some security setting preventing a module preloaded library from working in an app? When I add the library at the app level it doesn't work either though. Does it need to be added at the organization level? What else could be the issue here?
So it turns out that this is a known thing that we're tracking right now. Unfortunately custom CSS or imported JS imported from a module may sometimes not be carried over to the parent.
Your best bet would be to add it to the organization or app level.
Thanks for the response @Pawan. I've tried that as well but unfortunately no luck there either. I wonder if there's also the opposite issue where the module doesn't have access to the app level imported library.
When you mention it doesn't work, what does that mean really? Are you seeing any particular error messages? What functionality isn't working that you'd like to get going there?
I have a function that hashes a value and returns it. When I check the value in the module (by sending to an Output), it returns the hash as expected. When I check the Output in the app it returns null because the crypto library used to hash is not available. If I edit the single line that's using the hash function from the crypto library to not hash, then I see the Output value in the app.
I went on ahead and did some of the leg work on my end and was able to get that library loaded into a module and the output of it be displayed in an app of mine. See the following screenshot of it working well:
I wanted to ask how you're importing this library in the first place? Also, how're you setting your output? Can you share a screenshot of where you loaded this library as well as a screenshot of you setting up your module's output?
However, if I keep everything the same and just don't use the library (don't use the hash() function) then the value gets passed through to the output in the app:
So from this it's pretty clear that it's an issue with the hash() function, and since it works in the module and not the app it's clear the library is getting blocked for whatever reason.
As suggested, I've tried adding the library at both the app and organizational level and neither worked, it was the same results with both.
Well that's embarrassing. You made me realize I also added this under Scripts and Styles > Javascript:
function hash(msg) {
return String(CryptoJS.MD5(msg));
}
It now works! I would still argue that the Javascript snippets entered there should be carried over, but at least I'm able to move forward now. Thanks for the persistence @Pawan!
Module Custom CSS JS are not getting carried to the app where module is getting embedded.
I.e. custom css to extend width of dropdown for navigation in module, renders correctly.
Previewing said module works correctly.
Embedding module in a different app, width is not carried through.
This is a very odd implementation choice. @stefancvrkotic, I had to drop my module css styles in the global css space. "Settings" -> "Advanced" -> "Preloaded CSS"
One of the annoying details you'll have to content with is that the class names for elements in a module will not be the same when you're editing the module directly, compared to when they are imported into an app. When imported, the imported module name is prepended to the class name of the components contained within.
I have to have a global css style that looks like this,
#primaryNavigation1\:\:primaryNavigation1--0_0--trigger, // this style applies to modules imported into an app
#primaryNavigation1--0_0--trigger { // this style applies when editing the module directly
...
}
What's unfortunate about this implementation is that it requires imported modules have a consistent name across all importing apps, e.g. primaryNavigation1.
Another unfortunate detail is that the class names in edit and preview are not guaranteed to be identical . I ran into an issue where I was trying to style the primary nav icons to use custom graphics, I attempted to use an attribute selector [aria-label='foo'] to correctly match the item with the icon, but the aria-label's are not available in preview mode.
It seems like a reasonable ask to not pollute the global css with module specific styles, and those styles will be included into apps so the user isn't concerned with the importing app's configuration.
I moved your post here to have one topic keeping track of feedback, also to provide updates to everyone in one place when we get any news from our devs.
I'm glad you were able to get that going!
. I ran into an issue where I was trying to style the primary nav icons to use custom graphics, I attempted to use an attribute selector 