CSS file injection in page from external component

Hi,

We are trying to inject css files from an component using java class.

Css files are getting loaded and styles are applied on page in preview mode however the same is not working in page edit mode.

we are using following command

context.getPageScopeData().put(RuntimePage.PAGESCOPE_HEAD_INJECTION, str);

Let us know if any there is any command to inject the link at the edit mode.

Thanks,

Adarsh

Find more posts tagged with

Comments

Rick Poulin

Header injection doesn't work in edit mode. The solution I've used is to configure the site to always include a Javascript file, which checks whether the current window.location.pathname starts with "/iw-cc/" (so that it doesn't actually do anything anywhere but edit mode) and then appends the necessary files to the <head>. If yours was conditional on the presence of the component or some other logic, that gets kinda tricky though. Sometimes your users just have to realize that edit mode is an approximation of the runtime, not a 100% copy. That's what preview is for Smiley Happy

Adarsh1

Thanks for your reply.

Is there any other option to make it work in edit mode. Because the page is looking weird in edit mode due to unavailability of css files.

IS there any token available, just like RuntimePage.PAGESCOPE_HEAD_INJECTION

Thanks,

Adarsh

Rick Poulin

What you could do, I suppose, is have the component read the css file and output its content within <style> tags in the component's rendering area itself (when context.isPreview() == true). It's not pretty, and your css would have to use absolute paths for images and such, but it could work.

There are no page tokens that would work in edit mode, because each component is loaded (and reloaded) using AJAX (meaning separate HTTP requests) so it cannot affect the header (or any other portion) of a page that's already rendered.